@maggioli-design-system/magma 2.0.0-alpha.1 → 2.0.0-beta.2

package/dist/components/mds-header.js

@@ -1,256 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$6 } from './mds-button2.js';
-import { d as defineCustomElement$5 } from './mds-icon2.js';
-import { d as defineCustomElement$4 } from './mds-modal2.js';
-import { d as defineCustomElement$3 } from './mds-spinner2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsHeaderCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-backdrop-show:true;--mds-header-backdrop-blur-strength:2px}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-modal:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-header-backdrop-show{syntax:\"true|false\";inherits:false;initial-value:true}@property --mds-header-backdrop-blur-strength{syntax:\"<length>\";inherits:false;initial-value:2px}:host{--mds-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-hidden-bar-translate-inline:translateY(-150%);--mds-header-hidden-bar-translate-stripe:translateY(-110%);--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-blur-strength:2px;--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-backdrop-show:true;--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-backdrop-background-image:linear-gradient(0deg,#0000,#00000026);--private-mask-opacity:1;color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-header-icon-color,var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244))));position:relative;z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}.modal{--mds-modal-close-icon-color:var(--mds-header-modal-icon-color,rgb(var(--tone-neutral,0 0 0)));z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin,calc(var(--spacing,.0025rem)*600));border-radius:var(--radius-lg,16px);margin-bottom:var(--mds-header-inline-margin-current);margin-top:var(--mds-header-inline-margin-current);max-width:var(--breakpoint-wide,1280px);width:calc(100% - var(--mds-header-inline-margin-current)*2)}:host([menu=none]) .menu{display:none}:host([visibility=hidden][appearance=stripe]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-stripe);transform:var(--mds-header-hidden-bar-translate-stripe)}:host([visibility=hidden][appearance=inline]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-inline);transform:var(--mds-header-hidden-bar-translate-inline)}.backdrop{align-items:center;-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));background-image:var(--mds-header-backdrop-background-image);content:\"\";display:flex;height:var(--mds-header-backdrop-height,calc(var(--spacing,.0025rem)*1600));inset:0;opacity:1;position:fixed;transform:translate(0);transition-duration:.2s;transition-property:opacity,transform;width:100%}.backdrop-blur-item{--private-gradient-position:calc(100% - (sibling-count() - sibling-index())*5%);display:none}.backdrop-blur-item:first-child{--private-gradient-position:100%}.backdrop-blur-item:nth-child(2){--private-gradient-position:95%}.backdrop-blur-item:nth-child(3){--private-gradient-position:90%}.backdrop-blur-item:nth-child(4){--private-gradient-position:85%}.backdrop-blur-item:nth-child(5){--private-gradient-position:80%}.backdrop-blur-item:nth-child(6){--private-gradient-position:75%}.backdrop-blur-item:nth-child(7){--private-gradient-position:70%}.backdrop-blur-item:nth-child(8){--private-gradient-position:65%}.backdrop-blur-item:nth-child(9){--private-gradient-position:60%}.backdrop-blur-item:nth-child(10){--private-gradient-position:55%}.backdrop-blur-item:nth-child(11){--private-gradient-position:50%}@supports ((-webkit-mask-image:linear-gradient(rgb(0 0 0/1),transparent)) or (mask-image:linear-gradient(rgb(0 0 0/1),transparent))){.backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background-image:none}.backdrop-blur-item{-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));display:flex;inset:0;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));pointer-events:none;position:absolute}}:host([appearance=inline]) .backdrop{transform:translate(0)}:host([appearance=stripe]) .backdrop,:host([visibility=hidden]) .backdrop{--mds-header-backdrop-blur-strength:0px;transform:translateY(-100%)}@container style(--mds-header-backdrop-show:false){:host-context(:not(.safari)) .backdrop{display:none}}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-consumption-high) .backdrop{--mds-header-backdrop-background-image:none}:host-context(:root.pref-consumption-medium) .backdrop{--mds-header-backdrop-blur-strength:1px}:host-context(:root.pref-consumption-low) .backdrop{--mds-header-backdrop-blur-strength:0px;display:none}@media (max-width:767px){:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin-mobile,calc(var(--spacing,.0025rem)*400))}}@media not all and (min-width:768px){:host([menu=desktop]) .menu{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu{display:none}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}}";
-
-const MdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class MdsHeader extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.closedEvent = createEvent(this, "mdsHeaderClose", 7);
-        this.visibleEvent = createEvent(this, "mdsHeaderVisibilityChange", 7);
-        this.relativeTresholdDown = 0;
-        this.relativePosition = 0;
-        this.relativeThresholdUp = 0;
-        this.sanitizedAppearance = ['stripe'];
-        this.appearanceThreshold = 300;
-        /**
-         * Sets the appearance of the header bar element when loaded,
-         * it can be changed depending on how `appearance-set` attribute is set
-         */
-        this.appearance = 'stripe';
-        /**
-         * Sets if the backdrop is shown when the mds-header-bar attribute appearace is set to `inline`
-         */
-        this.backdrop = true;
-        /**
-         * Sets the visibility type of the hamburger menu of mds-header-bar
-         */
-        this.menu = 'mobile';
-        /**
-         * Sets the visibility type of the navigation menu of mds-header-bar
-         */
-        this.nav = 'desktop';
-        /**
-         * Sets the threshold margin to trigger hide or show status of the `mds-header-bar` when the page is scrolled
-         */
-        this.threshold = 1;
-        /**
-         * Sets the visibility type of the navigation menu of mds-header-bar
-         */
-        this.visibility = 'visible';
-        this.mobileMenu = () => {
-            return this.host.querySelector(':scope > [slot="menu"]');
-        };
-        this.close = () => {
-            this.isOpened = false;
-            this.closedEvent.emit({ bar: this.headerBar });
-            this.headerBar.setOpened(false);
-        };
-        this.handleVisibility = () => {
-            if (!this.autoHide) {
-                return;
-            }
-            // reset var if the page is scrolled to top
-            if (window.scrollY < this.autoHide) {
-                this.visibility = 'visible';
-                this.relativeThresholdUp = 0;
-                this.relativeTresholdDown = 0;
-                this.relativePosition = 0;
-                return;
-            }
-            if (this.relativeTresholdDown - window.scrollY <= 0) {
-                this.visibility = 'hidden';
-                this.relativePosition = this.relativeTresholdDown;
-            }
-            if (this.relativeThresholdUp - window.scrollY >= this.threshold) {
-                this.visibility = 'visible';
-                this.relativeThresholdUp = window.scrollY;
-                this.relativePosition = this.relativeThresholdUp;
-            }
-            // set hidden for the first scroll from top
-            if (this.relativePosition < this.autoHide && this.autoHide - window.scrollY <= 0) {
-                this.visibility = 'hidden';
-                this.relativePosition = this.autoHide;
-            }
-            // update respective threshold if page is scrolled up or down
-            if (window.scrollY > this.relativeThresholdUp) {
-                this.relativeThresholdUp = window.scrollY;
-            }
-            else {
-                this.relativeTresholdDown = window.scrollY + this.threshold;
-            }
-        };
-        this.sanitizeAppearance = () => {
-            if (!this.appearanceSet) {
-                return [this.appearance];
-            }
-            const regex = /\b(\w+)\b/g;
-            const matches = this.appearanceSet.match(regex);
-            if (matches) {
-                return matches;
-            }
-            return [this.appearance];
-        };
-        this.handleAppearance = () => {
-            var _a, _b;
-            if (window.scrollY >= this.appearanceThreshold) {
-                this.appearance = (_a = this.sanitizedAppearance[1]) !== null && _a !== void 0 ? _a : this.appearance;
-                return;
-            }
-            this.appearance = (_b = this.sanitizedAppearance[0]) !== null && _b !== void 0 ? _b : this.appearance;
-        };
-        this.handleScroll = () => {
-            if (typeof window === 'undefined')
-                return;
-            if (this.autoHide) {
-                this.handleVisibility();
-            }
-            if (this.sanitizedAppearance.length > 1) {
-                this.handleAppearance();
-            }
-        };
-        this.setAppearanceSetData = () => {
-            this.sanitizedAppearance = this.sanitizeAppearance();
-            if (this.sanitizedAppearance[2]) {
-                this.appearanceThreshold = this.sanitizedAppearance[2];
-            }
-            this.relativeTresholdDown = this.threshold;
-        };
-        this.initScrollListener = () => {
-            if (!window) {
-                return;
-            }
-            this.setAppearanceSetData();
-            window.addEventListener('scroll', this.handleScroll);
-        };
-        this.defineHeaderBar = () => {
-            this.headerBar = this.host.querySelector('mds-header-bar');
-        };
-    }
-    async setOpened(isOpened = true) {
-        this.isOpened = isOpened;
-    }
-    disconnectedCallback() {
-        if (!window) {
-            return;
-        }
-        window.removeEventListener('scroll', this.handleScroll);
-    }
-    componentWillLoad() {
-        this.hasMenu = this.mobileMenu() !== null;
-        if (this.hasMenu) {
-            this.onMenuChangedHandler(this.menu);
-            return;
-        }
-        this.onMenuChangedHandler('none');
-    }
-    componentDidLoad() {
-        this.defineHeaderBar();
-        this.onMenuChangedHandler(this.menu);
-        this.onNavChangedHandler(this.nav);
-        this.initScrollListener();
-    }
-    onMenuChangedHandler(newValue, oldValue) {
-        if (newValue === oldValue) {
-            return;
-        }
-        if (this.headerBar) {
-            this.headerBar.menu = newValue;
-        }
-    }
-    onNavChangedHandler(newValue, oldValue) {
-        if (newValue === oldValue) {
-            return;
-        }
-        if (this.headerBar) {
-            this.headerBar.nav = newValue;
-        }
-    }
-    onAppearanceSetChangedHandler() {
-        this.setAppearanceSetData();
-    }
-    handleVisibilityChange(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            this.visibleEvent.emit({ visibility: newValue });
-        }
-    }
-    render() {
-        return (h(Host, { key: 'fd2460a71688aa65ee0565d4ecf6c214ca34154e' }, this.backdrop && (h("div", { key: 'de34fe54d6aad43628585406a5c2ab15e251ccd3', class: "backdrop" }, h("div", { key: '7d41e6853fa34d662c00694a3e2ba5d6df72da9c', class: "backdrop-blur-item" }), h("div", { key: 'b0d219348da5cfa1710b7b3ed5b2df9dfed06b03', class: "backdrop-blur-item" }), h("div", { key: '47ccf8c2aab974a3d3462b3b5eccab5c8099f4c5', class: "backdrop-blur-item" }), h("div", { key: 'b269780c2cc42aee6a33cede54c4c804e72cf0d5', class: "backdrop-blur-item" }), h("div", { key: 'eb1c837b9d6bef56c8573387a4e8f12eccab754f', class: "backdrop-blur-item" }), h("div", { key: '43debc4aa20f167259cb0e295abae91738f570ae', class: "backdrop-blur-item" }), h("div", { key: 'aed859d7f13aeb1b39405809eebe298b0676b227', class: "backdrop-blur-item" }), h("div", { key: '132a2828e89e260ac0b2235cc936ee58f730c48a', class: "backdrop-blur-item" }), h("div", { key: '10f063695d84dc6e214983f1f4ebe013aca84902', class: "backdrop-blur-item" }), h("div", { key: '93aff2c4d086ffca321495b14aed16f4ff7f2b5c', class: "backdrop-blur-item" }))), h("slot", { key: '417db97ad635f351dfb70b941a64fa3f8ad92064' }), this.hasMenu && (h("div", { key: 'df98336788b29148338e6b29d5b724fe6feff822', class: "menu", part: "menu" }, h("mds-modal", { key: 'b08071d663840e750be9e11c78519a4c56183611', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: '1487f523e00deb9eb1c754eeb9c03fb4be22c5c0', name: "menu" }))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "menu": ["onMenuChangedHandler"],
-        "nav": ["onNavChangedHandler"],
-        "appearanceSet": ["onAppearanceSetChangedHandler"],
-        "visibility": ["handleVisibilityChange"]
-    }; }
-    static get style() { return mdsHeaderCss; }
-}, [257, "mds-header", {
-        "appearance": [1537],
-        "appearanceSet": [513, "appearance-set"],
-        "autoHide": [514, "auto-hide"],
-        "backdrop": [516],
-        "menu": [513],
-        "nav": [513],
-        "threshold": [514],
-        "visibility": [1537],
-        "hasMenu": [32],
-        "isOpened": [32],
-        "setOpened": [64]
-    }, undefined, {
-        "menu": ["onMenuChangedHandler"],
-        "nav": ["onNavChangedHandler"],
-        "appearanceSet": ["onAppearanceSetChangedHandler"],
-        "visibility": ["handleVisibilityChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-header", "mds-button", "mds-icon", "mds-modal", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsHeader$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-modal":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsHeader = MdsHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsHeader, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as i,Host as r,transformTag as s}from"@stencil/core/internal/client";import{d}from"./mds-button2.js";import{d as n}from"./mds-icon2.js";import{d as o}from"./mds-modal2.js";import{d as h}from"./mds-spinner2.js";import{d as c}from"./mds-text2.js";const l=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.closedEvent=t(this,"mdsHeaderClose",7),this.visibleEvent=t(this,"mdsHeaderVisibilityChange",7),this.relativeTresholdDown=0,this.relativePosition=0,this.relativeThresholdUp=0,this.sanitizedAppearance=["stripe"],this.appearanceThreshold=300,this.appearance="stripe",this.backdrop=!0,this.menu="mobile",this.nav="desktop",this.threshold=1,this.visibility="visible",this.mobileMenu=()=>this.host.querySelector(':scope > [slot="menu"]'),this.close=()=>{this.isOpened=!1,this.closedEvent.emit({bar:this.headerBar}),this.headerBar.setOpened(!1)},this.handleVisibility=()=>{if(void 0!==this.autoHide&&0!==this.autoHide&&!Number.isNaN(this.autoHide)){if(window.scrollY<this.autoHide)return this.visibility="visible",this.relativeThresholdUp=0,this.relativeTresholdDown=0,void(this.relativePosition=0);this.relativeTresholdDown-window.scrollY<=0&&(this.visibility="hidden",this.relativePosition=this.relativeTresholdDown),this.relativeThresholdUp-window.scrollY>=this.threshold&&(this.visibility="visible",this.relativeThresholdUp=window.scrollY,this.relativePosition=this.relativeThresholdUp),this.relativePosition<this.autoHide&&this.autoHide-window.scrollY<=0&&(this.visibility="hidden",this.relativePosition=this.autoHide),window.scrollY>this.relativeThresholdUp?this.relativeThresholdUp=window.scrollY:this.relativeTresholdDown=window.scrollY+this.threshold}},this.sanitizeAppearance=()=>{if(void 0===this.appearanceSet||""===this.appearanceSet)return[this.appearance];return this.appearanceSet.match(/\b(\w+)\b/g)||[this.appearance]},this.handleAppearance=()=>{var e,a;this.appearance=window.scrollY>=this.appearanceThreshold?null!==(e=this.sanitizedAppearance[1])&&void 0!==e?e:this.appearance:null!==(a=this.sanitizedAppearance[0])&&void 0!==a?a:this.appearance},this.handleScroll=()=>{"undefined"!=typeof window&&(void 0===this.autoHide||0===this.autoHide||Number.isNaN(this.autoHide)||this.handleVisibility(),this.sanitizedAppearance.length>1&&this.handleAppearance())},this.setAppearanceSetData=()=>{this.sanitizedAppearance=this.sanitizeAppearance(),void 0===this.sanitizedAppearance[2]||0===this.sanitizedAppearance[2]||Number.isNaN(this.sanitizedAppearance[2])||(this.appearanceThreshold=this.sanitizedAppearance[2]),this.relativeTresholdDown=this.threshold},this.initScrollListener=()=>{"undefined"!=typeof window&&(this.setAppearanceSetData(),window.addEventListener("scroll",this.handleScroll))},this.defineHeaderBar=()=>{this.headerBar=this.host.querySelector("mds-header-bar")}}async setOpened(e=!0){this.isOpened=e}disconnectedCallback(){"undefined"!=typeof window&&window.removeEventListener("scroll",this.handleScroll)}componentWillLoad(){this.hasMenu=null!==this.mobileMenu(),this.onMenuChangedHandler(this.hasMenu?this.menu:"none")}componentDidLoad(){this.defineHeaderBar(),this.onMenuChangedHandler(this.menu),this.onNavChangedHandler(this.nav),this.initScrollListener()}onMenuChangedHandler(e,a){e!==a&&null!=this.headerBar&&(this.headerBar.menu=e)}onNavChangedHandler(e,a){e!==a&&null!=this.headerBar&&(this.headerBar.nav=e)}onAppearanceSetChangedHandler(){this.setAppearanceSetData()}handleVisibilityChange(e,a){e!==a&&this.visibleEvent.emit({visibility:e})}render(){return i(r,{key:"5128bc6c966e7953efd8e10ccc5bc50f17d75acd"},this.backdrop&&i("div",{key:"9e56e7cf2a7a35b64e420379075a4927a261a0fe",class:"backdrop"},i("div",{key:"0a6ccef3d03db7c08e3b73435413ca504833b12b",class:"backdrop-blur-item"}),i("div",{key:"22c1a00aed263989d6e89a0daad5e0840fc2260d",class:"backdrop-blur-item"}),i("div",{key:"4aba0c1c47f43f9a86e87884b8561c29b5564dc2",class:"backdrop-blur-item"}),i("div",{key:"d43b86f9910d0d5542b9ed7aa49b5f251ad2a466",class:"backdrop-blur-item"}),i("div",{key:"e1e77b70063e61209c839930017df200b91b6cae",class:"backdrop-blur-item"}),i("div",{key:"fa60a8e58b29cc60fc95c89ecd47db0905fd9aac",class:"backdrop-blur-item"}),i("div",{key:"018ca6f46a7155c50cd3146ad703b941773b9214",class:"backdrop-blur-item"}),i("div",{key:"b8eb26d49714c5e9d0df3486eafcea46a36a792e",class:"backdrop-blur-item"}),i("div",{key:"b68ffd1fea3ecaa1489324e1807e0b8192181362",class:"backdrop-blur-item"}),i("div",{key:"bf1a1fe44c9a8b3a90d0c8b325c2001c0af2cbb0",class:"backdrop-blur-item"})),i("slot",{key:"b457cbe705c13f1d4bd48b562417bdb8cc332ae5"}),this.hasMenu&&i("div",{key:"1cd40f7e1c4dd6a3c26a6277a7ac3256f2a39b2b",class:"menu",part:"menu"},i("mds-modal",{key:"1568c0f8f76b2fa48bffa6b2b30fcd0caad6e845",class:"modal",opened:this.isOpened,onMdsModalClose:this.close,position:"right"},i("slot",{key:"b571fcaeef6763648a17ba8344522961b4f68994",name:"menu"}))))}get host(){return this}static get watchers(){return{menu:[{onMenuChangedHandler:0}],nav:[{onNavChangedHandler:0}],appearanceSet:[{onAppearanceSetChangedHandler:0}],visibility:[{handleVisibilityChange:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-backdrop-show:true;--mds-header-backdrop-blur-strength:2px}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-modal:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-header-backdrop-show{syntax:"true|false";inherits:false;initial-value:true}@property --mds-header-backdrop-blur-strength{syntax:"<length>";inherits:false;initial-value:2px}:host{--mds-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-hidden-bar-translate-inline:translateY(-150%);--mds-header-hidden-bar-translate-stripe:translateY(-110%);--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-blur-strength:2px;--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-backdrop-show:true;--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-backdrop-background-image:linear-gradient(0deg,#0000,#00000026);--private-mask-opacity:1;color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-header-icon-color,var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244))));position:relative;z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}.modal{--mds-modal-close-icon-color:var(--mds-header-modal-icon-color,rgb(var(--tone-neutral,0 0 0)));z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin,calc(var(--spacing,.0025rem)*600));border-radius:var(--radius-lg,16px);margin-bottom:var(--mds-header-inline-margin-current);margin-top:var(--mds-header-inline-margin-current);max-width:var(--breakpoint-wide,1280px);width:calc(100% - var(--mds-header-inline-margin-current)*2)}:host([menu=none]) .menu{display:none}:host([visibility=hidden][appearance=stripe]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-stripe);transform:var(--mds-header-hidden-bar-translate-stripe)}:host([visibility=hidden][appearance=inline]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-inline);transform:var(--mds-header-hidden-bar-translate-inline)}.backdrop{align-items:center;-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));background-image:var(--mds-header-backdrop-background-image);content:"";display:flex;height:var(--mds-header-backdrop-height,calc(var(--spacing,.0025rem)*1600));inset:0;opacity:1;position:fixed;transform:translate(0);transition-duration:.2s;transition-property:opacity,transform;width:100%}.backdrop-blur-item{--private-gradient-position:calc(100% - (sibling-count() - sibling-index())*5%);display:none}.backdrop-blur-item:first-child{--private-gradient-position:100%}.backdrop-blur-item:nth-child(2){--private-gradient-position:95%}.backdrop-blur-item:nth-child(3){--private-gradient-position:90%}.backdrop-blur-item:nth-child(4){--private-gradient-position:85%}.backdrop-blur-item:nth-child(5){--private-gradient-position:80%}.backdrop-blur-item:nth-child(6){--private-gradient-position:75%}.backdrop-blur-item:nth-child(7){--private-gradient-position:70%}.backdrop-blur-item:nth-child(8){--private-gradient-position:65%}.backdrop-blur-item:nth-child(9){--private-gradient-position:60%}.backdrop-blur-item:nth-child(10){--private-gradient-position:55%}.backdrop-blur-item:nth-child(11){--private-gradient-position:50%}@supports ((-webkit-mask-image:linear-gradient(rgb(0 0 0/1),transparent)) or (mask-image:linear-gradient(rgb(0 0 0/1),transparent))){.backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background-image:none}.backdrop-blur-item{-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));display:flex;inset:0;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));pointer-events:none;position:absolute}}:host([appearance=inline]) .backdrop{transform:translate(0)}:host([appearance=stripe]) .backdrop,:host([visibility=hidden]) .backdrop{--mds-header-backdrop-blur-strength:0px;transform:translateY(-100%)}@container style(--mds-header-backdrop-show:false){:host-context(:not(.safari)) .backdrop{display:none}}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-consumption-high) .backdrop{--mds-header-backdrop-background-image:none}:host-context(:root.pref-consumption-medium) .backdrop{--mds-header-backdrop-blur-strength:1px}:host-context(:root.pref-consumption-low) .backdrop{--mds-header-backdrop-blur-strength:0px;display:none}@media (max-width:767px){:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin-mobile,calc(var(--spacing,.0025rem)*400))}}@media not all and (min-width:768px){:host([menu=desktop]) .menu{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu{display:none}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}}'}},[257,"mds-header",{appearance:[1537],appearanceSet:[513,"appearance-set"],autoHide:[514,"auto-hide"],backdrop:[516],menu:[513],nav:[513],threshold:[514],visibility:[1537],hasMenu:[32],isOpened:[32],setOpened:[64]},void 0,{menu:[{onMenuChangedHandler:0}],nav:[{onNavChangedHandler:0}],appearanceSet:[{onAppearanceSetChangedHandler:0}],visibility:[{handleVisibilityChange:0}]}]),m=l,b=function(){"undefined"!=typeof customElements&&["mds-header","mds-button","mds-icon","mds-modal","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-header":customElements.get(s(e))||customElements.define(s(e),l);break;case"mds-button":customElements.get(s(e))||d();break;case"mds-icon":customElements.get(s(e))||n();break;case"mds-modal":customElements.get(s(e))||o();break;case"mds-spinner":customElements.get(s(e))||h();break;case"mds-text":customElements.get(s(e))||c()}}))};export{m as MdsHeader,b as defineCustomElement}

package/dist/components/mds-help.js

@@ -1,6 +1 @@
-import { M as MdsHelp$1, d as defineCustomElement$1 } from './mds-help2.js';
-
-const MdsHelp = MdsHelp$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsHelp, defineCustomElement };
+import{M as s,d as o}from"./mds-help2.js";const m=s,p=o;export{m as MdsHelp,p as defineCustomElement}

package/dist/components/mds-help2.js

@@ -1,65 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './mds-icon2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-import { d as defineCustomElement$1 } from './mds-tooltip2.js';
-
-var miOutlineHelp = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"/></svg>`;
-
-const mdsHelpCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-help-tooltip-max-width:300px;--mds-help-tooltip-min-width:200px;--mds-help-tooltip-delay:.25s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-help-tooltip-max-width{syntax:\"<length>\";inherits:false;initial-value:300px}@property --mds-help-tooltip-min-width{syntax:\"<length>\";inherits:false;initial-value:200px}@property --mds-help-tooltip-delay{syntax:\"<time>\";inherits:false;initial-value:.25s}:host{--mds-help-tooltip-width:fit-content;--mds-help-tooltip-max-width:300px;--mds-help-tooltip-min-width:200px;--mds-help-tooltip-delay:.25s;color:rgb(var(--tone-neutral-03,233 233 233));cursor:help;display:inline-flex;fill:currentColor;height:calc(var(--spacing,.0025rem)*400);justify-content:flex-start;margin-left:calc(var(--spacing,.0025rem)*100);overflow:visible;position:relative;width:calc(var(--spacing,.0025rem)*400)}i{display:flex}i svg{aspect-ratio:1;aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}mds-tooltip{--mds-tooltip-delay:var(--mds-help-tooltip-delay,.25s);max-width:var(--mds-help-tooltip-max-width,300px);min-width:var(--mds-help-tooltip-min-width,200px)}mds-tooltip::part(text){max-width:var(--mds-help-tooltip-max-width,300px);min-width:var(--mds-help-tooltip-width);width:var(--mds-help-tooltip-width)}i,mds-icon{fill:inherit;height:inherit;width:inherit}";
-
-const MdsHelp = /*@__PURE__*/ proxyCustomElement(class MdsHelp extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * If set, the component will be placed automatically near it's caller.
-         */
-        this.autoPlacement = true;
-        /**
-         * Specifies where the component should be placed relative to the caller.
-         */
-        this.placement = 'top';
-    }
-    render() {
-        var _a;
-        return (h(Host, { key: '7d7673ac454daa8673fcf30d1f7cd62a096efe67' }, h("mds-icon", { key: '19a08bed3129f9bb2a42ffa5308de9d5d6ef2cd8', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: '1b7aa24dd616edd66c9745d7d0ca550608225ecd', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '8a9f25d575c2b036f8471b4f44911d27fe2627b0' }))));
-    }
-    static get style() { return mdsHelpCss; }
-}, [257, "mds-help", {
-        "icon": [1],
-        "autoPlacement": [516, "auto-placement"],
-        "placement": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-help", "mds-icon", "mds-text", "mds-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-help":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsHelp);
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mds-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { MdsHelp as M, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./mds-icon2.js";import{d as n}from"./mds-text2.js";import{d as r}from"./mds-tooltip2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.autoPlacement=!0,this.placement="top"}render(){var e;return i(s,{key:"a72b1f2f02ef754022738d9ae5d8f3351541eb06"},i("mds-icon",{key:"c0f180c4abe2c5d3c4e512e14f9761aa36906f4f",class:"icon",name:null!==(e=this.icon)&&void 0!==e?e:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"/></svg>',part:"icon"}),i("mds-tooltip",{key:"c08d15295a145809f35aab2d7f198aa71476ee91",placement:this.placement,autoPlacement:this.autoPlacement,strategy:"absolute",target:".icon"},i("slot",{key:"d3dd10afd797f2079896589da73615fb97dc3d6e"})))}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-help-tooltip-max-width:300px;--mds-help-tooltip-min-width:200px;--mds-help-tooltip-delay:.25s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-help-tooltip-max-width{syntax:"<length>";inherits:false;initial-value:300px}@property --mds-help-tooltip-min-width{syntax:"<length>";inherits:false;initial-value:200px}@property --mds-help-tooltip-delay{syntax:"<time>";inherits:false;initial-value:.25s}:host{--mds-help-tooltip-width:fit-content;--mds-help-tooltip-max-width:300px;--mds-help-tooltip-min-width:200px;--mds-help-tooltip-delay:.25s;color:rgb(var(--tone-neutral-03,233 233 233));cursor:help;display:inline-flex;fill:currentColor;height:calc(var(--spacing,.0025rem)*400);justify-content:flex-start;margin-left:calc(var(--spacing,.0025rem)*100);overflow:visible;position:relative;width:calc(var(--spacing,.0025rem)*400)}i{display:flex}i svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}mds-tooltip{--mds-tooltip-delay:var(--mds-help-tooltip-delay,.25s);max-width:var(--mds-help-tooltip-max-width,300px);min-width:var(--mds-help-tooltip-min-width,200px)}mds-tooltip::part(text){max-width:var(--mds-help-tooltip-max-width,300px);min-width:var(--mds-help-tooltip-width);width:var(--mds-help-tooltip-width)}i,mds-icon{fill:inherit;height:inherit;width:inherit}'}},[257,"mds-help",{icon:[1],autoPlacement:[516,"auto-placement"],placement:[513]}]);function d(){"undefined"!=typeof customElements&&["mds-help","mds-icon","mds-text","mds-tooltip"].forEach((e=>{switch(e){case"mds-help":customElements.get(o(e))||customElements.define(o(e),l);break;case"mds-icon":customElements.get(o(e))||a();break;case"mds-text":customElements.get(o(e))||n();break;case"mds-tooltip":customElements.get(o(e))||r()}}))}export{l as M,d}