@mgdis/mg-components 5.7.0 → 5.8.1

package/dist/collection/utils/behaviors.utils.js

@@ -1,13 +1,12 @@
 /**
- * MgMenuItem type guard
+ * MgItemMore type guard
  *
  * @param {HTMLElement} element element to control type
- * @returns {boolean} truthy if element is mg-menu-item
+ * @returns {boolean} truthy if element is mg-item-more
  */
-const isMgMenuItem = (element) => element.nodeName === 'MG-MENU-ITEM';
+const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
 export var OverflowBehaviorElements;
 (function (OverflowBehaviorElements) {
-  OverflowBehaviorElements["MORE"] = "data-overflow-more";
   OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
   OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
 })(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
@@ -24,7 +23,7 @@ export class OverflowBehavior {
      * @returns {void}
      */
     this.disconnect = () => {
-      this.resizeObserver.disconnect();
+      this._resizeObserver.disconnect();
     };
     /************
      * Internal *
@@ -32,31 +31,35 @@ export class OverflowBehavior {
     /**
      * run overflow behavior
      *
-     * @param {number} width width of the container
+     * @param {number} width width of the container. Optional.
      * @returns {void}
      */
     this.run = (width) => {
-      if (this.moreElement === undefined) {
+      if (this._moreElement === undefined) {
         // set moreElement
-        this.moreElement = this.render();
-        this.moreElement.setAttribute(OverflowBehaviorElements.MORE, '');
+        this._moreElement = this.render();
         // set children
-        this.children = Array.from(this.element.children);
-        let moreElementChildren;
-        const allowedElements = ['MG-MENU-ITEM', 'MG-BUTTON'];
-        if (isMgMenuItem(this.moreElement)) {
-          moreElementChildren = Array.from(this.moreElement.querySelector('mg-menu').children).filter(element => allowedElements.includes(element.nodeName));
+        this._baseChildren = this.getInteractiveItems(this.element);
+        if (isMgItemMore(this._moreElement)) {
+          this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
         }
-        this.children.forEach((child, index) => {
+        // update children
+        this._baseChildren.forEach((child, index) => {
           child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
-          if (child.getAttribute(OverflowBehaviorElements.MORE) === null) {
-            // set moreElement children
-            moreElementChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
-          }
+          // set moreElement children
+          this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
         });
       }
-      this.updateDisplayedItems(width);
+      if (width !== undefined)
+        this.updateDisplayedItems(width);
     };
+    /**
+     * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+     *
+     * @param {Element} element element to parse
+     * @returns {Element[]} children
+     */
+    this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
     /**
      * Update displayed items in container from a given available space
      *
@@ -66,7 +69,7 @@ export class OverflowBehavior {
     this.updateDisplayedItems = (availableWidth) => {
       this.restoreItems();
       const acc = { accWidth: 0, previousItem: null };
-      this.children.forEach((child) => {
+      [...this._baseChildren, this._moreElement].forEach((child) => {
         acc.accWidth += child.offsetWidth;
         const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;
         // if previous item is hidden AND is NOT more element we hidde current
@@ -90,7 +93,7 @@ export class OverflowBehavior {
       if (item.previousElementSibling === null || this.isMoreElement(item))
         return false;
       else if (!this.isMoreElement(item.nextElementSibling))
-        return cumulateWidth + this.moreElement.offsetWidth > availableWidth;
+        return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
       else
         return cumulateWidth > availableWidth;
     };
@@ -100,7 +103,7 @@ export class OverflowBehavior {
      * @param {Element} element element to match with 'MORE' element
      * @returns {boolean} truthy if element is the 'MORE' element
      */
-    this.isMoreElement = (element) => element.getAttribute(OverflowBehaviorElements.MORE) !== null;
+    this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
     /**
      * Toggle display item element
      *
@@ -111,10 +114,10 @@ export class OverflowBehavior {
     this.toggleItem = (item, isHidden) => {
       const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
       if (this.isMoreElement(item))
-        this.toggleElement(this.moreElement, isHidden);
+        this.toggleElement(this._moreElement, isHidden);
       else if (mgActionMenuindex >= 0) {
         this.toggleElement(item, isHidden);
-        this.toggleElement(this.moreElement.querySelector(`[${OverflowBehaviorElements.PROXY_INDEX}="${mgActionMenuindex}"]`), !isHidden);
+        this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
       }
     };
     /**
@@ -136,16 +139,17 @@ export class OverflowBehavior {
      * @returns {void}
      */
     this.restoreItems = () => {
-      this.children.forEach(item => item.removeAttribute('hidden'));
+      [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
     };
-    if (this.resizeObserver === undefined) {
+    if (this._resizeObserver === undefined) {
       // add resize observer
-      this.resizeObserver = new ResizeObserver(entries => {
+      this._resizeObserver = new ResizeObserver(entries => {
         entries.forEach(entry => {
           this.run(entry.contentRect.width);
         });
       });
-      this.resizeObserver.observe(this.element);
+      this._resizeObserver.observe(this.element);
     }
+    this.run();
   }
 }

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/index.d.ts

@@ -19,6 +19,7 @@ export { MgInputText as MgInputText } from '../types/components/molecules/inputs
 export { MgInputTextarea as MgInputTextarea } from '../types/components/molecules/inputs/mg-input-textarea/mg-input-textarea';
 export { MgInputTitle as MgInputTitle } from '../types/components/atoms/mg-input-title/mg-input-title';
 export { MgInputToggle as MgInputToggle } from '../types/components/molecules/inputs/mg-input-toggle/mg-input-toggle';
+export { MgItemMore as MgItemMore } from '../types/components/molecules/mg-item-more/mg-item-more';
 export { MgMenu as MgMenu } from '../types/components/molecules/menu/mg-menu/mg-menu';
 export { MgMenuItem as MgMenuItem } from '../types/components/molecules/menu/mg-menu-item/mg-menu-item';
 export { MgMessage as MgMessage } from '../types/components/molecules/mg-message/mg-message';

package/dist/components/index.js

@@ -19,6 +19,7 @@ export { MgInputText, defineCustomElement as defineCustomElementMgInputText } fr
 export { MgInputTextarea, defineCustomElement as defineCustomElementMgInputTextarea } from './mg-input-textarea.js';
 export { MgInputTitle, defineCustomElement as defineCustomElementMgInputTitle } from './mg-input-title.js';
 export { MgInputToggle, defineCustomElement as defineCustomElementMgInputToggle } from './mg-input-toggle.js';
+export { MgItemMore, defineCustomElement as defineCustomElementMgItemMore } from './mg-item-more.js';
 export { MgMenu, defineCustomElement as defineCustomElementMgMenu } from './mg-menu.js';
 export { MgMenuItem, defineCustomElement as defineCustomElementMgMenuItem } from './mg-menu-item.js';
 export { MgMessage, defineCustomElement as defineCustomElementMgMessage } from './mg-message.js';

package/dist/components/mg-action-more.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { D as Direction, S as Status, d as defineCustomElement$3 } from './mg-menu-item2.js';
+import { S as Status, d as defineCustomElement$3 } from './mg-menu-item2.js';
+import { D as Direction } from './mg-menu.conf.js';
 import { c as createID } from './components.utils.js';
 import { d as defineCustomElement$8 } from './mg-badge2.js';
 import { d as defineCustomElement$7 } from './mg-button2.js';

package/dist/components/mg-button2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as ClassList } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
@@ -14,6 +14,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.disabledChange = createEvent(this, "disabled-change", 7);
     /************
      * Internal *
      ************/
@@ -112,6 +113,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     else {
       this.classList.delete(this.classDisabled);
     }
+    // emit value update
+    this.disabledChange.emit(isDisabled);
   }
   loadingHandler(newValue) {
     // we add loading style if it newvalue is true else we remove it

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-icon2.js

@@ -33,6 +33,7 @@ const icons = {
   'bell': () => (h("path", { fill: "currentColor", d: "M8 15.33a1.7 1.7 0 0 0 1.52-1.83h-3A1.7 1.7 0 0 0 8 15.33ZM13.13 11c-.46-.59-1.32-1.48-1.32-4.42a4.4 4.4 0 0 0-3.05-4.4v-.6A.85.85 0 0 0 8 .67a.85.85 0 0 0-.76.91v.6a4.4 4.4 0 0 0-3 4.44c0 2.94-.86 3.83-1.32 4.42a1 1 0 0 0-.2.63.85.85 0 0 0 .76.91h9.14a.85.85 0 0 0 .76-.91 1.05 1.05 0 0 0-.25-.67Z" })),
   'briefcase': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Z" })),
   'briefcase-outline': () => (h("path", { fill: "currentColor", d: "M14 4.5h-3v-1c0-.55-.45-1-1-1H6c-.55 0-1 .45-1 1v1H2c-.55 0-1 .45-1 1v7c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-7c0-.55-.45-1-1-1Zm-8-1h4v1H6v-1Zm8 9H2v-7h12v7Z" })),
+  'building-outline': () => (h("path", { fill: "currentColor", d: "M4 2h8v12H9v-1a1 1 0 1 0-2 0v1H4V2Zm4 13h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h4ZM7 4H5v2h2V4Zm2 0h2v2H9V4Zm2 4H9v2h2V8ZM5 8h2v2H5V8Z" })),
   'calculator': () => (h("path", { fill: "currentColor", d: "M12.83.67H3.17a.5.5 0 0 0-.5.5v13.66a.5.5 0 0 0 .5.5h9.66a.5.5 0 0 0 .5-.5V1.17a.5.5 0 0 0-.5-.5ZM5.58 13.39a.29.29 0 0 1-.28.3H4.1a.29.29 0 0 1-.3-.28v-1.2a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm0-3.28a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V8.93a.29.29 0 0 1 .28-.3h1.2a.29.29 0 0 1 .3.28v1.2Zm3.29 3.28a.29.29 0 0 1-.3.3H7.38a.29.29 0 0 1-.3-.3v-1.18a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm0-3.28a.32.32 0 0 1-.3.3H7.38a.32.32 0 0 1-.3-.3V8.93a.29.29 0 0 1 .3-.3h1.19a.29.29 0 0 1 .3.3Zm3.33 3.28a.29.29 0 0 1-.28.3h-1.25a.29.29 0 0 1-.3-.28V8.93a.29.29 0 0 1 .28-.3h1.25a.29.29 0 0 1 .3.28v4.48Zm0-7.15a.29.29 0 0 1-.3.3H4.1a.29.29 0 0 1-.3-.3V2.61a.29.29 0 0 1 .28-.3h7.82a.29.29 0 0 1 .3.28v3.65Z" })),
   'calendar': () => (h("path", { fill: "currentColor", d: "M14 3.5c0-.55-.45-1-1-1h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v.98s0 .02.02.02H2v9c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-9h-.02s.02 0 .02-.02V3.5Zm-11 10v-8h10v8H3Z" })),
   'calendar-outline': () => (h("path", { fill: "currentColor", d: "M13 2.5h-1v-1h-1v1H5v-1H4v1H3c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10c0-.55-.45-1-1-1Zm-10 11v-8h10v8H3Zm0-9v-1h10v1H3Z" })),
@@ -148,6 +149,7 @@ const icons = {
   'pen': () => (h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
   'pen-circle': () => (h("path", { fill: "currentColor", d: "M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7" })),
   'pen-fancy': () => (h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'pen-fancy-files-outline': () => (h("path", { fill: "currentColor", d: "M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z" })),
   'pen-fancy-outline': () => (h("path", { fill: "currentColor", d: "M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z" })),
   'phone': () => (h("path", { fill: "currentColor", d: "M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z" })),
   'picture': () => (h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
@@ -166,6 +168,8 @@ const icons = {
     h("path", { key: "tags-2", fill: "currentColor", d: "M15 7.37 10.15 3a1.12 1.12 0 0 0-.77-.29H8.26l4.5 4.09a1.76 1.76 0 0 1 0 2.65L8.77 13a1.17 1.17 0 0 0 1.55 0L15 8.79a.94.94 0 0 0 0-1.42Z" }),
   ],
   'thumb-up': () => (h("path", { fill: "currentColor", d: "M2.11 14.36h1a.45.45 0 0 0 .45-.44V7.17a.45.45 0 0 0-.45-.44h-1a.44.44 0 0 0-.44.44v6.75a.44.44 0 0 0 .44.44Zm12.22-7a1.27 1.27 0 0 0-1.27-1.27H9.71l.61-2.91v-.2a1.07 1.07 0 0 0-.28-.68l-.68-.66-4.17 4.19a1.26 1.26 0 0 0-.37.9v6.36a1.27 1.27 0 0 0 1.27 1.27h5.06a1.24 1.24 0 0 0 1.17-.77l1.92-4.49a1.22 1.22 0 0 0 .09-.46V7.42Z" })),
+  'thumbtack': () => (h("path", { fill: "currentColor", d: "M8.91 2 7.71 5.594 2.364 7.09 5.274 10l-.707.706-1.687 1.687-.264.264-.09.09-.209.498L2 14l.755-.317.498-.21.09-.089.264-.264 1.687-1.687.706-.706 2.91 2.908 1.496-5.347L14 7.09 8.91 2Z" })),
+  'thumbtack-outline': () => (h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "m5.273 10-2.91 2.91L2 14l1.09-.364L6 10.727l2.91 2.91 1.496-5.348L14 7.09 8.91 2 7.71 5.594 2.364 7.09 5.273 10Zm3.241-3.563-4.18 1.17 4.059 4.059 1.17-4.18 2.533-.845-2.737-2.737-.845 2.533Z" })),
   'trash': () => [
     h("path", { key: "trash-1", fill: "currentColor", d: "M3.27 14.17c0 .66.54 1.19 1.2 1.2h7l-.05-.02h.08c.64-.02 1.14-.56 1.12-1.2V4.32H3.27v9.85Zm5.97-7.12c0-.33.27-.6.6-.6s.6.27.6.6v5.3c0 .33-.27.6-.6.6s-.6-.27-.6-.6v-5.3Zm-3.5 0c0-.33.27-.59.6-.6.32.02.58.28.6.6v5.3c-.02.32-.28.58-.6.6a.645.645 0 0 1-.6-.6v-5.3Zm7.28-5.39h-2.6V.95a.28.28 0 0 0-.28-.28H5.87a.28.28 0 0 0-.28.28v.72H2.91a.28.28 0 0 0-.28.28V3.1c0 .15.12.28.28.28h10.11c.15 0 .28-.12.28-.28V1.94a.28.28 0 0 0-.28-.28Z" }),
     h("path", { key: "trash-2", fill: "currentColor", d: "M13,2h-2.9L9.9,1.6    C9.8,1.4,9.6,1.2,9.4,1.2H6.6c-0.2,0-0.4,0.1-0.5,0.3L5.8,2H2.9C2.7,2,2.5,2.2,2.5,2.4c0,0,0,0,0,0v0.8c0,0.2,0.2,0.4,0.4,0.4H13    c0.2,0,0.4-0.2,0.4-0.4V2.4C13.4,2.2,13.2,2,13,2z" }),
@@ -176,6 +180,10 @@ const icons = {
   'upload': () => (h("path", { fill: "currentColor", d: "M9.58 10.74V6.59a.31.31 0 0 1 .31-.3H12a.3.3 0 0 0 .21-.52l-4-4a.29.29 0 0 0-.42 0l-4 4a.3.3 0 0 0 .21.52h2.11a.31.31 0 0 1 .31.3v4.15a.3.3 0 0 0 .3.3h2.56a.3.3 0 0 0 .3-.3ZM14.33 14v-1a.29.29 0 0 0-.29-.3H2a.29.29 0 0 0-.29.3v1a.29.29 0 0 0 .29.29h12a.29.29 0 0 0 .33-.29Z" })),
   'user': () => (h("path", { fill: "currentColor", d: "M8 8.79a3.56 3.56 0 1 0-3.56-3.56A3.56 3.56 0 0 0 8 8.79Zm3.17.79H9.8a4.27 4.27 0 0 1-3.6 0H4.83a3.16 3.16 0 0 0-3.16 3.17v.4a1.18 1.18 0 0 0 1.18 1.18h10.3a1.18 1.18 0 0 0 1.18-1.18v-.4a3.16 3.16 0 0 0-3.16-3.17Z" })),
   'user-circle': () => (h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
+  'user-pen-fancy-outline': () => [
+    h("path", { fill: "currentColor", d: "M7.5 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5Zm0-4C6.67 3 6 3.67 6 4.5S6.67 6 7.5 6 9 5.33 9 4.5 8.33 3 7.5 3ZM11.12 11.46l-.22.54-.3.77s-.04.09-.06.13c-.03.04-.06.07-.1.1-.05.04-.1.07-.16.08L7.52 14l-.07-.07 1.45-1.45h.13c.15 0 .27-.06.36-.16a.56.56 0 0 0 .1-.15c.01-.02.02-.04.03-.07v-.02s.01-.05.01-.08v-.03c0-.28-.23-.5-.51-.5-.28.01-.5.24-.5.51v.14l-.76.75-.14.13-.55.55-.07-.07.16-.48.1-.29.24-.71.42-1.27c.05-.16.17-.28.32-.32l1.31-.52 1.57 1.57ZM14.56 8.22l-2.05 1.87-.7.64-.06.05-.32.29-1.52-1.52.28-.31.06-.06.64-.7 1.88-2.04c1.16-1.31 3.11.61 1.79 1.78Z" }),
+    h("path", { fill: "currentColor", d: "M9 8H6c-2.21 0-4 1.79-4 4 0 .55.45 1 1 1h3.11l.33-1H3c0-1.66 1.34-3 3-3h3.05l.12-.13.71-.77C9.6 8.03 9.3 8 9 8Z" }),
+  ],
   'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
   'user-question-outline': () => (h("path", { fill: "currentColor", d: "M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z" })),

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,

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

@@ -11,10 +11,24 @@ const mgInputSelectCss = ":host{display:block}.mg-input{display:flex;align-items
 /**
  * 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
  *
@@ -55,17 +69,50 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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);
+      }
+      else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {
+        this.setValue(this.input.value);
       }
-      if (this.input.value !== '') {
-        this.value = allItemsAreString(this.items) ? this.input.value : this.items.find(item => item.title === this.input.value).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);
       }
     };
     /**
@@ -74,12 +121,18 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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);
@@ -94,6 +147,13 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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;
@@ -118,9 +178,13 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
@@ -134,14 +198,15 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     // 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
@@ -186,6 +251,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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;
@@ -203,15 +269,15 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * @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)))));
   }
   get element() { return this; }
   static get watchers() { return {
-    "value": ["handleValue"],
+    "value": ["validateValue"],
     "items": ["validateItems"],
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],

package/dist/components/mg-item-more.d.ts

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