npm - @mgdis/mg-components - Versions diffs - 5.23.2 → 5.25.0 - Mend

@mgdis/mg-components 5.23.2 → 5.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/dist/components/MgInput.js CHANGED Viewed

@@ -13,6 +13,7 @@ var Handler;
     Handler["BLUR"] = "blur";
     Handler["FOCUS"] = "focus";
 })(Handler || (Handler = {}));
+const tooltipPositions = ['input', 'label'];
 /**
  * Apply in all input child node the aria-describedby attribute
@@ -50,12 +51,33 @@ const manageClasses = (props) => {
     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 (!He(props.identifier)) {
+        throw new Error('<mg-input> prop "identifier" is required.');
+    }
+    if (!He(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
@@ -65,17 +87,9 @@ const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' :
  */
 const MgInput = (props, children, utils) => {
     /**
-     * Check required properties
+     * Check props config
      */
-    if (!He(props.identifier)) {
-        throw new Error('<mg-input> prop "identifier" is required.');
-    }
-    if (!He(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".');
-    }
+    checkPropsConfig(props);
     /**
      * Set readonly value
      */
@@ -102,15 +116,15 @@ const MgInput = (props, children, utils) => {
     /**
      * Return template
      *
-     * +--------+--------------+---------+
-     * |  label | input        | tooltip |
-     * |        +--------------+---------+
-     * |        | nb Char Left           |
-     * |        +------------------------+
-     * |        | Help Text              |
-     * |        +------------------------+
-     * |        | Error                  |
-     * +--------+------------------------+
+     * +--------+---------+--------------+---------+
+     * |  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
      */
@@ -121,22 +135,17 @@ const MgInput = (props, children, utils) => {
      */
     const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
         h("mg-icon", { icon: "info-circle" })));
-    /**
-     * Get input title (label) node
-     * Display asterisk only if not disabled and not readonly
-     * @returns mg-input-title
-     */
-    const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, class: props.labelHide ? 'mg-u-visually-hidden' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
     return (h(TagName, { class: props.classCollection.join() },
-        props.labelOnTop ? (h("div", { class: "mg-c-input__title" },
-            getInputTitle(),
-            !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
+        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" },
-            h("strong", null, props.readonlyValue),
+            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.labelOnTop && props.tooltip && getTooltip()),
+                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" }))))));
 };

package/dist/components/MgInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":["/*\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 /\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","import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, Width } from './MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\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 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 /\ninterface 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;\n required: boolean;\n readonly: boolean;\n mgWidth: Width;\n disabled: boolean;\n // Tooltip\n tooltip: string;\n // Help Text\n helpText: string;\n // Error Message\n errorMessage: string;\n // ariaDescribedbyIDs\n ariaDescribedbyIDs: string[];\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 required properties\n /\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\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 \| 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 /\n Get input title (label) node\n * Display asterisk only if not disabled and not readonly\n * @returns mg-input-title\n */\n const getInputTitle = (): VNode[] => (\n <mg-input-title\n identifier={props.identifier}\n readonly={props.readonly}\n class={props.labelHide ? 'mg-u-visually-hidden' : undefined}\n required={props.required && !props.disabled && !props.readonly}\n is-legend={props.isFieldset}\n >\n {props.label}\n </mg-input-title>\n );\n\n return (\n <TagName class={props.classCollection.join()}>\n {props.labelOnTop ? (\n <div class=\"mg-c-input__title\">\n {getInputTitle()}\n {!props.readonly && props.tooltip && getTooltip()}\n </div>\n ) : (\n getInputTitle()\n )}\n {props.readonly ? (\n <div class=\"mg-c-input__input-container\">\n <strong>{props.readonlyValue}</strong>\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.labelOnTop && props.tooltip && 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}
1	+ {"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/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.es.js","mappings":"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","names":[],"sources":["../stencil-helpers/dist/index.es.js"],"sourcesContent":["var le = Object.defineProperty;\nvar oe = (t, e, n) => e in t ? le(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;\nvar g = (t, e, n) => (oe(t, typeof e != \"symbol\" ? e + \"\" : e, n), n);\nconst I = {\n allRenderFn: !1,\n cmpDidLoad: !0,\n cmpDidUnload: !1,\n cmpDidUpdate: !0,\n cmpDidRender: !0,\n cmpWillLoad: !0,\n cmpWillUpdate: !0,\n cmpWillRender: !0,\n connectedCallback: !0,\n disconnectedCallback: !0,\n element: !0,\n event: !0,\n hasRenderFn: !0,\n lifecycle: !0,\n hostListener: !0,\n hostListenerTargetWindow: !0,\n hostListenerTargetDocument: !0,\n hostListenerTargetBody: !0,\n hostListenerTargetParent: !1,\n hostListenerTarget: !0,\n member: !0,\n method: !0,\n mode: !0,\n observeAttribute: !0,\n prop: !0,\n propMutable: !0,\n reflect: !0,\n scoped: !0,\n shadowDom: !0,\n slot: !0,\n cssAnnotations: !0,\n state: !0,\n style: !0,\n formAssociated: !1,\n svg: !0,\n updatable: !0,\n vdomAttribute: !0,\n vdomXlink: !0,\n vdomClass: !0,\n vdomFunctional: !0,\n vdomKey: !0,\n vdomListener: !0,\n vdomRef: !0,\n vdomPropOrAttr: !0,\n vdomRender: !0,\n vdomStyle: !0,\n vdomText: !0,\n watchCallback: !0,\n taskQueue: !0,\n hotModuleReplacement: !1,\n isDebug: !1,\n isDev: !1,\n isTesting: !1,\n hydrateServerSide: !1,\n hydrateClientSide: !1,\n lifecycleDOMEvents: !1,\n lazyLoad: !1,\n profile: !1,\n slotRelocation: !0,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n appendChildSlotFix: !1,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n cloneNodeFix: !1,\n hydratedAttribute: !1,\n hydratedClass: !0,\n scriptDataOpts: !1,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n scopedSlotTextContentFix: !1,\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n shadowDomShim: !1,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n slotChildNodesFix: !1,\n invisiblePrehydration: !0,\n propBoolean: !0,\n propNumber: !0,\n propString: !0,\n constructableCSS: !0,\n cmpShouldUpdate: !0,\n devTools: !1,\n shadowDelegatesFocus: !0,\n initializeNextTick: !1,\n asyncLoading: !1,\n asyncQueue: !1,\n transformTagName: !1,\n attachStyles: !0,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n experimentalSlotFixes: !1\n};\nlet T, F, m, X = !1, M = !1, D = !1, h = !1;\nconst N = \"http://www.w3.org/1999/xlink\", H = {}, re = \"http://www.w3.org/2000/svg\", ie = \"http://www.w3.org/1999/xhtml\", ce = (t) => t != null, q = (t) => (t = typeof t, t === \"object\" \|\| t === \"function\"), G = (t, e, ...n) => {\n let s = null, l = null, r = null, o = !1, c = !1;\n const i = [], d = (f) => {\n for (let $ = 0; $ < f.length; $++)\n s = f[$], Array.isArray(s) ? d(s) : s != null && typeof s != \"boolean\" && ((o = typeof t != \"function\" && !q(s)) && (s = String(s)), o && c ? i[i.length - 1].$text$ += s : i.push(o ? O(null, s) : s), c = o);\n };\n if (d(n), e) {\n e.key && (l = e.key), e.name && (r = e.name);\n {\n const f = e.className \|\| e.class;\n f && (e.class = typeof f != \"object\" ? f : Object.keys(f).filter(($) => f[$]).join(\" \"));\n }\n }\n if (typeof t == \"function\")\n return t(e === null ? {} : e, i, $e);\n const u = O(t, null);\n return u.$attrs$ = e, i.length > 0 && (u.$children$ = i), u.$key$ = l, u.$name$ = r, u;\n}, O = (t, e) => {\n const n = {\n $flags$: 0,\n $tag$: t,\n $text$: e,\n $elm$: null,\n $children$: null\n };\n return n.$attrs$ = null, n.$key$ = null, n.$name$ = null, n;\n}, fe = {}, ae = (t) => t && t.$tag$ === fe, $e = {\n forEach: (t, e) => t.map(C).forEach(e),\n map: (t, e) => t.map(C).map(e).map(ue)\n}, C = (t) => ({\n vattrs: t.$attrs$,\n vchildren: t.$children$,\n vkey: t.$key$,\n vname: t.$name$,\n vtag: t.$tag$,\n vtext: t.$text$\n}), ue = (t) => {\n if (typeof t.vtag == \"function\") {\n const n = Object.assign({}, t.vattrs);\n return t.vkey && (n.key = t.vkey), t.vname && (n.name = t.vname), G(t.vtag, n, ...t.vchildren \|\| []);\n }\n const e = O(t.vtag, t.vtext);\n return e.$attrs$ = t.vattrs, e.$children$ = t.vchildren, e.$key$ = t.vkey, e.$name$ = t.vname, e;\n}, P = (t, e, n, s, l, r) => {\n if (n !== s) {\n let o = z(t, e), c = e.toLowerCase();\n if (e === \"class\") {\n const i = t.classList, d = U(n), u = U(s);\n i.remove(...d.filter((f) => f && !u.includes(f))), i.add(...u.filter((f) => f && !d.includes(f)));\n } else if (e === \"style\") {\n for (const i in n)\n (!s \|\| s[i] == null) && (i.includes(\"-\") ? t.style.removeProperty(i) : t.style[i] = \"\");\n for (const i in s)\n (!n \|\| s[i] !== n[i]) && (i.includes(\"-\") ? t.style.setProperty(i, s[i]) : t.style[i] = s[i]);\n } else if (e !== \"key\")\n if (e === \"ref\")\n s && s(t);\n else if (!t.__lookupSetter__(e) && e[0] === \"o\" && e[1] === \"n\") {\n if (e[2] === \"-\" ? e = e.slice(3) : z(B, c) ? e = c.slice(2) : e = c[2] + e.slice(3), n \|\| s) {\n const i = e.endsWith(K);\n e = e.replace(pe, \"\"), n && x.rel(t, e, n, i), s && x.ael(t, e, s, i);\n }\n } else {\n const i = q(s);\n if ((o \|\| i && s !== null) && !l)\n try {\n if (t.tagName.includes(\"-\"))\n t[e] = s;\n else {\n const u = s ?? \"\";\n e === \"list\" ? o = !1 : (n == null \|\| t[e] != u) && (t[e] = u);\n }\n } catch {\n }\n let d = !1;\n c !== (c = c.replace(/^xlink\\:?/, \"\")) && (e = c, d = !0), s == null \|\| s === !1 ? (s !== !1 \|\| t.getAttribute(e) === \"\") && (d ? t.removeAttributeNS(N, e) : t.removeAttribute(e)) : (!o \|\| r & 4 \|\| l) && !i && (s = s === !0 ? \"\" : s, d ? t.setAttributeNS(N, e, s) : t.setAttribute(e, s));\n }\n }\n}, de = /\\s/, U = (t) => t ? t.split(de) : [], K = \"Capture\", pe = new RegExp(K + \"$\"), Q = (t, e, n, s) => {\n const l = e.$elm$.nodeType === 11 && e.$elm$.host ? e.$elm$.host : e.$elm$, r = t && t.$attrs$ \|\| H, o = e.$attrs$ \|\| H;\n for (s in r)\n s in o \|\| P(l, s, r[s], void 0, n, e.$flags$);\n for (s in o)\n P(l, s, r[s], o[s], n, e.$flags$);\n}, j = (t, e, n, s) => {\n const l = e.$children$[n];\n let r = 0, o, c, i;\n if (X \|\| (D = !0, l.$tag$ === \"slot\" && (T && s.classList.add(T + \"-s\"), l.$flags$ \|= l.$children$ ? (\n // slot element has fallback content\n 2\n ) : (\n // slot element does not have fallback content\n 1\n ))), l.$text$ !== null)\n o = l.$elm$ = R.createTextNode(l.$text$);\n else if (l.$flags$ & 1)\n o = l.$elm$ = R.createTextNode(\"\");\n else {\n if (h \|\| (h = l.$tag$ === \"svg\"), o = l.$elm$ = R.createElementNS(h ? re : ie, l.$flags$ & 2 ? \"slot-fb\" : l.$tag$), h && l.$tag$ === \"foreignObject\" && (h = !1), Q(null, l, h), ce(T) && o[\"s-si\"] !== T && o.classList.add(o[\"s-si\"] = T), l.$children$)\n for (r = 0; r < l.$children$.length; ++r)\n c = j(t, l, r, o), c && o.appendChild(c);\n l.$tag$ === \"svg\" ? h = !1 : o.tagName === \"foreignObject\" && (h = !0);\n }\n return o[\"s-hn\"] = m, l.$flags$ & 3 && (o[\"s-sr\"] = !0, o[\"s-cr\"] = F, o[\"s-sn\"] = l.$name$ \|\| \"\", i = t && t.$children$ && t.$children$[n], i && i.$tag$ === l.$tag$ && t.$elm$ && L(t.$elm$, !1)), o;\n}, L = (t, e) => {\n x.$flags$ \|= 1;\n const n = t.childNodes;\n for (let s = n.length - 1; s >= 0; s--) {\n const l = n[s];\n l[\"s-hn\"] !== m && l[\"s-ol\"] && (Z(l).insertBefore(l, _(l)), l[\"s-ol\"].remove(), l[\"s-ol\"] = void 0, l[\"s-sh\"] = void 0, D = !0), e && L(l, e);\n }\n x.$flags$ &= -2;\n}, J = (t, e, n, s, l, r) => {\n let o = t[\"s-cr\"] && t[\"s-cr\"].parentNode \|\| t, c;\n for (o.shadowRoot && o.tagName === m && (o = o.shadowRoot); l <= r; ++l)\n s[l] && (c = j(null, n, l, t), c && (s[l].$elm$ = c, o.insertBefore(c, _(e))));\n}, Y = (t, e, n) => {\n for (let s = e; s <= n; ++s) {\n const l = t[s];\n if (l) {\n const r = l.$elm$;\n ee(l), r && (M = !0, r[\"s-ol\"] ? r[\"s-ol\"].remove() : L(r, !0), r.remove());\n }\n }\n}, ge = (t, e, n, s, l = !1) => {\n let r = 0, o = 0, c = 0, i = 0, d = e.length - 1, u = e[0], f = e[d], $ = s.length - 1, a = s[0], p = s[$], v, y;\n for (; r <= d && o <= $; )\n if (u == null)\n u = e[++r];\n else if (f == null)\n f = e[--d];\n else if (a == null)\n a = s[++o];\n else if (p == null)\n p = s[--$];\n else if (A(u, a, l))\n k(u, a, l), u = e[++r], a = s[++o];\n else if (A(f, p, l))\n k(f, p, l), f = e[--d], p = s[--$];\n else if (A(u, p, l))\n (u.$tag$ === \"slot\" \|\| p.$tag$ === \"slot\") && L(u.$elm$.parentNode, !1), k(u, p, l), t.insertBefore(u.$elm$, f.$elm$.nextSibling), u = e[++r], p = s[--$];\n else if (A(f, a, l))\n (u.$tag$ === \"slot\" \|\| p.$tag$ === \"slot\") && L(f.$elm$.parentNode, !1), k(f, a, l), t.insertBefore(f.$elm$, u.$elm$), f = e[--d], a = s[++o];\n else {\n for (c = -1, i = r; i <= d; ++i)\n if (e[i] && e[i].$key$ !== null && e[i].$key$ === a.$key$) {\n c = i;\n break;\n }\n c >= 0 ? (y = e[c], y.$tag$ !== a.$tag$ ? v = j(e && e[o], n, c, t) : (k(y, a, l), e[c] = void 0, v = y.$elm$), a = s[++o]) : (v = j(e && e[o], n, o, t), a = s[++o]), v && Z(u.$elm$).insertBefore(v, _(u.$elm$));\n }\n r > d ? J(t, s[$ + 1] == null ? null : s[$ + 1].$elm$, n, s, o, $) : o > $ && Y(e, r, d);\n}, A = (t, e, n = !1) => t.$tag$ === e.$tag$ ? t.$tag$ === \"slot\" ? t.$name$ === e.$name$ : n ? !0 : t.$key$ === e.$key$ : !1, _ = (t) => t && t[\"s-ol\"] \|\| t, Z = (t) => (t[\"s-ol\"] ? t[\"s-ol\"] : t).parentNode, k = (t, e, n = !1) => {\n const s = e.$elm$ = t.$elm$, l = t.$children$, r = e.$children$, o = e.$tag$, c = e.$text$;\n let i;\n c === null ? (h = o === \"svg\" ? !0 : o === \"foreignObject\" ? !1 : h, o === \"slot\" \|\| Q(t, e, h), l !== null && r !== null ? ge(s, l, e, r, n) : r !== null ? (t.$text$ !== null && (s.textContent = \"\"), J(s, null, e, r, 0, r.length - 1)) : l !== null && Y(l, 0, l.length - 1), h && o === \"svg\" && (h = !1)) : (i = s[\"s-cr\"]) ? i.parentNode.textContent = c : t.$text$ !== c && (s.data = c);\n}, w = (t) => {\n const e = t.childNodes;\n for (const n of e)\n if (n.nodeType === 1) {\n if (n[\"s-sr\"]) {\n const s = n[\"s-sn\"];\n n.hidden = !1;\n for (const l of e)\n if (l !== n) {\n if (l[\"s-hn\"] !== n[\"s-hn\"] \|\| s !== \"\") {\n if (l.nodeType === 1 && (s === l.getAttribute(\"slot\") \|\| s === l[\"s-sn\"])) {\n n.hidden = !0;\n break;\n }\n } else if (l.nodeType === 1 \|\| l.nodeType === 3 && l.textContent.trim() !== \"\") {\n n.hidden = !0;\n break;\n }\n }\n }\n w(n);\n }\n}, S = [], V = (t) => {\n let e, n, s;\n for (const l of t.childNodes) {\n if (l[\"s-sr\"] && (e = l[\"s-cr\"]) && e.parentNode) {\n n = e.parentNode.childNodes;\n const r = l[\"s-sn\"];\n for (s = n.length - 1; s >= 0; s--)\n if (e = n[s], !e[\"s-cn\"] && !e[\"s-nr\"] && e[\"s-hn\"] !== l[\"s-hn\"] && !I.experimentalSlotFixes)\n if (W(e, r)) {\n let o = S.find((c) => c.$nodeToRelocate$ === e);\n M = !0, e[\"s-sn\"] = e[\"s-sn\"] \|\| r, o ? (o.$nodeToRelocate$[\"s-sh\"] = l[\"s-hn\"], o.$slotRefNode$ = l) : (e[\"s-sh\"] = l[\"s-hn\"], S.push({\n $slotRefNode$: l,\n $nodeToRelocate$: e\n })), e[\"s-sr\"] && S.map((c) => {\n W(c.$nodeToRelocate$, e[\"s-sn\"]) && (o = S.find((i) => i.$nodeToRelocate$ === e), o && !c.$slotRefNode$ && (c.$slotRefNode$ = o.$slotRefNode$));\n });\n } else\n S.some((o) => o.$nodeToRelocate$ === e) \|\| S.push({\n $nodeToRelocate$: e\n });\n }\n l.nodeType === 1 && V(l);\n }\n}, W = (t, e) => t.nodeType === 1 ? t.getAttribute(\"slot\") === null && e === \"\" \|\| t.getAttribute(\"slot\") === e : t[\"s-sn\"] === e ? !0 : e === \"\", ee = (t) => {\n t.$attrs$ && t.$attrs$.ref && t.$attrs$.ref(null), t.$children$ && t.$children$.map(ee);\n}, he = (t, e, n = !1) => {\n var s, l, r, o, c;\n const i = t.$hostElement$, d = t.$cmpMeta$, u = t.$vnode$ \|\| O(null, null), f = ae(e) ? e : G(null, null, e);\n if (m = i.tagName, d.$attrsToReflect$ && (f.$attrs$ = f.$attrs$ \|\| {}, d.$attrsToReflect$.map(([$, a]) => f.$attrs$[a] = i[$])), n && f.$attrs$)\n for (const $ of Object.keys(f.$attrs$))\n i.hasAttribute($) && ![\"key\", \"ref\", \"style\", \"class\"].includes($) && (f.$attrs$[$] = i[$]);\n f.$tag$ = null, f.$flags$ \|= 4, t.$vnode$ = f, f.$elm$ = u.$elm$ = i.shadowRoot \|\| i, T = i[\"s-sc\"], F = i[\"s-cr\"], X = (d.$flags$ & 1) !== 0, M = !1, k(u, f, n);\n {\n if (x.$flags$ \|= 1, D) {\n V(f.$elm$);\n for (const $ of S) {\n const a = $.$nodeToRelocate$;\n if (!a[\"s-ol\"]) {\n const p = R.createTextNode(\"\");\n p[\"s-nr\"] = a, a.parentNode.insertBefore(a[\"s-ol\"] = p, a);\n }\n }\n for (const $ of S) {\n const a = $.$nodeToRelocate$, p = $.$slotRefNode$;\n if (p) {\n const v = p.parentNode;\n let y = p.nextSibling;\n {\n let E = (s = a[\"s-ol\"]) === null \|\| s === void 0 ? void 0 : s.previousSibling;\n for (; E; ) {\n let b = (l = E[\"s-nr\"]) !== null && l !== void 0 ? l : null;\n if (b && b[\"s-sn\"] === a[\"s-sn\"] && v === b.parentNode && (b = b.nextSibling, !b \|\| !b[\"s-nr\"])) {\n y = b;\n break;\n }\n E = E.previousSibling;\n }\n }\n (!y && v !== a.parentNode \|\| a.nextSibling !== y) && a !== y && (!a[\"s-hn\"] && a[\"s-ol\"] && (a[\"s-hn\"] = a[\"s-ol\"].parentNode.nodeName), v.insertBefore(a, y), a.nodeType === 1 && (a.hidden = (r = a[\"s-ih\"]) !== null && r !== void 0 ? r : !1));\n } else\n a.nodeType === 1 && (n && (a[\"s-ih\"] = (o = a.hidden) !== null && o !== void 0 ? o : !1), a.hidden = !0);\n }\n }\n M && w(f.$elm$), x.$flags$ &= -2, S.length = 0;\n }\n if (I.experimentalScopedSlotChanges && d.$flags$ & 2)\n for (const $ of f.$elm$.childNodes)\n $[\"s-hn\"] !== m && !$[\"s-sh\"] && (n && $[\"s-ih\"] == null && ($[\"s-ih\"] = (c = $.hidden) !== null && c !== void 0 ? c : !1), $.hidden = !0);\n F = void 0;\n}, z = (t, e) => e in t, B = typeof window < \"u\" ? window : {}, R = B.document \|\| { head: {} };\nB.HTMLElement;\nconst x = {\n $flags$: 0,\n $resourcesUrl$: \"\",\n jmp: (t) => t(),\n raf: (t) => requestAnimationFrame(t),\n ael: (t, e, n, s) => t.addEventListener(e, n, s),\n rel: (t, e, n, s) => t.removeEventListener(e, n, s),\n ce: (t, e) => new CustomEvent(t, e)\n}, ye = (t, e, n) => {\n [null, void 0, \"\", !1].includes(n) \|\| [\"innerHTML\", \"style\"].includes(e) \|\| t.setAttribute(e, [\"object\", \"function\"].includes(typeof n) ? \"/!\\\\ Object props are not rendered in the code example\" : n);\n}, te = (t, e, n, s, l) => {\n if (e && typeof e == \"string\") {\n const r = document.createElement(e);\n Object.keys(n \|\| {}).forEach((o) => {\n ye(r, o, n[o]);\n }), s == null \|\| s.forEach((o) => {\n te(r, o.$tag$, o.$attrs$, o.$children$, o.$text$);\n }), n != null && n.innerHTML && (r.innerHTML = n.innerHTML), t.appendChild(r);\n }\n l && (t.innerHTML = l);\n}, xe = (t, e) => {\n const n = {};\n if (typeof t != \"object\")\n throw new Error(\"filterArgs - args isn't an object.\");\n for (const s in t)\n if (!s.startsWith(\"slot\")) {\n const l = t[s], r = s.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n (!e \|\| !Object.keys(e).includes(s) \|\| e[s] !== l) && (n[r] = l);\n }\n return n;\n}, me = (t, e) => {\n var s, l;\n const n = document.getElementById(\"storybook-root\");\n if (n)\n return (l = document.querySelector(\"[lang]\")) == null \|\| l.setAttribute(\"lang\", ((s = e.globals) == null ? void 0 : s.locale) \|\| \"en\"), he(\n {\n $ancestorComponent$: void 0,\n $flags$: 0,\n $modeName$: void 0,\n $cmpMeta$: {\n $flags$: 0,\n $tagName$: n.tagName\n },\n $hostElement$: n\n },\n t(e)\n ), n.children[n.children.length - 1];\n}, Le = ({ $tag$: t, $attrs$: e, $children$: n, $text$: s }) => {\n const l = document.createElement(\"div\");\n return te(l, t, e, n, s), l.innerHTML;\n}, Ee = (t) => {\n const e = { value: \"2023\", pattern: \"yyyy\" }, n = { value: \"12\", pattern: \"mm\" }, s = { value: \"24\", pattern: \"dd\" };\n return be([e.value, n.value, s.value].join(\"-\"), t).replace(e.value, e.pattern).replace(n.value, n.pattern).replace(s.value, s.pattern);\n}, Ae = (t) => t.toISOString().split(\"T\")[0], ve = (t, e, n) => {\n const s = t.closest(\"[lang]\"), l = Intl.NumberFormat.supportedLocalesOf(s == null ? void 0 : s.lang), r = l.length > 0 && typeof l[0] == \"string\" ? l[0] : navigator.language \|\| n, o = r.split(\"-\").shift();\n return {\n locale: r,\n messages: e[o] \|\| e[n]\n };\n}, Re = (t, e, n) => new Intl.NumberFormat(e, { style: \"currency\", currency: n }).format(t), Me = (t, e) => new Intl.NumberFormat(e).format(t), Se = /^\\d{4}-(0[1-9]\|1[0-2])-(0[1-9]\|[12]\\d\|3[01])$/, be = (t, e) => typeof t != \"string\" \|\| t === \"\" \|\| !Se.test(t) ? \"\" : new Intl.DateTimeFormat(e).format(new Date(t)), Oe = (t, e) => (n) => ve(n, t, e), je = (t = \"\", e = 10) => {\n const n = new Uint8Array(e);\n crypto.getRandomValues(n);\n const s = Array.from(n).map((l) => l.toString(16).padStart(2, \"0\")).join(\"\").slice(0, e);\n return t !== \"\" ? `${t}-${s}` : s;\n};\nclass Fe {\n constructor(e = []) {\n /*\n Available classes\n /\n g(this, \"classes\");\n /\n Add class\n * @param className - class name to add\n /\n g(this, \"add\", (e) => {\n this.has(e) \|\| this.classes.push(e);\n });\n /\n Delete class\n * @param className - class name to delete\n /\n g(this, \"delete\", (e) => {\n const n = this.classes.indexOf(e);\n n > -1 && this.classes.splice(n, 1);\n });\n /\n Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n /\n g(this, \"has\", (e) => this.classes.includes(e));\n /\n Join classes seperated by spaces\n * @returns joined values\n /\n g(this, \"join\", () => this.classes.join(\" \"));\n this.classes = e;\n }\n}\nconst De = (t) => Array.isArray(t) && t.every((e) => typeof e == \"string\"), _e = (t, e) => e.includes(t == null ? void 0 : t.tagName.toLowerCase()), Be = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier], mg-button', Ne = (t) => {\n const e = se(t), n = ne(t);\n return [t, ...e, ...n];\n}, se = (t, e = []) => {\n if (t.self !== t.top)\n try {\n const n = t.parent;\n return n ? (e.push(n), se(n, e)) : e;\n } catch (n) {\n return console.error(\"Different hosts between iframes:\", n), e;\n }\n return e;\n}, ne = (t, e = []) => {\n if (t.frames.length > 0)\n for (const n of Array.from(t.frames))\n e.push(n), ne(n, e);\n return e;\n}, He = (t) => typeof t == \"string\" && t.trim() !== \"\", Ce = (t) => typeof t == \"string\" ? t.toLocaleLowerCase().normalize(\"NFD\").replaceAll(/[\\u0300-\\u036f]/g, \"\") : t, Pe = async (t) => t(), Ue = ({ disconnect: t, observe: e, takeRecords: n }) => {\n class s {\n constructor(r) {\n /\n \n /\n g(this, \"disconnect\", t);\n /\n \n /\n g(this, \"observe\", e);\n /\n \n /\n g(this, \"takeRecords\", n);\n /\n \n /\n g(this, \"cb\");\n this.cb = r;\n }\n }\n return [window, global].forEach((l) => {\n Object.defineProperty(l, \"MutationObserver\", {\n writable: !0,\n configurable: !0,\n value: s\n });\n }), s;\n}, We = ({ disconnect: t, observe: e }) => {\n class n {\n constructor(l) {\n /\n \n /\n g(this, \"disconnect\", t);\n /\n \n /\n g(this, \"observe\", e);\n /\n \n /\n g(this, \"unobserve\");\n /\n \n /\n g(this, \"cb\");\n this.cb = l;\n }\n }\n return [window, global].forEach((s) => {\n Object.defineProperty(s, \"ResizeObserver\", {\n writable: !0,\n configurable: !0,\n value: n\n });\n }), n;\n};\nclass Te extends Event {\n constructor() {\n super(...arguments);\n /\n \n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n g(this, \"detail\");\n }\n}\nconst ze = () => {\n class t extends Te {\n }\n return [window, global].forEach((e) => {\n Object.defineProperty(e, \"SubmitEvent\", {\n writable: !0,\n configurable: !0,\n value: t\n });\n }), t;\n};\nexport {\n Fe as ClassList,\n De as allItemsAreString,\n Ce as cleanString,\n je as createID,\n Se as dateRegExp,\n Ae as dateToString,\n Oe as defineLocales,\n xe as filterArgs,\n Be as focusableElements,\n Ee as getLocaleDatePattern,\n se as getParentWindows,\n Le as getStoryHTML,\n Ne as getWindows,\n _e as isTagName,\n He as isValidString,\n Re as localeCurrency,\n be as localeDate,\n Me as localeNumber,\n Pe as nextTick,\n Ue as setupMutationObserverMock,\n We as setupResizeObserverMock,\n ze as setupSubmitEventMock,\n me as stencilWrapper\n};\n//# sourceMappingURL=index.es.js.map\n"],"version":3}
1	+ {"file":"index.es.js","mappings":"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","names":[],"sources":["../stencil-helpers/dist/index.es.js"],"sourcesContent":["var le = Object.defineProperty;\nvar oe = (t, e, n) => e in t ? le(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;\nvar g = (t, e, n) => (oe(t, typeof e != \"symbol\" ? e + \"\" : e, n), n);\nconst X = {\n allRenderFn: !1,\n cmpDidLoad: !0,\n cmpDidUnload: !1,\n cmpDidUpdate: !0,\n cmpDidRender: !0,\n cmpWillLoad: !0,\n cmpWillUpdate: !0,\n cmpWillRender: !0,\n connectedCallback: !0,\n disconnectedCallback: !0,\n element: !0,\n event: !0,\n hasRenderFn: !0,\n lifecycle: !0,\n hostListener: !0,\n hostListenerTargetWindow: !0,\n hostListenerTargetDocument: !0,\n hostListenerTargetBody: !0,\n hostListenerTargetParent: !1,\n hostListenerTarget: !0,\n member: !0,\n method: !0,\n mode: !0,\n observeAttribute: !0,\n prop: !0,\n propMutable: !0,\n reflect: !0,\n scoped: !0,\n shadowDom: !0,\n slot: !0,\n cssAnnotations: !0,\n state: !0,\n style: !0,\n formAssociated: !1,\n svg: !0,\n updatable: !0,\n vdomAttribute: !0,\n vdomXlink: !0,\n vdomClass: !0,\n vdomFunctional: !0,\n vdomKey: !0,\n vdomListener: !0,\n vdomRef: !0,\n vdomPropOrAttr: !0,\n vdomRender: !0,\n vdomStyle: !0,\n vdomText: !0,\n watchCallback: !0,\n taskQueue: !0,\n hotModuleReplacement: !1,\n isDebug: !1,\n isDev: !1,\n isTesting: !1,\n hydrateServerSide: !1,\n hydrateClientSide: !1,\n lifecycleDOMEvents: !1,\n lazyLoad: !1,\n profile: !1,\n slotRelocation: !0,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n appendChildSlotFix: !1,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n cloneNodeFix: !1,\n hydratedAttribute: !1,\n hydratedClass: !0,\n scriptDataOpts: !1,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n scopedSlotTextContentFix: !1,\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n shadowDomShim: !1,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n slotChildNodesFix: !1,\n invisiblePrehydration: !0,\n propBoolean: !0,\n propNumber: !0,\n propString: !0,\n constructableCSS: !0,\n cmpShouldUpdate: !0,\n devTools: !1,\n shadowDelegatesFocus: !0,\n initializeNextTick: !1,\n asyncLoading: !1,\n asyncQueue: !1,\n transformTagName: !1,\n attachStyles: !0,\n // TODO(STENCIL-914): remove this option when `experimentalSlotFixes` is the default behavior\n experimentalSlotFixes: !1\n};\nlet T, F, m, D = !1, M = !1, _ = !1, h = !1;\nconst H = \"http://www.w3.org/1999/xlink\", C = {}, re = \"http://www.w3.org/2000/svg\", ie = \"http://www.w3.org/1999/xhtml\", ce = (t) => t != null, q = (t) => (t = typeof t, t === \"object\" \|\| t === \"function\"), G = (t, e, ...n) => {\n let s = null, l = null, r = null, o = !1, c = !1;\n const i = [], d = (f) => {\n for (let $ = 0; $ < f.length; $++)\n s = f[$], Array.isArray(s) ? d(s) : s != null && typeof s != \"boolean\" && ((o = typeof t != \"function\" && !q(s)) && (s = String(s)), o && c ? i[i.length - 1].$text$ += s : i.push(o ? O(null, s) : s), c = o);\n };\n if (d(n), e) {\n e.key && (l = e.key), e.name && (r = e.name);\n {\n const f = e.className \|\| e.class;\n f && (e.class = typeof f != \"object\" ? f : Object.keys(f).filter(($) => f[$]).join(\" \"));\n }\n }\n if (typeof t == \"function\")\n return t(e === null ? {} : e, i, $e);\n const u = O(t, null);\n return u.$attrs$ = e, i.length > 0 && (u.$children$ = i), u.$key$ = l, u.$name$ = r, u;\n}, O = (t, e) => {\n const n = {\n $flags$: 0,\n $tag$: t,\n $text$: e,\n $elm$: null,\n $children$: null\n };\n return n.$attrs$ = null, n.$key$ = null, n.$name$ = null, n;\n}, fe = {}, ae = (t) => t && t.$tag$ === fe, $e = {\n forEach: (t, e) => t.map(P).forEach(e),\n map: (t, e) => t.map(P).map(e).map(ue)\n}, P = (t) => ({\n vattrs: t.$attrs$,\n vchildren: t.$children$,\n vkey: t.$key$,\n vname: t.$name$,\n vtag: t.$tag$,\n vtext: t.$text$\n}), ue = (t) => {\n if (typeof t.vtag == \"function\") {\n const n = Object.assign({}, t.vattrs);\n return t.vkey && (n.key = t.vkey), t.vname && (n.name = t.vname), G(t.vtag, n, ...t.vchildren \|\| []);\n }\n const e = O(t.vtag, t.vtext);\n return e.$attrs$ = t.vattrs, e.$children$ = t.vchildren, e.$key$ = t.vkey, e.$name$ = t.vname, e;\n}, U = (t, e, n, s, l, r) => {\n if (n !== s) {\n let o = I(t, e), c = e.toLowerCase();\n if (e === \"class\") {\n const i = t.classList, d = W(n), u = W(s);\n i.remove(...d.filter((f) => f && !u.includes(f))), i.add(...u.filter((f) => f && !d.includes(f)));\n } else if (e === \"style\") {\n for (const i in n)\n (!s \|\| s[i] == null) && (i.includes(\"-\") ? t.style.removeProperty(i) : t.style[i] = \"\");\n for (const i in s)\n (!n \|\| s[i] !== n[i]) && (i.includes(\"-\") ? t.style.setProperty(i, s[i]) : t.style[i] = s[i]);\n } else if (e !== \"key\")\n if (e === \"ref\")\n s && s(t);\n else if (!t.__lookupSetter__(e) && e[0] === \"o\" && e[1] === \"n\") {\n if (e[2] === \"-\" ? e = e.slice(3) : I(N, c) ? e = c.slice(2) : e = c[2] + e.slice(3), n \|\| s) {\n const i = e.endsWith(K);\n e = e.replace(pe, \"\"), n && x.rel(t, e, n, i), s && x.ael(t, e, s, i);\n }\n } else {\n const i = q(s);\n if ((o \|\| i && s !== null) && !l)\n try {\n if (t.tagName.includes(\"-\"))\n t[e] = s;\n else {\n const u = s ?? \"\";\n e === \"list\" ? o = !1 : (n == null \|\| t[e] != u) && (t[e] = u);\n }\n } catch {\n }\n let d = !1;\n c !== (c = c.replace(/^xlink\\:?/, \"\")) && (e = c, d = !0), s == null \|\| s === !1 ? (s !== !1 \|\| t.getAttribute(e) === \"\") && (d ? t.removeAttributeNS(H, e) : t.removeAttribute(e)) : (!o \|\| r & 4 \|\| l) && !i && (s = s === !0 ? \"\" : s, d ? t.setAttributeNS(H, e, s) : t.setAttribute(e, s));\n }\n }\n}, de = /\\s/, W = (t) => t ? t.split(de) : [], K = \"Capture\", pe = new RegExp(K + \"$\"), Q = (t, e, n, s) => {\n const l = e.$elm$.nodeType === 11 && e.$elm$.host ? e.$elm$.host : e.$elm$, r = t && t.$attrs$ \|\| C, o = e.$attrs$ \|\| C;\n for (s in r)\n s in o \|\| U(l, s, r[s], void 0, n, e.$flags$);\n for (s in o)\n U(l, s, r[s], o[s], n, e.$flags$);\n}, j = (t, e, n, s) => {\n const l = e.$children$[n];\n let r = 0, o, c, i;\n if (D \|\| (_ = !0, l.$tag$ === \"slot\" && (T && s.classList.add(T + \"-s\"), l.$flags$ \|= l.$children$ ? (\n // slot element has fallback content\n 2\n ) : (\n // slot element does not have fallback content\n 1\n ))), l.$text$ !== null)\n o = l.$elm$ = R.createTextNode(l.$text$);\n else if (l.$flags$ & 1)\n o = l.$elm$ = R.createTextNode(\"\");\n else {\n if (h \|\| (h = l.$tag$ === \"svg\"), o = l.$elm$ = R.createElementNS(h ? re : ie, l.$flags$ & 2 ? \"slot-fb\" : l.$tag$), h && l.$tag$ === \"foreignObject\" && (h = !1), Q(null, l, h), ce(T) && o[\"s-si\"] !== T && o.classList.add(o[\"s-si\"] = T), l.$children$)\n for (r = 0; r < l.$children$.length; ++r)\n c = j(t, l, r, o), c && o.appendChild(c);\n l.$tag$ === \"svg\" ? h = !1 : o.tagName === \"foreignObject\" && (h = !0);\n }\n return o[\"s-hn\"] = m, l.$flags$ & 3 && (o[\"s-sr\"] = !0, o[\"s-cr\"] = F, o[\"s-sn\"] = l.$name$ \|\| \"\", i = t && t.$children$ && t.$children$[n], i && i.$tag$ === l.$tag$ && t.$elm$ && L(t.$elm$, !1)), o;\n}, L = (t, e) => {\n x.$flags$ \|= 1;\n const n = t.childNodes;\n for (let s = n.length - 1; s >= 0; s--) {\n const l = n[s];\n l[\"s-hn\"] !== m && l[\"s-ol\"] && (Z(l).insertBefore(l, B(l)), l[\"s-ol\"].remove(), l[\"s-ol\"] = void 0, l[\"s-sh\"] = void 0, _ = !0), e && L(l, e);\n }\n x.$flags$ &= -2;\n}, J = (t, e, n, s, l, r) => {\n let o = t[\"s-cr\"] && t[\"s-cr\"].parentNode \|\| t, c;\n for (o.shadowRoot && o.tagName === m && (o = o.shadowRoot); l <= r; ++l)\n s[l] && (c = j(null, n, l, t), c && (s[l].$elm$ = c, o.insertBefore(c, B(e))));\n}, Y = (t, e, n) => {\n for (let s = e; s <= n; ++s) {\n const l = t[s];\n if (l) {\n const r = l.$elm$;\n ee(l), r && (M = !0, r[\"s-ol\"] ? r[\"s-ol\"].remove() : L(r, !0), r.remove());\n }\n }\n}, ge = (t, e, n, s, l = !1) => {\n let r = 0, o = 0, c = 0, i = 0, d = e.length - 1, u = e[0], f = e[d], $ = s.length - 1, a = s[0], p = s[$], v, y;\n for (; r <= d && o <= $; )\n if (u == null)\n u = e[++r];\n else if (f == null)\n f = e[--d];\n else if (a == null)\n a = s[++o];\n else if (p == null)\n p = s[--$];\n else if (A(u, a, l))\n k(u, a, l), u = e[++r], a = s[++o];\n else if (A(f, p, l))\n k(f, p, l), f = e[--d], p = s[--$];\n else if (A(u, p, l))\n (u.$tag$ === \"slot\" \|\| p.$tag$ === \"slot\") && L(u.$elm$.parentNode, !1), k(u, p, l), t.insertBefore(u.$elm$, f.$elm$.nextSibling), u = e[++r], p = s[--$];\n else if (A(f, a, l))\n (u.$tag$ === \"slot\" \|\| p.$tag$ === \"slot\") && L(f.$elm$.parentNode, !1), k(f, a, l), t.insertBefore(f.$elm$, u.$elm$), f = e[--d], a = s[++o];\n else {\n for (c = -1, i = r; i <= d; ++i)\n if (e[i] && e[i].$key$ !== null && e[i].$key$ === a.$key$) {\n c = i;\n break;\n }\n c >= 0 ? (y = e[c], y.$tag$ !== a.$tag$ ? v = j(e && e[o], n, c, t) : (k(y, a, l), e[c] = void 0, v = y.$elm$), a = s[++o]) : (v = j(e && e[o], n, o, t), a = s[++o]), v && Z(u.$elm$).insertBefore(v, B(u.$elm$));\n }\n r > d ? J(t, s[$ + 1] == null ? null : s[$ + 1].$elm$, n, s, o, $) : o > $ && Y(e, r, d);\n}, A = (t, e, n = !1) => t.$tag$ === e.$tag$ ? t.$tag$ === \"slot\" ? t.$name$ === e.$name$ : n ? !0 : t.$key$ === e.$key$ : !1, B = (t) => t && t[\"s-ol\"] \|\| t, Z = (t) => (t[\"s-ol\"] ? t[\"s-ol\"] : t).parentNode, k = (t, e, n = !1) => {\n const s = e.$elm$ = t.$elm$, l = t.$children$, r = e.$children$, o = e.$tag$, c = e.$text$;\n let i;\n c === null ? (h = o === \"svg\" ? !0 : o === \"foreignObject\" ? !1 : h, o === \"slot\" && !D \|\| Q(t, e, h), l !== null && r !== null ? ge(s, l, e, r, n) : r !== null ? (t.$text$ !== null && (s.textContent = \"\"), J(s, null, e, r, 0, r.length - 1)) : l !== null && Y(l, 0, l.length - 1), h && o === \"svg\" && (h = !1)) : (i = s[\"s-cr\"]) ? i.parentNode.textContent = c : t.$text$ !== c && (s.data = c);\n}, w = (t) => {\n const e = t.childNodes;\n for (const n of e)\n if (n.nodeType === 1) {\n if (n[\"s-sr\"]) {\n const s = n[\"s-sn\"];\n n.hidden = !1;\n for (const l of e)\n if (l !== n) {\n if (l[\"s-hn\"] !== n[\"s-hn\"] \|\| s !== \"\") {\n if (l.nodeType === 1 && (s === l.getAttribute(\"slot\") \|\| s === l[\"s-sn\"])) {\n n.hidden = !0;\n break;\n }\n } else if (l.nodeType === 1 \|\| l.nodeType === 3 && l.textContent.trim() !== \"\") {\n n.hidden = !0;\n break;\n }\n }\n }\n w(n);\n }\n}, S = [], V = (t) => {\n let e, n, s;\n for (const l of t.childNodes) {\n if (l[\"s-sr\"] && (e = l[\"s-cr\"]) && e.parentNode) {\n n = e.parentNode.childNodes;\n const r = l[\"s-sn\"];\n for (s = n.length - 1; s >= 0; s--)\n if (e = n[s], !e[\"s-cn\"] && !e[\"s-nr\"] && e[\"s-hn\"] !== l[\"s-hn\"] && !X.experimentalSlotFixes)\n if (z(e, r)) {\n let o = S.find((c) => c.$nodeToRelocate$ === e);\n M = !0, e[\"s-sn\"] = e[\"s-sn\"] \|\| r, o ? (o.$nodeToRelocate$[\"s-sh\"] = l[\"s-hn\"], o.$slotRefNode$ = l) : (e[\"s-sh\"] = l[\"s-hn\"], S.push({\n $slotRefNode$: l,\n $nodeToRelocate$: e\n })), e[\"s-sr\"] && S.map((c) => {\n z(c.$nodeToRelocate$, e[\"s-sn\"]) && (o = S.find((i) => i.$nodeToRelocate$ === e), o && !c.$slotRefNode$ && (c.$slotRefNode$ = o.$slotRefNode$));\n });\n } else\n S.some((o) => o.$nodeToRelocate$ === e) \|\| S.push({\n $nodeToRelocate$: e\n });\n }\n l.nodeType === 1 && V(l);\n }\n}, z = (t, e) => t.nodeType === 1 ? t.getAttribute(\"slot\") === null && e === \"\" \|\| t.getAttribute(\"slot\") === e : t[\"s-sn\"] === e ? !0 : e === \"\", ee = (t) => {\n t.$attrs$ && t.$attrs$.ref && t.$attrs$.ref(null), t.$children$ && t.$children$.map(ee);\n}, he = (t, e, n = !1) => {\n var s, l, r, o, c;\n const i = t.$hostElement$, d = t.$cmpMeta$, u = t.$vnode$ \|\| O(null, null), f = ae(e) ? e : G(null, null, e);\n if (m = i.tagName, d.$attrsToReflect$ && (f.$attrs$ = f.$attrs$ \|\| {}, d.$attrsToReflect$.map(([$, a]) => f.$attrs$[a] = i[$])), n && f.$attrs$)\n for (const $ of Object.keys(f.$attrs$))\n i.hasAttribute($) && ![\"key\", \"ref\", \"style\", \"class\"].includes($) && (f.$attrs$[$] = i[$]);\n f.$tag$ = null, f.$flags$ \|= 4, t.$vnode$ = f, f.$elm$ = u.$elm$ = i.shadowRoot \|\| i, T = i[\"s-sc\"], D = (d.$flags$ & 1) !== 0, F = i[\"s-cr\"], M = !1, k(u, f, n);\n {\n if (x.$flags$ \|= 1, _) {\n V(f.$elm$);\n for (const $ of S) {\n const a = $.$nodeToRelocate$;\n if (!a[\"s-ol\"]) {\n const p = R.createTextNode(\"\");\n p[\"s-nr\"] = a, a.parentNode.insertBefore(a[\"s-ol\"] = p, a);\n }\n }\n for (const $ of S) {\n const a = $.$nodeToRelocate$, p = $.$slotRefNode$;\n if (p) {\n const v = p.parentNode;\n let y = p.nextSibling;\n {\n let E = (s = a[\"s-ol\"]) === null \|\| s === void 0 ? void 0 : s.previousSibling;\n for (; E; ) {\n let b = (l = E[\"s-nr\"]) !== null && l !== void 0 ? l : null;\n if (b && b[\"s-sn\"] === a[\"s-sn\"] && v === b.parentNode && (b = b.nextSibling, !b \|\| !b[\"s-nr\"])) {\n y = b;\n break;\n }\n E = E.previousSibling;\n }\n }\n (!y && v !== a.parentNode \|\| a.nextSibling !== y) && a !== y && (!a[\"s-hn\"] && a[\"s-ol\"] && (a[\"s-hn\"] = a[\"s-ol\"].parentNode.nodeName), v.insertBefore(a, y), a.nodeType === 1 && (a.hidden = (r = a[\"s-ih\"]) !== null && r !== void 0 ? r : !1));\n } else\n a.nodeType === 1 && (n && (a[\"s-ih\"] = (o = a.hidden) !== null && o !== void 0 ? o : !1), a.hidden = !0);\n }\n }\n M && w(f.$elm$), x.$flags$ &= -2, S.length = 0;\n }\n if (X.experimentalScopedSlotChanges && d.$flags$ & 2)\n for (const $ of f.$elm$.childNodes)\n $[\"s-hn\"] !== m && !$[\"s-sh\"] && (n && $[\"s-ih\"] == null && ($[\"s-ih\"] = (c = $.hidden) !== null && c !== void 0 ? c : !1), $.hidden = !0);\n F = void 0;\n}, I = (t, e) => e in t, N = typeof window < \"u\" ? window : {}, R = N.document \|\| { head: {} };\nN.HTMLElement;\nconst x = {\n $flags$: 0,\n $resourcesUrl$: \"\",\n jmp: (t) => t(),\n raf: (t) => requestAnimationFrame(t),\n ael: (t, e, n, s) => t.addEventListener(e, n, s),\n rel: (t, e, n, s) => t.removeEventListener(e, n, s),\n ce: (t, e) => new CustomEvent(t, e)\n}, ye = (t, e, n) => {\n [null, void 0, \"\", !1].includes(n) \|\| [\"innerHTML\", \"style\"].includes(e) \|\| t.setAttribute(e, [\"object\", \"function\"].includes(typeof n) ? \"/!\\\\ Object props are not rendered in the code example\" : n);\n}, te = (t, e, n, s, l) => {\n if (e && typeof e == \"string\") {\n const r = document.createElement(e);\n Object.keys(n \|\| {}).forEach((o) => {\n ye(r, o, n[o]);\n }), s == null \|\| s.forEach((o) => {\n te(r, o.$tag$, o.$attrs$, o.$children$, o.$text$);\n }), n != null && n.innerHTML && (r.innerHTML = n.innerHTML), t.appendChild(r);\n }\n l && (t.innerHTML = l);\n}, xe = (t, e) => {\n const n = {};\n if (typeof t != \"object\")\n throw new Error(\"filterArgs - args isn't an object.\");\n for (const s in t)\n if (!s.startsWith(\"slot\")) {\n const l = t[s], r = s.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n (!e \|\| !Object.keys(e).includes(s) \|\| e[s] !== l) && (n[r] = l);\n }\n return n;\n}, me = (t, e) => {\n var s, l;\n const n = document.getElementById(\"storybook-root\");\n if (n)\n return (l = document.querySelector(\"[lang]\")) == null \|\| l.setAttribute(\"lang\", ((s = e.globals) == null ? void 0 : s.locale) \|\| \"en\"), he(\n {\n $ancestorComponent$: void 0,\n $flags$: 0,\n $modeName$: void 0,\n $cmpMeta$: {\n $flags$: 0,\n $tagName$: n.tagName\n },\n $hostElement$: n\n },\n t(e)\n ), n.children[n.children.length - 1];\n}, Le = ({ $tag$: t, $attrs$: e, $children$: n, $text$: s }) => {\n const l = document.createElement(\"div\");\n return te(l, t, e, n, s), l.innerHTML;\n}, Ee = (t) => {\n const e = { value: \"2023\", pattern: \"yyyy\" }, n = { value: \"12\", pattern: \"mm\" }, s = { value: \"24\", pattern: \"dd\" };\n return be([e.value, n.value, s.value].join(\"-\"), t).replace(e.value, e.pattern).replace(n.value, n.pattern).replace(s.value, s.pattern);\n}, Ae = (t) => t.toISOString().split(\"T\")[0], ve = (t, e, n) => {\n const s = t.closest(\"[lang]\"), l = Intl.NumberFormat.supportedLocalesOf(s == null ? void 0 : s.lang), r = l.length > 0 && typeof l[0] == \"string\" ? l[0] : navigator.language \|\| n, o = r.split(\"-\").shift();\n return {\n locale: r,\n messages: e[o] \|\| e[n]\n };\n}, Re = (t, e, n) => new Intl.NumberFormat(e, { style: \"currency\", currency: n }).format(t), Me = (t, e) => new Intl.NumberFormat(e).format(t), Se = /^\\d{4}-(0[1-9]\|1[0-2])-(0[1-9]\|[12]\\d\|3[01])$/, be = (t, e) => typeof t != \"string\" \|\| t === \"\" \|\| !Se.test(t) ? \"\" : new Intl.DateTimeFormat(e).format(new Date(t)), Oe = (t, e) => (n) => ve(n, t, e), je = (t = \"\", e = 10) => {\n const n = new Uint8Array(e);\n crypto.getRandomValues(n);\n const s = Array.from(n).map((l) => l.toString(16).padStart(2, \"0\")).join(\"\").slice(0, e);\n return t !== \"\" ? `${t}-${s}` : s;\n};\nclass Fe {\n constructor(e = []) {\n /*\n Available classes\n /\n g(this, \"classes\");\n /\n Add class\n * @param className - class name to add\n /\n g(this, \"add\", (e) => {\n this.has(e) \|\| this.classes.push(e);\n });\n /\n Delete class\n * @param className - class name to delete\n /\n g(this, \"delete\", (e) => {\n const n = this.classes.indexOf(e);\n n > -1 && this.classes.splice(n, 1);\n });\n /\n Check if class exist in list\n * @param className - class name to check\n * @returns class name is in the list\n /\n g(this, \"has\", (e) => this.classes.includes(e));\n /\n Join classes seperated by spaces\n * @returns joined values\n /\n g(this, \"join\", () => this.classes.join(\" \"));\n this.classes = e;\n }\n}\nconst De = (t) => Array.isArray(t) && t.every((e) => typeof e == \"string\"), _e = (t, e) => e.includes(t == null ? void 0 : t.tagName.toLowerCase()), Be = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier], mg-button', Ne = (t) => {\n const e = se(t), n = ne(t);\n return [t, ...e, ...n];\n}, se = (t, e = []) => {\n if (t.self !== t.top)\n try {\n const n = t.parent;\n return n ? (e.push(n), se(n, e)) : e;\n } catch (n) {\n return console.error(\"Different hosts between iframes:\", n), e;\n }\n return e;\n}, ne = (t, e = []) => {\n if (t.frames.length > 0)\n for (const n of Array.from(t.frames))\n e.push(n), ne(n, e);\n return e;\n}, He = (t) => typeof t == \"string\" && t.trim() !== \"\", Ce = (t) => typeof t == \"string\" ? t.toLocaleLowerCase().normalize(\"NFD\").replaceAll(/[\\u0300-\\u036f]/g, \"\") : t, Pe = async (t) => t(), Ue = ({ disconnect: t, observe: e, takeRecords: n }) => {\n class s {\n constructor(r) {\n /\n \n /\n g(this, \"disconnect\", t);\n /\n \n /\n g(this, \"observe\", e);\n /\n \n /\n g(this, \"takeRecords\", n);\n /\n \n /\n g(this, \"cb\");\n this.cb = r;\n }\n }\n return [window, global].forEach((l) => {\n Object.defineProperty(l, \"MutationObserver\", {\n writable: !0,\n configurable: !0,\n value: s\n });\n }), s;\n}, We = ({ disconnect: t, observe: e }) => {\n class n {\n constructor(l) {\n /\n \n /\n g(this, \"disconnect\", t);\n /\n \n /\n g(this, \"observe\", e);\n /\n \n /\n g(this, \"unobserve\");\n /\n \n /\n g(this, \"cb\");\n this.cb = l;\n }\n }\n return [window, global].forEach((s) => {\n Object.defineProperty(s, \"ResizeObserver\", {\n writable: !0,\n configurable: !0,\n value: n\n });\n }), n;\n};\nclass Te extends Event {\n constructor() {\n super(...arguments);\n /\n \n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n g(this, \"detail\");\n }\n}\nconst ze = () => {\n class t extends Te {\n }\n return [window, global].forEach((e) => {\n Object.defineProperty(e, \"SubmitEvent\", {\n writable: !0,\n configurable: !0,\n value: t\n });\n }), t;\n};\nexport {\n Fe as ClassList,\n De as allItemsAreString,\n Ce as cleanString,\n je as createID,\n Se as dateRegExp,\n Ae as dateToString,\n Oe as defineLocales,\n xe as filterArgs,\n Be as focusableElements,\n Ee as getLocaleDatePattern,\n se as getParentWindows,\n Le as getStoryHTML,\n Ne as getWindows,\n _e as isTagName,\n He as isValidString,\n Re as localeCurrency,\n be as localeDate,\n Me as localeNumber,\n Pe as nextTick,\n Ue as setupMutationObserverMock,\n We as setupResizeObserverMock,\n ze as setupSubmitEventMock,\n me as stencilWrapper\n};\n//# sourceMappingURL=index.es.js.map\n"],"version":3}

package/dist/components/index2.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { O as Oe } from './index.es.js';
 const errors$1 = {
 	required: "This field is required.",
 	date: {
-		badInput: "The date format must be {pattern} and the date must be greater than {min}",
+		badInput: "The date format must be {pattern}",
 		min: "The date cannot be earlier than {min}",
 		max: "The date cannot be later than {max}",
 		minMax: "The date must be between {min} and {max}"
@@ -11,7 +11,7 @@ const errors$1 = {
 	numeric: {
 		min: "The value cannot be less than {min}",
 		max: "The value cannot be greater than {max}",
-		minMax: "The value must be between {min} et {max}"
+		minMax: "The value must be between {min} and {max}"
 	}
 };
 const nbCharLeft$1 = "{counter} characters left.";
@@ -94,6 +94,9 @@ const plusMenu$1 = {
 const actionMore$1 = {
 	label: "Actions"
 };
+const loader$1 = {
+	inProgess: "Loading in progress…"
+};
 const en = {
 	errors: errors$1,
 	nbCharLeft: nbCharLeft$1,
@@ -106,13 +109,14 @@ const en = {
 	skipLinks: skipLinks$1,
 	general: general$1,
 	plusMenu: plusMenu$1,
-	actionMore: actionMore$1
+	actionMore: actionMore$1,
+	loader: loader$1
 };
 const errors = {
 	required: "Ce champ est obligatoire.",
 	date: {
-		badInput: "Le format de la date doit être du type {pattern} et la date supérieure au {min}",
+		badInput: "Le format de la date doit être du type {pattern}",
 		min: "La date ne peut pas être antérieure au {min}",
 		max: "La date ne peut pas être postérieure au {max}",
 		minMax: "La date doit être comprise entre le {min} et le {max}"
@@ -203,6 +207,9 @@ const plusMenu = {
 const actionMore = {
 	label: "Actions"
 };
+const loader = {
+	inProgess: "Chargement en cours…"
+};
 const fr = {
 	errors: errors,
 	nbCharLeft: nbCharLeft,
@@ -215,7 +222,8 @@ const fr = {
 	skipLinks: skipLinks,
 	general: general,
 	plusMenu: plusMenu,
-	actionMore: actionMore
+	actionMore: actionMore,
+	loader: loader
 };
 const defaultLocale = 'en';

package/dist/components/index2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index2.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAGA,EAAa,CAAC,QAAQ,EAAE,aAAa;;;;","names":["defineLocales"],"sources":["src/locales/index.ts"],"sourcesContent":["import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { defineLocales } from '@mgdis/stencil-helpers';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/*\n Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = defineLocales(messages, defaultLocale);\n"],"version":3}
1	+ {"file":"index2.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAGA,EAAa,CAAC,QAAQ,EAAE,aAAa;;;;","names":["defineLocales"],"sources":["src/locales/index.ts"],"sourcesContent":["import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { defineLocales } from '@mgdis/stencil-helpers';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/*\n Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = defineLocales(messages, defaultLocale);\n"],"version":3}

package/dist/components/mg-card2.js CHANGED Viewed

@@ -71,7 +71,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement
      */
     render() {
         var _a;
-        return (h("div", { key: '4d2a509e9c4d834d5d70068fa2d7515d8044ba7e', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: 'e3b08a0e5997533ceb4c5d24463a1e748a789683' })));
+        return (h("div", { key: '8eb3843ddbe71df4ae6a6f56896c1c68b5d8c17f', class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", { key: '77d242d0d83844071e1ee8b62d1816cd732e13c1' })));
     }
     static get watchers() { return {
         "variant": ["validateVariant"],

package/dist/components/mg-character-left2.js CHANGED Viewed

@@ -32,7 +32,7 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft e
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '6b4b475c61f5183961a263187cfad0c6609a2c6f', id: this.identifier, "aria-live": "polite" }, h("span", { key: '85fba95f7f827ee9f4ddb1fc3dd5751c04473ccc', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'ef1da0c4d3b361670718726a59ba71a4d0a119b2', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+        return (h("span", { key: 'c18bde23c2d962cd943540eb182381de1c6dd791', id: this.identifier, "aria-live": "polite" }, h("span", { key: 'bf678c1d055607bbdc32a34fbf247fdd189f2d99', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'd18fc90eae95b1c807f6024a9681269b6552a1cf', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-divider.js CHANGED Viewed

@@ -15,7 +15,7 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class MgDivider extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '7250dfa7ca66ea0831292a25ea7e76c29ca36500', class: {
+        return (h("div", { key: 'fd34b566182d17e5cadbb19a923ce07b53cd749d', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full': this.size === 'full',
             } }));

package/dist/components/mg-form.js CHANGED Viewed

@@ -11,7 +11,7 @@ const roles = ['form', 'search', 'none', 'presentation'];
  */
 const requiredMessageStatus = ['default', 'hide'];
-const mgFormCss = ".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form>p{font-size:1.2rem}";
+const mgFormCss = ".mg-u-form-legacy{--mg-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 23rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-inputs-margin-bottom:2.5rem}.mg-c-form>p{font-size:1.2rem}";
 const MgFormStyle0 = mgFormCss;
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
@@ -23,6 +23,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         this.formSubmit = createEvent(this, "form-submit", 7);
         // Classes
         this.classAllRequired = 'mg-c-form--all-required';
+        this.classLabelOnTop = 'mg-c-form--label-on-top';
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -94,12 +95,18 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
             // Set inputs readonly or disabled based on form configuration
             // Othewise listen to events
             this.mgInputs.forEach(input => {
-                if (this.readonly)
+                if (this.labelOnTop) {
+                    input.labelOnTop = true;
+                }
+                if (this.readonly) {
                     input.readonly = true;
-                else if (this.disabled)
+                }
+                else if (this.disabled) {
                     input.disabled = true;
-                else
+                }
+                else {
                     input.addEventListener('input-valid', this.checkValidity);
+                }
             });
         };
         this.identifier = je('mg-form');
@@ -107,6 +114,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         this.readonly = false;
         this.requiredMessage = undefined;
         this.ariaRole = undefined;
+        this.labelOnTop = undefined;
         this.disabled = false;
         this.valid = undefined;
         this.invalid = undefined;
@@ -114,12 +122,22 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         this.requiredMessageText = undefined;
     }
     validateRequiredMessage(newValue) {
-        if (newValue && !requiredMessageStatus.includes(newValue))
+        if (newValue && !requiredMessageStatus.includes(newValue)) {
             throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}.`);
+        }
     }
     validateAriaRole(newValue) {
-        if (newValue && !roles.includes(newValue))
+        if (newValue && !roles.includes(newValue)) {
             throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}.`);
+        }
+    }
+    handlelabelOnTop(newValue) {
+        if (newValue) {
+            this.classCollection.add(this.classLabelOnTop);
+        }
+        else {
+            this.classCollection.delete(this.classLabelOnTop);
+        }
     }
     handleAttributeChange() {
         this.setMgInputs();
@@ -148,6 +166,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         this.messages = initLocales(this.element).messages;
         this.validateAriaRole(this.ariaRole);
         this.validateRequiredMessage(this.requiredMessage);
+        this.handlelabelOnTop(this.labelOnTop);
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
         // Set button form identifier
@@ -181,12 +200,13 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'b398087ca0ce5b911130a473669540daf267c214', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", { key: 'ee961f5fe0138af53826b8a2e415873316015497' }), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+        return (h("form", { key: 'd47d8321976d3daabbb72eacc0f951899b571ce0', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", { key: '7f95819efbe74deb72e74fff313b4f6e0a8ae3a6' }), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {
         "requiredMessage": ["validateRequiredMessage", "handleAttributeChange"],
         "ariaRole": ["validateAriaRole"],
+        "labelOnTop": ["handlelabelOnTop"],
         "readonly": ["handleAttributeChange"],
         "disabled": ["handleAttributeChange"]
     }; }
@@ -197,6 +217,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         "readonly": [4],
         "requiredMessage": [1, "required-message"],
         "ariaRole": [1, "aria-role"],
+        "labelOnTop": [4, "label-on-top"],
         "disabled": [4],
         "valid": [1028],
         "invalid": [1028],
@@ -206,6 +227,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     }, undefined, {
         "requiredMessage": ["validateRequiredMessage", "handleAttributeChange"],
         "ariaRole": ["validateAriaRole"],
+        "labelOnTop": ["handlelabelOnTop"],
         "readonly": ["handleAttributeChange"],
         "disabled": ["handleAttributeChange"]
     }]);

package/dist/components/mg-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-form.js","mappings":";;;;AAAA;;;AAGO,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,CAAU,CAAC;AAOzE;;;AAGO,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,MAAM,CAAU;;ACbjE,MAAM,SAAS,GAAG,4TAA4T,CAAC;AAC/U,qBAAe,SAAS;;MCUXA,QAAM;;;;;;;;QASA,qBAAgB,GAAG,yBAAyB,CAAC;;;;QAkHtD,uBAAkB,GAAG;;YAE3B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAEnD,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM;gBAAE,OAAO;iBACvC,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE;gBAC3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACvD,OAAO;aACR;;;YAID,MAAM,UAAU,GAAG,KAAK,IAAI,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;YAChE,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,iBAAiB,CAAC;YACtE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE;;gBAEjH,MAAM,cAAc,GAA0B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;;;gBAG/E,MAAM,cAAc,GAA0B,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;;gBAExH,IACE,CAAC,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM,KAAK,CAAC,CAAC;qBAC3E,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,KAAK,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EACvH;oBACA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,mBAAmB,EAAE,aAAa,CAAC,CAAC;oBACnH,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;iBACjD;;qBAEI,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;oBAClC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,8BAA8B,CAAC,cAAc,EAAE,gBAAgB,EAAE,UAAU,CAAC,CAAC;iBAC9G;aACF;SACF,CAAC;;;;;;;;QASM,mCAA8B,GAAG,CAAC,cAAqC,EAAE,SAAiB,EAAE,SAAiB,KACnH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC;;;;QAKlE,kBAAa,GAAG;;YAEtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC;YACzD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;YAE3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC,CAAC;;;;;QAMM,qBAAgB,GAAG,CAAC,KAAkB;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;;;;QAKM,gBAAW,GAAG;;YAEpB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAU,KAAK,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAA0B,CAAC;;;YAGtJ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK;gBACzB,IAAI,IAAI,CAAC,QAAQ;oBAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;qBACpC,IAAI,IAAI,CAAC,QAAQ;oBAAE,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;;oBACzC,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;aAChE,CAAC,CAAC;SACJ,CAAC;0BAjL2BC,EAAQ,CAAC,SAAS,CAAC;oBAMzB,IAAI,CAAC,UAAU;wBAKnB,KAAK;;;wBA6BL,KAAK;;;+BAsBc,IAAIC,EAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;;IAvClE,uBAAuB,CAAC,QAAQ;QAC9B,IAAI,QAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oDAAoD,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACrK;IAQD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,6CAA6C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC9H;IASD,qBAAqB;QACnB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;;;;IAqCD,MAAM,YAAY;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK;;gBACzB,MAAA,KAAK,CAAC,YAAY,qDAAI,CAAC;aACxB,CAAC,CAAC;YACH,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;;;IA+FD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QAEnD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;;QAGnD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;;QAGxE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ;YAC7B,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;SAChD,CAAC,CAAC;;QAGH,IAAI,CAAC,WAAW,EAAE,CAAC;;QAGnB,OAAO,CAAC,GAAG,CACT,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAM,KAAK;YAC3B,IAAI;gBACF,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;aAChC;YAAC,WAAM,GAAE;SACX,CAAC,CACH,CAAC,IAAI,CAAC;;YAEL,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC,CAAC;KACJ;;;;IAKD,gBAAgB;;QAEd,IAAI,gBAAgB,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/C;;;;;IAMD,MAAM;QACJ,QACE,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IACjI,IAAI,CAAC,mBAAmB,IAAI,SAAG,SAAS,EAAE,IAAI,CAAC,mBAAmB,GAAM,EACzE,8DAAa,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC5D,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgForm","createID","ClassList"],"sources":["src/components/molecules/mg-form/mg-form.conf.ts","../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["/*\n List of all possibles roles\n /\nexport const roles = ['form', 'search', 'none', 'presentation'] as const;\n\n/\n Aria Role type from roles\n /\nexport type AriaRoleType = (typeof roles)[number];\n\n/\n List of all possibles required message status\n /\nexport const requiredMessageStatus = ['default', 'hide'] as const;\n\n/\n RequiredMessageStatus type from requiredMessageStatus\n /\nexport type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];\n",".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem;--mg-inputs-shrink: 0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.mg-c-form>p{font-size:1.2rem}/# sourceMappingURL=mg-form.css.map /\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n@Component({\n tag: 'mg-form',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n shadow: true,\n})\nexport class MgForm {\n /**********\n Internal \n *********/\n\n private mgInputs: HTMLMgInputsElement[];\n private mgButtons: HTMLMgButtonElement[];\n\n // Classes\n private readonly classAllRequired = 'mg-c-form--all-required';\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgFormElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-form');\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Define if form is readonly\n /\n @Prop() readonly = false;\n\n /\n Define when required message is display.\n * When it is unset, component use it internal logic to manage \"required message\" help text display.\n * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n * As this element is an accessibility requirement in the view,\n * you MUST* re-implement this message on your own and display it when your form contains required inputs.\n /\n @Prop() requiredMessage: RequiredMessageStatusType;\n @Watch('requiredMessage')\n validateRequiredMessage(newValue): void {\n if (newValue && !requiredMessageStatus.includes(newValue)) throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}.`);\n }\n\n /\n Define `<form/>` element aria role\n * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n /\n @Prop() ariaRole: AriaRoleType;\n @Watch('ariaRole')\n validateAriaRole(newValue: MgForm['ariaRole']) {\n if (newValue && !roles.includes(newValue)) throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}.`);\n }\n\n /\n Define if form is disabled\n /\n @Prop() disabled = false;\n @Watch('readonly')\n @Watch('disabled')\n @Watch('requiredMessage')\n handleAttributeChange(): void {\n this.setMgInputs();\n this.setRequiredMessage();\n }\n\n /\n Define form valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define form invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n /\n Required message\n /\n @State() requiredMessageText: string;\n\n /\n Emitted event on form validity check\n * Tells if form is valid or not\n /\n @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n /\n Emitted event on form submit\n /\n @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n if (!this.readonly) {\n this.mgInputs.forEach(input => {\n input.displayError?.();\n });\n this.checkValidity();\n }\n }\n\n /\n Define required message based on mg-inputs required elements\n /\n private setRequiredMessage = (): void => {\n // init required message\n this.requiredMessageText = null;\n this.classCollection.delete(this.classAllRequired);\n\n if (this.requiredMessage === 'hide') return;\n else if (this.requiredMessage === 'default') {\n this.requiredMessageText = this.messages.form.required;\n return;\n }\n\n // If the form is disabled or readonly none of them are required\n // Check if all fields are not editable (readonly or disabled)\n const isEditable = input => !(input.disabled \|\| input.readonly);\n const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n // Get editable inputs\n const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n // Get required inputs\n // mg-input-toggle can not be required\n const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n // All inputs are required\n if (\n [requiredInputs.length, editableInputs.length].every(length => length === 1) \|\|\n (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n ) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n this.classCollection.add(this.classAllRequired);\n }\n // Some fields are required\n else if (requiredInputs.length > 0) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n }\n }\n };\n\n /\n Returns a required message based on the count of required inputs.\n * @param requiredInputs - An array of required input elements.\n * @param keySingle - The key for the singular message format.\n * @param keyPlural - The key for the plural message format.\n * @returns The appropriate required message based on the count of required inputs.\n /\n private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n /\n Check if form is valid\n /\n private checkValidity = (): void => {\n // Update required on input event\n this.setRequiredMessage();\n\n this.valid = !this.mgInputs.some(input => input.invalid);\n this.invalid = !this.valid;\n // We need to send valid event if it is the same value\n this.formValid.emit(this.valid);\n };\n\n /\n Handle Form Submit\n * @param event - submit event\n /\n private handleFormSubmit = (event: SubmitEvent): void => {\n event.preventDefault();\n this.formSubmit.emit();\n };\n\n /\n Set mgInputs\n /\n private setMgInputs = (): void => {\n // Get slotted mgInputs\n this.mgInputs = Array.from(this.element.querySelectorAll('')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as HTMLMgInputsElement[];\n // Set inputs readonly or disabled based on form configuration\n // Othewise listen to events\n this.mgInputs.forEach(input => {\n if (this.readonly) input.readonly = true;\n else if (this.disabled) input.disabled = true;\n else input.addEventListener('input-valid', this.checkValidity);\n });\n };\n\n /************\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n this.validateAriaRole(this.ariaRole);\n this.validateRequiredMessage(this.requiredMessage);\n\n // Get slotted mgButtons\n this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n // Set button form identifier\n this.mgButtons.forEach(mgButton => {\n mgButton.setAttribute('form', this.identifier);\n });\n\n // Set mgInputs\n this.setMgInputs();\n\n // Check validity when slotted mgInputs are ready\n Promise.all(\n this.mgInputs.map(async input => {\n try {\n await input.componentOnReady();\n } catch {} // prevent error with VueJS first render\n }),\n ).then(() => {\n // Define required message and check validity\n this.checkValidity();\n });\n }\n\n /\n Add slot listeners\n /\n componentDidLoad(): void {\n // Update mgInputs when mgForm content change\n new MutationObserver(() => {\n this.setMgInputs();\n }).observe(this.element, { childList: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n <slot></slot>\n {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n </form>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-form.js","mappings":"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","names":["MgForm","createID","ClassList"],"sources":["src/components/molecules/mg-form/mg-form.conf.ts","../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["/*\n List of all possibles roles\n /\nexport const roles = ['form', 'search', 'none', 'presentation'] as const;\n\n/\n Aria Role type from roles\n /\nexport type AriaRoleType = (typeof roles)[number];\n\n/\n List of all possibles required message status\n /\nexport const requiredMessageStatus = ['default', 'hide'] as const;\n\n/\n RequiredMessageStatus type from requiredMessageStatus\n /\nexport type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];\n",".mg-u-form-legacy{--mg-form-inputs-title-width: calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 23rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.mg-c-form.mg-c-form--label-on-top{--mg-inputs-margin-bottom: 2.5rem}.mg-c-form>p{font-size:1.2rem}/# sourceMappingURL=mg-form.css.map /\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n@Component({\n tag: 'mg-form',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\n shadow: true,\n})\nexport class MgForm {\n /**********\n Internal \n *********/\n\n private mgInputs: HTMLMgInputsElement[];\n private mgButtons: HTMLMgButtonElement[];\n\n // Classes\n private readonly classAllRequired = 'mg-c-form--all-required';\n private readonly classLabelOnTop = 'mg-c-form--label-on-top';\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgFormElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n * If not set, it will be created.\n /\n @Prop() identifier: string = createID('mg-form');\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Define if form is readonly\n /\n @Prop() readonly = false;\n\n /\n Define when required message is display.\n * When it is unset, component use it internal logic to manage \"required message\" help text display.\n * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n * As this element is an accessibility requirement in the view,\n * you MUST* re-implement this message on your own and display it when your form contains required inputs.\n /\n @Prop() requiredMessage: RequiredMessageStatusType;\n @Watch('requiredMessage')\n validateRequiredMessage(newValue): void {\n if (newValue && !requiredMessageStatus.includes(newValue)) {\n throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}.`);\n }\n }\n\n /\n Define `<form/>` element aria role\n * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n /\n @Prop() ariaRole: AriaRoleType;\n @Watch('ariaRole')\n validateAriaRole(newValue: MgForm['ariaRole']) {\n if (newValue && !roles.includes(newValue)) {\n throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}.`);\n }\n }\n\n /\n Define if slotted mg-component's label are displayed on top\n /\n @Prop() labelOnTop: boolean;\n @Watch('labelOnTop')\n handlelabelOnTop(newValue: MgForm['labelOnTop']) {\n if (newValue) {\n this.classCollection.add(this.classLabelOnTop);\n } else {\n this.classCollection.delete(this.classLabelOnTop);\n }\n }\n /\n Define if form is disabled\n /\n @Prop() disabled = false;\n @Watch('readonly')\n @Watch('disabled')\n @Watch('requiredMessage')\n handleAttributeChange(): void {\n this.setMgInputs();\n this.setRequiredMessage();\n }\n\n /\n Define form valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define form invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-form']);\n\n /\n Required message\n /\n @State() requiredMessageText: string;\n\n /\n Emitted event on form validity check\n * Tells if form is valid or not\n /\n @Event({ eventName: 'form-valid' }) formValid: EventEmitter<HTMLMgFormElement['valid']>;\n\n /\n Emitted event on form submit\n /\n @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n if (!this.readonly) {\n this.mgInputs.forEach(input => {\n input.displayError?.();\n });\n this.checkValidity();\n }\n }\n\n /\n Define required message based on mg-inputs required elements\n /\n private setRequiredMessage = (): void => {\n // init required message\n this.requiredMessageText = null;\n this.classCollection.delete(this.classAllRequired);\n\n if (this.requiredMessage === 'hide') return;\n else if (this.requiredMessage === 'default') {\n this.requiredMessageText = this.messages.form.required;\n return;\n }\n\n // If the form is disabled or readonly none of them are required\n // Check if all fields are not editable (readonly or disabled)\n const isEditable = input => !(input.disabled \|\| input.readonly);\n const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n // Get editable inputs\n const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n // Get required inputs\n // mg-input-toggle can not be required\n const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n // All inputs are required\n if (\n [requiredInputs.length, editableInputs.length].every(length => length === 1) \|\|\n (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n ) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n this.classCollection.add(this.classAllRequired);\n }\n // Some fields are required\n else if (requiredInputs.length > 0) {\n this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n }\n }\n };\n\n /\n Returns a required message based on the count of required inputs.\n * @param requiredInputs - An array of required input elements.\n * @param keySingle - The key for the singular message format.\n * @param keyPlural - The key for the plural message format.\n * @returns The appropriate required message based on the count of required inputs.\n /\n private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n /\n Check if form is valid\n /\n private checkValidity = (): void => {\n // Update required on input event\n this.setRequiredMessage();\n\n this.valid = !this.mgInputs.some(input => input.invalid);\n this.invalid = !this.valid;\n // We need to send valid event if it is the same value\n this.formValid.emit(this.valid);\n };\n\n /\n Handle Form Submit\n * @param event - submit event\n /\n private handleFormSubmit = (event: SubmitEvent): void => {\n event.preventDefault();\n this.formSubmit.emit();\n };\n\n /\n Set mgInputs\n /\n private setMgInputs = (): void => {\n // Get slotted mgInputs\n this.mgInputs = Array.from(this.element.querySelectorAll('')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as HTMLMgInputsElement[];\n // Set inputs readonly or disabled based on form configuration\n // Othewise listen to events\n this.mgInputs.forEach(input => {\n if (this.labelOnTop) {\n input.labelOnTop = true;\n }\n if (this.readonly) {\n input.readonly = true;\n } else if (this.disabled) {\n input.disabled = true;\n } else {\n input.addEventListener('input-valid', this.checkValidity);\n }\n });\n };\n\n /************\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n this.validateAriaRole(this.ariaRole);\n this.validateRequiredMessage(this.requiredMessage);\n this.handlelabelOnTop(this.labelOnTop);\n\n // Get slotted mgButtons\n this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n // Set button form identifier\n this.mgButtons.forEach(mgButton => {\n mgButton.setAttribute('form', this.identifier);\n });\n\n // Set mgInputs\n this.setMgInputs();\n\n // Check validity when slotted mgInputs are ready\n Promise.all(\n this.mgInputs.map(async input => {\n try {\n await input.componentOnReady();\n } catch {} // prevent error with VueJS first render\n }),\n ).then(() => {\n // Define required message and check validity\n this.checkValidity();\n });\n }\n\n /\n Add slot listeners\n /\n componentDidLoad(): void {\n // Update mgInputs when mgForm content change\n new MutationObserver(() => {\n this.setMgInputs();\n }).observe(this.element, { childList: true });\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <form class={this.classCollection.join()} id={this.identifier} name={this.name} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n <slot></slot>\n {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n </form>\n );\n }\n}\n"],"version":3}