@mgdis/mg-components 5.11.0 → 5.12.0

package/dist/mg-components/{p-d3ed97d3.entry.js → p-67ba5d05.entry.js}

@@ -1 +1 @@
-import{r as t,h as i,H as s,g as e}from"./p-3bf533f7.js";import{i as o,D as h}from"./p-b14be68b.js";var n;!function(t){t.BASE_INDEX="data-overflow-base-index",t.PROXY_INDEX="data-overflow-proxy-index"}(n||(n={}));class r{constructor(t,i){this.element=t,this.render=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.run=t=>{void 0===this._moreElement&&(this._moreElement=this.render(),this._baseChildren=this.getInteractiveItems(this.element),(()=>"MG-ITEM-MORE"===this._moreElement.nodeName)()&&(this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))),this._baseChildren.forEach(((t,i)=>{t.setAttribute(n.BASE_INDEX,`${i}`),this._proxyChildren[i].setAttribute(n.PROXY_INDEX,`${i}`)}))),void 0!==t&&this.updateDisplayedItems(t)},this.getInteractiveItems=t=>{var i;return((null===(i=t.children)||void 0===i?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))},this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=null!==i.previousItem&&null!==i.previousItem.getAttribute("hidden");this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e),i.previousItem=s}))},this.isOverflowElement=(t,i,s)=>null!==i.previousElementSibling&&!this.isMoreElement(i)&&(this.isMoreElement(i.nextElementSibling)?t>s:t+this._moreElement.offsetWidth>s),this.isMoreElement=t=>"MG-ITEM-MORE"===t.nodeName,this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(n.BASE_INDEX));this.isMoreElement(t)?this.toggleElement(this._moreElement,i):s>=0&&(this.toggleElement(t,i),this.toggleElement(this._proxyChildren[s],!i))},this.toggleElement=(t,i)=>{i?t.setAttribute("hidden",""):t.removeAttribute("hidden")},this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))},void 0===this._resizeObserver&&(this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))})),this._resizeObserver.observe(this.element)),this.run()}}const a=class{constructor(i){t(this,i),this.name="mg-item-more",this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(!0))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));return Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{i[s].shadowRoot.querySelector("a, button").click()})),""!==t.id.trim()&&(t.id=`${t.id}-proxy`),i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))})),this.element},this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1},this.size=void 0,this.parentMenu=void 0}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.moreLabel)}validateSize(t){if(t&&"string"!=typeof t)throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu,this.parentMenu=this.element.closest("mg-menu"),this.menuItems=Array.from(this.parentMenu.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new r(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"menuitem","aria-haspopup":"true"},i("mg-menu-item",{"data-overflow-more":!0,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};a.style=".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";export{a as mg_item_more}
+import{r as t,h as i,H as s,g as e}from"./p-3bf533f7.js";import{i as o,D as h}from"./p-689503fc.js";var n;!function(t){t.BASE_INDEX="data-overflow-base-index",t.PROXY_INDEX="data-overflow-proxy-index"}(n||(n={}));class r{constructor(t,i){this.element=t,this.render=i,this.disconnect=()=>{this._resizeObserver.disconnect()},this.run=t=>{void 0===this._moreElement&&(this._moreElement=this.render(),this._baseChildren=this.getInteractiveItems(this.element),(()=>"MG-ITEM-MORE"===this._moreElement.nodeName)()&&(this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))),this._baseChildren.forEach(((t,i)=>{t.setAttribute(n.BASE_INDEX,`${i}`),this._proxyChildren[i].setAttribute(n.PROXY_INDEX,`${i}`)}))),void 0!==t&&this.updateDisplayedItems(t)},this.getInteractiveItems=t=>{var i;return((null===(i=t.children)||void 0===i?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))},this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((s=>{i.accWidth+=s.offsetWidth;const e=null!==i.previousItem&&null!==i.previousItem.getAttribute("hidden");this.toggleItem(s,e&&!this.isMoreElement(s)||this.isOverflowElement(i.accWidth,s,t)||this.isMoreElement(s)&&!e),i.previousItem=s}))},this.isOverflowElement=(t,i,s)=>null!==i.previousElementSibling&&!this.isMoreElement(i)&&(this.isMoreElement(i.nextElementSibling)?t>s:t+this._moreElement.offsetWidth>s),this.isMoreElement=t=>"MG-ITEM-MORE"===t.nodeName,this.toggleItem=(t,i)=>{const s=Number(t.getAttribute(n.BASE_INDEX));this.isMoreElement(t)?this.toggleElement(this._moreElement,i):s>=0&&(this.toggleElement(t,i),this.toggleElement(this._proxyChildren[s],!i))},this.toggleElement=(t,i)=>{i?t.setAttribute("hidden",""):t.removeAttribute("hidden")},this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))},void 0===this._resizeObserver&&(this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))})),this._resizeObserver.observe(this.element)),this.run()}}const a=class{constructor(i){t(this,i),this.name="mg-item-more",this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(!0))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));return Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,s)=>{t.addEventListener("click",(()=>{i[s].shadowRoot.querySelector("a, button").click()})),""!==t.id.trim()&&(t.id=`${t.id}-proxy`),i[s].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))})),this.element},this.icon={icon:"ellipsis-vertical"},this.slotlabel={display:!1},this.size=void 0,this.parentMenu=void 0}validateIcon(t){if("object"!=typeof t||"object"==typeof t&&"string"!=typeof t.icon)throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if("object"!=typeof t||"object"==typeof t&&"boolean"!=typeof t.display)throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);"string"!=typeof t.label&&(this.slotlabel.label=this.messages.moreLabel)}validateSize(t){if(t&&"string"!=typeof t)throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=o(this.element).messages.plusMenu,this.parentMenu=this.element.closest("mg-menu"),this.menuItems=Array.from(this.parentMenu.children).filter((t=>"MG-MENU-ITEM"===t.nodeName)),this.validateIcon(this.icon),this.validateSlotLabel(this.slotlabel),this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new r(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(s,{role:"menuitem","aria-haspopup":"true"},i("mg-menu-item",{"data-overflow-more":!0,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"sr-only":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return e(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};a.style=".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";export{a as mg_item_more}

package/dist/mg-components/p-689503fc.js

@@ -0,0 +1 @@
+const e=(e,a,t)=>new Intl.NumberFormat(a,{style:"currency",currency:t}).format(e),a=(e,a)=>new Intl.NumberFormat(a).format(e),t=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,s=(e,a)=>"string"==typeof e&&""!==e&&t.test(e)?new Intl.DateTimeFormat(a).format(new Date(e)):"",n={en:{errors:{required:"This field is required.",date:{badInput:'The date format must be <span aria-hidden="true">mm/dd/yyyy</span><span class="sr-only">m m / d d / y y y y</span> and the date must be greater than {min}',min:"The date cannot be earlier than {min}",max:"The date cannot be later than {max}",minMax:"The date must be between {min} and {max}"},numeric:{min:"The value cannot be less than {min}",max:"The value cannot be greater than {max}",minMax:"The value must be between {min} et {max}"}},nbCharLeft:"{counter} characters left.",input:{select:{placeholder:"Select a value"},checkbox:{selectedValues:"{nb} selected values",selectedValue:"{nb} selected value",editButton:"Edit",selectButton:"Select values",showButton:"Show",label:"Enter a value",result:"result",results:"results",searchResults:"Search result(s) list.",noResult:"No result."}},form:{required:'Fields with a <strong class="is-asterisk">*</strong> are required',requiredSingle:'Field with a <strong class="is-asterisk">*</strong> is required',allRequired:"All fields are required",allRequiredSingle:"The field is required"},message:{closeButton:"Close message"},modal:{closeButton:"Close modal"},pagination:{label:"Pagination",page:"page",pages:"pages",nextPage:"Next page",previousPage:"Previous page",selectPage:"Select the page to display."},panel:{editLabel:"Edit section title."},skipLinks:{navLabel:"Quick access"},general:{confirm:"Confirm",cancel:"Cancel",close:"Close",next:"next",previous:"previous"},plusMenu:{moreLabel:"Additional menu",badgeLabel:"Include notification(s)"},actionMore:{label:"Actions"}},fr:{errors:{required:"Ce champ est obligatoire.",date:{badInput:'Le format de la date doit être du type <span aria-hidden="true">jj/mm/aaaa</span><span class="sr-only">j j / m m / a a a a</span> et la date supérieure au {min}',min:"La date ne peut pas être antérieure au {min}",max:"La date ne peut pas être postérieure au {max}",minMax:"La date doit être comprise entre le {min} et le {max}"},numeric:{min:"La valeur ne peut pas être inférieure à {min}",max:"La valeur ne peut pas être supérieure à {max}",minMax:"La valeur doit être comprise entre {min} et {max}"}},nbCharLeft:"{counter} caractères disponibles.",input:{select:{placeholder:"Sélectionnez une valeur"},checkbox:{selectedValues:"{nb} valeurs selectionnées",selectedValue:"{nb} valeur selectionnée",editButton:"Modifier",selectButton:"Sélectionner des valeurs",showButton:"Voir",label:"Saisissez une valeur",result:"resultat",results:"resultats",searchResults:"List de resultat(s) de la recherche.",noResult:"Aucun resultat."}},form:{required:'Les champs marqués d\'un <strong class="is-asterisk">*</strong> sont obligatoires',requiredSingle:'Le champ marqué d\'un <strong class="is-asterisk">*</strong> est obligatoire',allRequired:"Tous les champs sont obligatoires",allRequiredSingle:"Le champ est obligatoire"},message:{closeButton:"Fermer le message"},modal:{closeButton:"Fermer la modale"},pagination:{label:"Pagination",page:"page",pages:"pages",nextPage:"Page suivante",previousPage:"Page précédente",selectPage:"Sélectionner la page à afficher."},panel:{editLabel:"Modifier le titre de la section."},skipLinks:{navLabel:"Accès rapide"},general:{confirm:"Valider",cancel:"Annuler",close:"Fermer",next:"suivant",previous:"précédent"},plusMenu:{moreLabel:"Menu complémentaire",badgeLabel:"Notification(s) incluse(s)"},actionMore:{label:"Actions"}}},r=e=>((e,a)=>{const t=e.closest("[lang]"),s=Intl.NumberFormat.supportedLocalesOf(null==t?void 0:t.lang),n=s.length>0?s[0]:navigator.language||"en",r=n.split("-").shift();return{locale:n,messages:a[r]||a.en}})(e,n);var l;!function(e){e.VERTICAL="vertical",e.HORIZONTAL="horizontal"}(l||(l={}));const i=["regular","medium","large"];export{l as D,e as a,a as b,t as d,r as i,s as l,i as s}

package/dist/mg-components/styles/a11y.scss

@@ -4,7 +4,7 @@
 
 // Make content available only for screen reader
 // https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
-.sr-only {
+@mixin sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;
@@ -18,6 +18,10 @@
   white-space: nowrap !important;
 }
 
+.sr-only {
+  @include sr-only();
+}
+
 // Remove outline for non-keyboard :focus
 // https://www.tpgi.com/focus-visible-and-backwards-compatibility/
 *:focus:not(:focus-visible) {

package/dist/mg-components/styles/typography.scss

@@ -73,3 +73,10 @@ a {
     text-decoration: none;
   }
 }
+
+/**
+* Small
+*/
+small {
+  font-size: 0.9em;
+}

package/dist/mg-components/variables.css

@@ -75,6 +75,9 @@
   --color-dark-l: 13.1%;
   --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
 
+  /* dark-5 */
+  --mg-color-dark-5-hsl: hsl(var(--color-dark-h), 9%, 96%);
+
   /* Light */
   /* white; (#ffffff) */
   /* rgb(255, 255, 255); */
@@ -259,4 +262,9 @@
   --mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);
   --mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);
   --mg-tabs-color-active-hsl: var(--mg-color-app-hsl);
+
+  /*
+    <mg-details>
+   */
+  --mg-details-spacing: 1.5rem;
 }

package/dist/types/components/atoms/mg-icon/mg-icon.conf.d.ts

@@ -1,7 +1,3 @@
-/**
- * Icon SVG paths
- */
-export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */

package/dist/types/components/atoms/mg-icon/mg-icon.d.ts

@@ -34,11 +34,6 @@ export declare class MgIcon {
    * Component classes
    */
   classCollection: ClassList;
-  /**
-   * getIcon
-   * @returns icon html
-   */
-  private getIcon;
   /**
    * Method to set default varianStyle props
    * needeed has stencil doesn't know that props is mutated when updated in prop watcher

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -25,3 +25,7 @@ export declare const checkboxTypes: readonly ["checkbox", "multi"];
  * ChecboxType from checkbox types
  */
 export type CheckboxType = (typeof checkboxTypes)[number];
+/**
+ * Search value type
+ */
+export type SearchValueType = string;

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -1,15 +1,18 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxType, CheckboxValue } from './mg-input-checkbox.conf';
+import { CheckboxItem, CheckboxType, CheckboxValue, SearchValueType } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox {
   /************
    * Internal *
    ************/
   private inputs;
-  private popover;
+  private mgPopover;
   private messages;
   private hasDisplayedError;
   private baseClassName;
+  private multiStart;
+  private searchStart;
+  private searchOffset;
   /**************
    * Decorators *
    **************/
@@ -62,6 +65,11 @@ export declare class MgInputCheckbox {
    * Define if input is readonly
    */
   readonly: boolean;
+  /**
+   * Display selected values list in "multi" type
+   */
+  displaySelectedValues: boolean;
+  validateDisplaySelectedValues(newValue: MgInputCheckbox['displaySelectedValues']): void;
   /**
    * Define if input is disabled
    */
@@ -96,6 +104,24 @@ export declare class MgInputCheckbox {
    * Formated value for display
    */
   checkboxItems: CheckboxItem[];
+  validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void;
+  /**
+   * Display search input
+   */
+  displaySearchInput: boolean;
+  /**
+   * Search current page
+   */
+  currentSearchPage: number;
+  /**
+   * Search value
+   */
+  searchValue: SearchValueType;
+  validateSearchValue(newValue: MgInputCheckbox['searchValue']): void;
+  /**
+   * Search current page
+   */
+  searchResults: CheckboxItem[];
   /**
    * Emitted event when value change
    */
@@ -118,10 +144,25 @@ export declare class MgInputCheckbox {
    * @param event - to trak "tab" key
    */
   private handleKeydown;
+  /**
+   * Reset current-search-page prop
+   */
+  private setCurrentSearchPage;
   /**
    * Handle blur event
    */
   private handleBlur;
+  /**
+   * Handle input search value-change event
+   * @param event - input value-change event
+   */
+  private handleSearchChange;
+  /**
+   * Handle mg-pagination current page change event
+   * @param event - pagination current page change event
+   */
+  private handleCurrentPageChange;
+  private handleMgPopoverDisplayChange;
   /**
    * get invalid element
    * @returns element
@@ -146,6 +187,29 @@ export declare class MgInputCheckbox {
    * @returns MgPopover identifier
    */
   private getMgPopoverIdentifier;
+  /**
+   * Manage items to display depending on the search state
+   * @returns items to display
+   */
+  private getDisplayItems;
+  /**
+   * Method to get a array range
+   * @param from - array start index
+   * @param to - array end index
+   * @returns array's range
+   */
+  private getArrayRange;
+  /**
+   * Get from and to index
+   * @returns [from,to] index
+   */
+  private getFromToIndexes;
+  /**
+   * Method to get pagination total-page
+   * @param checkboxes - checkboxes to paginate
+   * @returns total page number for pagination
+   */
+  private getPaginationTotalPages;
   /*************
    * Lifecycle *
    *************/
@@ -154,6 +218,18 @@ export declare class MgInputCheckbox {
    * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render checkbox multi display values
+   * @param selectedValuesNb - selected values length
+   * @returns display selected values
+   */
+  private renderCheckboxMultiDisplaySelectedValues;
+  /**
+   * Render paginated checkboxes
+   * @param checkboxes - checkboxes to render
+   * @returns paginated checkboxes
+   */
+  private renderPaginatedCheckboxes;
   /**
    * render checkbox multi element
    * @returns html element
@@ -161,6 +237,7 @@ export declare class MgInputCheckbox {
   private renderCheckboxMulti;
   /**
    * Render checkbox element
+   * @param checkboxes - checkboxes to render
    * @returns HTML Element
    */
   private renderCheckboxes;

package/dist/types/components/molecules/mg-popover/mg-popover.d.ts

@@ -6,7 +6,7 @@ export declare class MgPopover {
    * Internal *
    ************/
   private popper;
-  private popover;
+  private mgPopover;
   private closeButtonId;
   private windows;
   private resizeObserver;

package/dist/types/components.d.ts

@@ -217,6 +217,10 @@ export namespace Components {
           * Public method to display errors
          */
         "displayError": () => Promise<void>;
+        /**
+          * Display selected values list in "multi" type
+         */
+        "displaySelectedValues": boolean;
         /**
           * Add a help text under the input, usually expected data format and example
          */
@@ -1635,6 +1639,10 @@ declare namespace LocalJSX {
           * Define if input is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Display selected values list in "multi" type
+         */
+        "displaySelectedValues"?: boolean;
         /**
           * Add a help text under the input, usually expected data format and example
          */

package/dist/types/locales/index.d.ts

@@ -25,6 +25,11 @@ declare const messages: {
         editButton: string;
         selectButton: string;
         showButton: string;
+        label: string;
+        result: string;
+        results: string;
+        searchResults: string;
+        noResult: string;
       };
     };
     form: {
@@ -94,6 +99,11 @@ declare const messages: {
         editButton: string;
         selectButton: string;
         showButton: string;
+        label: string;
+        result: string;
+        results: string;
+        searchResults: string;
+        noResult: string;
       };
     };
     form: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,7 +25,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^2.22.1",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "@mgdis/img": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -53,9 +54,9 @@
     "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^15.0.0",
+    "jest-transform-stub": "^2.0.0",
     "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "playwright-config": "^1.0.0",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "sass": "^1.58.0",
@@ -63,9 +64,10 @@
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "@mgdis/linting-stencil": "1.0.0",
+    "playwright-config": "1.0.0",
+    "tsconfig": "1.0.0",
     "eslint-config-stencil": "1.0.0",
-    "tsconfig": "1.0.0"
+    "@mgdis/linting-stencil": "1.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {