@mgdis/mg-components 5.26.0 → 5.27.1

package/dist/components/MgInput.js

@@ -1,155 +0,0 @@
-import { h } from '@stencil/core/internal/client';
-import { B as Be } from './index.es.js';
-
-/**
- * Possible input width
- */
-const widths = [2, 4, 16, 'full'];
-/**
- * Available handlers
- */
-var Handler;
-(function (Handler) {
-    Handler["BLUR"] = "blur";
-    Handler["FOCUS"] = "focus";
-})(Handler || (Handler = {}));
-const tooltipPositions = ['input', 'label'];
-
-/**
- * Apply in all input child node the aria-describedby attribute
- * @param children - Represent scoped elements
- * @param ariaDescribedbyIDs - List of IDs
- * @param utils - Stencil.js utils
- * @returns Children with aria-describedby attribute
- */
-const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
-    if (['input', 'select', 'textarea'].includes(child.vtag)) {
-        return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
-    }
-    // we recursively apply ariadescribedBy attributes to child input nodes if exists
-    if (child.vchildren === null)
-        return Object.assign({}, child);
-    return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
-});
-/**
- * Add classes based on props
- * @param props - MgInput Interface Props
- */
-const manageClasses = (props) => {
-    props.classCollection.add('mg-c-input');
-    if (props.labelOnTop)
-        props.classCollection.add('mg-c-input--label-on-top');
-    else
-        props.classCollection.delete('mg-c-input--label-on-top');
-    if (props.readonly)
-        props.classCollection.add('mg-c-input--readonly');
-    else
-        props.classCollection.delete('mg-c-input--readonly');
-    widths.forEach(width => {
-        props.classCollection.delete(`mg-c-input--width-${width}`);
-    });
-    if (props.mgWidth !== undefined)
-        props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);
-};
-/**
- * Check props configuration
- * @param props - MgInput Interface Props
- */
-const checkPropsConfig = (props) => {
-    if (!Be(props.identifier)) {
-        throw new Error('<mg-input> prop "identifier" is required.');
-    }
-    if (!Be(props.label)) {
-        throw new Error('<mg-input> prop "label" is required.');
-    }
-    if (props.labelOnTop && props.labelHide) {
-        throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
-    }
-    if (!tooltipPositions.includes(props.tooltipPosition)) {
-        throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
-    }
-};
-/**
- * Get tagname
- * @param isFieldset - is fieldset
- * @returns tag name
- */
-const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' : 'fieldset');
-/**
- * MgInput Interface
- */
-/**
- * Get input template
- * @param props - MgInput Interface Props
- * @param children - Represent scoped elements
- * @param utils - Stencil.js utils
- * @returns input template
- */
-const MgInput = (props, children, utils) => {
-    /**
-     * Check props config
-     */
-    checkPropsConfig(props);
-    /**
-     * Set readonly value
-     */
-    if (props.readonlyValue === undefined)
-        props.readonlyValue = props.value;
-    /**
-     * Component classes
-     */
-    manageClasses(props);
-    /**
-     * a11y IDs
-     */
-    const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
-    // Help text
-    const helpTextId = `${props.identifier}-help-text`;
-    if (typeof props.helpText === 'string' && props.helpText !== '') {
-        ariaDescribedbyIDs.add(helpTextId);
-    }
-    // Error Message
-    const helpTextErrorId = `${props.identifier}-error`;
-    if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
-        ariaDescribedbyIDs.add(helpTextErrorId);
-    }
-    /**
-     * Return template
-     *
-     * +--------+---------+--------------+---------+
-     * |  label | tooltip | input        | tooltip |
-     * |--------+---------+--------------+---------+
-     * |                  | nb Char Left           |
-     * |                  +------------------------+
-     * |                  | Help Text              |
-     * |                  +------------------------+
-     * |                  | Error                  |
-     * +------------------+------------------------+
-     *
-     * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
-     */
-    const TagName = getTagName(props.isFieldset, props.readonly);
-    /**
-     * Get tooltip node
-     * @returns mg-tooltip
-     */
-    const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
-        h("mg-icon", { icon: "info-circle" })));
-    return (h(TagName, { class: props.classCollection.join() },
-        h("div", { class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide } },
-            h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label),
-            props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()),
-        props.readonly ? (h("div", { class: "mg-c-input__input-container" },
-            Array.isArray(props.readonlyValue) ? (h("ul", null, props.readonlyValue.map(value => (h("li", { key: value },
-                h("strong", null, value)))))) : (h("strong", null, props.readonlyValue)),
-            children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" },
-            h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } },
-                applyAriadescribedBy(children, ariaDescribedbyIDs, utils),
-                props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()),
-            props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }),
-            props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
-};
-
-export { Handler as H, MgInput as M };
-
-//# sourceMappingURL=MgInput.js.map

package/dist/components/MgInput.js.map

@@ -1 +0,0 @@
-{"file":"MgInput.js","mappings":"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","names":["isValidString"],"sources":["src/components/molecules/inputs/MgInput.conf.ts","src/components/molecules/inputs/MgInput.tsx"],"sourcesContent":["import type { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\nimport type { ClassList } from '@mgdis/stencil-helpers';\n\n/**\n * MgInput component props\n */\nexport interface MgInputProps {\n  // Global\n  identifier: string;\n  classCollection: ClassList;\n  // Label\n  label: string;\n  labelOnTop: boolean;\n  labelHide: boolean;\n  isFieldset: MgInputTitle['isLegend'];\n  // Input\n  value: string;\n  readonlyValue: string | string[];\n  required: boolean;\n  readonly: boolean;\n  mgWidth: Width;\n  disabled: boolean;\n  // Tooltip\n  tooltip: string;\n  tooltipPosition: TooltipPosition;\n  // Help Text\n  helpText: string;\n  // Error Message\n  errorMessage: string;\n  // ariaDescribedbyIDs\n  ariaDescribedbyIDs: string[];\n}\n/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible Input types\n */\nexport type HTMLMgInputsElement =\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n\n/**\n * Available handlers\n */\nexport enum Handler {\n  BLUR = 'blur',\n  FOCUS = 'focus',\n}\n\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n","import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, tooltipPositions, type MgInputProps } from './MgInput.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n/**\n * Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n */\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n  utils.map(children, child => {\n    if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n      return {\n        ...child,\n        vattrs: {\n          ...child.vattrs,\n          'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n        },\n      };\n    }\n\n    // we recursively apply ariadescribedBy attributes to child input nodes if exists\n    if (child.vchildren === null) return { ...child };\n    return {\n      ...child,\n      vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n    };\n  });\n\n/**\n * Add classes based on props\n * @param props - MgInput Interface Props\n */\nconst manageClasses = (props: MgInputProps): void => {\n  props.classCollection.add('mg-c-input');\n\n  if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n  else props.classCollection.delete('mg-c-input--label-on-top');\n\n  if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n  else props.classCollection.delete('mg-c-input--readonly');\n\n  widths.forEach(width => {\n    props.classCollection.delete(`mg-c-input--width-${width}`);\n  });\n  if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/**\n * Check props configuration\n * @param props - MgInput Interface Props\n */\nconst checkPropsConfig = (props: MgInputProps): void => {\n  if (!isValidString(props.identifier)) {\n    throw new Error('<mg-input> prop \"identifier\" is required.');\n  }\n  if (!isValidString(props.label)) {\n    throw new Error('<mg-input> prop \"label\" is required.');\n  }\n  if (props.labelOnTop && props.labelHide) {\n    throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n  }\n  if (!tooltipPositions.includes(props.tooltipPosition)) {\n    throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n  }\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset || readOnly ? 'div' : 'fieldset');\n\n/**\n * MgInput Interface\n */\n\n/**\n * Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n */\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n  /**\n   * Check props config\n   */\n  checkPropsConfig(props);\n\n  /**\n   * Set readonly value\n   */\n  if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n  /**\n   * Component classes\n   */\n  manageClasses(props);\n\n  /**\n   * a11y IDs\n   */\n  const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n  // Help text\n  const helpTextId = `${props.identifier}-help-text`;\n  if (typeof props.helpText === 'string' && props.helpText !== '') {\n    ariaDescribedbyIDs.add(helpTextId);\n  }\n\n  // Error Message\n  const helpTextErrorId = `${props.identifier}-error`;\n  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n    ariaDescribedbyIDs.add(helpTextErrorId);\n  }\n\n  /**\n   * Return template\n   *\n   * +--------+---------+--------------+---------+\n   * |  label | tooltip | input        | tooltip |\n   * |--------+---------+--------------+---------+\n   * |                  | nb Char Left           |\n   * |                  +------------------------+\n   * |                  | Help Text              |\n   * |                  +------------------------+\n   * |                  | Error                  |\n   * +------------------+------------------------+\n   *\n   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n   */\n\n  const TagName = getTagName(props.isFieldset, props.readonly);\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  const getTooltip = (): VNode[] => (\n    <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  return (\n    <TagName class={props.classCollection.join()}>\n      <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide }}>\n        <mg-input-title identifier={props.identifier} readonly={props.readonly} required={props.required && !props.disabled && !props.readonly} is-legend={props.isFieldset}>\n          {props.label}\n        </mg-input-title>\n        {props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()}\n      </div>\n      {props.readonly ? (\n        <div class=\"mg-c-input__input-container\">\n          {Array.isArray(props.readonlyValue) ? (\n            <ul>\n              {props.readonlyValue.map(value => (\n                <li key={value}>\n                  <strong>{value}</strong>\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <strong>{props.readonlyValue}</strong>\n          )}\n          {children.filter(child => Object.values(child).includes('append-input'))}\n        </div>\n      ) : (\n        <div class=\"mg-c-input__input-container\">\n          <div class={{ 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined }}>\n            {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n            {props.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && getTooltip()}\n          </div>\n          {props.helpText && <div id={helpTextId} class=\"mg-c-input__help-text\" innerHTML={props.helpText}></div>}\n          {props.errorMessage && !props.readonly && !props.disabled && (\n            <div id={helpTextErrorId} class=\"mg-c-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n          )}\n        </div>\n      )}\n    </TagName>\n  );\n};\n"],"version":3}

package/dist/components/mg-menu.conf.js

@@ -1,16 +0,0 @@
-/**
- * Menu direction type
- */
-var Direction;
-(function (Direction) {
-    Direction["VERTICAL"] = "vertical";
-    Direction["HORIZONTAL"] = "horizontal";
-})(Direction || (Direction = {}));
-/**
- * List of all possibles sizes
- */
-const sizes = ['regular', 'medium', 'large'];
-
-export { Direction as D, sizes as s };
-
-//# sourceMappingURL=mg-menu.conf.js.map

package/dist/components/mg-menu.conf.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf.js","mappings":"AAEA;;;IAGY;AAAZ,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;","names":[],"sources":["src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

package/dist/components/mg-menu2.js

@@ -1,202 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as Direction, s as sizes } from './mg-menu.conf.js';
-
-const mgMenuCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}";
-const MgMenuStyle0 = mgMenuCss;
-
-const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /************
-         * Internal *
-         ************/
-        this.name = 'mg-menu';
-        this.menuItems = [];
-        this.focusedMenuItem = 0;
-        /*************
-         * Methods *
-         *************/
-        /**
-         * Close matching menu-item
-         * @param item - menu-item to close
-         * @param condition - addionnal condition
-         */
-        this.closeMenuItem = (item, condition) => {
-            if (!this.isChildMenu && condition) {
-                item.expanded = false;
-            }
-        };
-        /**
-         * get mg-item-more element
-         * @returns mg-item-more element
-         */
-        this.getItemMore = () => this.element.querySelector('mg-item-more');
-        /**
-         * get mg-item-more child mg-menu-item element
-         * @returns mg-menu-item element
-         */
-        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
-        /**
-         * Set item listend
-         * @param item - mg-menu-item element
-         * @param index - number
-         */
-        this.setItemListener = (item, index) => {
-            ['click', 'focus'].forEach(trigger => {
-                (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
-                    this.focusedMenuItem = index;
-                    // reset expanded on previous active menu item
-                    (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
-                        this.closeMenuItem(item, index !== this.focusedMenuItem);
-                    });
-                });
-            });
-        };
-        /**
-         * Store menu-items on component init and add listeners
-         */
-        this.initMenuItemsListeners = () => {
-            // add listeners on menu item and edit index
-            this.menuItems.forEach((item, index) => {
-                this.setItemListener(item, index);
-            });
-        };
-        /**
-         * Handle item-loaded event on mg-item-more element
-         */
-        this.handleItemLoaded = () => {
-            this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
-        };
-        /**
-         * render mg-item-more
-         */
-        this.renderMgItemMore = () => {
-            // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
-            // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
-            const item = 'mg-item-more';
-            const mgItemMore = document.createElement(item);
-            Object.assign(mgItemMore, this.itemmore);
-            mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-            this.element.appendChild(mgItemMore);
-        };
-        this.label = undefined;
-        this.direction = Direction.HORIZONTAL;
-        this.itemmore = undefined;
-        this.size = 'regular';
-        this.isChildMenu = undefined;
-    }
-    validateLabel(newValue) {
-        if (newValue === undefined) {
-            throw new Error(`<${this.name}> prop "label" is required.`);
-        }
-    }
-    validateDirection(newValue) {
-        if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
-        }
-    }
-    validateItemMore(newValue) {
-        if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-            throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
-        }
-    }
-    validateSize(newValue) {
-        if (!sizes.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Validate props
-     */
-    componentWillLoad() {
-        this.validateDirection(this.direction);
-        this.validateLabel(this.label);
-        this.validateItemMore(this.itemmore);
-        this.validateSize(this.size);
-    }
-    /**
-     * Check if component slots configuration
-     * @returns timeout
-     */
-    componentDidLoad() {
-        // update props and states after componentDidLoad hook
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            // store all menu-items
-            this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
-            this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-            // add mg-item-more to manage OverflowBehavior
-            if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
-                this.renderMgItemMore();
-            // use mutation observer to improve reactivity
-            new MutationObserver(entries => {
-                const mgItemMore = this.getItemMore();
-                // prevent infinit loop by exclude mg-item-more deletion entry
-                if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
-                    return;
-                else if (mgItemMore !== null) {
-                    // render a new mg-item-more
-                    mgItemMore.remove();
-                    mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
-                    this.renderMgItemMore();
-                }
-            }).observe(this.element, { childList: true, characterData: true, subtree: true });
-        }, 0);
-    }
-    /**
-     * Add listeners to items
-     */
-    componentDidRender() {
-        this.initMenuItemsListeners();
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '22c0f16663ac432526aef9d0ec1c3d9152b8ca3a', role: "list", "aria-label": this.label }, h("slot", { key: 'de77bd6471725518cf14b9a75fb513a3d65a8033' })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "label": ["validateLabel"],
-        "direction": ["validateDirection"],
-        "itemmore": ["validateItemMore"],
-        "size": ["validateSize"]
-    }; }
-    static get style() { return MgMenuStyle0; }
-}, [1, "mg-menu", {
-        "label": [1],
-        "direction": [513],
-        "itemmore": [16],
-        "size": [1],
-        "isChildMenu": [32]
-    }, undefined, {
-        "label": ["validateLabel"],
-        "direction": ["validateDirection"],
-        "itemmore": ["validateItemMore"],
-        "size": ["validateSize"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-menu"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgMenu);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgMenu as M, defineCustomElement as d };
-
-//# sourceMappingURL=mg-menu2.js.map

package/dist/components/mg-menu2.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu2.js","mappings":"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","names":[],"sources":["../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}/*# sourceMappingURL=mg-menu.css.map */\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    const item = 'mg-item-more';\n    const mgItemMore = document.createElement(item);\n    Object.assign(mgItemMore, this.itemmore);\n    mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n    this.element.appendChild(mgItemMore);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n      // use mutation observer to improve reactivity\n      new MutationObserver(entries => {\n        const mgItemMore = this.getItemMore();\n        // prevent infinit loop by exclude mg-item-more deletion entry\n        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n        else if (mgItemMore !== null) {\n          // render a new mg-item-more\n          mgItemMore.remove();\n          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n          this.renderMgItemMore();\n        }\n      }).observe(this.element, { childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}