@mgdis/mg-components 6.22.0 → 6.23.0

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -1,12 +1,14 @@
 import { h } from "@stencil/core";
 import { ClassList, cleanString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { checkboxTypes, SectionKind } from "./mg-input-checkbox.conf";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
+import { checkboxTypes, SectionKind, } from "./mg-input-checkbox.conf";
 import { MgInputCheckboxList } from "./MgInputCheckboxList";
 import { classDisabled, classReadonly, classFieldset, classVerticalList } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Status } from "../../mg-tabs/mg-tabs.conf";
+import { MgInputCheckboxPaginated } from "./MgInputCheckboxPaginated";
 /**
- * type CheckboxItem validation function
+ * type ICheckboxItem validation function
  * @param items - Checkbox item
  * @returns match item type
  */
@@ -26,6 +28,7 @@ export class MgInputCheckbox {
         // "multi" setup
         this.multiStart = 5;
         this.searchStart = 10;
+        this.paginatedStep = 10;
         // popover variables
         this.hasOpenedPopover = false;
         this.checkboxesId = 'checkboxes-list';
@@ -91,6 +94,10 @@ export class MgInputCheckbox {
          * Define <mg-tabs> active-tab
          */
         this.activeTab = 1;
+        /**
+         * Paginated sections limit per key
+         */
+        this.paginatedLimits = {};
         /**
          * Handle input event
          * @param event - input event
@@ -136,8 +143,9 @@ export class MgInputCheckbox {
          * @param event - input value-change event
          */
         this.handleSearchChange = (event) => {
-            this.searchValue = event.detail;
             event.stopPropagation();
+            event.preventDefault();
+            this.searchValue = event.detail;
         };
         /**
          * Handle <mg-tabs> tab-change event
@@ -269,9 +277,15 @@ export class MgInputCheckbox {
          * Reset <mg-input-checkbox-paginated> limit state
          */
         this.resetTabsLimit = () => {
-            Array.from(this.element.shadowRoot.querySelectorAll('mg-input-checkbox-paginated')).forEach(component => {
-                component.resetLimit();
-            });
+            this.paginatedLimits = {};
+        };
+        /**
+         * Handle load-more action for a paginated section
+         * @param key - section key
+         */
+        this.handlePaginatedLoadMore = (key) => {
+            var _a;
+            this.paginatedLimits = Object.assign(Object.assign({}, this.paginatedLimits), { [key]: ((_a = this.paginatedLimits[key]) !== null && _a !== void 0 ? _a : this.paginatedStep) + this.paginatedStep });
         };
         /**
          * Renders the readonly value of the input.
@@ -292,7 +306,7 @@ export class MgInputCheckbox {
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${toString(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, ICheckboxItem. Passed value: ${toString(newValue)}.`);
         }
     }
     validateType(newValue) {
@@ -485,6 +499,7 @@ export class MgInputCheckbox {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         // Validate
         // `validateType` must be done before `validateValue` because we need to set mode['auto'|'custom'] from type
         // and `validateValue` updates `this.checkboxItems` watcher which requires a defined `this.type`.
@@ -517,7 +532,7 @@ export class MgInputCheckbox {
      * @param checkboxes - checkboxes to render
      * @returns render sections of checkboxes
      */
-    renderCheckboxTabs(checkboxes, checkboxPaginatedProps) {
+    renderCheckboxTabs(props) {
         const handleMassAction = (kind) => () => {
             const displayItems = this.getDisplayItems();
             // update only displayed items
@@ -528,39 +543,43 @@ export class MgInputCheckbox {
             });
             this.updateValues();
         };
-        const [checkedValues, notCheckedValues] = checkboxes.reduce((acc, curr) => {
+        const [checkedValues, notCheckedValues] = props.checkboxes.reduce((acc, curr) => {
             acc[curr.value ? 0 : 1].push(curr);
             return acc;
         }, [[], []]);
         const sections = [
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
-            Object.assign(Object.assign({}, checkboxPaginatedProps), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), handleMassAction: handleMassAction(SectionKind.SELECTED) }),
+            Object.assign(Object.assign({}, props), { checkboxes: notCheckedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.notSelected), { showMore: this.messages.input.showMore }), key: SectionKind.NOT_SELECTED, handleMassAction: handleMassAction(SectionKind.NOT_SELECTED) }),
+            Object.assign(Object.assign({}, props), { checkboxes: checkedValues, messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.selected), { showMore: this.messages.input.showMore }), key: SectionKind.SELECTED, handleMassAction: handleMassAction(SectionKind.SELECTED) }),
         ];
         return (h("mg-tabs", { identifier: `${this.identifier}-tabs`, class: "mg-c-input__tabs", label: this.messages.input.checkbox.sections.label, items: sections.map((section, key) => ({
                 label: section.messages.title,
                 badge: { value: section.checkboxes.length, label: this.messages.input.checkbox.sections.badge.label, role: 'information' },
                 status: key + 1 === this.activeTab ? Status.ACTIVE : Status.VISIBLE,
-            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map((section, key) => (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab", slot: `tab_content-${key + 1}` }, section, { key: section.messages.title }), section.checkboxes.length > 0 && section.checkboxes.some(checkbox => checkbox.disabled !== true) && (h("mg-tooltip", { slot: "header-action", class: "mg-c-input__tabs-action", message: section.messages.tooltip }, h("mg-button", { variant: "link", onClick: section.handleMassAction }, section.messages.action))))))));
+            })), activeTab: this.activeTab, "onActive-tab-change": this.handleActiveTabChange }, sections.map(section => {
+            var _a;
+            return (h(MgInputCheckboxPaginated, Object.assign({}, section, { limit: (_a = this.paginatedLimits[section.key]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(section.key) })));
+        })));
     }
     /**
      * render checkbox multi element
      * @returns html element
      */
     renderCheckboxMulti() {
+        var _a;
         const selectedValuesNb = this.getSelectedItems().length;
-        const checkboxes = this.getDisplayItems();
-        const checkboxPaginatedProps = {
+        const props = {
             readonly: this.readonly,
             disabled: this.disabled,
-            identifier: this.identifier,
+            checkboxes: this.getDisplayItems(),
         };
+        const checkboxesPaginatedSearchProps = Object.assign(Object.assign({}, props), { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), key: SectionKind.SEARCH, limit: (_a = this.paginatedLimits[SectionKind.SEARCH]) !== null && _a !== void 0 ? _a : this.paginatedStep, handleLoadMore: () => this.handlePaginatedLoadMore(SectionKind.SEARCH) });
         return (h("div", { class: "mg-c-input__input-container" }, h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), display: this.hasOpenedPopover, "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
                 if (el !== null)
                     this.mgPopover = el;
             } }, h("mg-button", { variant: "secondary", "aria-describedby": `${this.identifier}-title` }, h("mg-icon", { icon: "list" }), this.getSelectValuesButtonMessage()), h("div", { slot: "content", class: "mg-c-input__content" }, this.displaySearchInput ? ([
             h("mg-input-text", { key: "input-search", identifier: `${this.identifier}-input-search`, icon: "magnifying-glass", type: "search", placeholder: this.messages.input.checkbox.sections.search.label, label: this.messages.input.checkbox.sections.search.label, mgWidth: "full", value: this.searchValue, labelHide: true, characterLeftHide: true, name: "q", "onValue-change": this.handleSearchChange }),
-            this.searchValue.length > 0 ? (h("mg-input-checkbox-paginated", Object.assign({ class: "mg-c-input__tab" }, checkboxPaginatedProps, { messages: Object.assign(Object.assign({}, this.messages.input.checkbox.sections.search), { showMore: this.messages.input.showMore }), checkboxes: checkboxes, key: "search" }))) : (this.renderCheckboxTabs(checkboxes, checkboxPaginatedProps)),
-        ]) : (h(MgInputCheckboxList, { checkboxes: checkboxes, id: this.checkboxesId, disabled: this.disabled, name: this.name, invalid: this.invalid })))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
+            this.searchValue.length > 0 ? h(MgInputCheckboxPaginated, Object.assign({}, checkboxesPaginatedSearchProps)) : this.renderCheckboxTabs(props),
+        ]) : (h(MgInputCheckboxList, Object.assign({}, props, { id: this.checkboxesId, name: this.name, invalid: this.invalid }))))), this.displaySelectedValues ? (selectedValuesNb > 0 && (h("ul", { role: "list", class: "mg-c-input__input-container-list" }, this.getSelectedItems().map(({ title }) => (h("li", { class: "mg-c-input__input-value", key: title }, title)))))) : (h("b", null, this.messages.input.checkbox[selectedValuesNb > 1 ? 'selectedValues' : 'selectedValue'].replace('{nb}', selectedValuesNb)))));
     }
     /**
      * Render
@@ -578,7 +597,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: 'c5797a119a653c27004a171b7b79be7d4504800d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '45c7481c738c254f20892d9c38ba53fd4d22cd7a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -598,13 +617,14 @@ export class MgInputCheckbox {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "CheckboxValue[]",
-                    "resolved": "CheckboxValue[]",
+                    "original": "ICheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
-                        "CheckboxValue": {
+                        "ICheckboxValue": {
                             "location": "import",
                             "path": "./mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxValue"
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::ICheckboxValue",
+                            "referenceLocation": "ICheckboxValue"
                         }
                     }
                 },
@@ -627,7 +647,8 @@ export class MgInputCheckbox {
                         "CheckboxType": {
                             "location": "import",
                             "path": "./mg-input-checkbox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType"
+                            "id": "src/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.ts::CheckboxType",
+                            "referenceLocation": "CheckboxType"
                         }
                     }
                 },
@@ -869,7 +890,8 @@ export class MgInputCheckbox {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -1010,7 +1032,8 @@ export class MgInputCheckbox {
             "searchValue": {},
             "searchResults": {},
             "selectValuesButtonKey": {},
-            "activeTab": {}
+            "activeTab": {},
+            "paginatedLimits": {}
         };
     }
     static get events() {
@@ -1026,7 +1049,7 @@ export class MgInputCheckbox {
                 },
                 "complexType": {
                     "original": "HTMLMgInputCheckboxElement['value']",
-                    "resolved": "CheckboxValue[]",
+                    "resolved": "ICheckboxValue[]",
                     "references": {
                         "HTMLMgInputCheckboxElement": {
                             "location": "global",

package/dist/collection/components/molecules/inputs/mg-input-combobox/mg-input-combobox.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { allItemsAreString, ClassList, getObjectValueFromKey, isValidString, nextTick, Page, Paginate, Cursor, toString, isObject, formatID, } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, Cursor, Page, Paginate, allItemsAreString, formatID, getObjectValueFromKey, isObject, isValidString, nextTick, toString, } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { widths, classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Keys } from "../../../../utils/events.utils";
@@ -709,6 +710,7 @@ export class MgInputCombobox {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         // Validate
         this.watchIdentifier(this.identifier);
         this.watchItems(this.items);
@@ -758,7 +760,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'd16350f2e21e492932e7264c076454a249e1f5f2', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
+        return (h("mg-input", { key: '3f9b79e5c34d691589c16d0955883109501b86fc', label: this.label, identifier: this.identifier, class: this.classCollection.classes.join(' '), ariaDescribedbyIDs: popoverContent && popoverContent !== 'list' ? popoverContent : undefined, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("mg-popover", { identifier: this.popoverId, placement: "bottom-start", display: this.popoverDisplay, "arrow-hide": true, style: {
                 '--mg-c-input-list-width': ((_f = this.input) === null || _f === void 0 ? void 0 : _f.offsetWidth) > 0 ? `${this.input.offsetWidth}px` : undefined,
             }, "data-fallback-placement": "bottom-end", "onDisplay-change": this.handlePopoverDisplay }, h("div", { class: "mg-c-input__input-group-container" }, h("mg-icon", { icon: "magnifying-glass" }), h("input", { type: "text", role: "combobox", class: "mg-c-input__box mg-c-input__box--width", value: this.filter, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.popoverDisplay.toString(), "aria-controls": listId, "aria-invalid": (this.invalid === true).toString(), "aria-activedescendant": formatID(activeDescendant), onInput: this.handleFilterInput, onBlur: this.handleFilterBlur, onFocus: this.handleFilterFocus, onKeyDown: this.handleFilterKeydown, ref: (el) => {
                 if (el !== null)
@@ -806,7 +808,8 @@ export class MgInputCombobox {
                         "Option": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -831,7 +834,8 @@ export class MgInputCombobox {
                         "Option": {
                             "location": "import",
                             "path": "../../../../types",
-                            "id": "src/types/index.ts::Option"
+                            "id": "src/types/index.ts::Option",
+                            "referenceLocation": "Option"
                         }
                     }
                 },
@@ -1053,7 +1057,8 @@ export class MgInputCombobox {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -1098,7 +1103,8 @@ export class MgInputCombobox {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -1198,12 +1204,14 @@ export class MgInputCombobox {
                         "RequestMappingType": {
                             "location": "import",
                             "path": "./mg-input-combobox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::RequestMappingType"
+                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::RequestMappingType",
+                            "referenceLocation": "RequestMappingType"
                         },
                         "ResponseMappingType": {
                             "location": "import",
                             "path": "./mg-input-combobox.conf",
-                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::ResponseMappingType"
+                            "id": "src/components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf.ts::ResponseMappingType",
+                            "referenceLocation": "ResponseMappingType"
                         }
                     }
                 },

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { ClassList, isValidString, dateRegExp, dateToString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, dateRegExp, dateToString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { localeDate, localeDatePattern } from "@mgdis/core-ui-helpers/dist/locale";
 import { DEFAULT_MAX_DATE } from "./mg-input-date.conf";
 import { classReadonly, classDisabled } from "../mg-input/mg-input.conf";
@@ -339,6 +340,7 @@ export class MgInputDate {
         // as a native input use the OS locale to define the date pattern
         // we need to get this locale to define the displayed pattern
         this.systemLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+        normalizeBooleanAttributes(this);
         // Validate
         this.validateValue(this.value);
         this.validateMinMax(this.min);
@@ -357,7 +359,7 @@ export class MgInputDate {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '53d23a27355884d3b3ac996188f619ad325d58b6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '7c6abb93dd859ba55d62860f4fac79ec29273fac', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -621,7 +623,8 @@ export class MgInputDate {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { allItemsAreString, ClassList, isObject, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, allItemsAreString, isObject, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { localeByte } from "@mgdis/core-ui-helpers/dist/locale";
 import { classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
@@ -314,6 +315,7 @@ export class MgInputFile {
         const locales = initLocales(this.element);
         this.locale = locales.locale;
         this.messages = locales.messages;
+        normalizeBooleanAttributes(this);
         // Validate
         this.watchValue(this.value);
         this.watchDisabled(this.disabled);
@@ -332,9 +334,9 @@ export class MgInputFile {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '48337d8e0a059dbea60c4bfa152468429b37b897', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'b0a67412ce2a054ce84f001efe01156bfce001a1', class: "mg-c-input__file-container" }, h("input", { key: '0585b37ac4da8e5b29b94c04a298cfd8451016c9', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
+        return (h("mg-input", { key: '0ca01b9b4697f55406262e93438946c2fe12e5f5', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '99fe30d5339687054392ca2fd8773af76af35396', class: "mg-c-input__file-container" }, h("input", { key: '84d9bee62d4c0c5975b561cc3e261905c759556f', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
                 this.inputElement = el;
-            } }), h("mg-button", { key: '0c71ea34375f60a357ad2aa38353c7acafc1091a', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
+            } }), h("mg-button", { key: '1b6694f7c36fa2c8a2c5347d93a9cb07678e9363', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
                 this.fileButtonElement = el;
             } }, this.messages.input.file.browse), this.renderFiles())));
     }
@@ -615,7 +617,8 @@ export class MgInputFile {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { localeCurrency, localeNumber, localePercent, localeUnit } from "@mgdis/core-ui-helpers/dist/locale";
 import { types, formats } from "./mg-input-numeric.conf";
 import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
@@ -437,6 +438,7 @@ export class MgInputNumeric {
         const locales = initLocales(this.element);
         this.locale = locales.locale;
         this.messages = locales.messages;
+        normalizeBooleanAttributes(this);
         // Validate component config
         this.watchFormat(this.format);
         this.validateType(this.type);
@@ -460,7 +462,7 @@ export class MgInputNumeric {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '4529f67fe43372530d723e8e8a7a6c44f5057bbd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '734f1734139c5919481693c869da68586f18a92f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -728,7 +730,8 @@ export class MgInputNumeric {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -772,7 +775,8 @@ export class MgInputNumeric {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -817,7 +821,8 @@ export class MgInputNumeric {
                         "NumericType": {
                             "location": "import",
                             "path": "./mg-input-numeric.conf",
-                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::NumericType"
+                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::NumericType",
+                            "referenceLocation": "NumericType"
                         }
                     }
                 },
@@ -843,7 +848,8 @@ export class MgInputNumeric {
                         "Format": {
                             "location": "import",
                             "path": "./mg-input-numeric.conf",
-                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::Format"
+                            "id": "src/components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf.ts::Format",
+                            "referenceLocation": "Format"
                         }
                     }
                 },

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { classReadonly, classDisabled, widths } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 export class MgInputPassword {
@@ -233,6 +234,7 @@ export class MgInputPassword {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
         this.watchMgWidth(this.mgWidth);
@@ -248,7 +250,7 @@ export class MgInputPassword {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '7154d79c2c609f47ae7c9542cffd1c92d26ce383', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'fb26a8db11651950de2fe01600443bf2d6cad9e6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: (this.displayPassword ? 'eye-slash' : 'eye') }))))));
@@ -492,7 +494,8 @@ export class MgInputPassword {
                         "Width": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::Width",
+                            "referenceLocation": "Width"
                         }
                     }
                 },
@@ -537,7 +540,8 @@ export class MgInputPassword {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, allItemsAreString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { classReadonly, classDisabled, classFieldset } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 /**
@@ -266,6 +267,7 @@ export class MgInputRadio {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         // Validate
         this.validateItems(this.items);
         this.watchInputVerticalList(this.inputVerticalList);
@@ -284,7 +286,7 @@ export class MgInputRadio {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'bdeb5a98bc7f4567beb293c1fcf4f99169089fa6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: 'a749870b0b690a52d75a5ab6340e26cf0b1449c0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
@@ -332,7 +334,8 @@ export class MgInputRadio {
                         "RadioOption": {
                             "location": "import",
                             "path": "./mg-input-radio.conf",
-                            "id": "src/components/molecules/inputs/mg-input-radio/mg-input-radio.conf.ts::RadioOption"
+                            "id": "src/components/molecules/inputs/mg-input-radio/mg-input-radio.conf.ts::RadioOption",
+                            "referenceLocation": "RadioOption"
                         }
                     }
                 },
@@ -552,7 +555,8 @@ export class MgInputRadio {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },

package/dist/collection/components/molecules/inputs/mg-input-rich-text-editor/mg-input-rich-text-editor.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { classReadonly, classDisabled } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 import { Sanitizer } from "@mgdis/sanitize-html";
@@ -312,6 +313,7 @@ export class MgInputRichTextEditor {
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        normalizeBooleanAttributes(this);
         // Validate
         this.validatePattern(this.pattern);
         this.validatePattern(this.patternErrorMessage);
@@ -375,7 +377,7 @@ export class MgInputRichTextEditor {
      * @returns HTML mg-input Element
      */
     render() {
-        return (h("mg-input", { key: '3f7c51ee9114279bff924e698b66853b721a5907', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
+        return (h("mg-input", { key: '0236e3c0a380087557c381077ad382029a6b7ec7', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (h("div", { id: this.identifier, class: "mg-c-input__wrapper" }, h("textarea", { name: this.name, ref: (el) => {
                 if (el !== null)
                     this.editorElement = el;
             } })))));
@@ -678,7 +680,8 @@ export class MgInputRichTextEditor {
                         "TooltipPosition": {
                             "location": "import",
                             "path": "../mg-input/mg-input.conf",
-                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition"
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::TooltipPosition",
+                            "referenceLocation": "TooltipPosition"
                         }
                     }
                 },
@@ -723,7 +726,8 @@ export class MgInputRichTextEditor {
                         "ButtonsOption": {
                             "location": "import",
                             "path": "./editor/editor.conf",
-                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.ts::ButtonsOption"
+                            "id": "src/components/molecules/inputs/mg-input-rich-text-editor/editor/editor.conf.ts::ButtonsOption",
+                            "referenceLocation": "ButtonsOption"
                         }
                     }
                 },
@@ -748,7 +752,8 @@ export class MgInputRichTextEditor {
                         "SanitizerOptions": {
                             "location": "import",
                             "path": "@mgdis/sanitize-html",
-                            "id": "../sanitize-html/dist/index.d.ts::SanitizerOptions"
+                            "id": "../sanitize-html/dist/index.d.ts::SanitizerOptions",
+                            "referenceLocation": "SanitizerOptions"
                         }
                     }
                 },