@mgdis/mg-components 5.12.1 → 5.13.0

package/dist/mg-components/{p-67ba5d05.entry.js → p-d37b29bb.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-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}
+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-622e2323.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/variables.css

@@ -74,9 +74,13 @@
   --color-dark-s: 37.3%;
   --color-dark-l: 13.1%;
   --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
-
+  
+  /* dark-40 */
+  --mg-color-dark-40-hsl: var(--color-dark-h), 7%, 43%;
   /* dark-5 */
-  --mg-color-dark-5-hsl: hsl(var(--color-dark-h), 9%, 96%);
+  --mg-color-dark-5-hsl: var(--color-dark-h), 9%, 96%;
+  /* dark-soft */
+  --mg-color-dark-soft-hsl: var(--color-dark-h), var(--color-dark-s), 90%;
 
   /* Light */
   /* white; (#ffffff) */
@@ -262,6 +266,7 @@
   --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-tabs-border-bottom: solid 0.1rem hsl(var(--mg-color-dark-soft-hsl));
 
   /*
     <mg-details>

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

@@ -0,0 +1,8 @@
+import { FunctionalComponent } from '../../../../stencil-public-runtime';
+import { MgInputCheckboxListProps } from './mg-input-checkbox.conf';
+/**
+ * Get checkboxes list template
+ * @param props - MgInputCheckboxList Interface Props
+ * @returns input template
+ */
+export declare const MgInputCheckboxList: FunctionalComponent<MgInputCheckboxListProps>;

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

@@ -0,0 +1,103 @@
+import { EventEmitter } from '../../../../../stencil-public-runtime';
+import { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';
+/**
+ * Internal component use to manage sections instances
+ */
+export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
+  /*************
+   * Constantes *
+   *************/
+  private readonly offset;
+  /*************
+   * Decorators *
+   *************/
+  /**
+   * Define if mg-input-checkbox-list is readonly
+   */
+  readonly: boolean;
+  /**
+   * Define if mg-input-checkbox-list is disabled
+   */
+  disabled: boolean;
+  /**
+   * Define mg-input-checkbox input name
+   */
+  name: string;
+  /**
+   * Define checkboxes to paginate
+   */
+  checkboxes: CheckboxItem[];
+  validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void;
+  /**
+   * Define section kind
+   */
+  sectionKind: SectionKind;
+  validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void;
+  /**
+   * Define component message
+   */
+  messages: Record<string, string>;
+  /**
+   * Emit 'mass-action' event
+   * used to informe that select-all/unselect-all button listner is triggered
+   */
+  massAction: EventEmitter<MgInputCheckboxPaginated['sectionKind']>;
+  /**
+   * Define section title
+   */
+  titleKind: SectionTitleKind;
+  /**
+   * Current page
+   */
+  currentPage: number;
+  /**
+   * Is checked items values expanded
+   */
+  itemsExpanded: boolean;
+  /***********
+   * Methods *
+   ***********/
+  /**
+   * Mass action handler
+   */
+  private massActionHandler;
+  /**
+   * Toogle items button handler
+   */
+  private handleToggleClick;
+  /**
+   * 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 page count from items
+   * @param items - items to count
+   * @returns page count from items
+   */
+  private getPageCount;
+  /**
+   * Handle mg-pagination current page change event
+   * @param event - pagination current page change event
+   */
+  private handleCurrentPageChange;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   * @returns HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -1,22 +1,27 @@
 /**
- * type CheckboxItem
- * use to match checkbox attributes
+ * interface CheckboxValue
+ * use to match returned value
  */
-export type CheckboxItem = {
-  id: string;
+export interface CheckboxValue {
   title: string;
   value: boolean | null;
   disabled?: boolean;
-};
+  required?: boolean;
+}
 /**
- * type CheckboxValue
- * use to match returned value
+ * interface CheckboxItem
+ * use to match checkbox attributes
  */
-export type CheckboxValue = {
-  title: string;
-  value: boolean | null;
-  disabled?: boolean;
-};
+export interface CheckboxItem extends CheckboxValue {
+  id: string;
+  handleInput: (event: InputEvent & {
+    target: HTMLInputElement;
+  }) => void;
+  handleBlur: () => void;
+  handleKeydown: (event: KeyboardEvent & {
+    target: HTMLElement;
+  }) => void;
+}
 /**
  * List of all availables checkbox type
  */
@@ -29,3 +34,36 @@ export type CheckboxType = (typeof checkboxTypes)[number];
  * Search value type
  */
 export type SearchValueType = string;
+/**
+ * mg-input-checkbox-paginated section kind
+ */
+export declare enum SectionKind {
+  SELECTED = "selected",
+  NOT_SELECTED = "not-selected"
+}
+/**
+ * mg-input-checkbox-paginated section title kind
+ */
+export declare enum SectionTitleKind {
+  BUTTON = "button",
+  TEXT = "text"
+}
+/**
+ * Base mg-input-checkbox interface
+ */
+export interface IMgInputCheckboxBase {
+  readonly: boolean;
+  disabled: boolean;
+  name: string;
+}
+/**
+ * mg-input-checkbox-list interface
+ */
+export interface MgInputCheckboxListProps extends IMgInputCheckboxBase {
+  inputVerticalList: boolean;
+  type: CheckboxType;
+  displaySearchInput: boolean;
+  messages: Record<string, unknown>;
+  checkboxes: CheckboxItem[];
+  id: string;
+}

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

@@ -1,18 +1,17 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxType, CheckboxValue, SearchValueType } from './mg-input-checkbox.conf';
-export declare class MgInputCheckbox {
+import { CheckboxItem, CheckboxType, CheckboxValue, SearchValueType, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
+export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
   /************
    * Internal *
    ************/
-  private inputs;
   private mgPopover;
+  private searchInput;
   private messages;
   private hasDisplayedError;
-  private baseClassName;
-  private multiStart;
-  private searchStart;
-  private searchOffset;
+  private readonly baseClassName;
+  private readonly multiStart;
+  private readonly searchStart;
   /**************
    * Decorators *
    **************/
@@ -23,7 +22,6 @@ export declare class MgInputCheckbox {
   /**
    * Component value
    * If item.value is `null`, checkbox will be indeterminate by default
-   * Required
    */
   value: CheckboxValue[];
   validateValue(newValue: MgInputCheckbox['value']): void;
@@ -37,12 +35,12 @@ export declare class MgInputCheckbox {
    */
   identifier: string;
   /**
-   * Input name
+   * Define input name
    * If not set the value equals the identifier
    */
   name: string;
   /**
-   * Input label
+   * Define input label
    */
   label: string;
   /**
@@ -58,11 +56,11 @@ export declare class MgInputCheckbox {
    */
   inputVerticalList: boolean;
   /**
-   * Define if input is required
+   * Define if mg-input-checkbox is required
    */
   required: boolean;
   /**
-   * Define if input is readonly
+   * Define if mg-input-checkbox is readonly
    */
   readonly: boolean;
   /**
@@ -101,7 +99,7 @@ export declare class MgInputCheckbox {
    */
   errorMessage: string;
   /**
-   * Formated value for display
+   * Formated value to display in list
    */
   checkboxItems: CheckboxItem[];
   validateCheckboxItems(newValue: MgInputCheckbox['checkboxItems']): void;
@@ -110,14 +108,10 @@ export declare class MgInputCheckbox {
    */
   displaySearchInput: boolean;
   /**
-   * Search current page
-   */
-  currentSearchPage: number;
-  /**
-   * Search value
+   * Search value query
    */
   searchValue: SearchValueType;
-  validateSearchValue(newValue: MgInputCheckbox['searchValue']): void;
+  validateSearchValue(): void;
   /**
    * Search current page
    */
@@ -144,10 +138,6 @@ export declare class MgInputCheckbox {
    * @param event - to trak "tab" key
    */
   private handleKeydown;
-  /**
-   * Reset current-search-page prop
-   */
-  private setCurrentSearchPage;
   /**
    * Handle blur event
    */
@@ -158,16 +148,40 @@ export declare class MgInputCheckbox {
    */
   private handleSearchChange;
   /**
-   * Handle mg-pagination current page change event
-   * @param event - pagination current page change event
+   * popover display-change handler
+   * @param event - mg-popover display-change custom event
    */
-  private handleCurrentPageChange;
   private handleMgPopoverDisplayChange;
+  /**
+   * Handle select all button
+   * @param event - mass action event trigger a global select/unselect on values
+   */
+  private handleMassAction;
+  /**
+   * Update values
+   */
+  private updateValues;
+  /**
+   * Update ckecboxes item
+   * @param key - property to update
+   * @param newValue - value to update with
+   * @param condition - condtion to applu change on item
+   */
+  private updateCheckboxItems;
   /**
    * get invalid element
    * @returns element
    */
   private getInvalidElement;
+  /**
+   * Method to update searchResults
+   */
+  private updateSearchResults;
+  /**
+   * Methode to validate if one of inputs value is checked id required
+   * @returns truthy if condition is valid
+   */
+  private validateRequired;
   /**
    * Check if input is valid
    */
@@ -180,6 +194,7 @@ export declare class MgInputCheckbox {
   private renderButtonText;
   /**
    * Set input error message
+   * @param displayError - dispay error condition
    */
   private setErrorMessage;
   /**
@@ -192,24 +207,6 @@ export declare class MgInputCheckbox {
    * @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 *
    *************/
@@ -218,6 +215,10 @@ export declare class MgInputCheckbox {
    * @returns timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * add listeners
+   */
+  componentDidLoad(): void;
   /**
    * Render checkbox multi display values
    * @param selectedValuesNb - selected values length
@@ -225,22 +226,16 @@ export declare class MgInputCheckbox {
    */
   private renderCheckboxMultiDisplaySelectedValues;
   /**
-   * Render paginated checkboxes
+   * Render checkboxes by section
    * @param checkboxes - checkboxes to render
-   * @returns paginated checkboxes
+   * @returns render sections of checkboxes
    */
-  private renderPaginatedCheckboxes;
+  private renderCheckboxBySection;
   /**
    * render checkbox multi element
    * @returns html element
    */
   private renderCheckboxMulti;
-  /**
-   * Render checkbox element
-   * @param checkboxes - checkboxes to render
-   * @returns HTML Element
-   */
-  private renderCheckboxes;
   /**
    * Render
    * @returns HTML Element

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

@@ -22,7 +22,6 @@ export declare class MgInputRadio {
   handleValue(newValue: any): void;
   /**
    * Items are the possible options to select
-   * Required
    */
   items: string[] | RadioOption[];
   validateItems(newValue: string[] | RadioOption[]): void;

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

@@ -24,7 +24,6 @@ export declare class MgModal {
   identifier: string;
   /**
    * Displayed modal title
-   * required
    */
   modalTitle: string;
   validateModalTitle(newValue: string): void;

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

@@ -25,6 +25,10 @@ export declare class MgPagination {
    * Hide navigation label
    */
   hideNavigationLabels: boolean;
+  /**
+   * Hide select input
+   */
+  hidePageCount: boolean;
   /**
    * Component total pages
    */

package/dist/types/components/molecules/mg-panel/mg-panel.conf.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Available expand toggle display options
+ */
+export declare const expandToggleDisplays: readonly ["text", "icon"];
+/**
+ * Generated expand toggle display type from available expand toggle display options
+ */
+export type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];
+/**
+ * Available title positions
+ */
+export declare const titlePositions: readonly ["left", "right"];
+/**
+ * Generated title positions type from available title positions
+ */
+export type TitlePositionType = (typeof titlePositions)[number];

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
+import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
 export declare class MgPanel {
   /************
    * Internal *
@@ -32,19 +33,29 @@ export declare class MgPanel {
    * Panel title pattern error message
    */
   titlePatternErrorMessage: string;
+  /**
+   * Define if panel title is editable
+   */
+  titleEditable: boolean;
+  /**
+   * Define title position
+   */
+  titlePosition: TitlePositionType;
+  validateTitlePosition(newValue: MgPanel['titlePosition']): void;
   /**
    * Panel is opened
    */
   expanded: boolean;
   handleExpanded(newValue: boolean): void;
   /**
-   * Disable possibility to toggle expand
+   * Define expand toggle button display
    */
-  expandToggleDisabled: boolean;
+  expandToggleDisplay: ExpandToggleDisplayType;
+  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']): void;
   /**
-   * Panel title is editabled
+   * Disable possibility to toggle expand
    */
-  titleEditable: boolean;
+  expandToggleDisabled: boolean;
   /**
    * Component classes
    */
@@ -103,18 +114,41 @@ export declare class MgPanel {
    * Check if props are well configured on init
    */
   componentWillLoad(): void;
-  /**
-   * Header left conditional render
-   * @returns header left element
-   */
-  private headerLeft;
   /**
    * Edit DOM after render
    */
   componentDidRender(): void;
+  /*************
+   * Render *
+   *************/
+  /**
+   * Render collapse button
+   * @returns collpase button
+   */
+  private renderCollapseButton;
+  /**
+   * Render edit button
+   * @returns edit Button
+   */
+  private renderEditButton;
+  /**
+   * Render input button
+   * @returns edit title input
+   */
+  private renderEditInput;
+  /**
+   * Render title
+   * @returns title element
+   */
+  private renderTitle;
+  /**
+   * Render header children
+   * @returns header child
+   */
+  private renderHeaderChildren;
   /**
    * Render component
-   * @returns html element
+   * @returns rendered component
    */
   render(): HTMLElement;
 }

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

@@ -34,7 +34,6 @@ export declare class MgTabs {
   validateSize(newValue: MgTabs['size']): void;
   /**
    * Tabs items
-   * Required
    */
   items: string[] | TabItem[];
   validateItems(newValue: MgTabs['items']): void;