@mgdis/mg-components 5.8.0 → 5.8.2

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

@@ -6,10 +6,11 @@ import { initLocales } from '../../../../locales';
 /**
  * type CheckboxItem validation function
  *
- * @param {CheckboxItem} item Checkbox item
- * @returns {boolean} match item expectations
+ * @param {unknown} items Checkbox item
+ * @returns {boolean} match item type
  */
-const isCheckboxItem = (item) => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined;
+const isCheckboxItems = (items) => Array.isArray(items) &&
+  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
 export class MgInputCheckbox {
   constructor() {
     /************
@@ -87,7 +88,7 @@ export class MgInputCheckbox {
     this.checkboxItems = [];
   }
   validateValue(newValue) {
-    if (newValue && newValue.every(item => isCheckboxItem(item))) {
+    if (isCheckboxItems(newValue)) {
       this.checkboxItems = newValue.map((item, index) => ({
         id: `${this.identifier}_${index.toString()}`,
         title: item.title,
@@ -437,12 +438,11 @@ export class MgInputCheckbox {
           "text": "Emitted event when value change"
         },
         "complexType": {
-          "original": "CheckboxValue[]",
+          "original": "MgInputCheckbox['value']",
           "resolved": "CheckboxValue[]",
           "references": {
-            "CheckboxValue": {
-              "location": "import",
-              "path": "./mg-input-checkbox.conf"
+            "MgInputCheckbox": {
+              "location": "global"
             }
           }
         }
@@ -457,9 +457,13 @@ export class MgInputCheckbox {
           "text": "Emited event when checking validity"
         },
         "complexType": {
-          "original": "boolean",
+          "original": "MgInputCheckbox['valid']",
           "resolved": "boolean",
-          "references": {}
+          "references": {
+            "MgInputCheckbox": {
+              "location": "global"
+            }
+          }
         }
       }];
   }

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

@@ -7,10 +7,24 @@ import { initLocales } from '../../../../locales';
 /**
  * Check if item is a well configured option
  *
- * @param {SelectOption} option select option
+ * @param {unknown} option select option
  * @returns {boolean} select option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
+/**
+ * Check if items[] is SelectOption
+ *
+ * @param {unknown[]} items select option
+ * @returns {boolean} select option array type is valid
+ */
+const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption(item));
+/**
+ * Check if item is a well configured optgroup
+ *
+ * @param {unknown} optgroup select option
+ * @returns {boolean} select optgroup type is valid
+ */
+const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
  *
@@ -46,17 +60,50 @@ export class MgInputSelect {
     this.hasDisplayedError = false;
     /**
      * Handle input event
+     *
+     * @returns {void}
      */
     this.handleInput = () => {
-      this.checkValidity();
-      if (this.hasDisplayedError) {
+      this.updateValue();
+      if (this.hasDisplayedError)
         this.setErrorMessage();
+    };
+    /**
+     * Method to compare item.title with input.value
+     *
+     * @param {SelectOption} item item to compare with
+     * @returns {boolean} truthy if input.value is an item
+     */
+    this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
+    /**
+     * value props setter
+     *
+     * @param {MgInputSelect['value']} newValue value to update with
+     * @returns {void}
+     */
+    this.setValue = (newValue) => {
+      this.checkValidity();
+      this.value = newValue;
+    };
+    /**
+     * Update value from input.value
+     *
+     * @returns {void}
+     */
+    this.updateValue = () => {
+      if (this.input.value === '') {
+        this.setValue(null);
       }
-      if (this.input.value !== '') {
-        this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).value;
+      else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
+        this.setValue(this.input.value);
+      }
+      else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
+        this.setValue(this.items.find(this.isInputValue).value);
       }
       else {
-        this.value = null;
+        // before set newValue with push to options[] the unknown input.value with a disable satus
+        this.options.push({ title: this.input.value, value: this.input.value, disabled: true });
+        this.setValue(this.input.value);
       }
     };
     /**
@@ -65,12 +112,18 @@ export class MgInputSelect {
     this.handleBlur = () => {
       this.displayError();
     };
+    /**
+     * Input value is disabled
+     *
+     * @returns {boolean} truthy if input value is disabled
+     */
+    this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
     /**
      * Check if input is valid
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
       this.invalid = !this.valid;
       // We need to send valid event even if it is the same value
       this.inputValid.emit(this.valid);
@@ -85,6 +138,13 @@ export class MgInputSelect {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    /**
+     * Render option
+     *
+     * @param {SelectOption} option to render
+     * @returns {HTMLElement} render option
+     */
+    this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     this.value = undefined;
     this.items = undefined;
     this.identifier = undefined;
@@ -109,9 +169,13 @@ export class MgInputSelect {
     this.valueExist = undefined;
     this.readonlyValue = undefined;
   }
-  handleValue(newValue) {
-    if (newValue !== null) {
-      this.readonlyValue = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.value === newValue).title;
+  validateValue(newValue) {
+    var _a, _b;
+    if (allItemsAreString(this.items) && typeof newValue === 'string') {
+      this.readonlyValue = Boolean((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
+    }
+    else if (allItemsAreOptions(this.items)) {
+      this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
     }
     else {
       this.readonlyValue = null;
@@ -125,14 +189,15 @@ export class MgInputSelect {
     }
     // String array
     else if (allItemsAreString(newValue)) {
-      this.valueExist = newValue.includes(this.value);
-      this.options = newValue.map((item) => ({ title: item, value: item }));
+      if (typeof this.value === 'string')
+        this.valueExist = newValue.includes(this.value);
+      this.options = newValue.map(item => ({ title: item, value: item }));
     }
     // Object array
-    else if (newValue.every(item => isOption(item))) {
+    else if (allItemsAreOptions(newValue)) {
       this.valueExist = newValue.map(item => item.value).includes(this.value);
       // Grouped object options
-      if (newValue.some(item => item.group !== undefined)) {
+      if (newValue.some(item => Boolean(item.group))) {
         this.options = newValue.reduce(groupOptions, []);
       }
       // Standart object options
@@ -177,6 +242,7 @@ export class MgInputSelect {
     this.messages = initLocales(this.element).messages;
     // Validate
     this.validateItems(this.items);
+    this.validateValue(this.value);
     // Set default placeholder
     if (this.placeholder === undefined || this.placeholder === '') {
       this.placeholder = this.messages.input.select.placeholder;
@@ -194,11 +260,11 @@ export class MgInputSelect {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { key: optgroup.title, value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? h("optgroup", { label: option.group }, option.options.map(this.renderOption)) : isOption(option) && this.renderOption(option)))));
   }
   static get is() { return "mg-input-select"; }
   static get encapsulation() { return "shadow"; }
@@ -235,8 +301,8 @@ export class MgInputSelect {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "string[] | SelectOption[]",
-          "resolved": "SelectOption[] | string[]",
+          "original": "(string | SelectOption)[]",
+          "resolved": "(string | SelectOption)[]",
           "references": {
             "SelectOption": {
               "location": "import",
@@ -558,9 +624,13 @@ export class MgInputSelect {
           "text": "Emited event when value change"
         },
         "complexType": {
-          "original": "any",
+          "original": "MgInputSelect['value']",
           "resolved": "any",
-          "references": {}
+          "references": {
+            "MgInputSelect": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "inputValid",
@@ -606,7 +676,7 @@ export class MgInputSelect {
   static get watchers() {
     return [{
         "propName": "value",
-        "methodName": "handleValue"
+        "methodName": "validateValue"
       }, {
         "propName": "items",
         "methodName": "validateItems"

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js

@@ -8,6 +8,9 @@ export class MgMenu {
     this.name = 'mg-menu';
     this.menuItems = [];
     this.focusedMenuItem = 0;
+    /*************
+     * Methods *
+     *************/
     /**
      * Close matching menu-item
      *
@@ -20,9 +23,36 @@ export class MgMenu {
         item.expanded = false;
       }
     };
-    /*************
-     * Methods *
-     *************/
+    /**
+     * get mg-item-more element
+     *
+     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     */
+    this.getItemMore = () => this.element.querySelector('mg-item-more');
+    /**
+     * get mg-item-more >>> mg-menu-item element
+     *
+     * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+     */
+    this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+    /**
+     * Set item listend
+     *
+     * @param {HTMLMgMenuItemElement} item mg-menu-item element
+     * @param {MgMenu['focusedMenuItem']} index number
+     * @returns {void}
+     */
+    this.setItemListener = (item, index) => {
+      ['click', 'focus'].forEach(trigger => {
+        (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
+          this.focusedMenuItem = index;
+          // reset expanded on previous active menu item
+          (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+            this.closeMenuItem(item, index !== this.focusedMenuItem);
+          });
+        });
+      });
+    };
     /**
      * Store menu-items on component init and add listeners
      *
@@ -30,18 +60,18 @@ export class MgMenu {
      */
     this.initMenuItemsListeners = () => {
       // add listeners on menu item and edit index
-      this.menuItems.forEach((item, menuItemIndex) => {
-        ['click', 'focus'].forEach(trigger => {
-          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
-            this.focusedMenuItem = menuItemIndex;
-            // reset expanded on previous active menu item
-            this.menuItems.forEach((item, index) => {
-              this.closeMenuItem(item, index !== this.focusedMenuItem);
-            });
-          });
-        });
+      this.menuItems.forEach((item, index) => {
+        this.setItemListener(item, index);
       });
     };
+    /**
+     * Handle item-loaded event on mg-item-more element
+     *
+     * @returns {void}
+     */
+    this.handleItemLoaded = () => {
+      this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+    };
     /**
      * render mg-item-more
      *
@@ -52,12 +82,13 @@ export class MgMenu {
       // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
       const item = 'mg-item-more';
       const mgItemMore = document.createElement(item);
-      Object.assign(mgItemMore, this.itemMore);
+      Object.assign(mgItemMore, this.itemmore);
+      mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
       this.element.appendChild(mgItemMore);
     };
     this.label = undefined;
     this.direction = Direction.HORIZONTAL;
-    this.itemMore = undefined;
+    this.itemmore = undefined;
     this.size = 'regular';
     this.isChildMenu = undefined;
   }
@@ -73,7 +104,7 @@ export class MgMenu {
   }
   validateItemMore(newValue) {
     if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-      throw new Error(`<${this.name}> prop "itemMore" must be paired with direction ${Direction.HORIZONTAL}.`);
+      throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
     }
   }
   validateSize(newValue) {
@@ -92,7 +123,7 @@ export class MgMenu {
   componentWillLoad() {
     this.validateDirection(this.direction);
     this.validateLabel(this.label);
-    this.validateItemMore(this.itemMore);
+    this.validateItemMore(this.itemmore);
     this.validateSize(this.size);
   }
   /**
@@ -113,13 +144,14 @@ export class MgMenu {
         this.renderMgItemMore();
       // use mutation observer to improve reactivity
       new MutationObserver(entries => {
-        const mgItemMore = this.element.querySelector('mg-item-more');
+        const mgItemMore = this.getItemMore();
         // prevent infinit loop by exclude mg-item-more deletion entry
         if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
           return;
         else if (mgItemMore !== null) {
           // render a new mg-item-more
           mgItemMore.remove();
+          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
           this.renderMgItemMore();
         }
       }).observe(this.element, { childList: true, characterData: true, subtree: true });
@@ -195,7 +227,7 @@ export class MgMenu {
         "reflect": true,
         "defaultValue": "Direction.HORIZONTAL"
       },
-      "itemMore": {
+      "itemmore": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
@@ -254,7 +286,7 @@ export class MgMenu {
         "propName": "direction",
         "methodName": "validateDirection"
       }, {
-        "propName": "itemMore",
+        "propName": "itemmore",
         "methodName": "validateItemMore"
       }, {
         "propName": "size",

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css

@@ -303,10 +303,12 @@
   margin-left: auto;
 }
 
-:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
+:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level,
+:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
   background-color: hsl(var(--color-light));
 }
-:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
+:host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu),
+:host([data-overflow-more]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
   padding: 1rem 0;
 }
 

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js

@@ -272,6 +272,8 @@ export class MgMenuItem {
       this.updatePopoverGuard();
       // manage child dom changes with mutationObserver and listzners
       this.initListeners();
+      // emit loaded event when component is fully loaded
+      this.itemLoaded.emit();
       new MutationObserver(mutationsList => {
         if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
           this.updateStatus();
@@ -302,7 +304,7 @@ export class MgMenuItem {
   render() {
     const getContainerClasses = () => ({
       [`${this.name}__collapse-container`]: true,
-      [`${this.name}__collapse-container--first-level`]: this.isInMainMenu && this.isDirection(Direction.HORIZONTAL),
+      [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
     });
     return (h(Host, { role: !this.isItemMore && 'menuitem', "aria-haspopup": !this.isItemMore && this.hasChildren.toString() }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),
@@ -432,6 +434,21 @@ export class MgMenuItem {
             }
           }
         }
+      }, {
+        "method": "itemLoaded",
+        "name": "item-loaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when item is loaded"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "element"; }

package/dist/collection/components/molecules/mg-form/mg-form.js

@@ -141,7 +141,7 @@ export class MgForm {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new CustomEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
         });
       }
     });

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js

@@ -26,7 +26,8 @@ export class MgItemMore {
       Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
         // manage click on proxy to mirror it on initial element
         proxy.addEventListener('click', () => {
-          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
+          // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
+          allMenuItem[index].shadowRoot.querySelector('a, button').click();
         });
         // add id suffix to prevent duplicate key. default html id is: '';
         if (proxy.id.trim() !== '')

package/dist/collection/utils/components.utils.js

@@ -66,12 +66,10 @@ export class ClassList {
 /**
  * Check if all items are string
  *
- * @param {string[]} items items to check
+ * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
-export const allItemsAreString = (items) => {
-  return items && items.every(item => typeof item === 'string');
-};
+export const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
 /**
  * Check if element is a heading
  *

package/dist/collection/utils/unit.test.utils.js

@@ -1,3 +1,4 @@
+import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
  *
@@ -40,6 +41,30 @@ export const setupResizeObserverMock = ({ disconnect, observe }) => {
   });
   return MockResizeObserver;
 };
+/**
+ * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
+ *
+ * @returns {void}
+ * @example
+ * ```
+ * setupSubmitEventMock();
+ * ```
+ */
+export const setupSubmitEventMock = () => {
+  class SubmitEvent extends MockCustomEvent {
+    constructor(type, eventInitDict) {
+      super(type, eventInitDict);
+    }
+  }
+  [window, global].forEach(element => {
+    Object.defineProperty(element, 'SubmitEvent', {
+      writable: true,
+      configurable: true,
+      value: SubmitEvent,
+    });
+  });
+  return SubmitEvent;
+};
 /**
  * force popover id when component use randomed identifier
  *

package/dist/components/components.utils.js

@@ -66,12 +66,10 @@ class ClassList {
 /**
  * Check if all items are string
  *
- * @param {string[]} items items to check
+ * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
-const allItemsAreString = (items) => {
-  return items && items.every(item => typeof item === 'string');
-};
+const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
 /**
  * Check if element is a heading
  *

package/dist/components/mg-form.js

@@ -149,7 +149,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new CustomEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
         });
       }
     });

package/dist/components/mg-input-checkbox.js

@@ -11,10 +11,11 @@ const mgInputCheckboxCss = ":host{display:block}.mg-input{display:flex;align-ite
 /**
  * type CheckboxItem validation function
  *
- * @param {CheckboxItem} item Checkbox item
- * @returns {boolean} match item expectations
+ * @param {unknown} items Checkbox item
+ * @returns {boolean} match item type
  */
-const isCheckboxItem = (item) => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined;
+const isCheckboxItems = (items) => Array.isArray(items) &&
+  items.every(item => typeof item === 'object' && typeof item.title === 'string' && (item.value === null || typeof item.value === 'boolean') && item.value !== undefined);
 const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -97,7 +98,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.checkboxItems = [];
   }
   validateValue(newValue) {
-    if (newValue && newValue.every(item => isCheckboxItem(item))) {
+    if (isCheckboxItems(newValue)) {
       this.checkboxItems = newValue.map((item, index) => ({
         id: `${this.identifier}_${index.toString()}`,
         title: item.title,