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

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

@@ -1,267 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as miBaselineArrowBack } from './arrow-back.js';
-import { m as miBaselineArrowForward } from './arrow-forward.js';
-import { c as clsx } from './clsx.js';
-import { a as cssSizeToNumber } from './unit.js';
-import { d as defineCustomElement$5 } from './mds-button2.js';
-import { d as defineCustomElement$4 } from './mds-icon2.js';
-import { d as defineCustomElement$3 } from './mds-spinner2.js';
-import { d as defineCustomElement$2 } from './mds-text2.js';
-
-const mdsHorizontalScrollCss = "@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,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}}";
-
-const MdsHorizontalScroll$1 = /*@__PURE__*/ proxyCustomElement(class MdsHorizontalScroll extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.hasCompatibility = true;
-        this.showForward = true;
-        this.showBack = false;
-        /**
-         * Specifies the viewport which will display navigation controls
-         */
-        this.controls = 'desktop';
-        /**
-         * Specifies the box’s snap position as an alignment of its snap area
-         */
-        this.navigation = 'position';
-        /**
-         * Specifies the box’s snap position as an alignment of its snap area
-         */
-        this.snap = 'start';
-        this.updateElements = () => {
-            var _a, _b;
-            this.elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
-        };
-        this.updateCSSCustomProps = () => {
-            if (typeof window === 'undefined')
-                return;
-            const elementStyles = window.getComputedStyle(this.host);
-            this.scrollGap = cssSizeToNumber(elementStyles.getPropertyValue('--mds-horizontal-scroll-gap'));
-        };
-        this.isInViewport = (element) => {
-            if (!this.contents) {
-                return false;
-            }
-            const spacerWidth = this.spacer.offsetWidth + this.scrollGap;
-            const rect = element.getBoundingClientRect();
-            const rectWrapper = this.contents.getBoundingClientRect();
-            return (rect.top >= 0 &&
-                rect.left >= spacerWidth &&
-                rect.bottom <= rectWrapper.height &&
-                rect.right <= rectWrapper.width - spacerWidth * 2);
-        };
-        // private isInViewportContents = (element: HTMLElement): boolean => {
-        //   if (!this.contents) {
-        //     return false
-        //   }
-        //   const spacerWidth = this.spacer.offsetWidth + this.scrollGap
-        //   const rect = element.getBoundingClientRect()
-        //   const rectWrapper = this.contents.getBoundingClientRect()
-        //   return (
-        //     rect.top >= 0 &&
-        //     rect.left >= spacerWidth &&
-        //     rect.bottom <= rectWrapper.height &&
-        //     rect.right <= rectWrapper.width - spacerWidth * 2
-        //   )
-        // }
-        this.checkNavigationButtons = () => {
-            if (!this.elements) {
-                throw Error('No elements slotted to the component');
-            }
-            this.showBack = true;
-            this.showForward = true;
-            this.elements.forEach((element, index) => {
-                if (index === 0 && this.isInViewport(element)) {
-                    this.showBack = false;
-                }
-                if (this.elements.length - 1 === index && this.isInViewport(element)) {
-                    this.showForward = false;
-                }
-            });
-        };
-        this.moveBack = () => {
-            if (!this.elements) {
-                throw Error('No elements slotted to the component');
-            }
-            let firstIndex = 0;
-            let elFirstInViewport;
-            let elLastInViewport;
-            this.elements.forEach((element, index) => {
-                // element.style.backgroundColor = 'transparent'
-                if (this.isInViewport(element)) {
-                    if (!elFirstInViewport) {
-                        firstIndex = index;
-                        elFirstInViewport = element;
-                    }
-                    // element.style.backgroundColor = 'red'
-                    elLastInViewport = element;
-                }
-            });
-            this.elements.forEach((element, index) => {
-                if (!this.isInViewport(element) &&
-                    index === firstIndex - 1 &&
-                    elFirstInViewport !== undefined &&
-                    elLastInViewport !== undefined) {
-                    // element.style.backgroundColor = 'red'
-                    this.contents.scrollLeft =
-                        this.contents.scrollLeft +
-                            element.offsetLeft -
-                            elLastInViewport.offsetLeft -
-                            elFirstInViewport.offsetWidth -
-                            this.scrollGap;
-                }
-            });
-        };
-        this.moveForward = () => {
-            if (!this.elements) {
-                throw Error('No elements slotted to the component');
-            }
-            let isFirstOutside = true;
-            this.elements.forEach((element) => {
-                // element.style.backgroundColor = 'white'
-                if (!this.isInViewport(element)) {
-                    if (element.offsetLeft > this.contents.scrollLeft && isFirstOutside) {
-                        isFirstOutside = false;
-                        // element.style.backgroundColor = 'red'
-                        this.lastElementOffsetLeft = element.offsetLeft;
-                        this.contents.scrollLeft = this.lastElementOffsetLeft;
-                    }
-                }
-            });
-        };
-        this.translateNavigationDot = () => {
-            if (!this.elements || !this.contents || !this.navigationDot || !this.navigationDots) {
-                console.error('mds-horizontal-scroll.translateNavigationDot: One of the shadowRoot elements is missing.');
-                return;
-            }
-            const { scrollLeft, scrollWidth, offsetWidth } = this.contents;
-            const navigationStyles = window.getComputedStyle(this.navigationDots);
-            const paddingLeft = parseFloat(navigationStyles.paddingLeft) || 0;
-            const paddingRight = parseFloat(navigationStyles.paddingRight) || 0;
-            const navigationWidth = this.navigationDots.offsetWidth - paddingLeft - paddingRight;
-            const dotWidth = this.navigationDot.offsetWidth;
-            if (offsetWidth === 0 || scrollWidth === 0) {
-                console.error('mds-horizontal-scroll.translateNavigationDot: offsetWidth or scrollWidth is 0, impossible to calculate position');
-                return;
-            }
-            // Calcolo della posizione normalizzata
-            const maxScrollLeft = scrollWidth - offsetWidth;
-            const normalizedScroll = scrollLeft / maxScrollLeft; // Valore tra 0 e 1
-            const maxTranslate = navigationWidth - dotWidth; // Limite massimo di spostamento
-            const translationX = normalizedScroll * maxTranslate;
-            this.navigationDot.style.transform = `translateX(${translationX}px)`;
-        };
-        this.updateNavigationDotSize = () => {
-            if (!this.contents || !this.navigationDot || !this.navigationDots) {
-                console.error('mds-horizontal-scroll.updateNavigationDotSize: One of the shadowRoot elements is missing.');
-                return;
-            }
-            const { scrollWidth, offsetWidth } = this.contents;
-            const navigationWidth = this.navigationDots.offsetWidth;
-            if (scrollWidth <= offsetWidth) {
-                // Se non c'è scroll, il dot occupa tutto lo spazio
-                this.navigationDot.style.width = `${navigationWidth}px`;
-                return;
-            }
-            // Calcolo proporzionale
-            const dotWidth = (offsetWidth / scrollWidth) * navigationWidth;
-            this.navigationDot.style.width = `${dotWidth}px`;
-        };
-        this.addNavigationDots = () => {
-            var _a, _b;
-            this.contents.removeEventListener('scroll', this.translateNavigationDot);
-            this.navigationDot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dot');
-            this.navigationDots = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.dot-navigation');
-            this.updateNavigationDotSize();
-            if (!this.navigationDot)
-                return;
-            this.contents.addEventListener('scroll', this.translateNavigationDot);
-        };
-    }
-    watchNavigation(newValue) {
-        if (newValue === 'position') {
-            this.addNavigationDots();
-        }
-    }
-    componentWillLoad() {
-        this.updateCSSCustomProps();
-    }
-    componentDidLoad() {
-        var _a, _b;
-        this.contents = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.contents');
-        this.spacer = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.spacer');
-        if (this.navigation === 'position')
-            this.addNavigationDots();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (window && typeof window.onscrollend !== 'undefined') {
-            this.contents.addEventListener('scrollend', this.checkNavigationButtons);
-        }
-        else {
-            if (this.controls)
-                this.controls = undefined;
-        }
-    }
-    disconnectedCallback() {
-        this.contents.removeEventListener('scrollend', this.checkNavigationButtons);
-        this.contents.removeEventListener('scroll', this.translateNavigationDot);
-    }
-    render() {
-        return (h(Host, { key: '4520b825ea6fcd3dce1f0207e03c3c434e6ea96a' }, h("div", { key: '203d92b0b3b850b4bad295682e3f769d6dfd03ba', class: "contents", part: "content" }, h("div", { key: '78a013d06726742419fbd61eea9c568cb0f8a649', class: "spacer" }), h("slot", { key: '1ae791267b68c05f2ea1ed218624e4bc600f927e', onSlotchange: this.updateElements }), h("div", { key: 'bbb1876c42feecbf622c8ae740e4ae1a88ffb247', class: "spacer" })), h("div", { key: '04b7204347fe8101dfa8ac2ba3b57ae8c2e4e631', class: "dot-navigation" }, h("div", { key: 'b37d218d314c67b9cc28cd5800987d1803f88e8e', class: "dot" })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '57061c22ce779c72d2655925b79507a29bfdc69f', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '64a0806aedb65a722378e3b8081e7dc2a5be915d', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "navigation": ["watchNavigation"]
-    }; }
-    static get style() { return mdsHorizontalScrollCss; }
-}, [257, "mds-horizontal-scroll", {
-        "controls": [1537],
-        "navigation": [513],
-        "snap": [513],
-        "hasCompatibility": [32],
-        "showForward": [32],
-        "showBack": [32]
-    }, undefined, {
-        "navigation": ["watchNavigation"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-horizontal-scroll", "mds-button", "mds-icon", "mds-spinner", "mds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-horizontal-scroll":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsHorizontalScroll$1);
-            }
-            break;
-        case "mds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mds-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mds-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const MdsHorizontalScroll = MdsHorizontalScroll$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsHorizontalScroll, defineCustomElement };
+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}

package/dist/components/mds-hr.js

@@ -1,35 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const mdsHrCss = "@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))}}";
-
-const MdsHr$1 = /*@__PURE__*/ proxyCustomElement(class MdsHr extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    render() {
-        return h(Host, { key: 'e1055c3a5074fb93c5b51ce658a5eced9516b231' });
-    }
-    static get style() { return mdsHrCss; }
-}, [257, "mds-hr"]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mds-hr"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mds-hr":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MdsHr$1);
-            }
-            break;
-    } });
-}
-
-const MdsHr = MdsHr$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MdsHr, defineCustomElement };
+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}

package/dist/components/mds-icon.js

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