@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-popover2.js

@@ -1,312 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, a as isValideID, t as toString, g as getWindows } from './index2.js';
-import { d as defineCustomElement$4 } from './mg-button2.js';
-import { d as defineCustomElement$3 } from './mg-card2.js';
-import { d as defineCustomElement$2 } from './mg-icon2.js';
-import { d as defineCustomElement$1 } from './mg-popover-content2.js';
-import { c as createPopper } from './popper.js';
-
-const mgPopoverCss = "/*!\n * @prop --mg-c-popover-color-background: Defines the background color of the popover. Default value: `--mg-b-color-light`.\n * @prop --mg-c-popover-color-text: Defines the font color of the popover. Default value: `--mg-b-color-font-dark`.\n * @prop --mg-c-popover-title-font-size: Defines the font size of the popover title. Default value: `--mg-b-font-size-h5`.\n * @prop --mg-c-popover-padding-vertical: Defines the vertical padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-padding-horizontal: Defines the horizontal padding of the popover. Default value: `unset`, fallback to `--mg-b-size-16`.\n * @prop --mg-c-popover-max-width: Defines the max-width of the popover. Default value: `--mg-b-size-floating-element-max-width`.\n * @prop --mg-c-popover-max-height: Defines the max-height of the popover. Default value: `unset`.\n * @prop --mg-c-popover-overflow: Defines the overflow property for the popover. Unset by default, fallback on `--mg-c-card-overflow`.\n * @prop --mg-c-popover-border-radius: Defines the border-radius of the popover. Default value: `--mg-c-card-border-radius-default`.\n * @prop --mg-c-popover-min-width: Defines the min-width of the popover. Default value: `unset`.\n */:host{--mg-c-card-spacing:var(--mg-c-popover-padding-vertical, var(--mg-b-size-16)) var(--mg-c-popover-padding-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-c-popover-border-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}";
-
-const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.displayChange = createEvent(this, "display-change", 7);
-        this.componentClose = createEvent(this, "component-close", 7);
-        /**
-         * Sets an `id` attribute.
-         * Needed by the input for accessibility `aria-decribedby`.
-         */
-        this.identifier = createID('mg-popover');
-        /**
-         * Popover placement
-         */
-        this.placement = 'bottom';
-        /**
-         * Hide popover arrow
-         */
-        this.arrowHide = false;
-        /**
-         * Define if popover has a cross button
-         */
-        this.closeButton = false;
-        /**
-         * Display popover
-         */
-        this.display = false;
-        /**
-         * Disable popover
-         */
-        this.disabled = false;
-        /**
-         * Check if clicked outside of component
-         * @param event - mouse event
-         */
-        this.clickOutside = (event) => {
-            if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`) === null) {
-                this.display = false;
-            }
-        };
-        /**
-         * Show popover
-         */
-        this.show = () => {
-            // Make the popover visible
-            this.mgPopover.dataset.show = '';
-            // Update aria-expanded
-            this.interactiveElement.setAttribute('aria-expanded', 'true');
-            // Enable the event listeners
-            this.setPopperListeners(true);
-            // hide when click outside
-            // setTimeout is used to prevent event to trigger after creation
-            setTimeout(() => {
-                this.manageClickOutsideListeners('addEventListener');
-            });
-        };
-        /**
-         * Hide popover
-         */
-        this.hide = () => {
-            // Hide the popover
-            this.mgPopover.removeAttribute('data-show');
-            // Update aria-expanded
-            this.interactiveElement.setAttribute('aria-expanded', 'false');
-            // Disable the event listeners
-            this.setPopperListeners(false);
-            // Remove event listener
-            this.manageClickOutsideListeners('removeEventListener');
-        };
-        /**
-         * Set popper listeners
-         * @param newValue - if true enable popper listners
-         */
-        this.setPopperListeners = (newValue) => {
-            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
-        };
-        /**
-         * Manage all clickOustside listeners
-         * @param action - top process on elements listeners
-         */
-        this.manageClickOutsideListeners = (action) => {
-            var _a, _b;
-            // clickOutside listeners need to bind windows
-            // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component
-            // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.
-            // This result in the givern junction :
-            // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot =  Windows > document > [data-mg-popover-guard] > shadowRoot
-            const guardChildren = Array.from(((_b = (_a = document.querySelector(`[data-mg-popover-guard="${this.identifier}"]`)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.children) || new Set());
-            [...guardChildren, ...this.windows].forEach((element) => {
-                if (element !== null) {
-                    element[action]('click', this.clickOutside, false);
-                }
-            });
-        };
-        /**
-         * Handle content hide event
-         */
-        this.handleHideContent = () => {
-            this.display = false;
-            this.componentClose.emit();
-        };
-        /**
-         * Render popover content element
-         */
-        this.renderPopoverContent = () => {
-            const mgPopoverContent = this.element.querySelector('mg-popover-content');
-            if (mgPopoverContent === null) {
-                this.mgPopoverContent = document.createElement('mg-popover-content');
-                this.mgPopoverContent.setAttribute('slot', 'content');
-                this.mgPopoverContent.setAttribute('id', this.identifier);
-                this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
-                const arrow = document.createElement('div');
-                arrow.setAttribute('slot', 'arrow');
-                arrow.dataset.popperArrow = '';
-                this.mgPopoverContent.appendChild(arrow);
-                // insert elements in DOM
-                ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
-                    Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
-                        this.mgPopoverContent.appendChild(slot);
-                    });
-                });
-                this.element.appendChild(this.mgPopoverContent);
-            }
-            else {
-                mgPopoverContent.setAttribute('id', this.identifier);
-            }
-        };
-    }
-    validateIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-        // use renderPopoverContent to update popover-content id
-        this.renderPopoverContent();
-    }
-    validateArrowHide(newValue) {
-        if (newValue)
-            this.mgPopoverContent.dataset.arrowHide = '';
-        else
-            delete this.mgPopoverContent.dataset.arrowHide;
-    }
-    validateCloseButton(newValue) {
-        this.mgPopoverContent.closeButton = newValue;
-    }
-    handleDisplay(newValue) {
-        if (newValue) {
-            this.show();
-        }
-        else {
-            this.hide();
-        }
-        this.displayChange.emit(newValue);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * update popper position after props change on component did update hook to benefit from render ended
-     */
-    componentDidUpdate() {
-        this.popper.update();
-    }
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // Get windows to attach events
-        this.windows = getWindows(window);
-        // render mg-popover-content slot
-        this.renderPopoverContent();
-        this.validateCloseButton(this.closeButton);
-        this.validateIdentifier(this.identifier);
-        this.validateArrowHide(this.arrowHide);
-    }
-    /**
-     * Check if component props are well configured on init
-     */
-    componentDidLoad() {
-        // Get popover content
-        this.mgPopover = this.element.querySelector(`#${this.identifier}`);
-        //Get interactive element (first element without slot attribute)
-        this.interactiveElement = this.element.querySelector(':not([slot])');
-        // Add aria attributes
-        this.interactiveElement.setAttribute('aria-controls', this.identifier);
-        this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-        const fallbackPlacements = [];
-        if (this.element.dataset.fallbackPlacement !== undefined) {
-            fallbackPlacements.push(this.element.dataset.fallbackPlacement);
-        }
-        // Create popperjs popover
-        this.popper = createPopper(this.interactiveElement, this.mgPopover, {
-            placement: this.placement,
-            strategy: 'fixed',
-            modifiers: [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [0, 0],
-                    },
-                },
-                {
-                    name: 'flip',
-                    options: {
-                        fallbackPlacements: [...fallbackPlacements, 'auto'],
-                    },
-                },
-            ],
-        });
-        // add resize observer
-        [this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
-            new ResizeObserver(() => {
-                this.popper.update();
-            }).observe(element);
-        });
-        // Add events to toggle display
-        this.interactiveElement.addEventListener('click', () => {
-            if (!this.disabled)
-                this.display = !this.display;
-        });
-        this.element.addEventListener('click', (event) => {
-            const target = event.target.closest('[popovertargetaction]');
-            if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {
-                this.display = false;
-            }
-        });
-        // Add events to hide popover
-        this.element.addEventListener('keydown', e => {
-            if (!this.disabled && e.code === 'Escape') {
-                this.display = false;
-                this.componentClose.emit();
-                this.interactiveElement.focus();
-            }
-        });
-        this.handleDisplay(this.display);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '2c1506b8e2da100519aeeae75fc5c378a81c473c' }, h("slot", { key: 'f9aea885e8cbc168614c05761829f0a0740eba9e' }), h("slot", { key: 'fa6106a660a73b3761d4783f8d46d401c47b4eb6', name: "content" })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["validateIdentifier"],
-        "arrowHide": ["validateArrowHide"],
-        "closeButton": ["validateCloseButton"],
-        "display": ["handleDisplay"]
-    }; }
-    static get style() { return mgPopoverCss; }
-}, [257, "mg-popover", {
-        "identifier": [1],
-        "placement": [1],
-        "arrowHide": [4, "arrow-hide"],
-        "closeButton": [4, "close-button"],
-        "display": [1028],
-        "disabled": [4]
-    }, undefined, {
-        "identifier": ["validateIdentifier"],
-        "arrowHide": ["validateArrowHide"],
-        "closeButton": ["validateCloseButton"],
-        "display": ["handleDisplay"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-popover", "mg-button", "mg-card", "mg-icon", "mg-popover-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgPopover);
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgPopover as M, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,createEvent as s,h as o,Host as a}from"@stencil/core/internal/client";import{c as r,a as n,t as h,g as c}from"./index2.js";import{d}from"./mg-button2.js";import{d as l}from"./mg-card2.js";import{d as p}from"./mg-icon2.js";import{d as m}from"./mg-popover-content2.js";import{c as v}from"./popper.js";const g=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.displayChange=s(this,"display-change",7),this.componentClose=s(this,"component-close",7),this.identifier=r("mg-popover"),this.placement="bottom",this.arrowHide=!1,this.closeButton=!1,this.display=!1,this.disabled=!1,this.clickOutside=t=>{this.disabled||t.target.closest("mg-popover")===this.element||null!==t.target.closest(`[data-mg-popover-guard="${this.identifier}"]`)||(this.display=!1)},this.show=()=>{this.mgPopover.dataset.show="",this.interactiveElement.setAttribute("aria-expanded","true"),this.setPopperListeners(!0),setTimeout((()=>{this.manageClickOutsideListeners("addEventListener")}))},this.hide=()=>{this.mgPopover.removeAttribute("data-show"),this.interactiveElement.setAttribute("aria-expanded","false"),this.setPopperListeners(!1),this.manageClickOutsideListeners("removeEventListener")},this.setPopperListeners=t=>{this.popper.setOptions((e=>Object.assign(Object.assign({},e),{modifiers:[...e.modifiers,{name:"eventListeners",enabled:t}]})))},this.manageClickOutsideListeners=t=>{var e,i;[...Array.from((null===(i=null===(e=document.querySelector(`[data-mg-popover-guard="${this.identifier}"]`))||void 0===e?void 0:e.shadowRoot)||void 0===i?void 0:i.children)||new Set),...this.windows].forEach((e=>{null!==e&&e[t]("click",this.clickOutside,!1)}))},this.handleHideContent=()=>{this.display=!1,this.componentClose.emit()},this.renderPopoverContent=()=>{const t=this.element.querySelector("mg-popover-content");if(null===t){this.mgPopoverContent=document.createElement("mg-popover-content"),this.mgPopoverContent.setAttribute("slot","content"),this.mgPopoverContent.setAttribute("id",this.identifier),this.mgPopoverContent.addEventListener("hide-content",this.handleHideContent);const t=document.createElement("div");t.setAttribute("slot","arrow"),t.dataset.popperArrow="",this.mgPopoverContent.appendChild(t),['[slot="title"]','[slot="content"]:not(mg-popover-content)'].forEach((t=>{Array.from(this.element.querySelectorAll(t)).forEach((t=>{this.mgPopoverContent.appendChild(t)}))})),this.element.appendChild(this.mgPopoverContent)}else t.setAttribute("id",this.identifier)}}validateIdentifier(t){if(!n(t))throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${h(t)}.`);this.renderPopoverContent()}validateArrowHide(t){t?this.mgPopoverContent.dataset.arrowHide="":delete this.mgPopoverContent.dataset.arrowHide}validateCloseButton(t){this.mgPopoverContent.closeButton=t}handleDisplay(t){t?this.show():this.hide(),this.displayChange.emit(t)}componentDidUpdate(){this.popper.update()}componentWillLoad(){this.windows=c(window),this.renderPopoverContent(),this.validateCloseButton(this.closeButton),this.validateIdentifier(this.identifier),this.validateArrowHide(this.arrowHide)}componentDidLoad(){this.mgPopover=this.element.querySelector(`#${this.identifier}`),this.interactiveElement=this.element.querySelector(":not([slot])"),this.interactiveElement.setAttribute("aria-controls",this.identifier),this.interactiveElement.setAttribute("aria-expanded",`${this.display}`);const t=[];void 0!==this.element.dataset.fallbackPlacement&&t.push(this.element.dataset.fallbackPlacement),this.popper=v(this.interactiveElement,this.mgPopover,{placement:this.placement,strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"flip",options:{fallbackPlacements:[...t,"auto"]}}]}),[this.interactiveElement,this.element.querySelector("mg-popover-content")].forEach((t=>{new ResizeObserver((()=>{this.popper.update()})).observe(t)})),this.interactiveElement.addEventListener("click",(()=>{this.disabled||(this.display=!this.display)})),this.element.addEventListener("click",(t=>{const e=t.target.closest("[popovertargetaction]");!0===this.display&&null!==e&&"hide"===e.getAttribute("popovertargetaction")&&(this.display=!1)})),this.element.addEventListener("keydown",(t=>{this.disabled||"Escape"!==t.code||(this.display=!1,this.componentClose.emit(),this.interactiveElement.focus())})),this.handleDisplay(this.display)}render(){return o(a,{key:"530971c84be3edae39c5aed0013d0c5b9005a1c1"},o("slot",{key:"6e717bc8c5aa3d58fc048c4232e706cc78ab66ec"}),o("slot",{key:"e779db01e55a28ffaedde21e9944f5ef3c79fa29",name:"content"}))}get element(){return this}static get watchers(){return{identifier:[{validateIdentifier:0}],arrowHide:[{validateArrowHide:0}],closeButton:[{validateCloseButton:0}],display:[{handleDisplay:0}]}}static get style(){return":host{--mg-c-card-spacing:var(--mg-c-popover-spacing-vertical, var(--mg-b-size-16)) var(--mg-c-popover-spacing-horizontal, var(--mg-b-size-16));--mg-c-card-border:none;--mg-c-card-border-radius:var(--mg-c-popover-border-radius);--mg-c-card-color-background:var(--mg-c-popover-color-background);position:relative;display:contents}:host::slotted(*){display:inline-block}"}},[257,"mg-popover",{identifier:[1],placement:[1],arrowHide:[4,"arrow-hide"],closeButton:[4,"close-button"],display:[1028],disabled:[4]},void 0,{identifier:[{validateIdentifier:0}],arrowHide:[{validateArrowHide:0}],closeButton:[{validateCloseButton:0}],display:[{handleDisplay:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-popover","mg-button","mg-card","mg-icon","mg-popover-content"].forEach((e=>{switch(e){case"mg-popover":customElements.get(t(e))||customElements.define(t(e),g);break;case"mg-button":customElements.get(t(e))||d();break;case"mg-card":customElements.get(t(e))||l();break;case"mg-icon":customElements.get(t(e))||p();break;case"mg-popover-content":customElements.get(t(e))||m()}}))}u();export{g as M,u as d}

package/dist/components/mg-progress.js

@@ -1,123 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isValidString, t as toString, q as isValidNumber } from './index2.js';
-
-/**
- * List of all possibles roles
- */
-const roles = ['progressbar', 'meter'];
-
-const mgProgressCss = "/*!\n * @prop --mg-c-progress-size: Defines the size of the progress bar. Default value is `--mg-b-size-8`.\n * @prop --mg-c-progress-border-color: Defines the color of the progress bar border. Default value is `--mg-b-color-neutral-80`.\n * @prop --mg-c-progress-bar-color-background: Defines the color of the progress bar. Default value is `--mg-b-color-neutral-30`.\n * @prop --mg-c-progress-fill-color-background: Defines the color of the progress bar fill background. Default value is `--mg-b-color-app`.\n */.mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}";
-
-const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Define progress role
-         * - `progressbar` to indicate a progress, such as loading or percent completion of a task
-         * - `meter` to indicate a graphical display of a numeric value that varies within a defined range
-         */
-        this.ariaRole = 'progressbar';
-        /**
-         * Define current value
-         * By default, it will be displayed as a percentage value.
-         * If you don’t specify the min and max props, the value should be a number within the range of 0 to 100.
-         */
-        this.value = 0;
-        /**
-         * Define the minimum value in the range
-         */
-        this.min = 0;
-        /**
-         * Define the maximum value in the range
-         */
-        this.max = 100;
-    }
-    watchLabel(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchAriaRole(newValue) {
-        if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-progress> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchValue(newValue) {
-        if (newValue !== undefined && (!isValidNumber(newValue) || !(newValue >= this.min && newValue <= this.max)))
-            throw new Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${toString(newValue)}.`);
-    }
-    watchMin(newValue) {
-        if (newValue !== 0 && newValue !== undefined && (!isValidNumber(newValue) || newValue >= this.max))
-            throw new Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${toString(newValue)}.`);
-    }
-    watchMax(newValue) {
-        if (newValue !== 100 && newValue !== undefined && (!isValidNumber(newValue) || newValue <= this.min))
-            throw new Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${toString(newValue)}.`);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // validate props
-        this.watchLabel(this.label);
-        this.watchAriaRole(this.ariaRole);
-        this.watchMin(this.min);
-        this.watchMax(this.max);
-        this.watchValue(this.value);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '8e6c727e9416fa777fd94b32d618a9137e8e08f7', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'ac42ee9c5dda55d70aad7391895e4a013aaa27f9', class: "mg-c-progress" }, h("div", { key: '34c77bc6c133bc59b9daa68d7d6c8534f13f7d37', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '7ea03a3f0c54ca0c81616c7c070d178a510dd7e1', class: "mg-c-progress__fill", style: {
-                width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
-            } })))));
-    }
-    static get watchers() { return {
-        "label": ["watchLabel"],
-        "ariaRole": ["watchAriaRole"],
-        "value": ["watchValue"],
-        "min": ["watchMin"],
-        "max": ["watchMax"]
-    }; }
-    static get style() { return mgProgressCss; }
-}, [257, "mg-progress", {
-        "label": [1],
-        "ariaRole": [1, "aria-role"],
-        "value": [2],
-        "min": [2],
-        "max": [2]
-    }, undefined, {
-        "label": ["watchLabel"],
-        "ariaRole": ["watchAriaRole"],
-        "value": ["watchValue"],
-        "min": ["watchMin"],
-        "max": ["watchMax"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-progress"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-progress":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgProgress$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgProgress = MgProgress$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgProgress, defineCustomElement };
+import{transformTag as r,proxyCustomElement as e,HTMLElement as s,h as a,Host as t}from"@stencil/core/internal/client";import{i,t as o,q as c}from"./index2.js";const l=["progressbar","meter"],h=e(class extends s{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.ariaRole="progressbar",this.value=0,this.min=0,this.max=100}watchLabel(r){if(!i(r))throw Error(`<mg-progress> prop "label" must be a valid string. Passed value: ${o(r)}.`)}watchAriaRole(r){if(r&&!l.includes(r))throw Error(`<mg-progress> prop "ariaRole" must be one of: ${l.join(", ")}. Passed value: ${o(r)}.`)}watchValue(r){if(!(void 0===r||c(r)&&r>=this.min&&r<=this.max))throw Error(`<mg-progress> prop “value” must be a number within the range ${this.min} to ${this.max}. Passed value: ${o(r)}.`)}watchMin(r){if(0!==r&&void 0!==r&&(!c(r)||r>=this.max))throw Error(`<mg-progress> prop “min” must be a number lower than: ${this.max}. Passed value: ${o(r)}.`)}watchMax(r){if(100!==r&&void 0!==r&&(!c(r)||r<=this.min))throw Error(`<mg-progress> prop “max” must be a number greater than: ${this.min}. Passed value: ${o(r)}.`)}componentWillLoad(){this.watchLabel(this.label),this.watchAriaRole(this.ariaRole),this.watchMin(this.min),this.watchMax(this.max),this.watchValue(this.value)}render(){return a(t,{key:"02466f9df3e5204eef158b9f733ba0af811ad9ed",role:this.ariaRole,"aria-label":this.label,"aria-valuenow":this.value,"aria-valuemin":this.min,"aria-valuemax":this.max},a("div",{key:"88c2eafe55d169502ef5afccfbde3371fee5165f",class:"mg-c-progress"},a("div",{key:"b46159dbed388c58b198bdc330096669c454bcd3",class:{"mg-c-progress__bar":!0,"mg-c-progress__bar--active":this.value>this.min}},a("div",{key:"0faebcc86cc7a55ccab3d9fb8dce4403bff16ebf",class:"mg-c-progress__fill",style:{width:Math.round((this.value-this.min)/(this.max-this.min)*100)+"%"}}))))}static get watchers(){return{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}}static get style(){return".mg-c-progress{min-width:calc(var(--mg-b-size-16)*4)}.mg-c-progress__bar{position:relative;overflow:hidden;height:var(--mg-c-progress-size);border-width:var(--mg-b-size-border);border-style:solid;border-color:var(--mg-c-progress-border-color);border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);background-color:var(--mg-c-progress-bar-color-background)}.mg-c-progress__fill{height:100%;border-radius:calc((var(--mg-c-progress-size) + var(--mg-b-size-border)*2)/2);transition:width 300ms ease-in-out}.mg-c-progress__bar.mg-c-progress__bar--active .mg-c-progress__fill{background-color:var(--mg-c-progress-fill-color-background)}"}},[1,"mg-progress",{label:[1],ariaRole:[1,"aria-role"],value:[2],min:[2],max:[2]},void 0,{label:[{watchLabel:0}],ariaRole:[{watchAriaRole:0}],value:[{watchValue:0}],min:[{watchMin:0}],max:[{watchMax:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-progress"].forEach((e=>{"mg-progress"===e&&(customElements.get(r(e))||customElements.define(r(e),h))}))}g();const m=h,b=g;export{m as MgProgress,b as defineCustomElement}

package/dist/components/mg-skip-links.js

@@ -1,78 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { i as initLocales } from './index3.js';
-import { i as isValidString } from './index2.js';
-
-const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}";
-
-const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.goToAnchor = createEvent(this, "go-to-anchor", 7);
-        /***********
-         * Methods *
-         **********/
-        /**
-         * Handle link click and emit go-to-anchor event
-         * @param event - mouse event
-         */
-        this.handleLinkCLick = (event) => {
-            const element = event.currentTarget;
-            element.blur();
-            this.goToAnchor.emit(element.getAttribute('href'));
-        };
-    }
-    validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {
-            throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateLinks(this.links);
-        this.messages = initLocales(this.element).messages;
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("nav", { key: '5bf4427662bdca6512969bee91aa03f43a126743', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '1d2b2a56b3960f70a3d37b333c77bf686643e0fd', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "links": ["validateLinks"]
-    }; }
-    static get style() { return mgSkipLinksCss; }
-}, [257, "mg-skip-links", {
-        "links": [16]
-    }, undefined, {
-        "links": ["validateLinks"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-skip-links"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-skip-links":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgSkipLinks$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgSkipLinks = MgSkipLinks$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgSkipLinks, defineCustomElement };
+import{transformTag as i,proxyCustomElement as s,HTMLElement as t,createEvent as n,h as e}from"@stencil/core/internal/client";import{i as a}from"./index3.js";import{i as l}from"./index2.js";const r=s(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.goToAnchor=n(this,"go-to-anchor",7),this.handleLinkCLick=i=>{const s=i.currentTarget;s.blur(),this.goToAnchor.emit(s.getAttribute("href"))}}validateLinks(i){if(void 0===i||0===i.length||i.some((i=>!l(i.href)||!i.href.startsWith("#")||!l(i.label))))throw Error('<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.')}componentWillLoad(){this.validateLinks(this.links),this.messages=a(this.element).messages}render(){return e("nav",{key:"b126d6fe3aa2553562fe18a0d4340205e178fbe0",class:"mg-c-skip-links",role:"navigation","aria-label":this.messages.skipLinks.navLabel},e("ul",{key:"1028704238d5119f67cf2e7a77282dec504bbc4f",class:"mg-c-skip-links__list",role:"list"},this.links.map((i=>e("li",{key:i.href},e("a",{class:"mg-c-skip-links__link",href:i.href,onClick:this.handleLinkCLick},i.label))))))}get element(){return this}static get watchers(){return{links:[{validateLinks:0}]}}static get style(){return".mg-c-skip-links{position:absolute;display:flex;min-height:var(--mg-b-size-56);align-items:center;background:var(--mg-b-color-light);opacity:0;transform:translateY(-100%)}.mg-c-skip-links:focus-within{position:relative;opacity:1;transform:translateY(0)}.mg-c-skip-links__list{display:flex;flex-wrap:wrap;align-items:center;padding:0 var(--mg-b-size-16);margin:0;gap:var(--mg-b-spacing-actions);list-style:none}.mg-c-skip-links__link{display:inline-block;padding:var(--mg-b-size-8) var(--mg-b-size-16);color:var(--mg-b-color-dark)}.mg-c-skip-links__link:hover{background:hsl(var(--mg-b-color-dark-h), var(--mg-b-color-dark-s), var(--mg-b-color-dark-l), 10%)}"}},[1,"mg-skip-links",{links:[16]},void 0,{links:[{validateLinks:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-skip-links"].forEach((s=>{"mg-skip-links"===s&&(customElements.get(i(s))||customElements.define(i(s),r))}))}o();const c=r,k=o;export{c as MgSkipLinks,k as defineCustomElement}