npm - @mgdis/mg-components - Versions diffs - 6.1.0 → 6.3.0 - Mend

@mgdis/mg-components 6.1.0 → 6.3.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 (185) hide show

package/dist/components/mg-input-toggle.js CHANGED Viewed

@@ -95,6 +95,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         this.valid = undefined;
         this.checked = false;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleValue(newValue) {
         // Swich to the right option
         this.setChecked();
@@ -171,6 +172,17 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             this.setErrorMessage(valid ? undefined : errorMessage);
         }
     }
+    /**
+     * Reset value, validity, error and visual state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = this.options[0].value;
+            this.errorMessage = undefined;
+            this.valid = undefined;
+            this.setChecked();
+        }
+    }
     /**
      * set checked state
      */
@@ -218,7 +230,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: '803566335b26e4cf70cbb4cb397db4c9688314de', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
+        return (h("mg-input", { key: 'b47ba6e093e47f8405e12744576f2098943e5fbe', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -251,7 +263,8 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "errorMessage": [32],
         "valid": [32],
         "checked": [32],
-        "setError": [64]
+        "setError": [64],
+        "reset": [64]
     }, undefined, {
         "value": ["handleValue"],
         "items": ["validateItems"],

package/dist/components/mg-input-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","ClassList","toString","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)var(--mg-b-line-height) + 2var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)var(--mg-b-line-height) + 2(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)var(--mg-b-line-height) + 2var(--mg-b-size-4));height:calc(var(--mg-b-font-size)var(--mg-b-line-height) + 2var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}/# sourceMappingURL=mg-input-toggle.css.map /\n","/ eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: unknown): option is ToggleValue =>\n typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/\n @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n /\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classIsActive = 'mg-c-input--toggle-is-active';\n private readonly classOnOff = 'mg-c-input--toggle-on-off';\n private readonly classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: MgInputToggle['items']): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n }\n // String array\n else if (allItemsAreString(newValue)) {\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (Array.isArray(newValue) && newValue.every(isOption)) {\n this.options = newValue;\n } else {\n throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputToggle['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgInputToggle['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText?: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: MgInputToggle['checked']): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.getCheckedItem(newValue).value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n Get checked item\n * @param checked - checked item\n * @returns toggle value\n /\n private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n if (this.options?.length === 2) {\n return this.options[checked ? 1 : 0];\n } else {\n return null;\n }\n };\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.watchIsIcon(this.isIcon);\n this.watchIsOnOff(this.isOnOff);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const checkedItem = this.getCheckedItem(this.checked);\n return (\n <mg-input\n label={this.label}\n helpText={this.helpText}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n ) : (\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n )}\n </mg-input>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","ClassList","toString","allItemsAreString","isValidString"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2);word-break:break-word}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)var(--mg-b-line-height) + 2var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)var(--mg-b-line-height) + 2(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)var(--mg-b-line-height) + 2var(--mg-b-size-4));height:calc(var(--mg-b-font-size)var(--mg-b-line-height) + 2var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}/# sourceMappingURL=mg-input-toggle.css.map /\n","import { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { ClassList, allItemsAreString, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { classDisabled, classReadonly, type TooltipPosition } from '../mg-input/mg-input.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: unknown): option is ToggleValue =>\n typeof option === 'object' && typeof (option as ToggleValue).title === 'string' && (option as ToggleValue).value !== undefined;\n\n/\n @slot item-1 - Left option toggle content\n * @slot item-2 - Right option toggle content\n /\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private readonly classIsActive = 'mg-c-input--toggle-is-active';\n private readonly classOnOff = 'mg-c-input--toggle-on-off';\n private readonly classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n @Watch('value')\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: MgInputToggle['items']): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error(`<mg-input-toggle> prop \"items\" require 2 items. Passed value: ${toString(newValue)}.`);\n }\n // String array\n else if (allItemsAreString(newValue)) {\n this.options = newValue.map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (Array.isArray(newValue) && newValue.every(isOption)) {\n this.options = newValue;\n } else {\n throw new Error(`<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n watchIsOnOff(newValue: MgInputToggle['isOnOff']): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n watchIsIcon(newValue: MgInputToggle['isIcon']): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n watchReadonly(newValue: MgInputToggle['readonly']): void {\n if (newValue) this.classCollection.add(classReadonly);\n else this.classCollection.delete(classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n watchDisabled(newValue: MgInputToggle['disabled']): void {\n if (newValue) this.classCollection.add(classDisabled);\n else this.classCollection.delete(classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText?: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: MgInputToggle['checked']): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.getCheckedItem(newValue).value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputToggleElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean.');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string.');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Reset value, validity, error and visual state\n /\n @Method()\n async reset(): Promise<void> {\n if (!this.readonly) {\n this.value = this.options[0].value;\n this.errorMessage = undefined;\n this.valid = undefined;\n this.setChecked();\n }\n }\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n Get checked item\n * @param checked - checked item\n * @returns toggle value\n /\n private getCheckedItem = (checked: MgInputToggle['checked']): ToggleValue => {\n if (this.options?.length === 2) {\n return this.options[checked ? 1 : 0];\n } else {\n return null;\n }\n };\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.watchIsIcon(this.isIcon);\n this.watchIsOnOff(this.isOnOff);\n this.watchReadonly(this.readonly);\n this.watchDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const checkedItem = this.getCheckedItem(this.checked);\n return (\n <mg-input\n label={this.label}\n helpText={this.helpText}\n identifier={this.identifier}\n class={this.classCollection.join()}\n ariaDescribedbyIDs={[]}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n errorMessage={this.errorMessage}\n >\n {this.readonly ? (\n checkedItem && <b class=\"mg-c-input__readonly-value\">{checkedItem.title}</b>\n ) : (\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n )}\n </mg-input>\n );\n }\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"mg-input2.js","mappings":"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","names":["isValidString","toString","isValideID"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.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 tootltip postions\n /\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/\n Possible Input types\n /\nexport type HTMLMgInputsElement =\n \| (HTMLMgInputElement & { required: true; invalid: false; displayError: () => void; labelOnTop: boolean; readonly: boolean })\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 WindowEvent types\n /\nexport type EventType = keyof WindowEventMap & ('blur' \| 'focus' \| 'mouseenter');\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n /:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(),.mg-c-input__help-text ::slotted(){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/# sourceMappingURL=mg-input.css.map /\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/\n @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n /\n@Component({\n tag: 'mg-input',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n shadow: true,\n})\nexport class MgInput {\n /**********\n Internal \n *********/\n\n // HTML selectors\n private helpTextId: string;\n private helpTextErrorId: string;\n private readonly slotLabel = 'label';\n private readonly slotError = 'error';\n private readonly slotHelpText = 'help-text';\n\n // slots elements\n private errorMessageSlotElement: HTMLElement;\n private helptextMessageSlotElement: HTMLElement;\n\n // style\n private readonly classInput = 'mg-c-input';\n private readonly classHasError = 'mg-c-input--has-error';\n private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgInput['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n } else if (!isValideID(newValue)) {\n console.error(`<mg-input> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n } else {\n this.helpTextId = `${this.identifier}-help-text`;\n this.helpTextErrorId = `${this.identifier}-error`;\n }\n }\n\n /\n Define input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n if (newValue) {\n this.element.classList.add(this.classLabelOnTop);\n } else {\n this.element.classList.remove(this.classLabelOnTop);\n }\n }\n\n /\n Define if label is visible\n /\n @Prop() labelHide: boolean = false;\n @Watch('labelHide')\n @Watch('labelOnTop')\n watchLabelConfig(): void {\n if (this.labelHide && this.labelOnTop) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n @Watch('tooltipPosition')\n watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n if (!tooltipPositions.includes(newValue)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if input is required\n /\n @Prop() required: boolean = false;\n\n /\n Define error message to display\n /\n @Prop() errorMessage?: string;\n @Watch('errorMessage')\n watchErrorMessage(newValue: MgInput['errorMessage']): void {\n if (newValue !== undefined) {\n this.element.classList.add(this.classHasError);\n this.renderErrorMessage();\n } else {\n this.element.classList.remove(this.classHasError);\n this.errorMessageSlotElement?.remove();\n this.errorMessageSlotElement = undefined;\n }\n }\n\n /\n Define help text to display\n /\n @Prop() helpText?: string;\n @Watch('helpText')\n watchHelpText(newValue: MgInput['helpText']): void {\n if (newValue && !this.isReadonly) {\n this.renderHelpText();\n } else {\n this.helptextMessageSlotElement?.remove();\n this.helptextMessageSlotElement = undefined;\n }\n }\n\n /\n Define aria-describedby ids to link with\n /\n @Prop() ariaDescribedbyIDs: string[];\n @Watch('identifier')\n @Watch('errorMessage')\n @Watch('helpText')\n @Watch('ariaDescribedbyIDs')\n watchAriaDescribedbyIDs(): void {\n if (this.isReadonly) return;\n // a11y IDs\n const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n // Help text\n if (this.helpText !== undefined) {\n this.renderHelpText();\n if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n }\n\n // Error Message\n if (this.errorMessage !== undefined) {\n this.renderErrorMessage();\n if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n }\n\n this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n });\n }\n\n /\n Component classes\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n watchClass(): void {\n if (!this.element.classList.contains(this.classInput)) {\n this.element.classList.add(this.classInput);\n }\n this.isFieldset = this.element.classList.contains(classFieldset);\n this.isReadonly = this.element.classList.contains(classReadonly);\n this.isDisabled = this.element.classList.contains(classDisabled);\n this.isVerticalList = this.element.classList.contains(classVerticalList);\n }\n\n /\n Element is fieldset\n /\n @State() isFieldset: boolean = false;\n\n /\n Element is readonly\n /\n @State() isReadonly: boolean = false;\n\n /\n Element is disabled\n /\n @State() isDisabled: boolean = false;\n\n /\n Element is disabled\n /\n @State() isVerticalList: boolean = false;\n\n /\n Trigger label update\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n @Watch('label')\n @Watch('required')\n @Watch('isReadonly')\n @Watch('isFieldset')\n watchLabel(): void {\n if (!isValidString(this.label)) {\n throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n } else {\n this.watchAriaDescribedbyIDs();\n this.renderLabel();\n }\n }\n\n /**********\n Methods \n *********/\n\n /\n * Render input label\n /\n private renderLabel(): void {\n let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n // first remove previous labelslot if exist\n labelSlotElement?.remove();\n\n // create title element\n labelSlotElement = document.createElement('mg-input-title');\n [\n ['slot', this.slotLabel],\n ['identifier', this.identifier],\n ['readonly', this.isReadonly.toString()],\n ['required', ((this.required && !this.isDisabled) \|\| false).toString()],\n ['is-legend', this.isFieldset.toString()],\n ].forEach(([attr, val]) => {\n labelSlotElement.setAttribute(attr, val);\n });\n\n // create label element\n const label = document.createElement('span');\n label.classList.add('mg-c-input-title__text');\n label.textContent = this.label;\n\n labelSlotElement.appendChild(label);\n this.element.appendChild(labelSlotElement);\n }\n\n /\n Render error message\n /\n private renderErrorMessage(): void {\n this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n if (this.errorMessageSlotElement === null) {\n this.errorMessageSlotElement = document.createElement('div');\n this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n this.element.appendChild(this.errorMessageSlotElement);\n }\n this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n this.errorMessageSlotElement.innerHTML = this.errorMessage;\n }\n\n /\n Render help text message\n /\n private renderHelpText(): void {\n this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n if (this.helptextMessageSlotElement === null) {\n this.helptextMessageSlotElement = document.createElement('div');\n this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n this.element.appendChild(this.helptextMessageSlotElement);\n }\n this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n this.helptextMessageSlotElement.innerHTML = this.helpText;\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.watchLabel();\n this.watchClass();\n this.watchLabelOnTop(this.labelOnTop);\n this.watchLabelConfig();\n this.watchTooltipPosition(this.tooltipPosition);\n this.watchHelpText(this.helpText);\n this.watchErrorMessage(this.errorMessage);\n }\n\n /\n Validate slots\n /\n componentDidLoad(): void {\n this.watchAriaDescribedbyIDs();\n if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n }\n }\n\n /\n Get tooltip node\n * @returns mg-tooltip\n /\n private renderTooltip = (): HTMLMgTooltipElement => (\n <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const isGroup = this.isFieldset && !this.isReadonly;\n return (\n <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n <slot name={this.slotLabel}></slot>\n {this.tooltip && (this.tooltipPosition === 'label' \|\| this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n </div>\n <div class=\"mg-c-input__input-container\">\n <div class=\"mg-c-input__input\">\n <slot></slot>\n {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' \|\| this.labelHide) && this.renderTooltip()}\n </div>\n {this.helptextMessageSlotElement && (\n <div class=\"mg-c-input__help-text\">\n <slot name={this.slotHelpText}></slot>\n </div>\n )}\n {!this.isDisabled && this.errorMessage && (\n <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n <slot name={this.slotError}></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input2.js","mappings":"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","names":["isValidString","toString","isValideID"],"sources":["src/components/molecules/inputs/mg-input/mg-input.conf.ts","../styles/dist/components/mg-input.css?tag=mg-input&encapsulation=shadow","src/components/molecules/inputs/mg-input/mg-input.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 tootltip postions\n /\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\n/\n Base interface for common methods\n /\ninterface InputBaseMethods {\n required: boolean;\n invalid: boolean;\n labelOnTop: boolean;\n readonly: boolean;\n displayError: () => Promise<void>;\n reset: () => Promise<void>;\n}\n\n/\n Possible Input types\n /\nexport type HTMLMgInputsElement =\n \| (HTMLMgInputElement & InputBaseMethods)\n \| HTMLMgInputCheckboxElement\n \| HTMLMgInputDateElement\n \| HTMLMgInputNumericElement\n \| HTMLMgInputPasswordElement\n \| HTMLMgInputRadioElement\n \| HTMLMgInputSelectElement\n \| HTMLMgInputTextElement\n \| HTMLMgInputTextareaElement\n \| (HTMLMgInputToggleElement & InputBaseMethods);\n\n/\n Available WindowEvent types\n /\nexport type EventType = keyof WindowEventMap & 'blur';\n\nexport const classFieldset = 'mg-c-input--fieldset';\nexport const classDisabled = 'mg-c-input--disabled';\nexport const classReadonly = 'mg-c-input--readonly';\nexport const classVerticalList = 'mg-c-input--vertical-list';\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n /:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(),.mg-c-input__help-text ::slotted(){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}/# sourceMappingURL=mg-input.css.map /\n","import { Component, h, Prop, Element, Watch, Host, State } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\nimport { tooltipPositions, type TooltipPosition, classFieldset, classReadonly, classDisabled, classVerticalList } from './mg-input.conf';\n\n/\n @slot - Input content\n * @slot label - Label content\n * @slot help-text - Help text content\n * @slot error - error content\n /\n@Component({\n tag: 'mg-input',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input.css',\n shadow: true,\n})\nexport class MgInput {\n /**********\n Internal \n *********/\n\n // HTML selectors\n private helpTextId: string;\n private helpTextErrorId: string;\n private readonly slotLabel = 'label';\n private readonly slotError = 'error';\n private readonly slotHelpText = 'help-text';\n\n // slots elements\n private errorMessageSlotElement: HTMLElement;\n private helptextMessageSlotElement: HTMLElement;\n\n // style\n private readonly classInput = 'mg-c-input';\n private readonly classHasError = 'mg-c-input--has-error';\n private readonly classLabelOnTop = 'mg-c-input--label-on-top';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputElement;\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n watchIdentifier(newValue: MgInput['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error(`<mg-input> prop \"identifier\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n } else if (!isValideID(newValue)) {\n console.error(`<mg-input> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n } else {\n this.helpTextId = `${this.identifier}-help-text`;\n this.helpTextErrorId = `${this.identifier}-error`;\n }\n }\n\n /\n Define input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop?: boolean;\n @Watch('labelOnTop')\n watchLabelOnTop(newValue: MgInput['labelOnTop']): void {\n if (newValue) {\n this.element.classList.add(this.classLabelOnTop);\n } else {\n this.element.classList.remove(this.classLabelOnTop);\n }\n }\n\n /\n Define if label is visible\n /\n @Prop() labelHide: boolean = false;\n @Watch('labelHide')\n @Watch('labelOnTop')\n watchLabelConfig(): void {\n if (this.labelHide && this.labelOnTop) {\n throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n }\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip?: string;\n\n /\n Define tooltip position\n /\n @Prop() tooltipPosition: TooltipPosition = 'input';\n @Watch('tooltipPosition')\n watchTooltipPosition(newValue: MgInput['tooltipPosition']) {\n if (!tooltipPositions.includes(newValue)) {\n throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Define if input is required\n /\n @Prop() required: boolean = false;\n\n /\n Define error message to display\n /\n @Prop() errorMessage?: string;\n @Watch('errorMessage')\n watchErrorMessage(newValue: MgInput['errorMessage']): void {\n if (newValue !== undefined) {\n this.element.classList.add(this.classHasError);\n this.renderErrorMessage();\n } else {\n this.element.classList.remove(this.classHasError);\n this.errorMessageSlotElement?.remove();\n this.errorMessageSlotElement = undefined;\n }\n }\n\n /\n Define help text to display\n /\n @Prop() helpText?: string;\n @Watch('helpText')\n watchHelpText(newValue: MgInput['helpText']): void {\n if (newValue && !this.isReadonly) {\n this.renderHelpText();\n } else {\n this.helptextMessageSlotElement?.remove();\n this.helptextMessageSlotElement = undefined;\n }\n }\n\n /\n Define aria-describedby ids to link with\n /\n @Prop() ariaDescribedbyIDs: string[];\n @Watch('identifier')\n @Watch('errorMessage')\n @Watch('helpText')\n @Watch('ariaDescribedbyIDs')\n watchAriaDescribedbyIDs(): void {\n if (this.isReadonly) return;\n // a11y IDs\n const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);\n // Help text\n if (this.helpText !== undefined) {\n this.renderHelpText();\n if (!ariaDescribedbyIDs.has(this.helpTextId)) ariaDescribedbyIDs.add(this.helpTextId);\n }\n\n // Error Message\n if (this.errorMessage !== undefined) {\n this.renderErrorMessage();\n if (!ariaDescribedbyIDs.has(this.helpTextErrorId)) ariaDescribedbyIDs.add(this.helpTextErrorId);\n }\n\n this.element.querySelectorAll('input,select,textarea,[role=\"switch\"]').forEach(element => {\n element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));\n });\n }\n\n /\n Component classes\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n watchClass(): void {\n if (!this.element.classList.contains(this.classInput)) {\n this.element.classList.add(this.classInput);\n }\n this.isFieldset = this.element.classList.contains(classFieldset);\n this.isReadonly = this.element.classList.contains(classReadonly);\n this.isDisabled = this.element.classList.contains(classDisabled);\n this.isVerticalList = this.element.classList.contains(classVerticalList);\n }\n\n /\n Element is fieldset\n /\n @State() isFieldset: boolean = false;\n\n /\n Element is readonly\n /\n @State() isReadonly: boolean = false;\n\n /\n Element is disabled\n /\n @State() isDisabled: boolean = false;\n\n /\n Element is disabled\n /\n @State() isVerticalList: boolean = false;\n\n /\n Trigger label update\n /\n // eslint-disable-next-line @stencil-community/no-unused-watch\n @Watch('class')\n @Watch('label')\n @Watch('required')\n @Watch('isReadonly')\n @Watch('isFieldset')\n watchLabel(): void {\n if (!isValidString(this.label)) {\n throw new Error(`<mg-input> prop \"label\" is required and must be a string. Passed value: ${toString(this.label)}.`);\n } else {\n this.watchAriaDescribedbyIDs();\n this.renderLabel();\n }\n }\n\n /**********\n Methods \n *********/\n\n /\n * Render input label\n /\n private renderLabel(): void {\n let labelSlotElement: HTMLMgInputTitleElement = this.element.querySelector(`[slot=${this.slotLabel}]`);\n\n // first remove previous labelslot if exist\n labelSlotElement?.remove();\n\n // create title element\n labelSlotElement = document.createElement('mg-input-title');\n [\n ['slot', this.slotLabel],\n ['identifier', this.identifier],\n ['readonly', this.isReadonly.toString()],\n ['required', ((this.required && !this.isDisabled) \|\| false).toString()],\n ['is-legend', this.isFieldset.toString()],\n ].forEach(([attr, val]) => {\n labelSlotElement.setAttribute(attr, val);\n });\n\n // create label element\n const label = document.createElement('span');\n label.classList.add('mg-c-input-title__text');\n label.textContent = this.label;\n\n labelSlotElement.appendChild(label);\n this.element.appendChild(labelSlotElement);\n }\n\n /\n Render error message\n /\n private renderErrorMessage(): void {\n this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);\n if (this.errorMessageSlotElement === null) {\n this.errorMessageSlotElement = document.createElement('div');\n this.errorMessageSlotElement.setAttribute('slot', this.slotError);\n this.element.appendChild(this.errorMessageSlotElement);\n }\n this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);\n this.errorMessageSlotElement.innerHTML = this.errorMessage;\n }\n\n /\n Render help text message\n /\n private renderHelpText(): void {\n this.helptextMessageSlotElement = this.element.querySelector(`[slot=${this.slotHelpText}]`);\n if (this.helptextMessageSlotElement === null) {\n this.helptextMessageSlotElement = document.createElement('div');\n this.helptextMessageSlotElement.setAttribute('slot', this.slotHelpText);\n this.element.appendChild(this.helptextMessageSlotElement);\n }\n this.helptextMessageSlotElement.setAttribute('id', this.helpTextId);\n this.helptextMessageSlotElement.innerHTML = this.helpText;\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n this.watchIdentifier(this.identifier);\n this.watchLabel();\n this.watchClass();\n this.watchLabelOnTop(this.labelOnTop);\n this.watchLabelConfig();\n this.watchTooltipPosition(this.tooltipPosition);\n this.watchHelpText(this.helpText);\n this.watchErrorMessage(this.errorMessage);\n }\n\n /\n Validate slots\n /\n componentDidLoad(): void {\n this.watchAriaDescribedbyIDs();\n if (!this.isReadonly && !this.isFieldset && this.element.querySelector(`#${this.identifier}`) === null) {\n throw new Error(`<mg-input> \"identifier\" prop has no target for id: ${this.identifier}. Add an id to the targeted input.`);\n }\n }\n\n /\n Get tooltip node\n * @returns mg-tooltip\n /\n private renderTooltip = (): HTMLMgTooltipElement => (\n <mg-tooltip identifier={`${this.identifier}-tooltip`} message={this.tooltip}>\n <mg-icon icon=\"info-circle\"></mg-icon>\n </mg-tooltip>\n );\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const isGroup = this.isFieldset && !this.isReadonly;\n return (\n <Host class={this.element.classList.toString()} role={isGroup ? 'group' : undefined} aria-labelledby={isGroup ? `${this.identifier}-title` : undefined}>\n <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide }}>\n <slot name={this.slotLabel}></slot>\n {this.tooltip && (this.tooltipPosition === 'label' \|\| this.labelOnTop) && !this.labelHide && this.renderTooltip()}\n </div>\n <div class=\"mg-c-input__input-container\">\n <div class=\"mg-c-input__input\">\n <slot></slot>\n {this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' \|\| this.labelHide) && this.renderTooltip()}\n </div>\n {this.helptextMessageSlotElement && (\n <div class=\"mg-c-input__help-text\">\n <slot name={this.slotHelpText}></slot>\n </div>\n )}\n {!this.isDisabled && this.errorMessage && (\n <div class=\"mg-c-input__error\" aria-live=\"assertive\">\n <slot name={this.slotError}></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-item-more2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { Y as Ye, m as me, e as et } from './index.es.js';
+import { Y as Ye, m as me, t as tt } from './index.es.js';
 import { d as defineCustomElement$4, D as Direction, s as sizes } from './mg-menu-item2.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$8 } from './mg-badge2.js';
@@ -414,8 +414,7 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
          */
         this.setProxyElement = (proxified) => {
             const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            // eslint-disable-next-line @stencil-community/strict-boolean-conditions
-            if (!proxy) {
+            if (proxy === null) {
                 return;
             }
             // remove proxy id to prevent duplicate key. default html id is: '';
@@ -463,7 +462,7 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
                 // create item-more menu items element from main menu-items clones
                 this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
                 // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
-                et(() => {
+                tt(() => {
                     this.setProxyElement(child);
                     if (child.querySelector('mg-menu') !== null) {
                         child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
@@ -536,11 +535,11 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '402b3c1cb97f1502ea347c62c1e24311e683dd9b', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'ced59a0c96c37285428f809606d8cfb179c25099', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
+        return (h(Host, { key: '11c43154129c5756e80db0af3434c88cab2191f3', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '38fc92410328c317fb046f4e1ec4f94175d484fb', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
                 if (el !== null) {
                     this.moreElementMenuItem = el;
                 }
-            } }, h("mg-icon", { key: '65c5ecd4565ee1ce77e5bd02a7b38d1c0dc2181c', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: 'b8fcc9df2a3ff48114720c34fb147563a91214bc', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '81e3a6c6429f8cb28484ba6a4f3ae54f8e9bb8de', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+            } }, h("mg-icon", { key: '90e21f30004e38a1a0938359276dccd7458e5e86', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: '20f846c5718a19d39ad94abf59bab54658e1ff9c', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'b52f97129e736be9164ae18b717057d1bfc0cd0a', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-item-more2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"mg-item-more2.js","mappings":"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","names":["toString","isValidString","nextTick"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/internals/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/*\n MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n /\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport const OverflowBehaviorElements = {\n BASE_INDEX: 'data-overflow-base-index',\n PROXY_INDEX: 'data-overflow-proxy-index',\n};\n\nexport class OverflowBehavior {\n // variables\n private _resizeObserver: ResizeObserver;\n private _moreElement: HTMLElement;\n private _baseChildren: Element[];\n private _proxyChildren: Element[];\n\n constructor(\n private element: Element,\n private render: () => HTMLElement,\n ) {\n if (this._resizeObserver === undefined) {\n // add resize observer\n this._resizeObserver = new ResizeObserver(entries => {\n entries.forEach(entry => {\n this.run(entry.contentRect.width);\n });\n });\n this._resizeObserver.observe(this.element);\n }\n this.run();\n }\n\n /********\n Public \n *******/\n\n /\n * Disconnect ResizeObserver\n /\n public disconnect = (): void => {\n this._resizeObserver.disconnect();\n };\n\n /**********\n Internal \n *********/\n\n /\n * run overflow behavior\n * @param width - width of the container. Optional.\n /\n private run = (width?: number): void => {\n if (this._moreElement === undefined) {\n // set moreElement\n this._moreElement = this.render();\n\n // set children\n this._baseChildren = this.getInteractiveItems(this.element);\n if (isMgItemMore(this._moreElement)) {\n this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n }\n\n // update children\n this._baseChildren.forEach((child, index) => {\n child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n // set moreElement children\n this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n });\n }\n\n if (width !== undefined) this.updateDisplayedItems(width);\n };\n\n /\n Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n * @param element - element to parse\n * @returns children\n /\n private getInteractiveItems = (element: Element) =>\n (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n /\n Update displayed items in container from a given available space\n * @param availableWidth - available width in container to display child items\n /\n private updateDisplayedItems = (availableWidth: number): void => {\n this.restoreItems();\n const acc = { accWidth: 0, previousItem: null };\n [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement \| HTMLMgItemMoreElement) => {\n acc.accWidth += child.offsetWidth;\n const hasPreviuosItem = acc.previousItem !== null;\n const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');\n // if previous item is hidden AND is NOT more element we hide current\n // OR if item has an overflow we hide current\n // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n // ELSE current is a display item\n this.toggleItem(\n child,\n (isPreviousItemHidden && !this.isMoreElement(child)) \|\| this.isOverflowElement(acc.accWidth, child, availableWidth) \|\| (this.isMoreElement(child) && !isPreviousItemHidden),\n );\n\n // update previous item with current item\n acc.previousItem = child;\n });\n };\n\n /\n Utility method to know if item overflow partialy or totaly in the container\n * @param cumulateWidth - previous sibling elements cumulate width + item width\n * @param item - item HTML element\n * @param availableWidth - container available width\n * @returns truthy if element is overflow\n /\n private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n if (item.previousElementSibling === null \|\| this.isMoreElement(item)) return false;\n else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n else return cumulateWidth > availableWidth;\n };\n\n /\n Utility method to know if a given element is the 'MORE' element\n * @param element - element to match with 'MORE' element\n * @returns truthy if element is the 'MORE' element\n /\n private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n /\n Toggle display item element\n * @param item - item to control\n * @param isHidden - is item hidden\n /\n private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n else if (mgActionMenuindex >= 0) {\n this.toggleElement(item, isHidden);\n this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n }\n };\n\n /\n Toggle element's hide attribute\n * @param element - element to toggle\n * @param isHidden - element is hidden\n /\n private toggleElement = (element: Element, isHidden: boolean): void => {\n if (isHidden) element.setAttribute('hidden', '');\n else element.removeAttribute('hidden');\n };\n\n /\n Remove hidden attributes on all items\n /\n private restoreItems = (): void => {\n [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n };\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n /:host{display:flex;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}/# sourceMappingURL=mg-menu.css.map /\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType, DirectionType } from './mg-menu.conf';\nimport { toString } from '@mgdis/stencil-helpers';\n\n/\n @slot - Menu content\n /\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /**********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n private itemMoreElement: HTMLMgItemMoreElement;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required to define accessibility required attribute `aria-label`\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined && !this.element.hasAttribute('aria-label')) {\n throw new Error(`<${this.name}> prop \"label\" is required. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: DirectionType = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore?: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n } else if (newValue !== undefined) {\n this.renderMgItemMore();\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.itemMoreElement?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n const itemMoreMenuItem = this.getItemMoreMenuItem();\n (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n if (this.direction !== Direction.HORIZONTAL \|\| this.isChildMenu \|\| this.element.children.length <= 1) {\n return;\n }\n\n // Insert mg-item-more outside the mg-menu shadowdom\n if (this.itemMoreElement === undefined) {\n this.itemMoreElement = document.createElement('mg-item-more');\n this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(this.itemMoreElement);\n }\n\n // update mg-item-more props\n for (const attribute in this.itemmore) {\n const newValue = this.itemmore[attribute];\n // to improve rendering we use HTML attributes as much as possible\n if (['string', 'number'].includes(typeof newValue)) {\n this.itemMoreElement.setAttribute(attribute, newValue);\n } else {\n this.itemMoreElement[attribute] = newValue;\n }\n }\n if (this.itemmore?.size === undefined) this.itemMoreElement.size = this.size;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n // when all props, states and DOM are already rendered we can render the mg-item-more\n this.renderMgItemMore();\n // then use mutation observer on children to improve reactivity\n new MutationObserver(() => {\n this.renderMgItemMore();\n }).observe(this.element, { childList: true });\n });\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n /\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}/# sourceMappingURL=mg-item-more.css.map /\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { OverflowBehavior } from '../../../../utils/behaviors.utils';\nimport { Direction, sizes } from '../../menu/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../../locales';\n\n/\n @internal\n /\n@Component({\n tag: 'mg-item-more',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n shadow: true,\n})\nexport class MgItemMore {\n /**********\n Internal \n *********/\n private readonly name = 'mg-item-more';\n private messages: MessageType;\n private parentMenuItems: HTMLMgMenuItemElement[];\n private moreElementMenuItem: HTMLMgMenuItemElement;\n private overflowBehavior: OverflowBehavior;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgItemMoreElement;\n\n /\n Define icon\n /\n @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n @Watch('icon')\n validateIcon(newValue: MgItemMore['icon']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Define slot label element\n /\n @Prop() slotlabel?: SlotLabelType = { display: false };\n @Watch('slotlabel')\n validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);\n else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n }\n\n /\n Define component child menu size.\n /\n @Prop() size?: SizeType;\n @Watch('size')\n validateSize(newValue: MgItemMore['size']): void {\n if (newValue && !sizes.includes(newValue)) throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Define component parent menu.\n /\n @State() parentMenu: HTMLMgMenuElement;\n\n /\n Set proxy element properties and listeners\n * @param proxified - element to proxify from\n /\n private setProxyElement = (proxified: HTMLMgMenuItemElement): void => {\n const proxy: HTMLMgMenuItemElement = this.moreElementMenuItem.querySelector(`[identifier=\"${proxified.identifier}\"]`);\n // eslint-disable-next-line @stencil-community/strict-boolean-conditions\n if (!proxy) {\n return;\n }\n\n // remove proxy id to prevent duplicate key. default html id is: '';\n if (isValidString(proxy.id)) proxy.id = '';\n\n const proxyClickHandler = (): void => {\n this.parentMenu\n .querySelector(`[identifier=\"${proxy.identifier}\"]`)\n .shadowRoot.querySelector('a, button')\n .dispatchEvent(new MouseEvent('click', { bubbles: true }));\n };\n\n // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements\n const updateProxy = (element: HTMLMgMenuItemElement): void => {\n for (const key in element) {\n if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key)) element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);\n }\n\n proxy.innerHTML = element.innerHTML;\n // When `href` is updated we need to wait the full component re-render before update its handler\n setTimeout(() => {\n const interactiveElement = proxy.shadowRoot.querySelector('a, button');\n interactiveElement?.removeEventListener('click', proxyClickHandler);\n interactiveElement?.addEventListener('click', proxyClickHandler);\n });\n };\n\n updateProxy(proxified);\n\n proxified.addEventListener('item-updated', event => {\n updateProxy(event.target);\n });\n\n // update click event listener on proxy item and mirror the event on the main menu element\n // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered\n proxy.addEventListener('item-loaded', () => {\n updateProxy(proxified);\n });\n };\n\n /*********\n Methods \n ********/\n\n /\n * render mg-item-more overflow element\n * @returns mg-item-more element\n /\n private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n // create item-more menu items element from main menu-items clones\n this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n\n // we need to get all `mg-menu-item` linked to the cloned one to set mirror process\n nextTick(() => {\n this.setProxyElement(child);\n if (child.querySelector('mg-menu') !== null) {\n child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);\n }\n });\n });\n\n return this.element;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Set variables and validate props\n /\n componentWillLoad(): void {\n // init variables\n this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n // validate props\n this.validateIcon(this.icon);\n this.validateSlotLabel(this.slotlabel);\n this.validateSize(this.size);\n }\n\n /\n Ensure parent DOM is fully rendered with timeout method before parse elements\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // ensure parent menu is fully rendered\n return setTimeout(() => {\n this.parentMenu = this.element.closest('mg-menu');\n });\n }\n\n /\n Set OverflowBehavior when parentMenu state is upate AND defined\n /\n componentDidUpdate(): void {\n if (this.parentMenu && this.overflowBehavior === undefined) {\n this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n }\n }\n\n /\n Disconnect overflow ResizeObserver\n /\n disconnectedCallback(): void {\n this.overflowBehavior?.disconnect();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"listitem\">\n {this.parentMenu && (\n <mg-menu-item\n data-overflow-more\n data-size={this.parentMenu.size}\n identifier=\"mg-item-more\"\n ref={el => {\n if (el !== null) {\n this.moreElementMenuItem = el;\n }\n }}\n >\n <mg-icon icon={this.icon.icon} size={this.size} slot=\"image\"></mg-icon>\n <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n {this.slotlabel.label}\n </span>\n <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n </mg-menu-item>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-item-more2.js","mappings":";;;;;;;;;;;AAAA;;;;;AAKA,MAAM,YAAY,GAAG,CAAC,OAAoB,KAAuC,OAAO,CAAC,QAAQ,KAAK,cAAc,CAAC;AAE9G,MAAM,wBAAwB,GAAG;IACtC,UAAU,EAAE,0BAA0B;IACtC,WAAW,EAAE,2BAA2B;CACzC,CAAC;MAEW,gBAAgB;IAO3B,YACU,OAAgB,EAChB,MAAyB;QADzB,YAAO,GAAP,OAAO,CAAS;QAChB,WAAM,GAAN,MAAM,CAAmB;;;;;;;QAqB5B,eAAU,GAAG;YAClB,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;SACnC,CAAC;;;;;;;;QAUM,QAAG,GAAG,CAAC,KAAc;YAC3B,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;;gBAEnC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;;gBAGlC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAC5D,IAAI,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;oBACnC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;iBACvG;;gBAGD,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK;oBACtC,KAAK,CAAC,YAAY,CAAC,wBAAwB,CAAC,UAAU,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;;oBAEpE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,WAAW,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;iBAC3F,CAAC,CAAC;aACJ;YAED,IAAI,KAAK,KAAK,SAAS;gBAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;SAC3D,CAAC;;;;;;QAOM,wBAAmB,GAAG,CAAC,OAAgB,eAC7C,OAAA,CAAC,CAAA,MAAA,OAAO,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,MAAM,CAAC,OAAO,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA,EAAA,CAAC;;;;;QAMzI,yBAAoB,GAAG,CAAC,cAAsB;YACpD,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;YAChD,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,KAAoD;gBACtG,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC;gBAClC,MAAM,eAAe,GAAG,GAAG,CAAC,YAAY,KAAK,IAAI,CAAC;gBAClD,MAAM,oBAAoB,GAAG,eAAe,IAAI,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;;;;;gBAKxF,IAAI,CAAC,UAAU,CACb,KAAK,EACL,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAC5K,CAAC;;gBAGF,GAAG,CAAC,YAAY,GAAG,KAAK,CAAC;aAC1B,CAAC,CAAC;SACJ,CAAC;;;;;;;;QASM,sBAAiB,GAAG,CAAC,aAAqB,EAAE,IAAiB,EAAE,cAAsB;YAC3F,IAAI,IAAI,CAAC,sBAAsB,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAC;iBAC9E,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC;gBAAE,OAAO,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;;gBACxH,OAAO,aAAa,GAAG,cAAc,CAAC;SAC5C,CAAC;;;;;;QAOM,kBAAa,GAAG,CAAC,OAAgB,KAAc,OAAO,CAAC,QAAQ,KAAK,cAAc,CAAC;;;;;;QAOnF,eAAU,GAAG,CAAC,IAAiB,EAAE,QAAiB;YACxD,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC,UAAU,CAAC,CAAC,CAAC;YACzF,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;iBACzE,IAAI,iBAAiB,IAAI,CAAC,EAAE;gBAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;gBACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;aACvE;SACF,CAAC;;;;;;QAOM,kBAAa,GAAG,CAAC,OAAgB,EAAE,QAAiB;YAC1D,IAAI,QAAQ;gBAAE,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;;gBAC5C,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;SACxC,CAAC;;;;QAKM,iBAAY,GAAG;YACrB,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;SAC5F,CAAC;QAvIA,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE;;YAEtC,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,OAAO;gBAC/C,OAAO,CAAC,OAAO,CAAC,KAAK;oBACnB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;iBACnC,CAAC,CAAC;aACJ,CAAC,CAAC;YACH,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC5C;QACD,IAAI,CAAC,GAAG,EAAE,CAAC;KACZ;;;ACjCH,MAAM,SAAS,GAAG,ivBAAivB,CAAC;AACpwB,qBAAe,SAAS;;MCYX,MAAM;;;;;;;;QAKA,SAAI,GAAG,SAAS,CAAC;QAC1B,cAAS,GAA4B,EAAE,CAAC;QACxC,oBAAe,GAAG,CAAC,CAAC;;;;;;;;;QA0EpB,kBAAa,GAAG,CAAC,IAA2B,EAAE,SAAkB;YACtE,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,SAAS,EAAE;gBAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB;SACF,CAAC;;;;;QAMM,wBAAmB,GAAG,oBAA6B,OAAA,MAAA,MAAA,IAAI,CAAC,eAAe,0CAAE,UAAU,0CAAE,aAAa,CAAC,cAAc,CAAC,CAAA,EAAA,CAAC;;;;;;QAOnH,oBAAe,GAAG,CAAC,IAA2B,EAAE,KAAgC;YACtF,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO;gBAChC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE;oBAClE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;;oBAE7B,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBACpD,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;wBAC3H,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,eAAe,CAAC,CAAC;qBAC1D,CAAC,CAAC;iBACJ,CAAC,CAAC;aACJ,CAAC,CAAC;SACJ,CAAC;;;;QAKM,2BAAsB,GAAG;;YAE/B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;gBACjC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aACnC,CAAC,CAAC;SACJ,CAAC;;;;QAKM,qBAAgB,GAAG;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;SACzE,CAAC;;;;QAKM,qBAAgB,GAAG;;YACzB,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;gBACpG,OAAO;aACR;;YAGD,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE;gBACtC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;gBAC9D,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBAC5E,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;aAChD;;YAGD,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;;gBAE1C,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,OAAO,QAAQ,CAAC,EAAE;oBAClD,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;iBACxD;qBAAM;oBACL,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,QAAQ,CAAC;iBAC5C;aACF;YACD,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,MAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;SAC9E,CAAC;;yBAxHkD,SAAS,CAAC,UAAU;;oBAyB3C,QAAQ;;;IAlCrC,aAAa,CAAC,QAAyB;QACrC,IAAI,QAAQ,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;YACtE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6CA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SAClG;KACF;IAOD,iBAAiB,CAAC,QAA6B;QAC7C,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAClE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,sCAAsC,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,QAAQ,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACzJ;KACF;IAQD,gBAAgB,CAAC,QAA4B;QAC3C,IAAI,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,UAAU,EAAE;YACrE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,mDAAmD,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC;SAC1G;aAAM,IAAI,QAAQ,KAAK,SAAS,EAAE;YACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAOD,YAAY,CAAC,QAAwB;QACnC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAC7B,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,iCAAiC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmBA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACzH;KACF;;;;;;;IAkGD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;;;;;IAMD,gBAAgB;;;;QAId,OAAO,UAAU,CAAC;;YAEhB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,cAAc,CAA4B,CAAC;YACjI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;;;YAIjE,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,gBAAgB,CAAC;gBACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;aACzB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;SAC/C,CAAC,CAAC;KACJ;;;;IAKD,kBAAkB;QAChB,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,gBAAa,IAAI,CAAC,KAAK,IACtC,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/NH,MAAM,aAAa,GAAG,udAAud,CAAC;AAC9e,yBAAe,aAAa;;MCef,UAAU;;;;;;;;QAIJ,SAAI,GAAG,cAAc,CAAC;;;;;QAsD/B,oBAAe,GAAG,CAAC,SAAgC;YACzD,MAAM,KAAK,GAA0B,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,gBAAgB,SAAS,CAAC,UAAU,IAAI,CAAC,CAAC;YACtH,IAAI,KAAK,KAAK,IAAI,EAAE;gBAClB,OAAO;aACR;;YAGD,IAAIC,EAAa,CAAC,KAAK,CAAC,EAAE,CAAC;gBAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;YAE3C,MAAM,iBAAiB,GAAG;gBACxB,IAAI,CAAC,UAAU;qBACZ,aAAa,CAAC,gBAAgB,KAAK,CAAC,UAAU,IAAI,CAAC;qBACnD,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC;qBACrC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;aAC9D,CAAC;;YAGF,MAAM,WAAW,GAAG,CAAC,OAA8B;gBACjD,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE;oBACzB,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;wBAAE,OAAO,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;iBAC7J;gBAED,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;;gBAEpC,UAAU,CAAC;oBACT,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;oBACvE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;oBACpE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;iBAClE,CAAC,CAAC;aACJ,CAAC;YAEF,WAAW,CAAC,SAAS,CAAC,CAAC;YAEvB,SAAS,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK;gBAC9C,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAC3B,CAAC,CAAC;;;YAIH,KAAK,CAAC,gBAAgB,CAAC,aAAa,EAAE;gBACpC,WAAW,CAAC,SAAS,CAAC,CAAC;aACxB,CAAC,CAAC;SACJ,CAAC;;;;;;;;QAUM,oCAA+B,GAAG;YACxC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,KAA4B;;gBAExD,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;;gBAGrFC,EAAQ,CAAC;oBACP,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;oBAC5B,IAAI,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE;wBAC3C,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;qBACtE;iBACF,CAAC,CAAC;aACJ,CAAC,CAAC;YAEH,OAAO,IAAI,CAAC,OAAO,CAAC;SACrB,CAAC;oBAvGwB,EAAE,IAAI,EAAE,mBAAmB,EAAE;yBAUnB,EAAE,OAAO,EAAE,KAAK,EAAE;;;;IARtD,YAAY,CAAC,QAA4B;QACvC,IAAI,OAAO,QAAQ,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC;YACrG,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,mEAAmEF,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1H;IAOD,iBAAiB,CAAC,QAAiC;QACjD,IAAI,OAAO,QAAQ,KAAK,QAAQ,KAAK,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,CAAC,OAAO,KAAK,SAAS,CAAC;YACzG,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6EAA6EA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;aAC9H,IAAI,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;YAAE,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;KAC7F;IAOD,YAAY,CAAC,QAA4B;QACvC,IAAI,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,mEAAmEA,EAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACnK;;;;;;;IAuFD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAuB,CAAC;;QAG3E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;;;;;IAMD,gBAAgB;;QAEd,OAAO,UAAU,CAAC;YAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACnD,CAAC,CAAC;KACJ;;;;IAKD,kBAAkB;QAChB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,EAAE;YAC1D,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,CAA4B,CAAC;YACxI,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;SACrG;KACF;;;;IAKD,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;KACrC;;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IAClB,IAAI,CAAC,UAAU,KACd,8GAEa,IAAI,CAAC,UAAU,CAAC,IAAI,EAC/B,UAAU,EAAC,cAAc,EACzB,GAAG,EAAE,EAAE;gBACL,IAAI,EAAE,KAAK,IAAI,EAAE;oBACf,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;iBAC/B;aACF,IAED,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,GAAW,EACvE,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,OAAO,IAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAChB,EACP,gEAAS,SAAS,EAAE,SAAS,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,CACtF,CAChB,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["toString","isValidString","nextTick"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-menu.css?tag=mg-menu&encapsulation=shadow","src/components/molecules/menu/mg-menu/mg-menu.tsx","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/internals/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/*\n MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n /\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport const OverflowBehaviorElements = {\n BASE_INDEX: 'data-overflow-base-index',\n PROXY_INDEX: 'data-overflow-proxy-index',\n};\n\nexport class OverflowBehavior {\n // variables\n private _resizeObserver: ResizeObserver;\n private _moreElement: HTMLElement;\n private _baseChildren: Element[];\n private _proxyChildren: Element[];\n\n constructor(\n private element: Element,\n private render: () => HTMLElement,\n ) {\n if (this._resizeObserver === undefined) {\n // add resize observer\n this._resizeObserver = new ResizeObserver(entries => {\n entries.forEach(entry => {\n this.run(entry.contentRect.width);\n });\n });\n this._resizeObserver.observe(this.element);\n }\n this.run();\n }\n\n /********\n Public \n *******/\n\n /\n * Disconnect ResizeObserver\n /\n public disconnect = (): void => {\n this._resizeObserver.disconnect();\n };\n\n /**********\n Internal \n *********/\n\n /\n * run overflow behavior\n * @param width - width of the container. Optional.\n /\n private run = (width?: number): void => {\n if (this._moreElement === undefined) {\n // set moreElement\n this._moreElement = this.render();\n\n // set children\n this._baseChildren = this.getInteractiveItems(this.element);\n if (isMgItemMore(this._moreElement)) {\n this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n }\n\n // update children\n this._baseChildren.forEach((child, index) => {\n child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n // set moreElement children\n this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n });\n }\n\n if (width !== undefined) this.updateDisplayedItems(width);\n };\n\n /\n Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n * @param element - element to parse\n * @returns children\n /\n private getInteractiveItems = (element: Element) =>\n (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n /\n Update displayed items in container from a given available space\n * @param availableWidth - available width in container to display child items\n /\n private updateDisplayedItems = (availableWidth: number): void => {\n this.restoreItems();\n const acc = { accWidth: 0, previousItem: null };\n [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement \| HTMLMgItemMoreElement) => {\n acc.accWidth += child.offsetWidth;\n const hasPreviuosItem = acc.previousItem !== null;\n const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');\n // if previous item is hidden AND is NOT more element we hide current\n // OR if item has an overflow we hide current\n // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n // ELSE current is a display item\n this.toggleItem(\n child,\n (isPreviousItemHidden && !this.isMoreElement(child)) \|\| this.isOverflowElement(acc.accWidth, child, availableWidth) \|\| (this.isMoreElement(child) && !isPreviousItemHidden),\n );\n\n // update previous item with current item\n acc.previousItem = child;\n });\n };\n\n /\n Utility method to know if item overflow partialy or totaly in the container\n * @param cumulateWidth - previous sibling elements cumulate width + item width\n * @param item - item HTML element\n * @param availableWidth - container available width\n * @returns truthy if element is overflow\n /\n private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n if (item.previousElementSibling === null \|\| this.isMoreElement(item)) return false;\n else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n else return cumulateWidth > availableWidth;\n };\n\n /\n Utility method to know if a given element is the 'MORE' element\n * @param element - element to match with 'MORE' element\n * @returns truthy if element is the 'MORE' element\n /\n private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n /\n Toggle display item element\n * @param item - item to control\n * @param isHidden - is item hidden\n /\n private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n else if (mgActionMenuindex >= 0) {\n this.toggleElement(item, isHidden);\n this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n }\n };\n\n /\n Toggle element's hide attribute\n * @param element - element to toggle\n * @param isHidden - element is hidden\n /\n private toggleElement = (element: Element, isHidden: boolean): void => {\n if (isHidden) element.setAttribute('hidden', '');\n else element.removeAttribute('hidden');\n };\n\n /\n Remove hidden attributes on all items\n /\n private restoreItems = (): void => {\n [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n };\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}/!\n * @prop --mg-c-menu-color-background: Defines the background color of the menu. Unset by default, fallback on `--mg-b-color-light`.\n /:host{display:flex;background-color:var(--mg-c-menu-color-background, var(--mg-b-color-light))}:host([direction=vertical]){height:100%;flex-direction:column;overflow-y:auto}/# sourceMappingURL=mg-menu.css.map /\n","import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType, DirectionType } from './mg-menu.conf';\nimport { toString } from '@mgdis/stencil-helpers';\n\n/\n @slot - Menu content\n /\n@Component({\n tag: 'mg-menu',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n shadow: true,\n})\nexport class MgMenu {\n /**********\n Internal \n *********/\n\n private readonly name = 'mg-menu';\n private menuItems: HTMLMgMenuItemElement[] = [];\n private focusedMenuItem = 0;\n private itemMoreElement: HTMLMgItemMoreElement;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgMenuElement;\n\n /\n Menu label. Include short menu description.\n * Required to define accessibility required attribute `aria-label`\n /\n @Prop() label!: string;\n @Watch('label')\n validateLabel(newValue: MgMenu['label']): void {\n if (newValue === undefined && !this.element.hasAttribute('aria-label')) {\n throw new Error(`<${this.name}> prop \"label\" is required. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Component display direction.\n /\n @Prop({ reflect: true }) direction: DirectionType = Direction.HORIZONTAL;\n @Watch('direction')\n validateDirection(newValue: MgMenu['direction']): void {\n if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n Customize \"mg-item-more\" element\n * Used with direction: 'vertical' to manage overflow\n /\n @Prop() itemmore?: ItemMoreType;\n @Watch('itemmore')\n validateItemMore(newValue: MgMenu['itemmore']): void {\n if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n } else if (newValue !== undefined) {\n this.renderMgItemMore();\n }\n }\n\n /\n Define mg-menu size\n /\n @Prop() size: MenuSizeType = 'medium';\n @Watch('size')\n validateSize(newValue: MgMenu['size']): void {\n if (!sizes.includes(newValue)) {\n throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n }\n }\n\n /\n is this menu a child menu. Used for conditional render.\n /\n @State() isChildMenu: boolean;\n\n /***********\n Methods \n **********/\n\n /\n * Close matching menu-item\n * @param item - menu-item to close\n * @param condition - addionnal condition\n /\n private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n if (!this.isChildMenu && condition) {\n item.expanded = false;\n }\n };\n\n /\n get mg-item-more child mg-menu-item element\n * @returns mg-menu-item element\n /\n private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.itemMoreElement?.shadowRoot?.querySelector('mg-menu-item');\n\n /\n Set item listend\n * @param item - mg-menu-item element\n * @param index - number\n /\n private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n ['click', 'focus'].forEach(trigger => {\n item.shadowRoot.querySelector('button,a').addEventListener(trigger, () => {\n this.focusedMenuItem = index;\n // reset expanded on previous active menu item\n const itemMoreMenuItem = this.getItemMoreMenuItem();\n (![null, undefined].includes(itemMoreMenuItem) ? [...this.menuItems, itemMoreMenuItem] : this.menuItems).forEach((item, index) => {\n this.closeMenuItem(item, index !== this.focusedMenuItem);\n });\n });\n });\n };\n\n /\n Store menu-items on component init and add listeners\n /\n private initMenuItemsListeners = (): void => {\n // add listeners on menu item and edit index\n this.menuItems.forEach((item, index) => {\n this.setItemListener(item, index);\n });\n };\n\n /\n Handle item-loaded event on mg-item-more element\n /\n private handleItemLoaded = (): void => {\n this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n };\n\n /\n render mg-item-more\n /\n private renderMgItemMore = (): void => {\n if (this.direction !== Direction.HORIZONTAL \|\| this.isChildMenu \|\| this.element.children.length <= 1) {\n return;\n }\n\n // Insert mg-item-more outside the mg-menu shadowdom\n if (this.itemMoreElement === undefined) {\n this.itemMoreElement = document.createElement('mg-item-more');\n this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);\n this.element.appendChild(this.itemMoreElement);\n }\n\n // update mg-item-more props\n for (const attribute in this.itemmore) {\n const newValue = this.itemmore[attribute];\n // to improve rendering we use HTML attributes as much as possible\n if (['string', 'number'].includes(typeof newValue)) {\n this.itemMoreElement.setAttribute(attribute, newValue);\n } else {\n this.itemMoreElement[attribute] = newValue;\n }\n }\n if (this.itemmore?.size === undefined) this.itemMoreElement.size = this.size;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Validate props\n /\n componentWillLoad(): void {\n this.validateDirection(this.direction);\n this.validateLabel(this.label);\n this.validateItemMore(this.itemmore);\n this.validateSize(this.size);\n }\n\n /\n Check if component slots configuration\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // update props and states after componentDidLoad hook\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n // store all menu-items\n this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n // add mg-item-more to manage OverflowBehavior\n // when all props, states and DOM are already rendered we can render the mg-item-more\n this.renderMgItemMore();\n // then use mutation observer on children to improve reactivity\n new MutationObserver(() => {\n this.renderMgItemMore();\n }).observe(this.element, { childList: true });\n });\n }\n\n /\n Add listeners to items\n /\n componentDidRender(): void {\n this.initMenuItemsListeners();\n }\n\n /\n Render\n * @returns HTML Element\n /\n render(): HTMLElement {\n return (\n <Host role=\"list\" aria-label={this.label}>\n <slot></slot>\n </Host>\n );\n }\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}/# sourceMappingURL=mg-item-more.css.map /\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../../locales/index.conf';\nimport { OverflowBehavior } from '../../../../utils/behaviors.utils';\nimport { Direction, sizes } from '../../menu/mg-menu/mg-menu.conf';\nimport { initLocales } from '../../../../locales';\n\n/\n @internal\n /\n@Component({\n tag: 'mg-item-more',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n shadow: true,\n})\nexport class MgItemMore {\n /**********\n Internal \n *********/\n private readonly name = 'mg-item-more';\n private messages: MessageType;\n private parentMenuItems: HTMLMgMenuItemElement[];\n private moreElementMenuItem: HTMLMgMenuItemElement;\n private overflowBehavior: OverflowBehavior;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgItemMoreElement;\n\n /\n Define icon\n /\n @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n @Watch('icon')\n validateIcon(newValue: MgItemMore['icon']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Define slot label element\n /\n @Prop() slotlabel?: SlotLabelType = { display: false };\n @Watch('slotlabel')\n validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n if (typeof newValue !== 'object' \|\| (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type. Passed value: ${toString(newValue)}.`);\n else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n }\n\n /\n Define component child menu size.\n /\n @Prop() size?: SizeType;\n @Watch('size')\n validateSize(newValue: MgItemMore['size']): void {\n if (newValue && !sizes.includes(newValue)) throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type. Passed value: ${toString(newValue)}.`);\n }\n\n /\n Define component parent menu.\n /\n @State() parentMenu: HTMLMgMenuElement;\n\n /\n Set proxy element properties and listeners\n * @param proxified - element to proxify from\n /\n private setProxyElement = (proxified: HTMLMgMenuItemElement): void => {\n const proxy: HTMLMgMenuItemElement = this.moreElementMenuItem.querySelector(`[identifier=\"${proxified.identifier}\"]`);\n if (proxy === null) {\n return;\n }\n\n // remove proxy id to prevent duplicate key. default html id is: '';\n if (isValidString(proxy.id)) proxy.id = '';\n\n const proxyClickHandler = (): void => {\n this.parentMenu\n .querySelector(`[identifier=\"${proxy.identifier}\"]`)\n .shadowRoot.querySelector('a, button')\n .dispatchEvent(new MouseEvent('click', { bubbles: true }));\n };\n\n // Watch the `item-updated` event to keep element needeed properties and innerHTML in sync between the proxified and the proxy elements\n const updateProxy = (element: HTMLMgMenuItemElement): void => {\n for (const key in element) {\n if (['identifier', 'href', 'targer', 'status', 'expanded'].includes(key)) element[key] ? proxy.setAttribute(key, element[key]) : proxy.removeAttribute(key);\n }\n\n proxy.innerHTML = element.innerHTML;\n // When `href` is updated we need to wait the full component re-render before update its handler\n setTimeout(() => {\n const interactiveElement = proxy.shadowRoot.querySelector('a, button');\n interactiveElement?.removeEventListener('click', proxyClickHandler);\n interactiveElement?.addEventListener('click', proxyClickHandler);\n });\n };\n\n updateProxy(proxified);\n\n proxified.addEventListener('item-updated', event => {\n updateProxy(event.target);\n });\n\n // update click event listener on proxy item and mirror the event on the main menu element\n // we need to wait mg-menu-item to be loaded to ensure the shadowroot is rendered\n proxy.addEventListener('item-loaded', () => {\n updateProxy(proxified);\n });\n };\n\n /*********\n Methods \n ********/\n\n /\n * render mg-item-more overflow element\n * @returns mg-item-more element\n /\n private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n // create item-more menu items element from main menu-items clones\n this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n\n // we need to get all `mg-menu-item` linked to the cloned one to set mirror process\n nextTick(() => {\n this.setProxyElement(child);\n if (child.querySelector('mg-menu') !== null) {\n child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);\n }\n });\n });\n\n return this.element;\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Set variables and validate props\n /\n componentWillLoad(): void {\n // init variables\n this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n // validate props\n this.validateIcon(this.icon);\n this.validateSlotLabel(this.slotlabel);\n this.validateSize(this.size);\n }\n\n /\n Ensure parent DOM is fully rendered with timeout method before parse elements\n * @returns timeout\n /\n componentDidLoad(): ReturnType<typeof setTimeout> {\n // ensure parent menu is fully rendered\n return setTimeout(() => {\n this.parentMenu = this.element.closest('mg-menu');\n });\n }\n\n /\n Set OverflowBehavior when parentMenu state is upate AND defined\n /\n componentDidUpdate(): void {\n if (this.parentMenu && this.overflowBehavior === undefined) {\n this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n }\n }\n\n /\n Disconnect overflow ResizeObserver\n /\n disconnectedCallback(): void {\n this.overflowBehavior?.disconnect();\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <Host role=\"listitem\">\n {this.parentMenu && (\n <mg-menu-item\n data-overflow-more\n data-size={this.parentMenu.size}\n identifier=\"mg-item-more\"\n ref={el => {\n if (el !== null) {\n this.moreElementMenuItem = el;\n }\n }}\n >\n <mg-icon icon={this.icon.icon} size={this.size} slot=\"image\"></mg-icon>\n <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n {this.slotlabel.label}\n </span>\n <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n </mg-menu-item>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-menu-item2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as me, I as Ie, X as Xe, G as Ge, Y as Ye, e as et } from './index.es.js';
+import { m as me, q as qe, X as Xe, G as Ge, Y as Ye, t as tt } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-badge2.js';
 import { d as defineCustomElement$5 } from './mg-button2.js';
@@ -170,7 +170,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = Ie('mg-menu-item');
+        this.identifier = qe('mg-menu-item');
         this.href = undefined;
         this.target = undefined;
         this.status = Status.VISIBLE;
@@ -330,7 +330,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
      * @returns promise process wich emit the 'item-updated' event
      */
     componentShouldUpdate() {
-        return et(() => {
+        return tt(() => {
             this.itemUpdated.emit();
         });
     }

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { I as Ie, X as Xe, G as Ge, Y as Ye, m as me } from './index.es.js';
+import { q as qe, X as Xe, G as Ge, Y as Ye, m as me } from './index.es.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-button2.js';
 import { d as defineCustomElement$3 } from './mg-card2.js';
@@ -20,6 +20,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         this.__attachShadow();
         this.componentShow = createEvent(this, "component-show", 7);
         this.componentHide = createEvent(this, "component-hide", 7);
+        this.componentClose = createEvent(this, "component-close", 7);
         // IDs
         this.titleId = '';
         /***********
@@ -30,8 +31,9 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
          */
         this.handleClose = () => {
             this.open = false;
+            this.componentClose.emit();
         };
-        this.identifier = Ie('mg-modal');
+        this.identifier = qe('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
@@ -91,6 +93,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         // update open prop when use escape key
         this.dialog.addEventListener('close', () => {
             this.open = false;
+            this.componentClose.emit();
         });
     }
     /**
@@ -98,13 +101,11 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: '00881e2aa895d9b4bc48f721460a0f65f3ba1042', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: 'e4091c6fa70e4b7bccd24db2212e0d2b94ae3099', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: '3fdda688cfa51f9f96403cd918d7469a1be5f640' }, h("div", { key: 'f7f7dd207d50ed6a50cb13043acd6b1662197b8f', class: "mg-c-modal__dialog" }, h("header", { key: '9b6f2fbc0aba552d4f921df08f5e0301fcb996d1', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'cbe67968704c82cdcf640b829daf4367e31afc87', class: "mg-c-modal__close-button" }, h("mg-button", { key: '050ce6bdd52df7363f37a7e785e7de82e5f28fc8', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton,
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: this.handleClose }, h("mg-icon", { key: '256f467d254ba056505d8b0fdffbbef0bc426b37', icon: "cross" })))), h("h1", { key: '9812cb37e4cc713309191d53a83526b1970389c1', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'a83b1be738c8556d60e1c0c74c7adb24c751bdf9', class: "mg-c-modal__content" }, h("slot", { key: '3431c31ac066e43748063cc28daa785ae39f7b25' })), this.hasActions && (h("footer", { key: '0080243246ca901e0566fd947e74737c12fc2426', class: "mg-c-modal__footer" }, h("slot", { key: '044104989259ebd5a3ca8b84a24b7b1e844b7d7e', name: "actions" })))))));
+            } }, h("mg-card", { key: 'd674065eb361fbae99545e79840ee13779dff236' }, h("div", { key: 'f3c7464c97710c9b58db1e4ad5b3c80c43de5493', class: "mg-c-modal__dialog" }, h("header", { key: 'b6f714cdaf553e26ab1a8212608a50949cfc0395', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '95310b0c375e412da21487ae68cb3437afdf7537', class: "mg-c-modal__close-button" }, h("mg-button", { key: '29303f06b8db367aaa372196996b2ab074d799f2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '153eb9f3039422b5e9c554a7878ebc9678b2a997', icon: "cross" })))), h("h1", { key: 'fae980d224a9947ac11ae6d7ddddcc7591ba695f', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'e5efb0df7f7726f454d7f4347c8f5cee7bac1f00', class: "mg-c-modal__content" }, h("slot", { key: '38eeb27cf83588402e6ebc0d674e3967c45576ea' })), this.hasActions && (h("footer", { key: 'c50c3bde92a3e6fae3a047ad7803a8f80f277eeb', class: "mg-c-modal__footer" }, h("slot", { key: '777984d09b3df311a2f6e30dda664dfe0771bfd4', name: "actions" })))))));
     }
     get element() { return this; }
     static get watchers() { return {