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

@mgdis/mg-components 5.23.2 → 5.25.0

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

Files changed (187) hide show

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

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-const mgInputTextareaCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.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__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
+const mgInputTextareaCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title mg-input-title+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}@media screen and (max-width: 767px){.mg-c-input{flex-direction:column}.mg-c-input .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input .mg-c-input__input-container{width:100%}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.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__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
 const MgInputTextareaStyle0 = mgInputTextareaCss;
 const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea extends HTMLElement {
@@ -107,6 +107,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
         this.patternErrorMessage = undefined;
         this.rows = 3;
         this.tooltip = undefined;
+        this.tooltipPosition = 'input';
         this.displayCharacterLeft = true;
         this.helpText = undefined;
         this.valid = undefined;
@@ -210,7 +211,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { key: 'c77be56541d90814c1b829182dcccfbdb4321f15', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '5380abe8e0fcf53da64108a2ea05de407ca63885', class: "mg-c-input__with-character-left" }, h("textarea", { key: '75065e3b389fd60796a7f83232b50fdae06e3b4f', class: {
+        return (h(MgInput, { key: '787cd8f44ee98c6f337c3718450f87bf95ecfa90', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { key: '4d9efd68e2f172b3e44198c82e66866d7975a1b0', class: "mg-c-input__with-character-left" }, h("textarea", { key: '1e4b6e771fe376eb3214fbedf0af09887e887e1f', class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
                 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',
@@ -248,6 +249,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
         "patternErrorMessage": [1, "pattern-error-message"],
         "rows": [2],
         "tooltip": [1],
+        "tooltipPosition": [1, "tooltip-position"],
         "displayCharacterLeft": [4, "display-character-left"],
         "helpText": [1, "help-text"],
         "valid": [1028],

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

	@@ -1 +1 @@
1	- {"file":"mg-input-textarea.js","mappings":"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","names":["MgInputTextarea","ClassList","isValidString"],"sources":["../styles/dist/components/mg-input-textarea.css?tag=mg-input-textarea&encapsulation=shadow","src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left: 0;--mg-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right: 0;--mg-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right: var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.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__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}/# sourceMappingURL=mg-input-textarea.css.map /\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-textarea',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n shadow: true,\n})\nexport class MgInputTextarea {\n /***********\n Internal \n *********/\n\n // Classes\n private classFocus = 'mg-u-is-focused';\n private classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';\n\n // IDs\n private characterLeftId;\n\n // HTML selector\n private input: HTMLTextAreaElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextareaElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.checkValidity();\n this.valueChange.emit(newValue);\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 Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\n\n /\n Input max length\n /\n @Prop() maxlength = 4000;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\n /\n @Prop() pattern: string;\n\n /\n Define input pattern error message\n /\n @Prop() patternErrorMessage: string;\n @Watch('pattern')\n @Watch('patternErrorMessage')\n validatePattern(newValue: string): void {\n if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n throw new Error('<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Define the number of visible text lines for the control\n /\n @Prop() rows = 3;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\n @Watch('displayCharacterLeft')\n validateDisplayCharacterLeft(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(this.classHasDisplayCharacterLeft);\n } else {\n this.classCollection.delete(this.classHasDisplayCharacterLeft);\n }\n }\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Define if input is resizable\n /\n @Prop() resizable: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'none';\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\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: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputTextarea['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined \|\| (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n /\n Handle input event\n /\n private handleInput = (): void => {\n if (this.hasDisplayedError) {\n this.checkValidity();\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Get pattern validity\n * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n * @returns is pattern valid\n /\n private getPatternValidity = (): boolean => this.pattern === undefined \|\| new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined && this.input.checkValidity() && this.getPatternValidity()));\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 not match pattern\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (!this.getPatternValidity()) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div class=\"mg-c-input__with-character-left\">\n <textarea\n class={{\n 'mg-c-input__box': true,\n 'mg-c-input__box--resizable': this.resizable === 'both',\n 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n }}\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n rows={this.rows}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLTextAreaElement) => {\n if (el !== null) this.input = el;\n }}\n ></textarea>\n {this.displayCharacterLeft && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n </MgInput>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-textarea.js","mappings":"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","names":["MgInputTextarea","ClassList","isValidString"],"sources":["../styles/dist/components/mg-input-textarea.css?tag=mg-input-textarea&encapsulation=shadow","src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title mg-input-title+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}@media screen and (max-width: 767px){.mg-c-input{flex-direction:column}.mg-c-input .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input .mg-c-input__input-container{width:100%}}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left: 0;--mg-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right: 0;--mg-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right: var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.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__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}/# sourceMappingURL=mg-input-textarea.css.map /\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Handler, type TooltipPosition, type Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-textarea',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n shadow: true,\n})\nexport class MgInputTextarea {\n /***********\n Internal \n *********/\n\n // Classes\n private classFocus = 'mg-u-is-focused';\n private classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';\n\n // IDs\n private characterLeftId;\n\n // HTML selector\n private input: HTMLTextAreaElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n private handlerInProgress: Handler;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextareaElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.checkValidity();\n this.valueChange.emit(newValue);\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 Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\n\n /\n Input max length\n /\n @Prop() maxlength = 4000;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\n * Please refer to the Pattern section in the input documentation for detailed information on using regular expressions in components.\n /\n @Prop() pattern: string;\n\n /\n Define input pattern error message\n /\n @Prop() patternErrorMessage: string;\n @Watch('pattern')\n @Watch('patternErrorMessage')\n validatePattern(newValue: string): void {\n if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n throw new Error('<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Define the number of visible text lines for the control\n /\n @Prop() rows = 3;\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 Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\n @Watch('displayCharacterLeft')\n validateDisplayCharacterLeft(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(this.classHasDisplayCharacterLeft);\n } else {\n this.classCollection.delete(this.classHasDisplayCharacterLeft);\n }\n }\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Define if input is resizable\n /\n @Prop() resizable: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'none';\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<HTMLMgInputTextareaElement['value']>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<HTMLMgInputTextareaElement['valid']>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\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: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputTextarea['valid']) {\n const oldValidValue = this.valid;\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n if (this.handlerInProgress === undefined \|\| (this.handlerInProgress === Handler.BLUR && this.valid !== oldValidValue)) this.inputValid.emit(this.valid);\n }\n /\n Handle input event\n /\n private handleInput = (): void => {\n if (this.hasDisplayedError) {\n this.checkValidity();\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.handlerInProgress = Handler.BLUR;\n this.displayError().finally(() => {\n // reset guard\n this.handlerInProgress = undefined;\n });\n };\n\n /\n Get pattern validity\n * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n * @returns is pattern valid\n /\n private getPatternValidity = (): boolean => this.pattern === undefined \|\| new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined && this.input.checkValidity() && this.getPatternValidity()));\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 not match pattern\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (!this.getPatternValidity()) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div class=\"mg-c-input__with-character-left\">\n <textarea\n class={{\n 'mg-c-input__box': true,\n 'mg-c-input__box--resizable': this.resizable === 'both',\n 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n }}\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n rows={this.rows}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLTextAreaElement) => {\n if (el !== null) this.input = el;\n }}\n ></textarea>\n {this.displayCharacterLeft && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n </MgInput>\n );\n }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { H as He } from './index.es.js';
-const mgInputTitleCss = ".mg-u-is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-input-title-display, unset)}";
+const mgInputTitleCss = ".mg-u-form-legacy.sc-mg-input-title{--mg-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-input-title-display, unset)}";
 const MgInputTitleStyle0 = mgInputTitleCss;
 const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends HTMLElement {
@@ -39,7 +39,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a &nbsp;
-        return (h(TagName, { key: '6d9a02cd0ebaede9bcb6aa92368c89cf0da83cd6', class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", { key: 'e5b41b42d0988f21896a11a1dea864b025b2a9eb' }), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: '0fbbce483f0d178036c4bf8ada139ddba9c16694', class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", { key: '1db71caf002de0874f566d55b4bd0031ddf10650' }), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
     }
     static get watchers() { return {
         "identifier": ["validateIdentifier"],

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

	@@ -1 +1 @@
1	- {"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,~~yOAAyO~~,CAAC;~~AAClQ~~,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAACA,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;KAC9C;;;;;;;IAcD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;QAEtD,QACE,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValidString"],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/# sourceMappingURL=mg-input-title.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /*\n Label input id\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() required: boolean;\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly: boolean;\n\n /\n Switch from label to fieldset sementic\n /\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /\n Component parent tagname\n /\n @State() tagName = 'label';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Init tag name\n /\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /\n Render\n * @returns HTML element\n /\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,gUAAgU,CAAC;AACzV,2BAAe,eAAe;;MCOjB,YAAY;;;;;;;wBAyBJ,KAAK;uBASL,OAAO;;IA5B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAACA,EAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;KACF;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;KAC9C;;;;;;;IAcD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACtC;;;;;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;QAEtD,QACE,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["isValidString"],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-form-legacy{--mg-form-inputs-title-width: calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/# sourceMappingURL=mg-input-title.css.map /\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /*\n Label input id\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() required: boolean;\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly: boolean;\n\n /\n Switch from label to fieldset sementic\n /\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /\n Component parent tagname\n /\n @State() tagName = 'label';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Init tag name\n /\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /\n Render\n * @returns HTML element\n /\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--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:hsl(var(--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:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);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-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--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:hsl(var(--color-dark));font-weight:unset}";
+const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title mg-input-title+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}@media screen and (max-width: 767px){.mg-c-input{flex-direction:column}.mg-c-input .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input .mg-c-input__input-container{width:100%}}.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:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--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:hsl(var(--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:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);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:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--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:hsl(var(--color-dark));font-weight:unset}";
 const MgInputToggleStyle0 = mgInputToggleCss;
 /**
@@ -26,7 +26,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          * Internal *
          ************/
         // Classes
-        this.classReadonly = 'mg-c-input--toggle-readonly';
         this.classDisabled = 'mg-c-input--toggle-disabled';
         this.classIsActive = 'mg-c-input--toggle-is-active';
         this.classOnOff = 'mg-c-input--toggle-on-off';
@@ -63,6 +62,20 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
                 slots.forEach(slot => slot.setAttribute('title', slot.textContent));
             }
         };
+        /**
+         * Get checked item
+         * @param checked
+         * @returns toggle value
+         */
+        this.getCheckedItem = (checked) => {
+            var _a;
+            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 2) {
+                return this.options[checked ? 1 : 0];
+            }
+            else {
+                return null;
+            }
+        };
         this.value = undefined;
         this.items = undefined;
         this.identifier = undefined;
@@ -75,6 +88,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         this.readonly = false;
         this.disabled = false;
         this.tooltip = undefined;
+        this.tooltipPosition = 'input';
         this.helpText = undefined;
         this.classCollection = new Fe(['mg-c-input--toggle']);
         this.options = undefined;
@@ -97,7 +111,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
-        else if (newValue && newValue.every(item => isOption(item))) {
+        else if (Array.isArray(newValue) && newValue.every(isOption)) {
             this.options = newValue;
         }
         else {
@@ -116,12 +130,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         else
             this.classCollection.delete(this.classIcon);
     }
-    handleReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classReadonly);
-        else
-            this.classCollection.delete(this.classReadonly);
-    }
     handleDisabled(newValue) {
         if (newValue)
             this.classCollection.add(this.classDisabled);
@@ -135,7 +143,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         else
             this.classCollection.delete(this.classIsActive);
         // update value
-        this.value = this.options[newValue ? 1 : 0].value;
+        this.value = this.getCheckedItem(newValue).value;
     }
     /**
      * Set an error and display a custom error message.
@@ -196,7 +204,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         // apply handler
         this.handleIsOnOff(this.isOnOff);
         this.handleIsIcon(this.isIcon);
-        this.handleReadonly(this.readonly);
         this.handleDisabled(this.disabled);
     }
     /**
@@ -204,7 +211,8 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      * @returns HTML Element
      */
     render() {
-        return (h(MgInput, { key: '2637550cb5e98dc92cba8c362610a246e537473d', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { key: '63e4399d445ce876c767a045c6bab8d4f20da1be', 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", { key: 'b38f16ddaaa4c0ce8f32a46d5ca22fe0b0656ad5', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dd910979d5043a56f98358b2443507440cec8a93', name: "item-1" })), h("span", { key: 'acc65197a4f30f7b65c070f9f9299e7a5e913040', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'dee4de86838005833bfa1a613b21f065354ca2f4', name: "item-2" })))));
+        var _a, _b;
+        return (h(MgInput, { key: '4b4de955511ce4cd03903cee22eaa0f53e20b1e9', identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: this.readonly, mgWidth: undefined, disabled: this.disabled, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), readonlyValue: (_b = this.getCheckedItem(this.checked)) === null || _b === void 0 ? void 0 : _b.title, tooltip: !this.readonly && this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { key: '22820821bace18ec43016ce2eed7ecec1bf62ed7', 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", { key: '131797d194c1e8c2c3397a1ba4aa90da16d77b3a', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: 'a5c20ae8b49aadd1cc59737c94983bfa4c19166f', name: "item-1" })), h("span", { key: '9286d8a410eb920d6c535ec548388b823a49048d', "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { key: '1b9b0bdde12e6812bf7c5b04a2f02fa052ce7ac9', name: "item-2" })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -212,7 +220,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "items": ["validateItems"],
         "isOnOff": ["handleIsOnOff"],
         "isIcon": ["handleIsIcon"],
-        "readonly": ["handleReadonly"],
         "disabled": ["handleDisabled"],
         "checked": ["handleChecked"]
     }; }
@@ -230,6 +237,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "readonly": [4],
         "disabled": [4],
         "tooltip": [1],
+        "tooltipPosition": [1, "tooltip-position"],
         "helpText": [1, "help-text"],
         "classCollection": [32],
         "options": [32],
@@ -242,7 +250,6 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "items": ["validateItems"],
         "isOnOff": ["handleIsOnOff"],
         "isIcon": ["handleIsIcon"],
-        "readonly": ["handleReadonly"],
         "disabled": ["handleDisabled"],
         "checked": ["handleChecked"]
     }]);

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

	@@ -1 +1 @@
1	- {"file":"mg-input-toggle.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,6uLAA6uL,CAAC;AACvwL,4BAAe,gBAAgB;;ACM/B;;;;;AAKA,MAAM,QAAQ,GAAG,CAAC,MAAmB,KAAc,OAAO,MAAM,KAAK,QAAQ,IAAI,OAAO,MAAM,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,CAAC;MAOnIA,eAAa;;;;;;;;;;;QAMhB,kBAAa,GAAG,6BAA6B,CAAC;QAC9C,kBAAa,GAAG,6BAA6B,CAAC;QAC9C,kBAAa,GAAG,8BAA8B,CAAC;QAC/C,eAAU,GAAG,2BAA2B,CAAC;QACzC,cAAS,GAAG,yBAAyB,CAAC;;;;;QA6LtC,oBAAe,GAAG,CAAC,YAAqB;;YAE9C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;;YAE9B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,SAAS,EAAE;gBAC7C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;aAClC;SACF,CAAC;;;;QAKM,kBAAa,GAAG;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B,CAAC;;;;QAKM,kBAAa,GAAG;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YAChD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;aAC5D;iBAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;;;gBAGvB,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;aACrE;SACF,CAAC;;;;oBApKqB,IAAI,CAAC,UAAU;;;yBAelB,KAAK;uBAKP,KAAK;sBAUN,KAAK;wBAUH,KAAK;wBAUL,KAAK;;;+BAoBc,IAAIC,EAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;;;uBAoBxD,KAAK;;IA/HxB,WAAW,CAAC,QAAa;;QAEvB,IAAI,CAAC,UAAU,EAAE,CAAC;;QAElB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjC;IAOD,aAAa,CAAC,QAAkC;QAC9C,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC3D,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;SACpE;;aAEI,IAAIC,EAAiB,CAAC,QAAoB,CAAC,EAAE;YAChD,IAAI,CAAC,OAAO,GAAI,QAAqB,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SACnF;;aAEI,IAAI,QAAQ,IAAK,QAA0B,CAAC,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE;YAC9E,IAAI,CAAC,OAAO,GAAG,QAAyB,CAAC;SAC1C;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,8FAA8F,CAAC,CAAC;SACjH;KACF;IAiCD,aAAa,CAAC,QAAiB;QAC7B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;;YACnD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACnD;IAOD,YAAY,CAAC,QAAiB;QAC5B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;YAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClD;IAOD,cAAc,CAAC,QAAiB;QAC9B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACtD;IAOD,cAAc,CAAC,QAAiB;QAC9B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACtD;IAqCD,aAAa,CAAC,QAAiB;;QAE7B,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;YACtD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;;QAGrD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;KACnD;;;;;;;;;IAqBD,MAAM,QAAQ,CAAC,KAAc,EAAE,YAAoB;QACjD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;YAC9B,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;SAC1F;aAAM,IAAI,CAACC,EAAa,CAAC,YAAY,CAAC,EAAE;YACvC,MAAM,IAAI,KAAK,CAAC,6EAA6E,CAAC,CAAC;SAChG;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;SACxD;KACF;;;;IAuCO,UAAU;QAChB,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC;QAEzG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;;;;;YAKzC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAe,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE;gBAC1G,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;;;YAID,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,KAAK,CAAC;YAC9E,IAAI,CAAC,OAAO,GAAG,oBAAoB,KAAK,CAAC,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;SAC5E;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;SACrD;KACF;;;;;;;IASD,iBAAiB;;QAEf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;QAE/B,IAAI,CAAC,aAAa,EAAE,CAAC;;QAErB,IAAI,CAAC,UAAU,EAAE,CAAC;;QAElB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;IAMD,MAAM;QACJ,QACE,EAAC,OAAO,qDACN,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,kBAAkB,EAAE,EAAE,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAe,EAC3B,aAAa,EAAE,SAAS,EACxB,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,KAAK,IAEjB,+DACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,mBACtB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,KAAK,EAAC,2BAA2B,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,4EAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,IAChE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACP,4EAAkB,MAAM,EAAC,KAAK,EAAC,mCAAmC,IAChE,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACA,CACD,EACV;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgInputToggle","ClassList","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":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.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:.5rem .9rem;border:0;border-radius:calc((var(--font-size)var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)var(--line-height) + 2(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--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:hsl(var(--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:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)var(--line-height) + 1rem);height:calc(var(--font-size)var(--line-height) + 1rem);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-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--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:hsl(var(--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 { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\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 classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private 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: string[] \| ToggleValue[]): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\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 handleIsOnOff(newValue: boolean): 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 handleIsIcon(newValue: boolean): 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 handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\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: boolean): 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.options[newValue ? 1 : 0].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 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.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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 </MgInput>\n );\n }\n}\n"],"version":3}
1	+ {"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle","ClassList","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":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>ul{display:flex;flex-flow:column wrap;padding:0;margin:0;list-style:none;row-gap:.8rem}.mg-c-input__input-container>strong{display:inline-block}.mg-c-input__input-container>strong,.mg-c-input__input-container>ul{min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__title{display:flex;width:var(--mg-inputs-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--default-size) - var(--font-size)var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__title mg-input-title+mg-tooltip{margin-left:.4rem}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input.mg-c-input--label-on-top .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}@media screen and (max-width: 767px){.mg-c-input{flex-direction:column}.mg-c-input .mg-c-input__title{width:auto;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:.3rem;text-align:left}.mg-c-input .mg-c-input__title mg-input-title{width:100%;flex-shrink:1}.mg-c-input .mg-c-input__input-container{width:100%}}.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:.5rem .9rem;border:0;border-radius:calc((var(--font-size)var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)var(--line-height) + 2(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--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:hsl(var(--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:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)var(--line-height) + 1rem);height:calc(var(--font-size)var(--line-height) + 1rem);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:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--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:hsl(var(--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 { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '@mgdis/stencil-helpers';\nimport { ToggleValue } from './mg-input-toggle.conf';\nimport { type TooltipPosition } from '../MgInput.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@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 classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private 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.');\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.');\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 handleIsOnOff(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 handleIsIcon(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\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: MgInputToggle['disabled']): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.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\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.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={this.readonly}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value?.toString()}\n readonlyValue={this.getCheckedItem(this.checked)?.title}\n tooltip={!this.readonly && this.tooltip}\n tooltipPosition={this.tooltipPosition}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\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 </MgInput>\n );\n }\n}\n"],"version":3}

package/dist/components/mg-loader.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface MgLoader extends Components.MgLoader, HTMLElement {}
+export const MgLoader: {
+    prototype: MgLoader;
+    new (): MgLoader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-loader.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { i as initLocales } from './index2.js';
+import { H as He } from './index.es.js';
+import { d as defineCustomElement$2 } from './mg-icon2.js';
+const mgLoaderCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}";
+const MgLoaderStyle0 = mgLoaderCss;
+const MgLoader$1 = /*@__PURE__*/ proxyCustomElement(class MgLoader extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.message = undefined;
+        this.messageHide = undefined;
+    }
+    watchMessage(newValue) {
+        if (newValue && !He(newValue))
+            throw new Error('<mg-loader> prop "message" must be a valid string.');
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // validate props
+        this.watchMessage(this.message);
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { key: 'f308fffd47bf8ef4ca08364bc55f2966ed626a9f', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '3d99e25ed45daed36673314dee7f9d2f1672ef99', icon: "loader", spin: true }), h("span", { key: 'bcdbaa246385817265f386df86cb29b848c9797b', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgess)));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "message": ["watchMessage"]
+    }; }
+    static get style() { return MgLoaderStyle0; }
+}, [1, "mg-loader", {
+        "message": [1],
+        "messageHide": [4, "message-hide"]
+    }, undefined, {
+        "message": ["watchMessage"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-loader", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-loader":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgLoader$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+const MgLoader = MgLoader$1;
+const defineCustomElement = defineCustomElement$1;
+export { MgLoader, defineCustomElement };
+//# sourceMappingURL=mg-loader.js.map

package/dist/components/mg-loader.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"mg-loader.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,yjBAAyjB,CAAC;AAC9kB,uBAAe,WAAW;;MCQbA,UAAQ;;;;;;;;IAsBnB,YAAY,CAAC,QAA6B;QACxC,IAAI,QAAQ,IAAI,CAACC,EAAa,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;KACjH;;;;;;;IAcD,iBAAiB;;QAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;;QAGnD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC;;;;;IAMD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,aAAa,eAAW,QAAQ,IACzC,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW,EACtC,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAQ,CAC9G,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["MgLoader","isValidString"],"sources":["../styles/dist/components/mg-loader.css?tag=mg-loader&encapsulation=shadow","src/components/molecules/mg-loader/mg-loader.tsx"],"sourcesContent":[".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}/*# sourceMappingURL=mg-loader.css.map */\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n tag: 'mg-loader',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-loader.css',\n shadow: true,\n})\nexport class MgLoader {\n /************\n * Internal *\n ************/\n\n // Locales\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgLoaderElement;\n\n /**\n * Override loader message\n */\n @Prop() message: string;\n @Watch('message')\n watchMessage(newValue: MgLoader['message']): void {\n if (newValue && !isValidString(newValue)) throw new Error('<mg-loader> prop \"message\" must be a valid string.');\n }\n\n /**\n * Hide message\n */\n @Prop() messageHide: boolean;\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if component props are well configured on init\n */\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n\n // validate props\n this.watchMessage(this.message);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class=\"mg-c-loader\" aria-live=\"polite\">\n <mg-icon icon=\"loader\" spin></mg-icon>\n <span class={{ 'mg-u-visually-hidden': this.messageHide }}>{this.message || this.messages.loader.inProgess}</span>\n </div>\n );\n }\n}\n"],"version":3}

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

@@ -168,7 +168,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTM
         let role;
         if (!this.noAriaRole)
             role = this.variant === 'info' ? 'status' : 'alert';
-        return (h("div", { key: 'e322f37d30825ef3a35487c0073d88690468a3c5', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'fde621ad12803042b0521f663e046fa9e8554123', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '7b58b099e831bd6c21c9d2e5227f348982164e56', class: "mg-c-message__icon" }, h("mg-icon", { key: '213105901e4bbd702464a458dab131824a70904b', icon: this.getIcon() })), h("div", { key: '0084693dfc77abb64296ce4d85e1e30b24122623', class: "mg-c-message__content" }, h("span", { key: '8b17d62709ebde902e2ca52764ed7d053cbd0c51', class: "mg-c-message__content-slot" }, h("slot", { key: '0f63025c6b86b318b60b6a32bc75af366d439536' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+        return (h("div", { key: 'fb10ca559b2039f9d7842e4b2ce88e25a1999c96', id: this.identifier, class: this.classCollection.join(), role: role }, h("mg-card", { key: 'c0afc8ad8c56f9e5fb5041aaa201de208f3fc6fd', variant: this.variant, "variant-style": "bar-left" }, h("span", { key: '949f48302c8feb721f1b9acb663bf21acfc166e1', class: "mg-c-message__icon" }, h("mg-icon", { key: 'a3daa1da6d312c6b6b921cc01edae9763a81225f', icon: this.getIcon() })), h("div", { key: 'c53239107f094fe341f6abb1441096767b648796', class: "mg-c-message__content" }, h("span", { key: 'fb4da55da5853179204771cf9f5d01a02ed8a9ce', class: "mg-c-message__content-slot" }, h("slot", { key: 'e7339501b750d02a3e433e40903d460588dd4b33' })), this.hasActions && h("span", { class: "mg-c-message__content-separator" }), this.hasActions && (h("span", { class: "mg-c-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-c-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
     }
     get element() { return this; }
     static get watchers() { return {