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

package/dist/components/mds-filter-item2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as n}from"@stencil/core/internal/client";import{K as s}from"./keyboard-manager.js";import{d as i}from"./mds-icon2.js";import{d as c}from"./mds-text2.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=o(this,"mdsFilterItemSelect",7),this.km=new s,this.toggle=()=>{this.selected=!this.selected,this.selectedEvent.emit({id:this.element.id,selected:this.selected})}}componentDidLoad(){this.km.addElement(this.element),this.km.attachClickBehavior()}disconnectedCallback(){this.km.detachClickBehavior()}render(){var t;return r(a,{key:"9d4686de0bb4371076bb1d78b428b09efd0946f3",tabindex:this.disabled?"-1":"0",role:"menuitem","aria-label":null!==(t=this.label)&&void 0!==t?t:this.icon,onClick:this.toggle},this.icon&&r("mds-icon",{key:"9c9c91f67e70442646a2846ab901e8e56de89064","aria-hidden":"true",name:this.icon}),this.label&&r("mds-text",{key:"6299fdb29e9ed4a29c55c1c818ad0992fcda1b97","aria-hidden":"true",variant:"info",typography:"caption"},this.label),this.count&&r("div",{key:"6df69e3386a6e6b01fc7262c0c70dd75731acd94",class:"count"},r("mds-text",{key:"01380c1b2d11b56c6b244f5292ff4276c6866786","aria-hidden":"true",variant:"info",typography:"option"},this.count)))}get element(){return this}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 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-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0))}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):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}:host{--mds-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0));align-items:center;animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));border-radius:1000px;color:rgb(var(--tone-neutral-03,233 233 233));cursor:pointer;display:flex;fill:currentColor;gap:calc(var(--spacing,.0025rem)*100);justify-content:center;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*400);transition-duration:.2s;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none;white-space:nowrap}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}mds-text{white-space:nowrap}.count{align-items:center;background-color:var(--mds-filter-item-count-background-default,rgb(var(--tone-neutral-08,107 107 107)));border-radius:calc(var(--spacing,.0025rem)*400);box-sizing:border-box;color:var(--mds-filter-item-count-color-default,rgb(var(--tone-neutral-02,244 244 244)));display:inline-flex;flex-shrink:0;height:calc(var(--spacing,.0025rem)*400);justify-content:center;min-width:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*150);padding-right:calc(var(--spacing,.0025rem)*150);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,color;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host([icon]:not([label])){height:calc(var(--spacing,.0025rem)*900);padding:0;width:calc(var(--spacing,.0025rem)*900)}:host(:hover),:host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral,0 0 0))}:host(:hover){-webkit-box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a)}:host([selected]:not([selected=false])){color:rgb(var(--tone-neutral-01,255 255 255))}:host([selected]:not([selected=false])) .count{background-color:var(--mds-filter-item-count-background-selected,rgb(var(--tone-neutral-05,197 197 197)));color:var(--mds-filter-item-count-color-selected,rgb(var(--tone-neutral,0 0 0)))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){background-color:rgb(var(--tone-neutral-10,60 60 60))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host(:hover){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}:host-context(:root.pref-contrast-more):host(:hover){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){background-color:rgb(var(--tone-neutral-10,60 60 60))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host(:hover){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host(:hover),:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}}"}},[1,"mds-filter-item",{selected:[1540],label:[513],icon:[513],value:[513],count:[513],disabled:[516]}]);function d(){"undefined"!=typeof customElements&&["mds-filter-item","mds-icon","mds-text"].forEach((t=>{switch(t){case"mds-filter-item":customElements.get(n(t))||customElements.define(n(t),l);break;case"mds-icon":customElements.get(n(t))||i();break;case"mds-text":customElements.get(n(t))||c()}}))}export{l as M,d}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as i,transformTag as a}from"@stencil/core/internal/client";import{K as n}from"./keyboard-manager.js";import{s}from"./preference.js";import{d as l}from"./mds-icon2.js";import{d as c}from"./mds-text2.js";const d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=o(this,"mdsFilterItemSelect",7),this.km=new n,this.toggle=()=>{this.selected=!this.selected,this.selectedEvent.emit({id:this.element.id,selected:this.selected})}}connectedCallback(){this.unsubscribePrefAnimation=s("animation",(t=>{this.prefAnimation=t})),this.unsubscribePrefContrast=s("contrast",(t=>{this.prefContrast=t})),this.unsubscribePrefTheme=s("theme",(t=>{this.prefTheme=t})),this.unsubscribePrefThemeScheme=s("theme-scheme",(t=>{this.prefThemeScheme=t}))}componentDidLoad(){this.km.addElement(this.element),this.km.attachClickBehavior()}disconnectedCallback(){var t,e,o,r;null===(t=this.unsubscribePrefAnimation)||void 0===t||t.call(this),null===(e=this.unsubscribePrefContrast)||void 0===e||e.call(this),null===(o=this.unsubscribePrefTheme)||void 0===o||o.call(this),null===(r=this.unsubscribePrefThemeScheme)||void 0===r||r.call(this),this.km.detachClickBehavior()}render(){var t;return r(i,{key:"ebc068baa301a93988069f6b8c04ffcf716844e6",tabindex:this.disabled?"-1":"0",role:"menuitem","aria-label":null!==(t=this.label)&&void 0!==t?t:this.icon,onClick:this.toggle,"pref-animation":this.prefAnimation,"pref-contrast":this.prefContrast,"pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme},this.icon&&r("mds-icon",{key:"7fec8ef34bb78a5fbc665c47534b015ec02bc68d","aria-hidden":"true",name:this.icon}),this.label&&r("mds-text",{key:"556ad11dc7f67735acea552f78b79da8fd8b0d1e","aria-hidden":"true",variant:"info",typography:"caption"},this.label),this.count&&r("div",{key:"5fafb0a462e56e68dc3a8e928e08692b41135129",class:"count"},r("mds-text",{key:"4fdb750c3f12a25bd83d2cf5038d388ec58566e7","aria-hidden":"true",variant:"info",typography:"option"},this.count)))}get element(){return this}static get style(){return"@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-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0))}}}@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):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}:host{--mds-filter-item-transition-duration:var(--duration-200,.2s);--private-filter-item-transition-duration:var(--mds-filter-item-transition-duration);--mds-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0));align-items:center;animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));border-radius:1000px;color:rgb(var(--tone-neutral-03,233 233 233));cursor:pointer;display:flex;fill:currentColor;gap:calc(var(--spacing,.0025rem)*100);justify-content:center;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*400);transition-duration:.2s;-webkit-transition-duration:var(--private-filter-item-transition-duration);transition-duration:var(--private-filter-item-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none;white-space:nowrap}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}mds-text{white-space:nowrap}.count{align-items:center;background-color:var(--mds-filter-item-count-background-default,rgb(var(--tone-neutral-08,107 107 107)));border-radius:calc(var(--spacing,.0025rem)*400);box-sizing:border-box;color:var(--mds-filter-item-count-color-default,rgb(var(--tone-neutral-02,244 244 244)));display:inline-flex;flex-shrink:0;height:calc(var(--spacing,.0025rem)*400);justify-content:center;min-width:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*150);padding-right:calc(var(--spacing,.0025rem)*150);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,color;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host([icon]:not([label])){height:calc(var(--spacing,.0025rem)*900);padding:0;width:calc(var(--spacing,.0025rem)*900)}:host(:hover),:host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral,0 0 0))}:host(:hover){-webkit-box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a)}:host([selected]:not([selected=false])){color:rgb(var(--tone-neutral-01,255 255 255))}:host([selected]:not([selected=false])) .count{background-color:var(--mds-filter-item-count-background-selected,rgb(var(--tone-neutral-05,197 197 197)));color:var(--mds-filter-item-count-color-selected,rgb(var(--tone-neutral,0 0 0)))}:host([pref-animation=reduce]){--private-filter-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host(:hover){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=more]):host(:hover),:host([pref-contrast=more]):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-filter-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host(:hover){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host(:hover),:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}}"}},[1,"mds-filter-item",{selected:[1540],label:[513],icon:[513],value:[513],count:[513],disabled:[516],prefAnimation:[32],prefContrast:[32],prefTheme:[32],prefThemeScheme:[32]}]);function m(){"undefined"!=typeof customElements&&["mds-filter-item","mds-icon","mds-text"].forEach((t=>{switch(t){case"mds-filter-item":customElements.get(a(t))||customElements.define(a(t),d);break;case"mds-icon":customElements.get(a(t))||l();break;case"mds-text":customElements.get(a(t))||c()}}))}export{d as M,m as d}

package/dist/components/mds-filter.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./clsx.js";import{m as n}from"./close.js";import{d as l}from"./mds-filter-item2.js";import{d}from"./mds-icon2.js";import{d as m}from"./mds-text2.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changedEvent=r(this,"mdsFilterChange",7),this.itemsSelected=0,this.queryItems=()=>this.element.querySelectorAll("mds-filter-item"),this.scrollTabs=()=>{var t;const e=this.queryItems()[this.lastSelectedItem],r=null===(t=this.element.shadowRoot)||void 0===t?void 0:t.querySelector(".items");r&&(r.scrollLeft=e.offsetLeft-r.offsetLeft-r.offsetWidth/2+e.offsetWidth/2)},this.checkSelectedItem=()=>{const t=this.queryItems();let e=!1;t.forEach((t=>{t.selected&&(e=!0)})),this.active=e},this.checkAutoReset=()=>{this.autoReset&&this.resetItems()},this.resetItems=()=>{this.queryItems().forEach((t=>{t.selected=!1,t.classList.remove("sibling")})),this.active=!1},this.itemsValues=()=>{const t=this.queryItems(),e=[];return t.forEach((t=>{t.selected&&e.push(t.value)})),""+e}}componentWillLoad(){this.queryItems().forEach(((t,e)=>{t.id="item-"+e})),this.checkSelectedItem()}activeEventHandler(t){this.lastSelectedItem=Number(""!==t.detail.id?t.detail.id.replace("item-",""):0),this.scrollTabs();const e=this.queryItems();if(this.multiple){let t=0;const r=[];return e.forEach(((e,s)=>{r.push(e.selected?e:null),e.selected&&(t+=1),e.classList.remove("sibling"),r.length>1&&null!==r[s-1]&&e.classList.add("sibling")})),this.itemsSelected=t,this.checkSelectedItem(),this.itemsSelected===e.length&&this.checkAutoReset(),void this.changedEvent.emit({children:e,value:this.itemsValues()})}e.forEach(((e,r)=>{e.selected="item-"+r===t.detail.id&&t.detail.selected})),this.checkSelectedItem(),this.changedEvent.emit({children:e,value:this.itemsValues()})}render(){return s(i,{key:"1dd060145cd00afd5bc869aa0ac39a375e31c45a","aria-label":this.label,role:"menubar"},this.label&&s("mds-text",{key:"bc555868ff4c6599bbd5cbb0b075649b5ab0cca1",class:"label",typography:"label"},this.label),s("div",{key:"6dad87b041b6553711bc6b7d16e52bc8effabbcc",class:"items-wrapper"},s("div",{key:"d0d888532d201e44c12b273ced3c0106f6fc0641",class:o("items",this.active&&"active")},s("slot",{key:"d2919aba63eb86e5caa88b955a5eeb405daeccb8"}),s("div",{key:"9c70279b42e365d5f896277ed04add845b323dfc",class:o("reset",this.active&&"reset--opened")},s("mds-filter-item",{key:"85e033c578dd050b5bf0a6407fd3a4836244bb17",selected:this.active,disabled:!this.active&&this.reset,class:o("reset-button",this.active&&"reset-button-opened"),icon:n,onClick:this.resetItems})))))}get element(){return this}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 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-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow-opacity:.1}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-filter-item,mds-text):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-filter-items-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-filter-wrapper-shadow-opacity{syntax:"<number>";inherits:false;initial-value:.1}:host{--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow:0 0 0 2px var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset;--mds-filter-wrapper-shadow-opacity:.1;display:grid;gap:calc(var(--spacing,.0025rem)*100);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;background-color:var(--mds-filter-items-background,rgb(var(--tone-neutral-09,76 76 76)));border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));display:flex;gap:var(--mds-filter-items-gap,calc(var(--spacing,.0025rem)*200));overflow:auto;padding:var(--mds-filter-items-padding,calc(var(--spacing,.0025rem)*200));position:relative;scroll-behavior:var(--mds-filter-items-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.items-wrapper{display:grid;overflow:hidden;position:relative}.items-wrapper:after{border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));-webkit-box-shadow:var(--mds-filter-wrapper-shadow);box-shadow:var(--mds-filter-wrapper-shadow);content:"";inset:0;opacity:var(--mds-filter-wrapper-shadow-opacity,.1);pointer-events:none;position:absolute}.items::-webkit-scrollbar{display:none}.label{padding:var(--mds-filter-label-padding,0 calc(var(--spacing,.0025rem)*600))}.active{background-color:var(--mds-filter-items-background-active,rgb(var(--tone-neutral-09,76 76 76)))}.reset{display:flex;flex-grow:1;justify-content:flex-end;transform-origin:50%}.reset,.reset-button{transform:scale(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.reset-button-opened,:host([reset]:not([reset=false])) .reset{transform:scale(1)}:host-context(:root.pref-animation-reduce){--mds-filter-items-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .reset-button,:host-context(:root.pref-animation-reduce) .items){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}:host-context(:root.pref-contrast-more){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-filter-items-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .items,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .reset-button{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}}'}},[257,"mds-filter",{autoReset:[516,"auto-reset"],label:[1],multiple:[516],reset:[516],active:[32],itemsSelected:[32]},[[0,"mdsFilterItemSelect","activeEventHandler"]]]),p=c,b=function(){"undefined"!=typeof customElements&&["mds-filter","mds-filter-item","mds-icon","mds-text"].forEach((t=>{switch(t){case"mds-filter":customElements.get(a(t))||customElements.define(a(t),c);break;case"mds-filter-item":customElements.get(a(t))||l();break;case"mds-icon":customElements.get(a(t))||d();break;case"mds-text":customElements.get(a(t))||m()}}))};export{p as MdsFilter,b as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as i,Host as s,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./clsx.js";import{s as n}from"./preference.js";import{m as l}from"./close.js";import{d}from"./mds-filter-item2.js";import{d as m}from"./mds-icon2.js";import{d as c}from"./mds-text2.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changedEvent=r(this,"mdsFilterChange",7),this.itemsSelected=0,this.queryItems=()=>this.element.querySelectorAll("mds-filter-item"),this.scrollTabs=()=>{var t;const e=this.queryItems()[this.lastSelectedItem],r=null===(t=this.element.shadowRoot)||void 0===t?void 0:t.querySelector(".items");r&&(r.scrollLeft=e.offsetLeft-r.offsetLeft-r.offsetWidth/2+e.offsetWidth/2)},this.checkSelectedItem=()=>{const t=this.queryItems();let e=!1;t.forEach((t=>{t.selected&&(e=!0)})),this.active=e},this.checkAutoReset=()=>{this.autoReset&&this.resetItems()},this.resetItems=()=>{this.queryItems().forEach((t=>{t.selected=!1,t.classList.remove("sibling")})),this.active=!1},this.itemsValues=()=>{const t=this.queryItems(),e=[];return t.forEach((t=>{t.selected&&e.push(t.value)})),""+e}}connectedCallback(){this.unsubscribePrefAnimation=n("animation",(t=>{this.prefAnimation=t})),this.unsubscribePrefContrast=n("contrast",(t=>{this.prefContrast=t})),this.unsubscribePrefTheme=n("theme",(t=>{this.prefTheme=t})),this.unsubscribePrefThemeScheme=n("theme-scheme",(t=>{this.prefThemeScheme=t}))}disconnectedCallback(){var t,e,r,i;null===(t=this.unsubscribePrefAnimation)||void 0===t||t.call(this),null===(e=this.unsubscribePrefContrast)||void 0===e||e.call(this),null===(r=this.unsubscribePrefTheme)||void 0===r||r.call(this),null===(i=this.unsubscribePrefThemeScheme)||void 0===i||i.call(this)}componentWillLoad(){this.queryItems().forEach(((t,e)=>{t.id="item-"+e})),this.checkSelectedItem()}activeEventHandler(t){this.lastSelectedItem=Number(""!==t.detail.id?t.detail.id.replace("item-",""):0),this.scrollTabs();const e=this.queryItems();if(this.multiple){let t=0;const r=[];return e.forEach(((e,i)=>{r.push(e.selected?e:null),e.selected&&(t+=1),e.classList.remove("sibling"),r.length>1&&null!==r[i-1]&&e.classList.add("sibling")})),this.itemsSelected=t,this.checkSelectedItem(),this.itemsSelected===e.length&&this.checkAutoReset(),void this.changedEvent.emit({children:e,value:this.itemsValues()})}e.forEach(((e,r)=>{e.selected="item-"+r===t.detail.id&&t.detail.selected})),this.checkSelectedItem(),this.changedEvent.emit({children:e,value:this.itemsValues()})}render(){return i(s,{key:"f0478377115975741341bbe81fe35b376bc6d97a","aria-label":this.label,role:"menubar","pref-animation":this.prefAnimation,"pref-contrast":this.prefContrast,"pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme},this.label&&i("mds-text",{key:"8bcfb91192f373ab2a83b1a0a0292dcea1464a30",class:"label",typography:"label"},this.label),i("div",{key:"ea2371d425dbf8f2df02d532d6d67b2f6f140b9b",class:"items-wrapper"},i("div",{key:"21244c57c33d3117f29a4cbc7d91197ee8e1537c",class:o("items",this.active&&"active")},i("slot",{key:"5c7a609acf560f1845a6e2429bfb2502cd0dd27d"}),i("div",{key:"1540ff802c8faa39e468f8171e48f24942296e7a",class:o("reset",this.active&&"reset--opened")},i("mds-filter-item",{key:"7daef3e52613b52077fb9960bcb90e30ebe063b7",selected:this.active,disabled:!this.active&&this.reset,class:o("reset-button",this.active&&"reset-button-opened"),icon:l,onClick:this.resetItems})))))}get element(){return this}static get style(){return'@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-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow-opacity:.1}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-filter-item,mds-text):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-filter-items-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-filter-wrapper-shadow-opacity{syntax:"<number>";inherits:false;initial-value:.1}:host{--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-items-transition-duration:var(--duration-300,.3s);--private-filter-items-transition-duration:var(--mds-filter-items-transition-duration);--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow:0 0 0 2px var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset;--mds-filter-wrapper-shadow-opacity:.1;display:grid;gap:calc(var(--spacing,.0025rem)*100);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;background-color:var(--mds-filter-items-background,rgb(var(--tone-neutral-09,76 76 76)));border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));display:flex;gap:var(--mds-filter-items-gap,calc(var(--spacing,.0025rem)*200));overflow:auto;padding:var(--mds-filter-items-padding,calc(var(--spacing,.0025rem)*200));position:relative;scroll-behavior:var(--mds-filter-items-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-transition-duration:var(--private-filter-items-transition-duration);transition-duration:var(--private-filter-items-transition-duration);transition-property:background-color;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.items-wrapper{display:grid;overflow:hidden;position:relative}.items-wrapper:after{border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));-webkit-box-shadow:var(--mds-filter-wrapper-shadow);box-shadow:var(--mds-filter-wrapper-shadow);content:"";inset:0;opacity:var(--mds-filter-wrapper-shadow-opacity,.1);pointer-events:none;position:absolute}.items::-webkit-scrollbar{display:none}.label{padding:var(--mds-filter-label-padding,0 calc(var(--spacing,.0025rem)*600))}.active{background-color:var(--mds-filter-items-background-active,rgb(var(--tone-neutral-09,76 76 76)))}.reset{display:flex;flex-grow:1;justify-content:flex-end;transform-origin:50%}.reset,.reset-button{transform:scale(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.reset-button-opened,:host([reset]:not([reset=false])) .reset{transform:scale(1)}:host([pref-animation=reduce]){--private-filter-items-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}:host([pref-contrast=more]){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}@media (prefers-reduced-motion:reduce){:host{--mds-filter-items-scroll-behavior:auto}:host(:not([pref-animation])),:host([pref-animation=system]){--private-filter-items-transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}}'}},[257,"mds-filter",{autoReset:[516,"auto-reset"],label:[1],multiple:[516],reset:[516],prefAnimation:[32],prefContrast:[32],prefTheme:[32],prefThemeScheme:[32],active:[32],itemsSelected:[32]},[[0,"mdsFilterItemSelect","activeEventHandler"]]]),h=p,f=function(){"undefined"!=typeof customElements&&["mds-filter","mds-filter-item","mds-icon","mds-text"].forEach((t=>{switch(t){case"mds-filter":customElements.get(a(t))||customElements.define(a(t),p);break;case"mds-filter-item":customElements.get(a(t))||d();break;case"mds-icon":customElements.get(a(t))||m();break;case"mds-text":customElements.get(a(t))||c()}}))};export{h as MdsFilter,f as defineCustomElement}

package/dist/components/mds-header-bar.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as o,Host as r,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./mds-button2.js";import{d as i}from"./mds-icon2.js";import{d}from"./mds-spinner2.js";import{d as c}from"./mds-text2.js";const p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.openedEvent=a(this,"mdsHeaderBarOpen",7),this.menu="mobile",this.nav="desktop",this.open=()=>{var e;this.isOpened=!0,this.openedEvent.emit(),null===(e=this.host.closest("mds-header"))||void 0===e||e.setOpened(!0)}}componentWillLoad(){this.hasNav=null!==this.host.querySelector(':scope > [slot="nav"]')}async setOpened(e=!0){this.isOpened=e}render(){return o(r,{key:"6dd35a371fa5c356edb5f3dcdb3a7055ef59088b"},o("div",{key:"2550f4a19b20204359c89fc7ba4d352ccc7fae68",class:"content",part:"content"},o("div",{key:"41f1db71c01221c51e763d155ab701bd6c8ceb53",class:"logo"},o("slot",{key:"2dec39a7e14263b3c2af14d7bc2892355c369db7"})),o("div",{key:"4b2191c4b205abc0a56bab40d8266a81fcd5dcff",class:"actions",part:"actions"},"none"!==this.nav&&this.hasNav&&o("nav",{key:"e0211adaa22e20fdfc213db906577704b55d752c",class:"nav",part:"nav"},o("slot",{key:"bd5aab236894a32ee0a46c1fbeebfcc386214dc3",name:"nav"})),"none"!==this.menu&&o("mds-button",{key:"233bd731f391808dec162ff73cc9a1ed6453998f",class:"menu",variant:"dark",tone:"text",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>',onClick:this.open,part:"hamburger"}))))}get host(){return this}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 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-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button: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}:host{--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233));background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);interpolate-size:allow-keywords;display:flex;inset:0 0 auto;justify-content:center;margin-left:auto;margin-right:auto;max-width:100%;padding:calc(var(--spacing,.0025rem)*400) calc(var(--spacing,.0025rem)*600);position:fixed;transition-duration:.5s;transition-property:background-color,border-radius,margin,max-width,transform,width;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:auto;z-index:var(--mds-header-z-index,1000)}.logo{color:inherit;display:flex}.content{align-items:center;display:flex;flex-grow:1;gap:calc(var(--spacing,.0025rem)*400);justify-content:space-between;max-width:var(--breakpoint-wide,1280px)}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*600)}.nav{display:inline-flex;flex-shrink:0;gap:calc(var(--spacing,.0025rem)*400)}.menu{--mds-button-border-opacity:0;fill:var(--mds-header-bar-hamburger-color,rgb(var(--tone-neutral-03,233 233 233)));padding:0}.menu::part(icon){width:calc(var(--spacing,.0025rem)*800)}:host([menu=none]) .menu,:host([nav=none]) .nav{display:none}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}:host-context(:root.pref-contrast-more){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}@media not all and (min-width:768px){:host([menu=desktop]) .menu,:host([nav=desktop]) .nav{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu,:host([nav=mobile]) .nav{display:none}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}"}},[257,"mds-header-bar",{menu:[513],nav:[513],isOpened:[32],setOpened:[64]}]),m=p,h=function(){"undefined"!=typeof customElements&&["mds-header-bar","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-header-bar":customElements.get(s(e))||customElements.define(s(e),p);break;case"mds-button":customElements.get(s(e))||n();break;case"mds-icon":customElements.get(s(e))||i();break;case"mds-spinner":customElements.get(s(e))||d();break;case"mds-text":customElements.get(s(e))||c()}}))};export{m as MdsHeaderBar,h as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as r,Host as o,transformTag as s}from"@stencil/core/internal/client";import{s as n}from"./preference.js";import{d as i}from"./mds-button2.js";import{d}from"./mds-icon2.js";import{d as h}from"./mds-spinner2.js";import{d as p}from"./mds-text2.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.openedEvent=a(this,"mdsHeaderBarOpen",7),this.menu="mobile",this.nav="desktop",this.open=()=>{var e;this.isOpened=!0,this.openedEvent.emit(),null===(e=this.host.closest("mds-header"))||void 0===e||e.setOpened(!0)}}connectedCallback(){this.unsubscribePrefAnimation=n("animation",(e=>{this.prefAnimation=e})),this.unsubscribePrefContrast=n("contrast",(e=>{this.prefContrast=e})),this.unsubscribePrefTheme=n("theme",(e=>{this.prefTheme=e})),this.unsubscribePrefThemeScheme=n("theme-scheme",(e=>{this.prefThemeScheme=e}))}disconnectedCallback(){var e,t,a,r;null===(e=this.unsubscribePrefAnimation)||void 0===e||e.call(this),null===(t=this.unsubscribePrefContrast)||void 0===t||t.call(this),null===(a=this.unsubscribePrefTheme)||void 0===a||a.call(this),null===(r=this.unsubscribePrefThemeScheme)||void 0===r||r.call(this)}componentWillLoad(){this.hasNav=null!==this.host.querySelector(':scope > [slot="nav"]')}async setOpened(e=!0){this.isOpened=e}render(){return r(o,{key:"b1c85dfc8206bae1df8c6646da41ad85775c0eb7","pref-animation":this.prefAnimation,"pref-contrast":this.prefContrast,"pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme},r("div",{key:"3f73b7a9ffbf542b60c81e313b1164f6208eb4f2",class:"content",part:"content"},r("div",{key:"47f423bd40c504c2e058152ce8ca9f0a8ca45326",class:"logo"},r("slot",{key:"d0a7f9e9d818fd3e02418bd0cd570eb292cf1095"})),r("div",{key:"4fe0b5d41e3c38ab175a71c8f949ab40c98e30fa",class:"actions",part:"actions"},"none"!==this.nav&&this.hasNav&&r("nav",{key:"4668b44604cd6619d4b8b894e4bb2086abea0e15",class:"nav",part:"nav"},r("slot",{key:"0d75f2f06c05c5613b107d3a96a2ecba2bdedcb6",name:"nav"})),"none"!==this.menu&&r("mds-button",{key:"225c889c6731cd4db3866ec57f996348f9475ea9",class:"menu",variant:"dark",tone:"text",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>',onClick:this.open,part:"hamburger"}))))}get host(){return this}static get style(){return"@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-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233))}}}:host(:not(:is([hydrated],.hydrated))),mds-button: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}:host{--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233));--mds-header-bar-transition-duration:.5s;--private-header-bar-transition-duration:var(--mds-header-bar-transition-duration);background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);interpolate-size:allow-keywords;display:flex;inset:0 0 auto;justify-content:center;margin-left:auto;margin-right:auto;max-width:100%;padding:calc(var(--spacing,.0025rem)*400) calc(var(--spacing,.0025rem)*600);position:fixed;-webkit-transition-duration:var(--private-header-bar-transition-duration);transition-duration:var(--private-header-bar-transition-duration);transition-property:background-color,border-radius,margin,max-width,transform,width;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:auto;z-index:var(--mds-header-z-index,1000)}.logo{color:inherit;display:flex}.content{align-items:center;display:flex;flex-grow:1;gap:calc(var(--spacing,.0025rem)*400);justify-content:space-between;max-width:var(--breakpoint-wide,1280px)}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*600)}.nav{display:inline-flex;flex-shrink:0;gap:calc(var(--spacing,.0025rem)*400)}.menu{--mds-button-border-opacity:0;fill:var(--mds-header-bar-hamburger-color,rgb(var(--tone-neutral-03,233 233 233)));padding:0}.menu::part(icon){width:calc(var(--spacing,.0025rem)*800)}:host([menu=none]) .menu,:host([nav=none]) .nav{display:none}:host([pref-animation=reduce]){--private-header-bar-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}:host([pref-contrast=more]){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}@media not all and (min-width:768px){:host([menu=desktop]) .menu,:host([nav=desktop]) .nav{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu,:host([nav=mobile]) .nav{display:none}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-header-bar-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}"}},[257,"mds-header-bar",{menu:[513],nav:[513],prefAnimation:[32],prefContrast:[32],prefTheme:[32],prefThemeScheme:[32],isOpened:[32],setOpened:[64]}]),m=c,l=function(){"undefined"!=typeof customElements&&["mds-header-bar","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-header-bar":customElements.get(s(e))||customElements.define(s(e),c);break;case"mds-button":customElements.get(s(e))||i();break;case"mds-icon":customElements.get(s(e))||d();break;case"mds-spinner":customElements.get(s(e))||h();break;case"mds-text":customElements.get(s(e))||p()}}))};export{m as MdsHeaderBar,l as defineCustomElement}

package/dist/components/mds-header.js

@@ -1 +1 @@
-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}
+import{proxyCustomElement as e,HTMLElement as a,createEvent as i,h as t,Host as r,transformTag as s}from"@stencil/core/internal/client";import{s as d}from"./preference.js";import{d as n}from"./mds-button2.js";import{d as o}from"./mds-icon2.js";import{d as h}from"./mds-modal2.js";import{d as l}from"./mds-spinner2.js";import{d as c}from"./mds-text2.js";const m=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.closedEvent=i(this,"mdsHeaderClose",7),this.visibleEvent=i(this,"mdsHeaderVisibilityChange",7),this.relativeTresholdDown=0,this.relativePosition=0,this.relativeThresholdUp=0,this.sanitizedAppearance=["stripe"],this.appearanceThreshold=300,this.appearance="stripe",this.hideBackdrop=!1,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}connectedCallback(){this.unsubscribeConsumption=d("consumption",(e=>{this.consumption=e})),this.unsubscribePrefTheme=d("theme",(e=>{this.prefTheme=e})),this.unsubscribePrefThemeScheme=d("theme-scheme",(e=>{this.prefThemeScheme=e}))}disconnectedCallback(){var e,a,i;null===(e=this.unsubscribeConsumption)||void 0===e||e.call(this),null===(a=this.unsubscribePrefTheme)||void 0===a||a.call(this),null===(i=this.unsubscribePrefThemeScheme)||void 0===i||i.call(this),"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 t(r,{key:"97953a24f9b130d1f99dadc6f6c3f4c23caf6272","pref-consumption":this.consumption,"pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme},!this.hideBackdrop&&t("div",{key:"f271e2a67f6a244927b0f5a219da6680eae4f1a2",class:"backdrop"},t("div",{key:"68474c76bfe1d12b58ab87f5f79c68d0922da2c0",class:"backdrop-blur-item"}),t("div",{key:"06fea728d26324dae0e6f4247287fb4b8e8e4b54",class:"backdrop-blur-item"}),t("div",{key:"ddb4e76a63a86312555756c641ff5d2ca8cb12c6",class:"backdrop-blur-item"}),t("div",{key:"dc971c217e599227047fabf79ac9f9f99fa7849f",class:"backdrop-blur-item"}),t("div",{key:"e84678f00349431d723b32acf50653c335b4f612",class:"backdrop-blur-item"}),t("div",{key:"2c139eeaca64cc2f22d6ce95ded41f0e5b87afa8",class:"backdrop-blur-item"}),t("div",{key:"c6fe66897d0580051b9e1f045419d8021802dfed",class:"backdrop-blur-item"}),t("div",{key:"8237d3e49e4c782b9dbb41c31fdb1291ea6cabfb",class:"backdrop-blur-item"}),t("div",{key:"a87ee5faf0ee0fc3e86a4a70f708c126894c423b",class:"backdrop-blur-item"}),t("div",{key:"5289da76b9d4ee0e0d73c5a0275bb737558ab96d",class:"backdrop-blur-item"})),t("slot",{key:"3b68fcf1e23725b767dc791991e28e22d18f8633"}),this.hasMenu&&t("div",{key:"d54f8cba235e3217833087adee0c3989fad8acc0",class:"menu",part:"menu"},t("mds-modal",{key:"0f540700417c5caa8fc2d2336814246375491c53",class:"modal",opened:this.isOpened,onMdsModalClose:this.close,position:"right"},t("slot",{key:"25ac67a9dbedd7d50613bfe5acfabeb128de7193",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 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}}}: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){.backdrop{display:none}}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-consumption=high]) .backdrop{--mds-header-backdrop-background-image:none}:host([pref-consumption=medium]) .backdrop{--mds-header-backdrop-blur-strength:1px}:host([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){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--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"],hideBackdrop:[516,"hide-backdrop"],menu:[513],nav:[513],threshold:[514],visibility:[1537],hasMenu:[32],isOpened:[32],consumption:[32],prefTheme:[32],prefThemeScheme:[32],setOpened:[64]},void 0,{menu:[{onMenuChangedHandler:0}],nav:[{onNavChangedHandler:0}],appearanceSet:[{onAppearanceSetChangedHandler:0}],visibility:[{handleVisibilityChange:0}]}]),p=m,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),m);break;case"mds-button":customElements.get(s(e))||n();break;case"mds-icon":customElements.get(s(e))||o();break;case"mds-modal":customElements.get(s(e))||h();break;case"mds-spinner":customElements.get(s(e))||l();break;case"mds-text":customElements.get(s(e))||c()}}))};export{p as MdsHeader,b as defineCustomElement}

package/dist/components/mds-help2.js

@@ -1 +1 @@
-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}
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as o}from"@stencil/core/internal/client";import{d as l}from"./mds-icon2.js";import{d as a}from"./mds-text2.js";import{d}from"./mds-tooltip2.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disableAutoPlacement=!1,this.placement="top"}render(){var t;return i(s,{key:"b56b6de29019db8bf7f8b6ae1f133f8625e15e22"},i("mds-icon",{key:"927cf78c5d30794947cf5898568ae44847ef4749",class:"icon",name:null!==(t=this.icon)&&void 0!==t?t:'<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:"6422a433ec9bab77e9331efeef28e0cbbcb18393",placement:this.placement,disableAutoPlacement:this.disableAutoPlacement,strategy:"absolute",target:".icon"},i("slot",{key:"5b238d4131de924165a9d2986cd172e122ceacda"})))}static get style(){return'@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}}}: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],disableAutoPlacement:[516,"disable-auto-placement"],placement:[513]}]);function r(){"undefined"!=typeof customElements&&["mds-help","mds-icon","mds-text","mds-tooltip"].forEach((t=>{switch(t){case"mds-help":customElements.get(o(t))||customElements.define(o(t),n);break;case"mds-icon":customElements.get(o(t))||l();break;case"mds-text":customElements.get(o(t))||a();break;case"mds-tooltip":customElements.get(o(t))||d()}}))}export{n as M,r as d}

package/dist/components/mds-horizontal-scroll.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as t,h as a,Host as r,transformTag as s}from"@stencil/core/internal/client";import{m as i}from"./arrow-back.js";import{m as l}from"./arrow-forward.js";import{c as n}from"./clsx.js";import{a as e}from"./unit.js";import{d as c}from"./mds-button2.js";import{d}from"./mds-icon2.js";import{d as h}from"./mds-spinner2.js";import{d as m}from"./mds-text2.js";const p=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.hasCompatibility=!0,this.showForward=!0,this.showBack=!1,this.controls="desktop",this.navigation="position",this.snap="start",this.updateElements=()=>{var o,t;this.elements=null===(t=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelectorAll("slot")[0])||void 0===t?void 0:t.assignedNodes()},this.updateCSSCustomProps=()=>{if("undefined"==typeof window)return;const o=window.getComputedStyle(this.host);this.scrollGap=e(o.getPropertyValue("--mds-horizontal-scroll-gap"))},this.isInViewport=o=>{if(null==this.contents)return!1;const t=this.spacer.offsetWidth+this.scrollGap,a=o.getBoundingClientRect(),r=this.contents.getBoundingClientRect();return a.top>=0&&a.left>=t&&a.bottom<=r.height&&a.right<=r.width-2*t},this.checkNavigationButtons=()=>{if(null==this.elements)throw Error("No elements slotted to the component");this.showBack=!0,this.showForward=!0,this.elements.forEach(((o,t)=>{0===t&&this.isInViewport(o)&&(this.showBack=!1),this.elements.length-1===t&&this.isInViewport(o)&&(this.showForward=!1)}))},this.moveBack=()=>{if(null==this.elements)throw Error("No elements slotted to the component");let o,t,a=0;this.elements.forEach(((r,s)=>{this.isInViewport(r)&&(o||(a=s,o=r),t=r)})),this.elements.forEach(((r,s)=>{this.isInViewport(r)||s!==a-1||void 0===o||void 0===t||(this.contents.scrollLeft=this.contents.scrollLeft+r.offsetLeft-t.offsetLeft-o.offsetWidth-this.scrollGap)}))},this.moveForward=()=>{if(null==this.elements)throw Error("No elements slotted to the component");let o=!0;this.elements.forEach((t=>{this.isInViewport(t)||t.offsetLeft>this.contents.scrollLeft&&o&&(o=!1,this.lastElementOffsetLeft=t.offsetLeft,this.contents.scrollLeft=this.lastElementOffsetLeft)}))},this.translateNavigationDot=()=>{if(null==this.elements||null==this.contents||null==this.navigationDot||null==this.navigationDots)return void console.error("mds-horizontal-scroll.translateNavigationDot: One of the shadowRoot elements is missing.");const{scrollLeft:o,scrollWidth:t,offsetWidth:a}=this.contents,r=window.getComputedStyle(this.navigationDots);0!==a&&0!==t?this.navigationDot.style.transform=`translateX(${o/(t-a)*(this.navigationDots.offsetWidth-(parseFloat(r.paddingLeft)||0)-(parseFloat(r.paddingRight)||0)-this.navigationDot.offsetWidth)}px)`:console.error("mds-horizontal-scroll.translateNavigationDot: offsetWidth or scrollWidth is 0, impossible to calculate position")},this.updateNavigationDotSize=()=>{if(null==this.contents||null==this.navigationDot||null==this.navigationDots)return void console.error("mds-horizontal-scroll.updateNavigationDotSize: One of the shadowRoot elements is missing.");const{scrollWidth:o,offsetWidth:t}=this.contents,a=this.navigationDots.offsetWidth;this.navigationDot.style.width=o<=t?a+"px":t/o*a+"px"},this.addNavigationDots=()=>{var o,t;this.contents.removeEventListener("scroll",this.translateNavigationDot),this.navigationDot=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".dot"),this.navigationDots=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(".dot-navigation"),this.updateNavigationDotSize(),null!=this.navigationDot&&this.contents.addEventListener("scroll",this.translateNavigationDot)}}watchNavigation(o){"position"===o&&this.addNavigationDots()}componentWillLoad(){this.updateCSSCustomProps()}componentDidLoad(){var o,t;this.contents=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".contents"),this.spacer=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector(".spacer"),"position"===this.navigation&&this.addNavigationDots(),window&&void 0!==window.onscrollend?this.contents.addEventListener("scrollend",this.checkNavigationButtons):void 0!==this.controls&&(this.controls=void 0)}disconnectedCallback(){this.contents.removeEventListener("scrollend",this.checkNavigationButtons),this.contents.removeEventListener("scroll",this.translateNavigationDot)}render(){return a(r,{key:"636ebfd9eac9424b06093ee2990a434519af154c"},a("div",{key:"0828132e0a00ff2d72ace5806d1cc07a8f7f3335",class:"contents",part:"content"},a("div",{key:"e1156c7aeeb7da48b55864ee35a7b54cdebce1e3",class:"spacer"}),a("slot",{key:"91c97d1e9c9477b07476cdf7c5b8f77df2d4dcf0",onSlotchange:this.updateElements}),a("div",{key:"8b02b270ebad91c7fe56315132200c43d96f4a77",class:"spacer"})),a("div",{key:"5ed9c9ced06458f9aa4796a6182a7ae6746ed3fb",class:"dot-navigation"},a("div",{key:"778f7543ac11b70fad1169b6cbd05732d5fbabc2",class:"dot"})),this.controls&&"none"!==this.controls&&a("mds-button",{key:"63d99a5cbd4cb64a42c68a4ef4d1cae5a768c377",onClick:this.moveBack,size:"lg",class:n("navigation navigation--back",!this.showBack&&"navigation--disabled"),icon:i}),this.controls&&"none"!==this.controls&&a("mds-button",{key:"4874cc67646aac477e164df8b1078ad3f631bab4",onClick:this.moveForward,size:"lg",class:n("navigation navigation--forward",!this.showForward&&"navigation--disabled"),icon:l}))}get host(){return this}static get watchers(){return{navigation:[{watchNavigation: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 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-horizontal-scroll-dots-gap:calc(var(--spacing,.0025rem)*100);--mds-horizontal-scroll-dot-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-contents-padding:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-contents-scroll-padding:0 calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-controls-margin:calc(var(--spacing,.0025rem)*1200);--mds-horizontal-scroll-gap:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-max-width:var(--breakpoint-wide,1280px);--mds-horizontal-scroll-scrollbar-margin:0;--mds-horizontal-scroll-scrollbar-radius:0;--mds-horizontal-scroll-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-dot-background:rgb(var(--tone-neutral,0 0 0));--mds-horizontal-scroll-dot-area-background:rgb(var(--tone-neutral-08,107 107 107));--mds-horizontal-scroll-scrollbar-thumb-background:rgb(var(--tone-neutral-02,244 244 244)/.3);--mds-horizontal-scroll-scrollbar-track-background:rgb(var(--tone-neutral-06,158 158 158)/.3)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button: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-horizontal-scroll-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-horizontal-scroll-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-horizontal-scroll-behavior:smooth;--mds-horizontal-scroll-dots-gap:calc(var(--spacing,.0025rem)*100);--mds-horizontal-scroll-dot-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-dot-max-width:auto;--mds-horizontal-scroll-dot-background:rgb(var(--tone-neutral,0 0 0));--mds-horizontal-scroll-dot-area-background:rgb(var(--tone-neutral-08,107 107 107));--mds-horizontal-scroll-contents-padding:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-contents-scroll-padding:0 calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-controls-margin:calc(var(--spacing,.0025rem)*1200);--mds-horizontal-scroll-gap:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-max-width:var(--breakpoint-wide,1280px);--mds-horizontal-scroll-scrollbar-margin:0;--mds-horizontal-scroll-scrollbar-radius:0;--mds-horizontal-scroll-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-scrollbar-thumb-background:rgb(var(--tone-neutral-02,244 244 244)/.3);--mds-horizontal-scroll-scrollbar-track-background:rgb(var(--tone-neutral-06,158 158 158)/.3);--max-width:var(--mds-horizontal-scroll-max-width,var(--breakpoint-wide,1280px));--scroll-margin:calc(((100svw - var(--max-width)) / 2) + (var(--mds-horizontal-scroll-controls-margin,calc(var(--spacing,.0025rem) * 1200)) * 2));align-items:center;container:mds-horizontal-scroll/inline-size;display:flex;flex-direction:column;justify-content:center;position:relative;width:100%}.navigation{border-radius:1000px;display:none;padding:0;position:absolute;top:50%;transform:translateY(-50%);transition-duration:.2s;transition-property:opacity,scale,transform}.contents{box-sizing:border-box;display:flex;gap:var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem)*600));overflow:auto;padding-bottom:var(--mds-horizontal-scroll-contents-padding,calc(var(--spacing,.0025rem)*600));padding-top:var(--mds-horizontal-scroll-contents-padding,calc(var(--spacing,.0025rem)*600));position:relative;scroll-behavior:var(--mds-horizontal-scroll-behavior);scroll-padding:var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600));-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%}.contents>::slotted(*){flex:0 0 0;scroll-margin:0 var(--scroll-margin)}.spacer{--width:calc(var(--scroll-margin) - var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)));content:"";display:block;flex:0 0 0;min-width:clamp(1px,var(--width),var(--width));scroll-margin:0 var(--scroll-margin)}@container (max-width:1024px){:host{--scroll-margin:var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600))}.contents{scroll-padding:var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600))}.contents>::slotted(*){scroll-margin:0 var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600))}}:host-context(:root.pref-animation-reduce){--mds-horizontal-scroll-behavior:auto}.navigation--back{left:clamp(calc(var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)) / 2),var(--position),var(--position))}.navigation--back,.navigation--forward{--position:calc(var(--scroll-margin) - var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)) - var(--mds-horizontal-scroll-controls-margin,calc(var(--spacing,.0025rem) * 1200)))}.navigation--forward{right:clamp(calc(var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)) / 2),var(--position),var(--position))}.navigation--disabled{opacity:0;pointer-events:none;transform:translateY(-50%)scale(.5)}:host([controls=all]) .navigation{display:flex}.dot-navigation{align-self:center;background-color:var(--mds-horizontal-scroll-dot-area-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:200px;display:none;gap:var(--mds-horizontal-scroll-dots-gap,calc(var(--spacing,.0025rem)*100));justify-content:start;margin:0 auto var(--mds-horizontal-scroll-contents-padding,calc(var(--spacing,.0025rem)*600)) auto;max-width:calc(var(--spacing,.0025rem)*4000);padding:calc(var(--spacing,.0025rem)*50);width:100%}:host([navigation=position]) .dot-navigation{display:inline-flex}.dot{background-color:var(--mds-horizontal-scroll-dot-background,rgb(var(--tone-neutral,0 0 0)));border-radius:200px;height:var(--mds-horizontal-scroll-dot-size,calc(var(--spacing,.0025rem)*200));max-width:var(--mds-horizontal-scroll-dot-max-width);min-width:var(--mds-horizontal-scroll-dot-size,calc(var(--spacing,.0025rem)*200));transition-duration:.3s;transition-property:width;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:calc(var(--mds-horizontal-scroll-dot-size,calc(var(--spacing,.0025rem) * 200)) * 2)}:host(:not([navigation=scrollbar])) .contents{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .contents::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .contents::-webkit-scrollbar{height:var(--mds-horizontal-scroll-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-horizontal-scroll-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .contents::-webkit-scrollbar-track{background-color:var(--mds-horizontal-scroll-scrollbar-track-background,rgb(var(--tone-neutral-06,158 158 158)/.3));border-radius:var(--mds-horizontal-scroll-scrollbar-radius,0);margin-block:var(--mds-horizontal-scroll-scrollbar-margin,0);margin-inline:var(--mds-horizontal-scroll-scrollbar-margin,0)}:host([navigation=scrollbar]) .contents::-webkit-scrollbar-thumb{background-color:var(--mds-horizontal-scroll-scrollbar-thumb-background,rgb(var(--tone-neutral-02,244 244 244)/.3));border-radius:var(--mds-horizontal-scroll-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.contents{scrollbar-color:var(--mds-horizontal-scroll-scrollbar-thumb-background,rgb(var(--tone-neutral-02,244 244 244)/.3)) var(--mds-horizontal-scroll-scrollbar-track-background,rgb(var(--tone-neutral-06,158 158 158)/.3));scrollbar-width:thin}}:host([snap=start]) .contents>::slotted(*){scroll-snap-align:start}:host([snap=center]) .contents>::slotted(*){scroll-snap-align:center}:host([snap=end]) .contents>::slotted(*){scroll-snap-align:end}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-horizontal-scroll-behavior:auto}}@media (min-width:1920px){:host([controls=tv]) .navigation{display:flex}}@media (min-width:1600px){:host([controls=xlarge]) .navigation{display:flex}}@media (min-width:1440px){:host([controls=large]) .navigation{display:flex}}@media (min-width:1280px){:host([controls=wide]) .navigation{display:flex}}@media (min-width:1024px){:host([controls=desktop]) .navigation{display:flex}}@media (min-width:768px){:host([controls=tablet]) .navigation{display:flex}}'}},[257,"mds-horizontal-scroll",{controls:[1537],navigation:[513],snap:[513],hasCompatibility:[32],showForward:[32],showBack:[32]},void 0,{navigation:[{watchNavigation:0}]}]),v=p,g=function(){"undefined"!=typeof customElements&&["mds-horizontal-scroll","mds-button","mds-icon","mds-spinner","mds-text"].forEach((o=>{switch(o){case"mds-horizontal-scroll":customElements.get(s(o))||customElements.define(s(o),p);break;case"mds-button":customElements.get(s(o))||c();break;case"mds-icon":customElements.get(s(o))||d();break;case"mds-spinner":customElements.get(s(o))||h();break;case"mds-text":customElements.get(s(o))||m()}}))};export{v as MdsHorizontalScroll,g as defineCustomElement}
+import{proxyCustomElement as o,HTMLElement as a,h as t,Host as r,transformTag as s}from"@stencil/core/internal/client";import{m as i}from"./arrow-back.js";import{m as l}from"./arrow-forward.js";import{c as n}from"./clsx.js";import{a as c}from"./unit.js";import{d as e}from"./mds-button2.js";import{d}from"./mds-icon2.js";import{d as h}from"./mds-spinner2.js";import{d as m}from"./mds-text2.js";const p=o(class extends a{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.hasCompatibility=!0,this.showForward=!0,this.showBack=!1,this.controls="desktop",this.navigation="position",this.snap="start",this.updateElements=()=>{var o,a;this.elements=null===(a=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelectorAll("slot")[0])||void 0===a?void 0:a.assignedNodes()},this.updateCSSCustomProps=()=>{if("undefined"==typeof window)return;const o=window.getComputedStyle(this.host);this.scrollGap=c(o.getPropertyValue("--mds-horizontal-scroll-gap"))},this.isInViewport=o=>{if(null==this.contents)return!1;const a=this.spacer.offsetWidth+this.scrollGap,t=o.getBoundingClientRect(),r=this.contents.getBoundingClientRect();return t.top>=0&&t.left>=a&&t.bottom<=r.height&&t.right<=r.width-2*a},this.checkNavigationButtons=()=>{if(null==this.elements)throw Error("No elements slotted to the component");this.showBack=!0,this.showForward=!0,this.elements.forEach(((o,a)=>{0===a&&this.isInViewport(o)&&(this.showBack=!1),this.elements.length-1===a&&this.isInViewport(o)&&(this.showForward=!1)}))},this.moveBack=()=>{if(null==this.elements)throw Error("No elements slotted to the component");let o,a,t=0;this.elements.forEach(((r,s)=>{this.isInViewport(r)&&(o||(t=s,o=r),a=r)})),this.elements.forEach(((r,s)=>{this.isInViewport(r)||s!==t-1||void 0===o||void 0===a||(this.contents.scrollLeft=this.contents.scrollLeft+r.offsetLeft-a.offsetLeft-o.offsetWidth-this.scrollGap)}))},this.moveForward=()=>{if(null==this.elements)throw Error("No elements slotted to the component");let o=!0;this.elements.forEach((a=>{this.isInViewport(a)||a.offsetLeft>this.contents.scrollLeft&&o&&(o=!1,this.lastElementOffsetLeft=a.offsetLeft,this.contents.scrollLeft=this.lastElementOffsetLeft)}))},this.translateNavigationDot=()=>{if(null==this.elements||null==this.contents||null==this.navigationDot||null==this.navigationDots)return void console.error("mds-horizontal-scroll.translateNavigationDot: One of the shadowRoot elements is missing.");const{scrollLeft:o,scrollWidth:a,offsetWidth:t}=this.contents,r=window.getComputedStyle(this.navigationDots);0!==t&&0!==a?this.navigationDot.style.transform=`translateX(${o/(a-t)*(this.navigationDots.offsetWidth-(parseFloat(r.paddingLeft)||0)-(parseFloat(r.paddingRight)||0)-this.navigationDot.offsetWidth)}px)`:console.error("mds-horizontal-scroll.translateNavigationDot: offsetWidth or scrollWidth is 0, impossible to calculate position")},this.updateNavigationDotSize=()=>{if(null==this.contents||null==this.navigationDot||null==this.navigationDots)return void console.error("mds-horizontal-scroll.updateNavigationDotSize: One of the shadowRoot elements is missing.");const{scrollWidth:o,offsetWidth:a}=this.contents,t=this.navigationDots.offsetWidth;this.navigationDot.style.width=o<=a?t+"px":a/o*t+"px"},this.addNavigationDots=()=>{var o,a;this.contents.removeEventListener("scroll",this.translateNavigationDot),this.navigationDot=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".dot"),this.navigationDots=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".dot-navigation"),this.updateNavigationDotSize(),null!=this.navigationDot&&this.contents.addEventListener("scroll",this.translateNavigationDot)}}watchNavigation(o){"position"===o&&this.addNavigationDots()}componentWillLoad(){this.updateCSSCustomProps()}componentDidLoad(){var o,a;this.contents=null===(o=this.host.shadowRoot)||void 0===o?void 0:o.querySelector(".contents"),this.spacer=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".spacer"),"position"===this.navigation&&this.addNavigationDots(),window&&void 0!==window.onscrollend?this.contents.addEventListener("scrollend",this.checkNavigationButtons):void 0!==this.controls&&(this.controls=void 0)}disconnectedCallback(){this.contents.removeEventListener("scrollend",this.checkNavigationButtons),this.contents.removeEventListener("scroll",this.translateNavigationDot)}render(){return t(r,{key:"636ebfd9eac9424b06093ee2990a434519af154c"},t("div",{key:"0828132e0a00ff2d72ace5806d1cc07a8f7f3335",class:"contents",part:"content"},t("div",{key:"e1156c7aeeb7da48b55864ee35a7b54cdebce1e3",class:"spacer"}),t("slot",{key:"91c97d1e9c9477b07476cdf7c5b8f77df2d4dcf0",onSlotchange:this.updateElements}),t("div",{key:"8b02b270ebad91c7fe56315132200c43d96f4a77",class:"spacer"})),t("div",{key:"5ed9c9ced06458f9aa4796a6182a7ae6746ed3fb",class:"dot-navigation"},t("div",{key:"778f7543ac11b70fad1169b6cbd05732d5fbabc2",class:"dot"})),this.controls&&"none"!==this.controls&&t("mds-button",{key:"63d99a5cbd4cb64a42c68a4ef4d1cae5a768c377",onClick:this.moveBack,size:"lg",class:n("navigation navigation--back",!this.showBack&&"navigation--disabled"),icon:i}),this.controls&&"none"!==this.controls&&t("mds-button",{key:"4874cc67646aac477e164df8b1078ad3f631bab4",onClick:this.moveForward,size:"lg",class:n("navigation navigation--forward",!this.showForward&&"navigation--disabled"),icon:l}))}get host(){return this}static get watchers(){return{navigation:[{watchNavigation:0}]}}static get style(){return'@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-horizontal-scroll-behavior:smooth;--mds-horizontal-scroll-dots-gap:calc(var(--spacing,.0025rem)*100);--mds-horizontal-scroll-dot-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-contents-padding:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-contents-scroll-padding:0 calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-controls-margin:calc(var(--spacing,.0025rem)*1200);--mds-horizontal-scroll-gap:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-max-width:var(--breakpoint-wide,1280px);--mds-horizontal-scroll-scrollbar-margin:0;--mds-horizontal-scroll-scrollbar-radius:0;--mds-horizontal-scroll-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-dot-background:rgb(var(--tone-neutral,0 0 0));--mds-horizontal-scroll-dot-area-background:rgb(var(--tone-neutral-08,107 107 107));--mds-horizontal-scroll-scrollbar-thumb-background:rgb(var(--tone-neutral-02,244 244 244)/.3);--mds-horizontal-scroll-scrollbar-track-background:rgb(var(--tone-neutral-06,158 158 158)/.3)}}}:host(:not(:is([hydrated],.hydrated))),mds-button: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-horizontal-scroll-behavior{syntax:"auto|smooth";inherits:false;initial-value:smooth}@property --mds-horizontal-scroll-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-horizontal-scroll-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-horizontal-scroll-behavior:smooth;--mds-horizontal-scroll-dots-gap:calc(var(--spacing,.0025rem)*100);--mds-horizontal-scroll-dot-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-dot-max-width:auto;--mds-horizontal-scroll-dot-background:rgb(var(--tone-neutral,0 0 0));--mds-horizontal-scroll-dot-area-background:rgb(var(--tone-neutral-08,107 107 107));--mds-horizontal-scroll-contents-padding:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-contents-scroll-padding:0 calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-controls-margin:calc(var(--spacing,.0025rem)*1200);--mds-horizontal-scroll-gap:calc(var(--spacing,.0025rem)*600);--mds-horizontal-scroll-max-width:var(--breakpoint-wide,1280px);--mds-horizontal-scroll-scrollbar-margin:0;--mds-horizontal-scroll-scrollbar-radius:0;--mds-horizontal-scroll-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-horizontal-scroll-scrollbar-thumb-background:rgb(var(--tone-neutral-02,244 244 244)/.3);--mds-horizontal-scroll-scrollbar-track-background:rgb(var(--tone-neutral-06,158 158 158)/.3);--max-width:var(--mds-horizontal-scroll-max-width,var(--breakpoint-wide,1280px));--scroll-margin:calc(((100svw - var(--max-width)) / 2) + (var(--mds-horizontal-scroll-controls-margin,calc(var(--spacing,.0025rem) * 1200)) * 2));align-items:center;container:mds-horizontal-scroll/inline-size;display:flex;flex-direction:column;justify-content:center;position:relative;width:100%}.navigation{border-radius:1000px;display:none;padding:0;position:absolute;top:50%;transform:translateY(-50%);transition-duration:.2s;transition-property:opacity,scale,transform}.contents{box-sizing:border-box;display:flex;gap:var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem)*600));overflow:auto;padding-bottom:var(--mds-horizontal-scroll-contents-padding,calc(var(--spacing,.0025rem)*600));padding-top:var(--mds-horizontal-scroll-contents-padding,calc(var(--spacing,.0025rem)*600));position:relative;scroll-behavior:var(--mds-horizontal-scroll-behavior,smooth);scroll-padding:var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600));-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%}.contents>::slotted(*){flex:0 0 0;scroll-margin:0 var(--scroll-margin)}.spacer{--width:calc(var(--scroll-margin) - var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)));content:"";display:block;flex:0 0 0;min-width:clamp(1px,var(--width),var(--width));scroll-margin:0 var(--scroll-margin)}@container (max-width:1024px){:host{--scroll-margin:var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600))}.contents{scroll-padding:var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600))}.contents>::slotted(*){scroll-margin:0 var(--mds-horizontal-scroll-contents-scroll-padding,0 calc(var(--spacing,.0025rem)*600))}}.navigation--back{left:clamp(calc(var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)) / 2),var(--position),var(--position))}.navigation--back,.navigation--forward{--position:calc(var(--scroll-margin) - var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)) - var(--mds-horizontal-scroll-controls-margin,calc(var(--spacing,.0025rem) * 1200)))}.navigation--forward{right:clamp(calc(var(--mds-horizontal-scroll-gap,calc(var(--spacing,.0025rem) * 600)) / 2),var(--position),var(--position))}.navigation--disabled{opacity:0;pointer-events:none;transform:translateY(-50%)scale(.5)}:host([controls=all]) .navigation{display:flex}.dot-navigation{align-self:center;background-color:var(--mds-horizontal-scroll-dot-area-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:200px;display:none;gap:var(--mds-horizontal-scroll-dots-gap,calc(var(--spacing,.0025rem)*100));justify-content:start;margin:0 auto var(--mds-horizontal-scroll-contents-padding,calc(var(--spacing,.0025rem)*600)) auto;max-width:calc(var(--spacing,.0025rem)*4000);padding:calc(var(--spacing,.0025rem)*50);width:100%}:host([navigation=position]) .dot-navigation{display:inline-flex}.dot{background-color:var(--mds-horizontal-scroll-dot-background,rgb(var(--tone-neutral,0 0 0)));border-radius:200px;height:var(--mds-horizontal-scroll-dot-size,calc(var(--spacing,.0025rem)*200));max-width:var(--mds-horizontal-scroll-dot-max-width);min-width:var(--mds-horizontal-scroll-dot-size,calc(var(--spacing,.0025rem)*200));transition-duration:.3s;transition-property:width;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:calc(var(--mds-horizontal-scroll-dot-size,calc(var(--spacing,.0025rem) * 200)) * 2)}:host(:not([navigation=scrollbar])) .contents{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .contents::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .contents::-webkit-scrollbar{height:var(--mds-horizontal-scroll-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-horizontal-scroll-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .contents::-webkit-scrollbar-track{background-color:var(--mds-horizontal-scroll-scrollbar-track-background,rgb(var(--tone-neutral-06,158 158 158)/.3));border-radius:var(--mds-horizontal-scroll-scrollbar-radius,0);margin-block:var(--mds-horizontal-scroll-scrollbar-margin,0);margin-inline:var(--mds-horizontal-scroll-scrollbar-margin,0)}:host([navigation=scrollbar]) .contents::-webkit-scrollbar-thumb{background-color:var(--mds-horizontal-scroll-scrollbar-thumb-background,rgb(var(--tone-neutral-02,244 244 244)/.3));border-radius:var(--mds-horizontal-scroll-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.contents{scrollbar-color:var(--mds-horizontal-scroll-scrollbar-thumb-background,rgb(var(--tone-neutral-02,244 244 244)/.3)) var(--mds-horizontal-scroll-scrollbar-track-background,rgb(var(--tone-neutral-06,158 158 158)/.3));scrollbar-width:thin}}:host([snap=start]) .contents>::slotted(*){scroll-snap-align:start}:host([snap=center]) .contents>::slotted(*){scroll-snap-align:center}:host([snap=end]) .contents>::slotted(*){scroll-snap-align:end}@media (prefers-reduced-motion:reduce){:host{--mds-horizontal-scroll-behavior:auto}}@media (min-width:1920px){:host([controls=tv]) .navigation{display:flex}}@media (min-width:1600px){:host([controls=xlarge]) .navigation{display:flex}}@media (min-width:1440px){:host([controls=large]) .navigation{display:flex}}@media (min-width:1280px){:host([controls=wide]) .navigation{display:flex}}@media (min-width:1024px){:host([controls=desktop]) .navigation{display:flex}}@media (min-width:768px){:host([controls=tablet]) .navigation{display:flex}}'}},[257,"mds-horizontal-scroll",{controls:[1537],navigation:[513],snap:[513],hasCompatibility:[32],showForward:[32],showBack:[32]},void 0,{navigation:[{watchNavigation:0}]}]),g=p,v=function(){"undefined"!=typeof customElements&&["mds-horizontal-scroll","mds-button","mds-icon","mds-spinner","mds-text"].forEach((o=>{switch(o){case"mds-horizontal-scroll":customElements.get(s(o))||customElements.define(s(o),p);break;case"mds-button":customElements.get(s(o))||e();break;case"mds-icon":customElements.get(s(o))||d();break;case"mds-spinner":customElements.get(s(o))||h();break;case"mds-text":customElements.get(s(o))||m()}}))};export{g as MdsHorizontalScroll,v as defineCustomElement}

package/dist/components/mds-hr.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as o,Host as r,transformTag as s}from"@stencil/core/internal/client";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return o(r,{key:"c58a2de198d533e91d8bd077c444e0744933c25a"})}static get style(){return"@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(: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}:host{background-color:rgb(var(--tone-neutral-08,107 107 107));border:0;border-radius:1000px;display:flex;height:1px;width:100%}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){background-color:rgb(var(--tone-neutral-07,134 134 134))}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){background-color:rgb(var(--tone-neutral-07,134 134 134))}}"}},[1,"mds-hr"]),i=n,a=function(){"undefined"!=typeof customElements&&["mds-hr"].forEach((e=>{"mds-hr"===e&&(customElements.get(s(e))||customElements.define(s(e),n))}))};export{i as MdsHr,a as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as r,Host as s,transformTag as o}from"@stencil/core/internal/client";import{s as n}from"./preference.js";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}connectedCallback(){this.unsubscribePrefTheme=n("theme",(e=>{this.prefTheme=e})),this.unsubscribePrefThemeScheme=n("theme-scheme",(e=>{this.prefThemeScheme=e}))}disconnectedCallback(){var e,t;null===(e=this.unsubscribePrefTheme)||void 0===e||e.call(this),null===(t=this.unsubscribePrefThemeScheme)||void 0===t||t.call(this)}render(){return r(s,{key:"655c896905ebfdb8f5a170f108f338edde6a4d4f","pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme})}static get style(){return"@layer reset,vendor,theme,base,components,utilities;:host(: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}:host{background-color:rgb(var(--tone-neutral-08,107 107 107));border:0;border-radius:1000px;display:flex;height:1px;width:100%}:host([pref-theme=dark]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-07,134 134 134))}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-07,134 134 134))}}"}},[1,"mds-hr",{prefTheme:[32],prefThemeScheme:[32]}]),h=i,d=function(){"undefined"!=typeof customElements&&["mds-hr"].forEach((e=>{"mds-hr"===e&&(customElements.get(o(e))||customElements.define(o(e),i))}))};export{h as MdsHr,d as defineCustomElement}

package/dist/components/mds-icon2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{I as o}from"./icons-set.service.js";const r="data:image/svg+xml;base64,",a=e=>!!e&&e.startsWith(r),l=e=>!!e&&e.startsWith("<svg "),m=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.convertBase64ToSvg=()=>{const e=this.name.replace(r,"").replace(/=/i,"");return atob(e)}}componentWillLoad(){this.updateIcon(),o.registerListener((()=>this.updateIcon()))}static setSvgPathStatic(e){o.setSvgPath(e)}async setSvgPath(e){o.setSvgPath(e)}async updateIcon(){return""===this.name?Promise.resolve():a(this.name)?(this.svgHTML=this.convertBase64ToSvg(),Promise.resolve()):l(this.name)?(this.svgHTML=this.name,Promise.resolve()):void(this.svgHTML=await o.fetchSvg(this.name))}render(){return s(i,{key:"adb18482be69f88c754a524b4554574c71d253e8"},this.svgHTML&&s("i",{key:"434a961761ac22d193bccfa8fbb8f5fca7d1d61e","aria-hidden":"true",class:"icon",part:"svg",innerHTML:this.svgHTML}))}get hostElement(){return this}static get watchers(){return{name:[{updateIcon: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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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;:host(: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}:host{align-items:center;aspect-ratio:var(--aspect-square,1/1);display:inline-flex;justify-content:center;width:calc(var(--spacing,.0025rem)*600)}.icon{align-items:center;display:inline-flex;font-style:normal;justify-content:center;width:100%}.icon svg{height:auto;width:100%}"}},[1,"mds-icon",{name:[513],svgHTML:[32],_iconHref:[32],setSvgPath:[64]},void 0,{name:[{updateIcon:0}]}]);function c(){"undefined"!=typeof customElements&&["mds-icon"].forEach((e=>{"mds-icon"===e&&(customElements.get(n(e))||customElements.define(n(e),m))}))}export{m as M,l as a,c as d,a as i}
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{I as o}from"./icons-set.service.js";const a="data:image/svg+xml;base64,",r=t=>!!t&&t.startsWith(a),c=t=>!!t&&t.startsWith("<svg "),d=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.convertBase64ToSvg=()=>{const t=this.name.replace(a,"").replace(/=/i,"");return atob(t)}}componentWillLoad(){this.updateIcon(),o.registerListener((()=>this.updateIcon()))}async setSvgPath(t){return o.setSvgPath(t),Promise.resolve()}async updateIcon(){return""===this.name?Promise.resolve():r(this.name)?(this.svgHTML=this.convertBase64ToSvg(),Promise.resolve()):c(this.name)?(this.svgHTML=this.name,Promise.resolve()):void(this.svgHTML=await o.fetchSvg(this.name))}render(){return s(i,{key:"8d95b94dbe7f22e136567cb681e44479f5c1be7a"},this.svgHTML&&s("i",{key:"e9808177023e9521abf570b85302b65e43f9e0d8","aria-hidden":"true",class:"icon",part:"svg",innerHTML:this.svgHTML}))}get hostElement(){return this}static get watchers(){return{name:[{updateIcon:0}]}}static get style(){return"@layer reset,vendor,theme,base,components,utilities;:host(: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}:host{align-items:center;aspect-ratio:var(--aspect-square,1/1);display:inline-flex;justify-content:center;width:calc(var(--spacing,.0025rem)*600)}.icon{align-items:center;display:inline-flex;font-style:normal;justify-content:center;width:100%}.icon svg{height:auto;width:100%}"}},[1,"mds-icon",{name:[513],svgHTML:[32],_iconHref:[32],setSvgPath:[64]},void 0,{name:[{updateIcon:0}]}]);function h(){"undefined"!=typeof customElements&&["mds-icon"].forEach((t=>{"mds-icon"===t&&(customElements.get(n(t))||customElements.define(n(t),d))}))}export{d as M,c as a,h as d,r as i}

package/dist/components/mds-img2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as r,Host as i,transformTag as o}from"@stencil/core/internal/client";import{s as a}from"./aria.js";import{b as n}from"./panorama.js";import{m}from"./broken-image.js";import{L as l}from"./locale.js";import{d as c}from"./mds-button2.js";import{d}from"./mds-icon2.js";import{d as h}from"./mds-spinner2.js";import{d as u}from"./mds-text2.js";var p={clickToLoad:"Φόρτωση εικόνας"},b={clickToLoad:"Load image"},v={clickToLoad:"Cargar imagen"},g={clickToLoad:"Carica immagine"};const y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.loadErrorEvent=s(this,"mdsImgLoadError",7),this.loadSuccessEvent=s(this,"mdsImgLoadSuccess",7),this.imageConsumptionLoaded=!1,this.imageError=!1,this.consumptionMode="high",this.t=new l({el:p,en:b,es:v,it:g}),this.alt="",this.crossorigin="use-credentials",this.loading="lazy",this.referrerpolicy="no-referrer-when-downgrade",this.onSuccess=e=>{this.image=e.target,this.loadSuccessEvent.emit({image:this.image})},this.onError=e=>{this.image=e.target,this.loadErrorEvent.emit({image:this.image}),this.imageError=!0},this.formatConsumptionData=e=>{const t={};return e.split(",").forEach((e=>{const s=e.trim().replace(/[ ]{2,}/g," ").split(" ");"low"===s[1].toLocaleLowerCase()&&(t.low=s[0]),"medium"===s[1].toLocaleLowerCase()&&(t.medium=s[0]),"high"===s[1].toLocaleLowerCase()&&(t.high=s[0])})),t},this.autoAltName=()=>{if(""!==this.src){const e=this.src.lastIndexOf("/")+1;return this.src.substring(e)}return""},this.setAriaAttributes=()=>{a(this.host,"aria-label",this.alt)}}async updateLang(){this.language=this.t.lang(this.host)}srcsetConsumptionHandler(e){this.srcsetConsumptionData=this.formatConsumptionData(e)}srcHandler(){this.imageError=!1}componentWillLoad(){var e;this.consumptionMode=null!==(e=localStorage.getItem("mdsPrefConsumption"))&&void 0!==e?e:"high",void 0!==this.srcsetConsumption&&""!==this.srcsetConsumption&&(this.srcsetConsumptionData=this.formatConsumptionData(this.srcsetConsumption)),this.image=this.host.querySelector("img"),""===this.alt&&(this.alt=this.autoAltName())}componentWillRender(){this.t.lang(this.host)}componentDidLoad(){this.setAriaAttributes()}render(){var e,t;return this.imageError?r(i,{"aria-label":this.alt,role:"img"},r("div",{class:"contrast-area-50"}),r("div",{class:"alt-text-container alt-text-container--error alt-text-container--default-aspect-ratio"},r("mds-icon",{class:"icon",name:m}),r("mds-text",{class:"alt-text","aria-hidden":"true",typography:"h6"},r("i",null,this.alt)))):this.srcsetConsumptionData?"low"===this.consumptionMode?r(i,{"aria-label":this.alt,role:"img",onClick:()=>{this.imageConsumptionLoaded=!0}},r("div",{class:"contrast-area-50"}),this.imageConsumptionLoaded?r("img",{alt:this.alt,"aria-hidden":"true",height:this.height,loading:this.loading,onError:this.onError,onLoad:this.onSuccess,part:"media",sizes:this.sizes,src:null!==(e=this.srcsetConsumptionData[this.consumptionMode])&&void 0!==e?e:this.src,srcset:this.srcset,width:this.width}):r("div",{"aria-hidden":"true",class:"alt-text-container alt-text-container--default-aspect-ratio"},r("mds-icon",{class:"icon",name:n}),r("mds-text",{class:"alt-text",typography:"h6"},r("i",null,this.alt)),r("mds-button",{"aria-hidden":"true",role:"none",class:"click-to-load",tabIndex:-1,variant:"light",tone:"outline"},this.t.get("clickToLoad")))):r(i,{"aria-label":this.alt,role:"img"},r("div",{class:"contrast-area-50"}),r("img",{alt:this.alt,"aria-hidden":"true",height:this.height,loading:this.loading,onError:this.onError,onLoad:this.onSuccess,part:"media",sizes:this.sizes,src:null!==(t=this.srcsetConsumptionData[this.consumptionMode])&&void 0!==t?t:this.src,srcset:this.srcset,width:this.width})):r(i,{"aria-label":this.alt,role:"img"},r("div",{class:"contrast-area-50"}),r("img",{alt:this.alt,"aria-hidden":"true",height:this.height,loading:this.loading,onError:this.onError,onLoad:this.onSuccess,part:"media",sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))}get host(){return this}static get watchers(){return{srcsetConsumption:[{srcsetConsumptionHandler:0}],src:[{srcHandler: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 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 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 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 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-img-background:rgb(var(--variant-primary-03,211 226 255));--mds-img-color:rgb(var(--variant-primary-09,0 58 168));--mds-img-icon-color:rgb(var(--variant-primary-07,44 117 255));--mds-img-error-background:rgb(var(--status-error-09,135 0 14));--mds-img-error-color:rgb(var(--status-error-04,254 193 189));--mds-img-error-icon-color:rgb(var(--status-error-06,239 108 105))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-icon,mds-text):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}:host{--mds-img-background:rgb(var(--variant-primary-03,211 226 255));--mds-img-color:rgb(var(--variant-primary-09,0 58 168));--mds-img-icon-color:rgb(var(--variant-primary-07,44 117 255));--mds-img-error-background:rgb(var(--status-error-09,135 0 14));--mds-img-error-color:rgb(var(--status-error-04,254 193 189));--mds-img-error-icon-color:rgb(var(--status-error-06,239 108 105));display:flex;height:auto;-o-object-fit:contain;object-fit:contain;overflow:hidden;position:relative;width:100%}img{height:inherit;-o-object-fit:inherit;object-fit:inherit;width:inherit}.alt-text-container{align-items:center;background-color:var(--mds-img-background,rgb(var(--variant-primary-03,211 226 255)));color:var(--mds-img-color,rgb(var(--variant-primary-09,0 58 168)));display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*600);justify-content:center;padding:calc(var(--spacing,.0025rem)*600);text-align:center}.alt-text-container--absolute{cursor:pointer;inset:0;position:absolute}.alt-text-container--error{--mds-img-background:var(--mds-img-error-background,rgb(var(--status-error-09,135 0 14)));--mds-img-color:var(--mds-img-error-color,rgb(var(--status-error-04,254 193 189)));--mds-img-icon-color:var(--mds-img-error-icon-color,rgb(var(--status-error-06,239 108 105)));cursor:not-allowed}.alt-text-container--default-aspect-ratio{cursor:pointer;width:100%}.click-to-load{pointer-events:none}.icon{fill:var(--mds-img-icon-color,rgb(var(--variant-primary-07,44 117 255)));width:calc(var(--spacing,.0025rem)*900)}"}},[1,"mds-img",{alt:[1537],crossorigin:[1],height:[1],loading:[1],referrerpolicy:[1],sizes:[1],src:[1],srcset:[1],srcsetConsumption:[1,"srcset-consumption"],width:[1],imageConsumptionLoaded:[32],imageError:[32],language:[32],updateLang:[64]},void 0,{srcsetConsumption:[{srcsetConsumptionHandler:0}],src:[{srcHandler:0}]}]);function f(){"undefined"!=typeof customElements&&["mds-img","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-img":customElements.get(o(e))||customElements.define(o(e),y);break;case"mds-button":customElements.get(o(e))||c();break;case"mds-icon":customElements.get(o(e))||d();break;case"mds-spinner":customElements.get(o(e))||h();break;case"mds-text":customElements.get(o(e))||u()}}))}export{y as M,f as d}
+import{proxyCustomElement as t,HTMLElement as r,createEvent as i,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{s as e}from"./aria.js";import{b as n}from"./panorama.js";import{m as c}from"./broken-image.js";import{L as d}from"./locale.js";import{d as m}from"./mds-button2.js";import{d as h}from"./mds-icon2.js";import{d as l}from"./mds-spinner2.js";import{d as g}from"./mds-text2.js";var u={clickToLoad:"Φόρτωση εικόνας"},p={clickToLoad:"Load image"},b={clickToLoad:"Cargar imagen"},v={clickToLoad:"Carica immagine"};const f=t(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.loadErrorEvent=i(this,"mdsImgLoadError",7),this.loadSuccessEvent=i(this,"mdsImgLoadSuccess",7),this.imageConsumptionLoaded=!1,this.imageError=!1,this.consumptionMode="high",this.t=new d({el:u,en:p,es:b,it:v}),this.alt="",this.crossorigin="use-credentials",this.loading="lazy",this.referrerpolicy="no-referrer-when-downgrade",this.onSuccess=t=>{this.image=t.target,this.loadSuccessEvent.emit({image:this.image})},this.onError=t=>{this.image=t.target,this.loadErrorEvent.emit({image:this.image}),this.imageError=!0},this.formatConsumptionData=t=>{const r={};return t.split(",").forEach((t=>{const i=t.trim().replace(/[ ]{2,}/g," ").split(" ");"low"===i[1].toLocaleLowerCase()&&(r.low=i[0]),"medium"===i[1].toLocaleLowerCase()&&(r.medium=i[0]),"high"===i[1].toLocaleLowerCase()&&(r.high=i[0])})),r},this.autoAltName=()=>{if(""!==this.src){const t=this.src.lastIndexOf("/")+1;return this.src.substring(t)}return""},this.setAriaAttributes=()=>{e(this.host,"aria-label",this.alt)},this.handleConsumptionLoadClick=()=>{this.imageConsumptionLoaded=!0}}async updateLang(){this.language=this.t.lang(this.host)}srcsetConsumptionHandler(t){this.srcsetConsumptionData=this.formatConsumptionData(t)}srcHandler(){this.imageError=!1}componentWillLoad(){var t;this.consumptionMode=null!==(t=localStorage.getItem("mdsPrefConsumption"))&&void 0!==t?t:"high",void 0!==this.srcsetConsumption&&""!==this.srcsetConsumption&&(this.srcsetConsumptionData=this.formatConsumptionData(this.srcsetConsumption)),this.image=this.host.querySelector("img"),""===this.alt&&(this.alt=this.autoAltName())}componentWillRender(){this.t.lang(this.host)}componentDidLoad(){this.setAriaAttributes()}render(){var t,r;return this.imageError?s(a,{"aria-label":this.alt,role:"img"},s("div",{class:"contrast-area-50"}),s("div",{class:"alt-text-container alt-text-container--error alt-text-container--default-aspect-ratio"},s("mds-icon",{class:"icon",name:c}),s("mds-text",{class:"alt-text","aria-hidden":"true",typography:"h6"},s("i",null,this.alt)))):this.srcsetConsumptionData?"low"===this.consumptionMode?s(a,{"aria-label":this.alt,role:"img",onClick:this.handleConsumptionLoadClick},s("div",{class:"contrast-area-50"}),this.imageConsumptionLoaded?s("img",{alt:this.alt,"aria-hidden":"true",height:this.height,loading:this.loading,onError:this.onError,onLoad:this.onSuccess,part:"media",sizes:this.sizes,src:null!==(t=this.srcsetConsumptionData[this.consumptionMode])&&void 0!==t?t:this.src,srcset:this.srcset,width:this.width}):s("div",{"aria-hidden":"true",class:"alt-text-container alt-text-container--default-aspect-ratio"},s("mds-icon",{class:"icon",name:n}),s("mds-text",{class:"alt-text",typography:"h6"},s("i",null,this.alt)),s("mds-button",{"aria-hidden":"true",role:"none",class:"click-to-load",tabIndex:-1,variant:"light",tone:"outline"},this.t.get("clickToLoad")))):s(a,{"aria-label":this.alt,role:"img"},s("div",{class:"contrast-area-50"}),s("img",{alt:this.alt,"aria-hidden":"true",height:this.height,loading:this.loading,onError:this.onError,onLoad:this.onSuccess,part:"media",sizes:this.sizes,src:null!==(r=this.srcsetConsumptionData[this.consumptionMode])&&void 0!==r?r:this.src,srcset:this.srcset,width:this.width})):s(a,{"aria-label":this.alt,role:"img"},s("div",{class:"contrast-area-50"}),s("img",{alt:this.alt,"aria-hidden":"true",height:this.height,loading:this.loading,onError:this.onError,onLoad:this.onSuccess,part:"media",sizes:this.sizes,src:this.src,srcset:this.srcset,width:this.width}))}get host(){return this}static get watchers(){return{srcsetConsumption:[{srcsetConsumptionHandler:0}],src:[{srcHandler:0}]}}static get style(){return"@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-img-background:rgb(var(--variant-primary-03,211 226 255));--mds-img-color:rgb(var(--variant-primary-09,0 58 168));--mds-img-icon-color:rgb(var(--variant-primary-07,44 117 255));--mds-img-error-background:rgb(var(--status-error-09,135 0 14));--mds-img-error-color:rgb(var(--status-error-04,254 193 189));--mds-img-error-icon-color:rgb(var(--status-error-06,239 108 105))}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-icon,mds-text):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}:host{--mds-img-background:rgb(var(--variant-primary-03,211 226 255));--mds-img-color:rgb(var(--variant-primary-09,0 58 168));--mds-img-icon-color:rgb(var(--variant-primary-07,44 117 255));--mds-img-error-background:rgb(var(--status-error-09,135 0 14));--mds-img-error-color:rgb(var(--status-error-04,254 193 189));--mds-img-error-icon-color:rgb(var(--status-error-06,239 108 105));display:flex;height:auto;-o-object-fit:contain;object-fit:contain;overflow:hidden;position:relative;width:100%}img{height:inherit;-o-object-fit:inherit;object-fit:inherit;width:inherit}.alt-text-container{align-items:center;background-color:var(--mds-img-background,rgb(var(--variant-primary-03,211 226 255)));color:var(--mds-img-color,rgb(var(--variant-primary-09,0 58 168)));display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*600);justify-content:center;padding:calc(var(--spacing,.0025rem)*600);text-align:center}.alt-text-container--absolute{cursor:pointer;inset:0;position:absolute}.alt-text-container--error{--mds-img-background:var(--mds-img-error-background,rgb(var(--status-error-09,135 0 14)));--mds-img-color:var(--mds-img-error-color,rgb(var(--status-error-04,254 193 189)));--mds-img-icon-color:var(--mds-img-error-icon-color,rgb(var(--status-error-06,239 108 105)));cursor:not-allowed}.alt-text-container--default-aspect-ratio{cursor:pointer;width:100%}.click-to-load{pointer-events:none}.icon{fill:var(--mds-img-icon-color,rgb(var(--variant-primary-07,44 117 255)));width:calc(var(--spacing,.0025rem)*900)}"}},[1,"mds-img",{alt:[1537],crossorigin:[1],height:[1],loading:[1],referrerpolicy:[1],sizes:[1],src:[1],srcset:[1],srcsetConsumption:[1,"srcset-consumption"],width:[1],imageConsumptionLoaded:[32],imageError:[32],language:[32],updateLang:[64]},void 0,{srcsetConsumption:[{srcsetConsumptionHandler:0}],src:[{srcHandler:0}]}]);function y(){"undefined"!=typeof customElements&&["mds-img","mds-button","mds-icon","mds-spinner","mds-text"].forEach((t=>{switch(t){case"mds-img":customElements.get(o(t))||customElements.define(o(t),f);break;case"mds-button":customElements.get(o(t))||m();break;case"mds-icon":customElements.get(o(t))||h();break;case"mds-spinner":customElements.get(o(t))||l();break;case"mds-text":customElements.get(o(t))||g()}}))}export{f as M,y as d}

package/dist/components/mds-input-date-range-preselection.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as r,h as t,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./mds-button2.js";import{d as s}from"./mds-icon2.js";import{d}from"./mds-spinner2.js";import{d as i}from"./mds-text2.js";const l=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.onClick=e=>{var r;e.stopPropagation();const t=null===(r=this.host)||void 0===r?void 0:r.closest("mds-input-date-range");t&&(t.preselect({caller:this.host,start:this.start,end:this.end}),this.selected=!0)}}render(){return t(a,{key:"e5571b251d0b86eccf975c07af016fd0e25387d3",slot:"calendar-preselection"},t("mds-button",{key:"95b8be91464b8e283c623c191514f7c293b941af",onClick:this.onClick,class:"action",variant:"primary",tone:"strong"},t("slot",{key:"6a96b556f736d867ab858ffba7307c45fb15dd65"})))}get host(){return this}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 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-date-range-preselection-default-background:rgb(var(--tone-neutral-08,107 107 107)/0);--mds-date-range-preselection-default-border:var(--tone-neutral-08,107 107 107);--mds-date-range-preselection-default-color:rgb(var(--tone-neutral-03,233 233 233));--mds-date-range-preselection-selected-background:rgb(var(--variant-primary-03,211 226 255));--mds-date-range-preselection-selected-border:var(--variant-primary-03,211 226 255);--mds-date-range-preselection-selected-color:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-background:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-border:var(--tone-neutral,0 0 0);--mds-date-range-preselection-hover-color:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button: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}:host{--mds-date-range-preselection-default-background:rgb(var(--tone-neutral-08,107 107 107)/0);--mds-date-range-preselection-default-border:var(--tone-neutral-08,107 107 107);--mds-date-range-preselection-default-color:rgb(var(--tone-neutral-03,233 233 233));--mds-date-range-preselection-selected-background:rgb(var(--variant-primary-03,211 226 255));--mds-date-range-preselection-selected-border:var(--variant-primary-03,211 226 255);--mds-date-range-preselection-selected-color:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-background:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-border:var(--tone-neutral,0 0 0);--mds-date-range-preselection-hover-color:rgb(var(--tone-neutral-03,233 233 233));--mds-date-range-preselection-background:var(--mds-date-range-preselection-default-background,rgb(var(--tone-neutral-08,107 107 107)/0));--mds-date-range-preselection-border:var(--mds-date-range-preselection-default-border,var(--tone-neutral-08,107 107 107));--mds-date-range-preselection-color:var(--mds-date-range-preselection-default-color,rgb(var(--tone-neutral-03,233 233 233)));display:inline-flex;justify-self:start}:host .action{--mds-button-background:var(--mds-date-range-preselection-background);--mds-button-border-color:var(--mds-date-range-preselection-border);--mds-button-color:var(--mds-date-range-preselection-color)}:host .action:hover{--mds-date-range-preselection-background:var(--mds-date-range-preselection-hover-background,rgb(var(--tone-neutral,0 0 0)));--mds-date-range-preselection-border:var(--mds-date-range-preselection-hover-border,var(--tone-neutral,0 0 0));--mds-date-range-preselection-color:var(--mds-date-range-preselection-hover-color,rgb(var(--tone-neutral-03,233 233 233)))}:host([selected]) .action{--mds-date-range-preselection-background:var(--mds-date-range-preselection-selected-background,rgb(var(--variant-primary-03,211 226 255)));--mds-date-range-preselection-border:var(--mds-date-range-preselection-selected-border,var(--variant-primary-03,211 226 255));--mds-date-range-preselection-color:var(--mds-date-range-preselection-selected-color,rgb(var(--tone-neutral,0 0 0)));pointer-events:none}"}},[257,"mds-input-date-range-preselection",{selected:[1540],start:[513],end:[513]}]),c=l,m=function(){"undefined"!=typeof customElements&&["mds-input-date-range-preselection","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-input-date-range-preselection":customElements.get(n(e))||customElements.define(n(e),l);break;case"mds-button":customElements.get(n(e))||o();break;case"mds-icon":customElements.get(n(e))||s();break;case"mds-spinner":customElements.get(n(e))||d();break;case"mds-text":customElements.get(n(e))||i()}}))};export{c as MdsInputDateRangePreselection,m as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as r,h as t,Host as a,transformTag as n}from"@stencil/core/internal/client";import{d as o}from"./mds-button2.js";import{d as s}from"./mds-icon2.js";import{d}from"./mds-spinner2.js";import{d as l}from"./mds-text2.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.onClick=e=>{var r;e.stopPropagation();const t=null===(r=this.host)||void 0===r?void 0:r.closest("mds-input-date-range");t&&(t.preselect({caller:this.host,start:this.start,end:this.end}),this.selected=!0)}}render(){return t(a,{key:"e5571b251d0b86eccf975c07af016fd0e25387d3",slot:"calendar-preselection"},t("mds-button",{key:"95b8be91464b8e283c623c191514f7c293b941af",onClick:this.onClick,class:"action",variant:"primary",tone:"strong"},t("slot",{key:"6a96b556f736d867ab858ffba7307c45fb15dd65"})))}get host(){return this}static get style(){return"@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-date-range-preselection-default-background:rgb(var(--tone-neutral-08,107 107 107)/0);--mds-date-range-preselection-default-border:var(--tone-neutral-08,107 107 107);--mds-date-range-preselection-default-color:rgb(var(--tone-neutral-03,233 233 233));--mds-date-range-preselection-selected-background:rgb(var(--variant-primary-03,211 226 255));--mds-date-range-preselection-selected-border:var(--variant-primary-03,211 226 255);--mds-date-range-preselection-selected-color:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-background:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-border:var(--tone-neutral,0 0 0);--mds-date-range-preselection-hover-color:rgb(var(--tone-neutral-03,233 233 233))}}}:host(:not(:is([hydrated],.hydrated))),mds-button: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}:host{--mds-date-range-preselection-default-background:rgb(var(--tone-neutral-08,107 107 107)/0);--mds-date-range-preselection-default-border:var(--tone-neutral-08,107 107 107);--mds-date-range-preselection-default-color:rgb(var(--tone-neutral-03,233 233 233));--mds-date-range-preselection-selected-background:rgb(var(--variant-primary-03,211 226 255));--mds-date-range-preselection-selected-border:var(--variant-primary-03,211 226 255);--mds-date-range-preselection-selected-color:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-background:rgb(var(--tone-neutral,0 0 0));--mds-date-range-preselection-hover-border:var(--tone-neutral,0 0 0);--mds-date-range-preselection-hover-color:rgb(var(--tone-neutral-03,233 233 233));--mds-date-range-preselection-background:var(--mds-date-range-preselection-default-background,rgb(var(--tone-neutral-08,107 107 107)/0));--mds-date-range-preselection-border:var(--mds-date-range-preselection-default-border,var(--tone-neutral-08,107 107 107));--mds-date-range-preselection-color:var(--mds-date-range-preselection-default-color,rgb(var(--tone-neutral-03,233 233 233)));display:inline-flex;justify-self:start}:host .action{--mds-button-background:var(--mds-date-range-preselection-background);--mds-button-border-color:var(--mds-date-range-preselection-border);--mds-button-color:var(--mds-date-range-preselection-color)}:host .action:hover{--mds-date-range-preselection-background:var(--mds-date-range-preselection-hover-background,rgb(var(--tone-neutral,0 0 0)));--mds-date-range-preselection-border:var(--mds-date-range-preselection-hover-border,var(--tone-neutral,0 0 0));--mds-date-range-preselection-color:var(--mds-date-range-preselection-hover-color,rgb(var(--tone-neutral-03,233 233 233)))}:host([selected]) .action{--mds-date-range-preselection-background:var(--mds-date-range-preselection-selected-background,rgb(var(--variant-primary-03,211 226 255)));--mds-date-range-preselection-border:var(--mds-date-range-preselection-selected-border,var(--variant-primary-03,211 226 255));--mds-date-range-preselection-color:var(--mds-date-range-preselection-selected-color,rgb(var(--tone-neutral,0 0 0)));pointer-events:none}"}},[257,"mds-input-date-range-preselection",{selected:[1540],start:[513],end:[513]}]),i=c,m=function(){"undefined"!=typeof customElements&&["mds-input-date-range-preselection","mds-button","mds-icon","mds-spinner","mds-text"].forEach((e=>{switch(e){case"mds-input-date-range-preselection":customElements.get(n(e))||customElements.define(n(e),c);break;case"mds-button":customElements.get(n(e))||o();break;case"mds-icon":customElements.get(n(e))||s();break;case"mds-spinner":customElements.get(n(e))||d();break;case"mds-text":customElements.get(n(e))||l()}}))};export{i as MdsInputDateRangePreselection,m as defineCustomElement}