@mgdis/mg-components 5.18.0 → 5.19.0

package/dist/mg-components/variables.css

@@ -1,275 +1 @@
-:root {
-  /*
-    Fonts
-  */
-
-  --font-size: 1.3rem;
-  --line-height: 1.4;
-
-  /* Open Sans is used for the body (mostly all texts) */
-  --font-family: 'Open Sans', sans-serif;
-
-  /* Headings (h1 to h6) font can be customized */
-  --font-family-heading: var(--font-family);
-
-  /* Font colors */
-  --color-font-light: var(--color-light);
-  --color-font-dark: var(--color-dark);
-  /*
-    Colors
-    https://jira.mgdis.fr/browse/PDA9-690
-   */
-
-  /* App */
-  /* default color-info */
-  --mg-color-app-h: var(--color-info-h);
-  --mg-color-app-s: var(--color-info-s);
-  --mg-color-app-l: var(--color-info-l);
-  --mg-color-app-hsl: var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l);
-
-  /* Neutral */
-  /* #fefefe; */
-  /* rgb(254, 254, 254); */
-  --color-neutral-h: 0;
-  --color-neutral-s: 0%;
-  --color-neutral-l: 99.6%;
-  --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
-
-  /* Warning */
-  /* #ffc33e */
-  /* rgb(255, 195, 62); */
-  --color-warning-h: 41;
-  --color-warning-s: 100%;
-  --color-warning-l: 62.2%;
-  --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
-
-  /* Success */
-  /* #32d59c */
-  /* rgb(50, 213, 156); */
-  --color-success-h: 159;
-  --color-success-s: 66%;
-  --color-success-l: 51.6%;
-  --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
-
-  /* Info */
-  /* #005e9c; */
-  /* rgb(0, 94, 156); */
-  --color-info-h: 204;
-  --color-info-s: 100%;
-  --color-info-l: 30.6%;
-  --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
-
-  /* Danger */
-  /* #db1f29; */
-  /* rgb(219, 31, 41); */
-  --color-danger-h: 357;
-  --color-danger-s: 75%;
-  --color-danger-l: 49%;
-  --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
-
-  /* Dark */
-  /* #15282e; */
-  /* rgb(21, 40, 46); */
-  --color-dark-h: 194;
-  --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: 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) */
-  /* rgb(255, 255, 255); */
-  --color-light-h: 0;
-  --color-light-s: 0%;
-  --color-light-l: 100%;
-  --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
-
-  /* Primary */
-  --color-primary-h: var(--color-dark-h);
-  --color-primary-s: var(--color-dark-s);
-  --color-primary-l: var(--color-dark-l);
-  --color-primary: hsl(var(--color-dark));
-
-  /* Secondary */
-  --color-secondary-h: var(--color-neutral-h);
-  --color-secondary-s: var(--color-neutral-s);
-  --color-secondary-l: var(--color-neutral-l);
-  --color-secondary: hsl(var(--color-neutral));
-
-  /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
-
-  /* Soft style */
-  --mg-color-soft-l: 90%;
-
-  /*
-    Global
-   */
-  --default-size: 3.5rem;
-  --mg-disabled-opacity: 0.4;
-
-  /*
-    <mg-icon>
-   */
-  --mg-icon-small-size: 1.2rem;
-  --mg-icon-regular-size: 1.6rem;
-  --mg-icon-medium-size: 2rem;
-  --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.2rem;
-  --mg-icon-border-radius: 50%;
-
-  /*
-    <mg-button>
-   */
-
-  --mg-button-border-radius: 0.3rem;
-  --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: var(--mg-disabled-opacity);
-  --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
-  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
-
-  /* Primary */
-  --mg-button-primary-color-h: var(--color-dark-h);
-  --mg-button-primary-color-s: var(--color-dark-s);
-  --mg-button-primary-color-l: var(--color-dark-l);
-  --mg-button-primary-font-color: var(--color-neutral);
-
-  /* Secondary */
-  --mg-button-secondary-color-h: var(--color-neutral-h);
-  --mg-button-secondary-color-s: var(--color-neutral-s);
-  --mg-button-secondary-color-l: var(--color-neutral-l);
-  --mg-button-secondary-font-color: var(--color-dark);
-
-  /*
-    <mg-tag>
-   */
-  --mg-tag-height: 2.3rem;
-  --mg-tag-border-radius: 0.5rem;
-  --mg-tag-font-size: 1.2rem;
-
-  /*
-  <mg-badge>
-  */
-  --mg-badge-size: 1.6rem;
-  --mg-badge-font-size: 1.1rem;
-
-  /*
-    <mg-tooltip>
-   */
-  --mg-tooltip-border-radius: 0.5rem;
-  --mg-tooltip-background-color: var(--color-dark);
-  --mg-tooltip-font-color: var(--color-font-light);
-
-  /*
-    <mg-popover>
-   */
-  --mg-popover-background-color: var(--color-light);
-  --mg-popover-font-color: var(--color-font-dark);
-  --mg-popover-title-font-size: 1.4rem;
-  --mg-popover-max-width: 40rem;
-
-  /*
-    <mg-message>
-   */
-  --mg-message-border-radius: 0.3rem;
-
-  /*
-    <mg-modal>
-   */
-  --mg-modal-border-radius: 0.5rem;
-  --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.2rem;
-
-  /*
-    <mg-panel>
-   */
-  --mg-panel-border-radius: 0.5rem;
-  --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
-  --mg-panel-box-shadow: var(--box-shadow);
-  --mg-panel-content-padding: 1.5rem;
-
-  /*
-    <mg-illustrated-message>
-   */
-
-  --mg-illustrated-message-padding-vertical: 4rem;
-
-  /*
-    <mg-card>
-   */
-  --mg-card-padding-default: 1.6rem;
-  --mg-card-border-radius-default: 0.5rem;
-  --mg-card-background-default: hsl(var(--color-light));
-  --mg-card-border-default: 0.1rem solid hsl(var(--color-dark), 0.05);
-  --mg-card-box-shadow-default: var(--box-shadow);
-
-  /*
-    <mg-divider>
-  */
-  --mg-divider-background-color: hsl(var(--color-dark), 0.15);
-  --mg-divider-thickness: 0.1rem;
-  --mg-divider-vertical-spacing: 4rem;
-
-  /*
-    Layout
-   */
-  --mg-grid-spacing: 1rem;
-
-  /*
-    Forms
-   */
-
-  /*
-    <mg-input-...>
-   */
-  --mg-inputs-border-width: 0.1rem;
-  --mg-inputs-border-radius: 0.3rem;
-  --mg-inputs-color: #b5c2c9;
-  --mg-inputs-spacer: 1rem;
-
-  /* Error message background */
-  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
-
-  /* Input focus shadow */
-  /* #b5c2c9 */
-  /* rgb(0, 221, 255); */
-  /* hsl(188, 100%, 50%); */
-  --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
-
-  /*
-    <mg-input-toggle>
-  */
-  --mg-input-toggle-border-radius-ratio: 2;
-
-  /*
-    <mg-input-checkbox>
-    <mg-input-radio>
-   */
-  --mg-input-check-size: 1.3rem;
-
-  /*
-    <mg-menu-item>
-   */
-  --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
-  --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
-  --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
-
-  /*
-  <mg-tabs>
-  */
-  --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>
-   */
-  --mg-details-spacing: 1.5rem;
-}
+:root{--font-size: 1.3rem;--line-height: 1.4;--font-family: "Open Sans", sans-serif;--font-family-heading: var(--font-family);--color-font-light: var(--color-light);--color-font-dark: var(--color-dark);--mg-color-app-h: var(--color-info-h);--mg-color-app-s: var(--color-info-s);--mg-color-app-l: var(--color-info-l);--mg-color-app-hsl: var(--mg-color-app-h) var(--mg-color-app-s) var(--mg-color-app-l);--color-neutral-h: 0;--color-neutral-s: 0%;--color-neutral-l: 99.6%;--color-neutral: var(--color-neutral-h) var(--color-neutral-s) var(--color-neutral-l);--color-warning-h: 41;--color-warning-s: 100%;--color-warning-l: 62.2%;--color-warning: var(--color-warning-h) var(--color-warning-s) var(--color-warning-l);--color-success-h: 159;--color-success-s: 66%;--color-success-l: 51.6%;--color-success: var(--color-success-h) var(--color-success-s) var(--color-success-l);--color-info-h: 204;--color-info-s: 100%;--color-info-l: 30.6%;--color-info: var(--color-info-h) var(--color-info-s) var(--color-info-l);--color-danger-h: 357;--color-danger-s: 75%;--color-danger-l: 49%;--color-danger: var(--color-danger-h) var(--color-danger-s) var(--color-danger-l);--color-dark-h: 194;--color-dark-s: 37.3%;--color-dark-l: 13.1%;--color-dark: var(--color-dark-h) var(--color-dark-s) var(--color-dark-l);--mg-color-dark-40-hsl: var(--color-dark-h) 7% 43%;--mg-color-dark-5-hsl: var(--color-dark-h) 9% 96%;--mg-color-dark-soft-hsl: var(--color-dark-h) var(--color-dark-s) 90%;--color-light-h: 0;--color-light-s: 0%;--color-light-l: 100%;--color-light: var(--color-light-h) var(--color-light-s) var(--color-light-l);--color-primary-h: var(--color-dark-h);--color-primary-s: var(--color-dark-s);--color-primary-l: var(--color-dark-l);--color-primary: hsl(var(--color-dark));--color-secondary-h: var(--color-neutral-h);--color-secondary-s: var(--color-neutral-s);--color-secondary-l: var(--color-neutral-l);--color-secondary: hsl(var(--color-neutral));--box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark) / 15%);--mg-color-soft-l: 90%;--default-size: 3.5rem;--mg-disabled-opacity: 0.4;--mg-icon-small-size: 1.2rem;--mg-icon-regular-size: 1.6rem;--mg-icon-medium-size: 2rem;--mg-icon-large-size: 2.4rem;--mg-icon-extra-large-size: 3.2rem;--mg-icon-border-radius: 50%;--mg-button-border-radius: 0.3rem;--mg-button-icon-border-radius: var(--default-size);--mg-button-disabled-opacity: var(--mg-disabled-opacity);--mg-button-gradient: 1;--mg-button-border-variation: 1;--mg-button-primary-color-h: var(--color-dark-h);--mg-button-primary-color-s: var(--color-dark-s);--mg-button-primary-color-l: var(--color-dark-l);--mg-button-primary-font-color: var(--color-neutral);--mg-button-secondary-color-h: var(--color-neutral-h);--mg-button-secondary-color-s: var(--color-neutral-s);--mg-button-secondary-color-l: var(--color-neutral-l);--mg-button-secondary-font-color: var(--color-dark);--mg-tag-height: 2.3rem;--mg-tag-border-radius: 0.5rem;--mg-tag-font-size: 1.2rem;--mg-badge-size: 1.6rem;--mg-badge-font-size: 1.1rem;--mg-tooltip-border-radius: 0.5rem;--mg-tooltip-background-color: var(--color-dark);--mg-tooltip-font-color: var(--color-font-light);--mg-popover-background-color: var(--color-light);--mg-popover-font-color: var(--color-font-dark);--mg-popover-title-font-size: 1.4rem;--mg-popover-max-width: 40rem;--mg-message-border-radius: 0.3rem;--mg-modal-border-radius: 0.5rem;--mg-modal-title-font-size: 1.8rem;--mg-modal-content-font-size: 1.2rem;--mg-panel-border-radius: 0.5rem;--mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);--mg-panel-box-shadow: var(--box-shadow);--mg-panel-content-padding: 1.5rem;--mg-illustrated-message-padding-vertical: 4rem;--mg-card-padding-default: 1.6rem;--mg-card-border-radius-default: 0.5rem;--mg-card-background-default: hsl(var(--color-light));--mg-card-border-default: 0.1rem solid hsl(var(--color-dark) / 5%);--mg-card-box-shadow-default: var(--box-shadow);--mg-divider-background-color: hsl(var(--color-dark) / 15%);--mg-divider-thickness: 0.1rem;--mg-divider-vertical-spacing: 4rem;--mg-grid-spacing: 1rem;--mg-inputs-border-width: 0.1rem;--mg-inputs-border-radius: 0.3rem;--mg-inputs-color: #b5c2c9;--mg-inputs-spacer: 1rem;--mg-inputs-error-bg-color: var(--color-danger-h) calc(var(--color-danger-s) + 5%) calc(var(--color-danger-l) + 49%);--mg-inputs-color-shadow-focus-hsl: 188 100% 50%;--mg-input-toggle-border-radius-ratio: 2;--mg-input-check-size: 1.3rem;--mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);--mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);--mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);--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-spacing: 1.5rem}/*# sourceMappingURL=variables.css.map */

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

@@ -5,7 +5,7 @@ export declare class MgCard {
    * Private *
    *************/
   private readonly name;
-  private readonly baseClass;
+  private readonly classBase;
   /*************
    * Decorators *
    *************/

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -3,7 +3,7 @@ export declare class MgInputTitle {
    * Label input id
    */
   identifier: string;
-  validateIdentifier(newValue: string): void;
+  validateIdentifier(newValue: MgInputTitle['identifier']): void;
   /**
    * If input is required an asterisk is added at the end of the label
    */

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

@@ -26,7 +26,7 @@ export declare class MgTooltip {
    * Displayed message in the tooltip
    */
   message: string;
-  validateMessage(newValue: string): void;
+  validateMessage(newValue: MgTooltip['message']): void;
   /**
    * Tooltip placement
    */
@@ -35,7 +35,7 @@ export declare class MgTooltip {
    * Display tooltip
    */
   display: boolean;
-  handleDisplay(newValue: boolean): void;
+  handleDisplay(newValue: MgTooltip['display']): void;
   /**
    * Disable tooltip
    */

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

@@ -62,7 +62,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
    */
   private massActionHandler;
   /**
-   * Toogle items button handler
+   * Toggle items button handler
    */
   private handleToggleClick;
   /**

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

@@ -13,12 +13,12 @@ export interface CheckboxValue {
  * use to match checkbox attributes
  */
 export interface CheckboxItem extends CheckboxValue {
-  id: string;
-  handleInput: (event: InputEvent & {
+  _id: string;
+  _handleInput: (event: InputEvent & {
     target: HTMLInputElement;
   }) => void;
-  handleBlur: () => void;
-  handleKeydown: (event: KeyboardEvent & {
+  _handleBlur: () => void;
+  _handleKeydown: (event: KeyboardEvent & {
     target: HTMLElement;
   }) => void;
 }

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

@@ -0,0 +1,12 @@
+/**
+ * List of all availables text type
+ */
+export declare const textTypes: readonly ["text", "search"];
+/**
+ * TextType from text types
+ */
+export type TextType = (typeof textTypes)[number];
+/**
+ * Type for datalist option
+ */
+export type DatalistOption = string;

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
+import { DatalistOption, TextType } from './mg-input-text.conf';
 export declare class MgInputText {
   /************
    * Internal *
@@ -9,6 +10,7 @@ export declare class MgInputText {
   private classIsInputGroupAppend;
   private classHasIcon;
   private characterLeftId;
+  private datalistId;
   private input;
   private messages;
   private hasDisplayedError;
@@ -40,7 +42,7 @@ export declare class MgInputText {
   /**
    * Input type
    */
-  type: 'text' | 'search';
+  type: TextType;
   /**
    * Input icon
    */
@@ -59,6 +61,11 @@ export declare class MgInputText {
    * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
    */
   placeholder: string;
+  /**
+   * Define datalist options
+   */
+  datalistoptions: DatalistOption[];
+  validateDatalistoptions(newValue: MgInputText['datalistoptions']): void;
   /**
    * Input max length
    */
@@ -172,6 +179,11 @@ export declare class MgInputText {
    * Validate append slot
    */
   private validateAppendSlot;
+  /**
+   * Methode to control datalist display condition
+   * @returns true if display condition success
+   */
+  private hasDatalist;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/inputs/mg-input-text/test/mg-input-text.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts

@@ -4,6 +4,7 @@ export declare class MgActionMore {
    * Internal *
    ************/
   private readonly name;
+  private readonly classBase;
   private readonly mgPopoverIdentifier;
   private messages;
   /**************
@@ -41,7 +42,7 @@ export declare class MgActionMore {
    * Methods *
    ***********/
   /**
-   * Toogle expanded props
+   * Toggle expanded props
    */
   private toggleExpanded;
   /**

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

@@ -23,7 +23,7 @@ export declare class MgPanel {
    * Panel title
    */
   panelTitle: string;
-  validatePanelTitle(newValue: string): void;
+  validatePanelTitle(newValue: MgPanel['panelTitle']): void;
   /**
    * Panel title pattern
    */
@@ -46,7 +46,7 @@ export declare class MgPanel {
    * Panel is opened
    */
   expanded: boolean;
-  handleExpanded(newValue: boolean): void;
+  handleExpanded(newValue: MgPanel['expanded']): void;
   /**
    * Define expand toggle button display
    */

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

@@ -34,7 +34,7 @@ export declare class MgPopover {
    * Define if popover has a cross button
    */
   closeButton: boolean;
-  validateCloseButton(newValue: MgPopover['arrowHide']): void;
+  validateCloseButton(newValue: MgPopover['closeButton']): void;
   /**
    * Display popover
    */

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

@@ -0,0 +1 @@
+export {};

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

@@ -54,6 +54,12 @@ export declare class MgTabs {
    * Emited event when active tab change
    */
   activeTabChange: EventEmitter<number>;
+  /**
+   * Validate that new tab status can be `Status.ACTIVE`
+   * @param tab - tab item
+   * @returns true when tab match condition to get a `Status.ACTIVE`
+   */
+  private isActivableTab;
   /**
    * Method to know if given tab has the given status
    * @param tab - item tab key to set to ACTIVE status
@@ -74,11 +80,6 @@ export declare class MgTabs {
    * @returns index
    */
   private getTabItemIndex;
-  /**
-   * Method to get the active-tab value
-   * @returns of the active-tab
-   */
-  private getActiveTab;
   /**
    * Handle click events on tabs
    * @param event - mouse event

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
+import { DatalistOption, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -34,6 +35,7 @@ export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 export { Width } from "./components/molecules/inputs/MgInput.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
+export { DatalistOption, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 export { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 export { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -732,6 +734,10 @@ export namespace Components {
         "value": any;
     }
     interface MgInputText {
+        /**
+          * Define datalist options
+         */
+        "datalistoptions": DatalistOption[];
         /**
           * Define if input is disabled
          */
@@ -821,7 +827,7 @@ export namespace Components {
         /**
           * Input type
          */
-        "type": 'text' | 'search';
+        "type": TextType;
         /**
           * Define input valid state
          */
@@ -2287,6 +2293,10 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface MgInputText {
+        /**
+          * Define datalist options
+         */
+        "datalistoptions"?: DatalistOption[];
         /**
           * Define if input is disabled
          */
@@ -2370,7 +2380,7 @@ declare namespace LocalJSX {
         /**
           * Input type
          */
-        "type"?: 'text' | 'search';
+        "type"?: TextType;
         /**
           * Define input valid state
          */

package/dist/types/utils/components.utils.d.ts

@@ -73,3 +73,9 @@ export declare const getParentWindows: (localWindow: Window, windows?: Window[])
  * @returns if string is valid
  */
 export declare const isValidString: (value: unknown) => boolean;
+/**
+ * Clean string caraters
+ * @param text - text to cliean
+ * @returns cleanded string
+ */
+export declare const cleanString: (text: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.18.0",
+  "version": "5.19.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^4.3.0",
-    "normalize.css": "^8.0.1",
-    "@mgdis/img": "1.3.0"
+    "@mgdis/img": "1.3.0",
+    "@mgdis/styles": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -35,9 +35,8 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@playwright/test": "^1.x",
+    "@playwright/test": "1.39.0",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-    "@stencil/sass": "^1.5.2",
     "@storybook/addon-a11y": "^7.2.0",
     "@storybook/addon-actions": "^7.2.0",
     "@storybook/addon-essentials": "^7.2.0",
@@ -48,21 +47,20 @@
     "@storybook/html-webpack5": "^7.2.0",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "npm:@types/jest@^26",
-    "@types/jest-image-snapshot": "^4.3.2",
+    "@types/jest-image-snapshot": "^6.0.0",
     "@types/node": "^18.15.10",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.0.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.15.0",
-    "css-loader": "^5.2.7",
+    "chromatic": "^7.0.0",
+    "css-loader": "^6.0.0",
     "eslint": "^8.x",
     "eslint-plugin-storybook": "^0.6.13",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
-    "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^15.0.0",
+    "jest-image-snapshot": "^6.0.0",
+    "jest-junit": "^16.0.0",
     "jest-transform-stub": "^2.0.0",
     "jsx-dom": "^8.0.4",
-    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "react": "^18.2.0",
@@ -73,9 +71,9 @@
     "storybook": "^7.2.0",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "@mgdis/linting-stencil": "1.1.0",
+    "typescript": "^5.0.0",
     "eslint-config-stencil": "1.1.1",
+    "@mgdis/linting-stencil": "1.1.0",
     "playwright-config": "1.0.0",
     "tsconfig": "1.0.0"
   },
@@ -84,16 +82,17 @@
     "prebuild": "node ./bin/build-icons",
     "build": "pnpm prebuild && stencil build --docs",
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
-    "lint": "run-s lint:es lint:prettier",
-    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
+    "lint": "pnpm lint:es && pnpm lint:prettier",
+    "lint:fix": "pnpm lint:es:fix && pnpm lint:prettier:fix",
     "lint:es": "eslint src/**/*.{ts,tsx}",
     "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
-    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
+    "lint:prettier": "prettier --check **/*.{ts,tsx,html,mdx,json}",
+    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,html,mdx,json}",
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "pnpm prebuild && stencil test --e2e --collectCoverage --collectCoverageFrom=\"src/**/*.e2e.ts\" --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e:playwright": "pnpm --package=@pnpm/@playwright/test dlx playwright test",
+    "test:e2e:playwright:docker": "pnpm dlx @playwright/test test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "storybook dev -p 6006",