@mgdis/mg-components 6.22.1 → 6.24.0

package/dist/collection/collection-manifest.json

@@ -48,7 +48,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.4",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { isValidString, isValideID, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 /**
  * @internal
  */
@@ -32,6 +33,7 @@ export class MgInputTitle {
      * Init tag name
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.validateIdentifier(this.identifier);
         this.validateIsLegend(this.isLegend);
     }
@@ -42,7 +44,7 @@ export class MgInputTitle {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a  
-        return (h(TagName, { key: 'd61ed048e1b2bb124281eb4067894d9a35abf778', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '3bad02b10f8e9bb536c5eba9bf85d4b4967a9d97' }), this.required && !this.readonly && (h("span", { key: 'f0fd90a79f4449a1a3b7ec76a3eeb96bcc2e4ee6', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '7ea29cfc494c5c5c2b65b62ea27caee5a41062ca', class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: '316341d052fa751e442f749ce66e2712ecd864c2', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '4df4df8d18f46b09081ebc13619034f923132697' }), this.required && !this.readonly && (h("span", { key: '778a3317990278dd95a450dd9aa91c3afafb1b43', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '509a4ecc94111d61f3df3ae28286bf23bf8c7d0f', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get is() { return "mg-input-title"; }
     static get encapsulation() { return "scoped"; }
@@ -142,6 +144,7 @@ export class MgInputTitle {
             "tagName": {}
         };
     }
+    static get elementRef() { return "element"; }
     static get watchers() {
         return [{
                 "propName": "identifier",

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { variants } from "./mg-badge.conf";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 export class MgBadge {
     constructor() {
         /************
@@ -33,6 +34,11 @@ export class MgBadge {
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
+            if (String(newValue) === '') {
+                // Reactive frameworks (e.g. Vue) may pass "" instead of undefined when the prop is reset.
+                this.variant = 'info';
+                return;
+            }
             throw new Error(`<mg-badge> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
         else {
@@ -52,6 +58,7 @@ export class MgBadge {
      * Check if props are well configured on init
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.validateValue(this.value);
         this.validateLabel(this.label);
         this.validateVariant(this.variant);
@@ -62,7 +69,7 @@ export class MgBadge {
      * @returns HTML Element
      */
     render() {
-        return (h("span", { key: '27e42212d525a31576dbe826babca52d99a3476b', class: this.classCollection.join() }, h("span", { key: 'f24658252cc62a38879a1e8321c477723c2dc919', class: "mg-c-badge__value" }, this.value), h("span", { key: '9f51fe7c868a8d53d9f138ec4229e1ba09e7284e', class: "mg-u-visually-hidden" }, this.label)));
+        return (h("span", { key: 'b4c55957d7e59c889147cf3ddeb57f94c7afdaaa', class: this.classCollection.join() }, h("span", { key: '3f9bfae0e36de3c14d71d3a904f426508b1d5872', class: "mg-c-badge__value" }, this.value), h("span", { key: '2e6ee3c010b6f0c8c1df7bfdd3aed755e5afc0d8', class: "mg-u-visually-hidden" }, this.label)));
     }
     static get is() { return "mg-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +125,7 @@ export class MgBadge {
             },
             "variant": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "BadgeVariantType",
                     "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text-color\" | \"warning\"",
@@ -170,6 +177,7 @@ export class MgBadge {
             "classCollection": {}
         };
     }
+    static get elementRef() { return "element"; }
     static get watchers() {
         return [{
                 "propName": "value",

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { variants, sizes } from "./mg-button.conf";
 import { ClassList, isValidString, nextTick, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { Keys } from "../../../utils/events.utils";
 /**
  * @slot - Button content
@@ -176,6 +177,7 @@ export class MgButton {
      * Check if props are well configured on init
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.validateVariant(this.variant);
         this.validateFullWidth(this.fullWidth);
         this.validateSize(this.size);
@@ -205,7 +207,7 @@ export class MgButton {
      */
     render() {
         var _a;
-        return (h(Host, { key: '82e03b7b699a821125d066a5ca1d435a87a75675', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '92a0a1fbcf320f8afc10106418a992fffd748646', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'f5d0bf31534c2dc8dbd7f9e2fc63bd8af055a9a3', icon: "loader", spin: true }), h("div", { key: '7557988a9a70881f25c86b78a3ea28d9842c439b', class: "mg-c-button__content" }, h("slot", { key: '98b64ef7efc4d761fdda8c593b05ec6959b0ea22' })))));
+        return (h(Host, { key: 'e79494f9da9f0c4c19841d44a85ee955f2e19016', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '1a4802637eca8125d09cae3363ff11fe9b50ffd4', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: '9f4512a0ed650c3af63e8216baa5b0eaabd4bfd2', icon: "loader", spin: true }), h("div", { key: '9c0647c6741a0610a516bc2ac1cce328d3004d51', class: "mg-c-button__content" }, h("slot", { key: '7875b875d0a8a8ac74faf233b0cd49462a775dc6' })))));
     }
     static get is() { return "mg-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/mg-card/mg-card.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ClassList } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { radiusSizes } from "./mg-card.conf";
 /**
  * @slot - Card content
@@ -28,10 +28,18 @@ export class MgCard {
         }
     }
     watchRadiusSize(newValue, oldValue) {
-        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
-            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+        if (!radiusSizes.includes(newValue)) {
+            if (String(newValue) === '') {
+                // Reactive frameworks (e.g. Vue) may pass "" instead of undefined when the prop is reset.
+                this.radiusSize = 'medium';
+                return;
+            }
+            throw new Error(`<mg-card> prop "radiusSize" must be one of: ${radiusSizes.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
-        if (radiusSizes.includes(newValue)) {
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+            }
             this.classCollection.add(`mg-c-card--radius-${newValue}`);
         }
     }
@@ -50,7 +58,7 @@ export class MgCard {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'fe5eff1e1d7c533cd533e27d3fb070a4e57194a8', class: this.classCollection.join() }, h("slot", { key: 'ca27dc4039d7bcaa21284714b7820de257625009' })));
+        return (h("div", { key: 'd652bf6913d37428bb9729d32fb3541543418a71', class: this.classCollection.join() }, h("slot", { key: '5157ee6cf1330c907babad1f2190973dd4d9f39e' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }
@@ -88,7 +96,7 @@ export class MgCard {
             },
             "radiusSize": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "RadiusSizeType",
                     "resolved": "\"medium\" | \"small\" | \"xsmall\"",

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -48,9 +48,12 @@ export class MgIcon {
         }
     }
     validateSize(newValue, oldValue) {
-        // When removing size attribute, it is set to null
-        if (newValue === null) {
-            newValue = 'medium';
+        // Reactive frameworks reset the prop differently:
+        //   - removing the attribute sets it to null
+        //   - Vue reactivity may set it to ""
+        if (newValue === null || String(newValue) === '') {
+            this.size = 'medium';
+            return;
         }
         if (!sizes.includes(newValue)) {
             throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
@@ -144,7 +147,7 @@ export class MgIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"glitters\" | \"glitters-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -167,7 +170,7 @@ export class MgIcon {
             },
             "size": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "IconSizeType",
                     "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xxlarge\"",

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -57,7 +57,7 @@ export class MgTooltip {
             // Remove event listener
             this.windows.forEach((localWindow) => {
                 localWindow.removeEventListener('click', this.handleClickOutside, false);
-                localWindow.removeEventListener('keyboard', this.handlePressEscape, false);
+                localWindow.removeEventListener('keydown', this.handlePressEscape, false);
             });
         };
         /**
@@ -326,6 +326,11 @@ export class MgTooltip {
             this.setMgButtonMutationObserver(slotElement);
             this.setMgButtonWrapper(slotElement);
         }
+        // Propagate the full-width intent from a slotted mg-button to the tooltip host so it
+        // takes the parent's width — the host is `display: inline-block` otherwise.
+        if (this.element.querySelector('mg-button[full-width]') !== null) {
+            this.element.classList.add('mg-c-tooltip--full-width');
+        }
         // Add tabindex to slotted element if we can't find any interactive element
         if (!this.disabled && [undefined, null].includes(interactiveElement)) {
             this.hasCustomTabIndex = true;
@@ -364,7 +369,7 @@ export class MgTooltip {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '8d1a0690f0b44381de181c2ea1f9e4c883a1af57' }, h("slot", { key: 'ae45df312e6a251a72b8ace11eb154c5ad13b4ae' }), h("slot", { key: 'fdbb17e42291cd785ff188df14029bcd59ba4c13', name: "content" })));
+        return (h(Host, { key: 'f8fe2bfb1fe70bf169abf8ddd77323342af2ac54' }, h("slot", { key: '6d478d941b9cf9374395e597a703ba7c8411eb75' }), h("slot", { key: 'bbbb59eda24731ec2fa54a909b0f3f93000083e5', name: "content" })));
     }
     static get is() { return "mg-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { isValidString, isValideID, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList, labelHeadings } from "./mg-input.conf";
 /**
  * @slot - Input content
@@ -253,15 +254,13 @@ export class MgInput {
         labelSlotElement === null || labelSlotElement === void 0 ? void 0 : labelSlotElement.remove();
         // create title element
         labelSlotElement = document.createElement('mg-input-title');
-        [
-            ['slot', this.slotLabel],
-            ['identifier', this.identifier],
-            ['readonly', this.isReadonly.toString()],
-            ['required', ((this.required && !this.isDisabled) || false).toString()],
-            ['is-legend', this.isFieldset.toString()],
-        ].forEach(([attr, val]) => {
-            labelSlotElement.setAttribute(attr, val);
-        });
+        labelSlotElement.setAttribute('slot', this.slotLabel);
+        labelSlotElement.setAttribute('identifier', this.identifier);
+        // Set boolean props via property assignment to honour HTML attribute-presence semantics: an
+        // attribute set to "false" would now be normalized to `true` by mg-input-title's helper.
+        labelSlotElement.readonly = this.isReadonly;
+        labelSlotElement.required = (this.required && !this.isDisabled) || false;
+        labelSlotElement.isLegend = this.isFieldset;
         // create label element
         if (labelHeadings.includes(this.labelHeading)) {
             let label = this.element.shadowRoot.querySelector(this.labelHeading);
@@ -312,6 +311,7 @@ export class MgInput {
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        normalizeBooleanAttributes(this);
         this.watchIdentifier(this.identifier);
         this.watchLabel();
         this.watchClass();
@@ -339,7 +339,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'a1db280d19eead30e7ae27eb6e395e58b35baa63', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '282f5776a9269272507f3e00f5dce690c9a604f4', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'b122979a159912d9c34bb024021257f9f88e6ff4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '098d3a7329fa0b5f37534fdf2df89e0468dcbe2a', class: "mg-c-input__input-container" }, this.inputContainerElements())));
+        return (h(Host, { key: 'b5952c998fe8562eb2e5dc0e425484f0aa9177f3', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'd6399c7f4798af37639218373f775739fc04e593', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '58a593bb16193a5ca6b0374919b22fa64aab26a4', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '1a70d0b00d6cf235c7a64d3ebde212eef62e213c', class: "mg-c-input__input-container" }, this.inputContainerElements())));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, cleanString, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
+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";
@@ -498,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`.
@@ -595,7 +597,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '11b725ebb111707aaf7dc39d191fe6a9efb25ea6', 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"; }

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";
@@ -470,11 +471,12 @@ export class MgInputCombobox {
                 });
                 const total = Number(getObjectValueFromKey(json, this.fetchmappings.response.total, 0));
                 let next = getObjectValueFromKey(json, this.fetchmappings.response.next);
-                if (URL.canParse(updateUrl) && Boolean(next) && !URL.canParse(next)) {
-                    const previousUrl = new URL(updateUrl);
-                    if (previousUrl.pathname.endsWith(next.split('?')[0])) {
-                        next = new URL(next, previousUrl).toString();
-                    }
+                if (Boolean(next) && !URL.canParse(next)) {
+                    // `next` is a relative link returned by the API: resolve it against the request URL (RFC 3986).
+                    // The request URL is first made absolute against the document base so a root-relative `fetchurl`
+                    // resolves the next page on the API path, not against the document location (which would 404).
+                    const requestUrl = new URL(updateUrl, this.element.ownerDocument.baseURI);
+                    next = new URL(next, requestUrl).toString();
                 }
                 return { items, total, next, top: items.length };
             }
@@ -709,6 +711,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 +761,7 @@ export class MgInputCombobox {
         else {
             activeDescendant = (_e = this.value) === null || _e === void 0 ? void 0 : _e.value;
         }
-        return (h("mg-input", { key: 'd19136f775e89188dcecf78a004abd1bc8048174', 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: '5c24478bb10ab8f1d292d38a9be162e370b0fdb2', 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)

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: '0c3e08b8c467207110ef75f7d2516c36adc2ec4c', 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;
             } }))));

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: '075d0b55b004653115305f5dd0d6bc897fd3e9ed', 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: '16ce644751bf7e4a23876ed59e7076625661794c', class: "mg-c-input__file-container" }, h("input", { key: 'e00df3de20567ef52825ca002b838a81e586c777', 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: '92e356bd08d09070b4c58c525ef91ab6bdc64b74', 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())));
     }

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: '9bea775c3e8d7339a45d18aeb1b3974d6da9a650', 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) => {

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: 'bfa5f289eb4d357c21cd9a753550bab1df846df8', 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') }))))));

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: 'a24a80156ef3e7760d02a52900d93099cd570db8', 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))))))));

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: '019cea088aa4a3938d533d7214ba7a8a1e750c0d', 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;
             } })))));