@mgdis/mg-components 5.29.0 → 6.1.0

package/dist/types/assets/icons/index.d.ts

@@ -1,5 +1,6 @@
 export declare const icons: {
     'address-card': string;
+    'address-card-outline': string;
     'align-center': string;
     'align-justify': string;
     'align-left': string;
@@ -33,6 +34,7 @@ export declare const icons: {
     'briefcase-outline': string;
     'building-outline': string;
     calculator: string;
+    'calculator-outline': string;
     calendar: string;
     'calendar-euro': string;
     'calendar-euro-outline': string;
@@ -82,7 +84,9 @@ export declare const icons: {
     'exclamation-triangle': string;
     'exclamation-triangle-outline': string;
     eye: string;
+    'eye-outline': string;
     'eye-slash': string;
+    'eye-slash-outline': string;
     fax: string;
     'fax-outline': string;
     file: string;
@@ -117,6 +121,8 @@ export declare const icons: {
     'gavel-outline': string;
     'graduation-cap': string;
     'graduation-cap-outline': string;
+    'hand-euro': string;
+    'hand-euro-outline': string;
     'hand-up': string;
     history: string;
     home: string;
@@ -149,7 +155,9 @@ export declare const icons: {
     notes: string;
     'notes-outline': string;
     'paper-plane': string;
+    'paper-plane-outline': string;
     'paper-plane-slash': string;
+    'paper-plane-slash-outline': string;
     paperclip: string;
     pen: string;
     'pen-circle': string;
@@ -164,7 +172,6 @@ export declare const icons: {
     'play-circle': string;
     plus: string;
     'plus-circle': string;
-    'question-circle': string;
     share: string;
     'share-outline': string;
     shuffle: string;
@@ -176,7 +183,9 @@ export declare const icons: {
     'star-outline': string;
     table: string;
     tag: string;
+    'tag-outline': string;
     tags: string;
+    'tags-outline': string;
     'thumb-down': string;
     'thumb-down-outline': string;
     'thumb-up': string;
@@ -186,6 +195,7 @@ export declare const icons: {
     trash: string;
     'trash-outline': string;
     'universal-access': string;
+    'universal-access-outline': string;
     unlink: string;
     unlock: string;
     'unlock-outline': string;
@@ -198,6 +208,7 @@ export declare const icons: {
     'user-pen-fancy-outline': string;
     'user-plus': string;
     'user-question-outline': string;
+    'user-shield': string;
     'user-shield-outline': string;
     users: string;
     'users-outline': string;

package/dist/types/components/atoms/{mg-character-left → internals/mg-character-left}/mg-character-left.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @internal
+ */
 export declare class MgCharacterLeft {
     /************
      * Internal *
@@ -15,6 +18,7 @@ export declare class MgCharacterLeft {
      * Needed by the input for accessibility `aria-decribedby`.
      */
     identifier?: string;
+    watchIdentifier(newValue: MgCharacterLeft['identifier']): void;
     /**
      * Sets the characters to count
      */

package/dist/types/components/atoms/{mg-input-title → internals/mg-input-title}/mg-input-title.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot - Title content
+ * @internal
  */
 export declare class MgInputTitle {
     /**

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

@@ -1,3 +1,4 @@
+import type { Variant } from '../../../types';
 /**
  * List of all possibles variants
  */
@@ -5,4 +6,4 @@ export declare const variants: readonly ["info", "primary", "secondary", "succes
 /**
  * Variant type from variants
  */
-export type BadgeVariantType = (typeof variants)[number];
+export type BadgeVariantType = Variant & (typeof variants)[number];

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

@@ -1,3 +1,4 @@
+import type { Variant } from '../../../types';
 /**
  * List of all possibles variants
  */
@@ -5,7 +6,7 @@ export declare const variants: readonly ["primary", "secondary", "danger", "dang
 /**
  * VariantType type from button variants
  */
-export type VariantType = (typeof variants)[number];
+export type VariantType = Variant & (typeof variants)[number];
 /**
  * List of all possibles button types
  */

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

@@ -24,10 +24,6 @@ export declare class MgButton {
      */
     variant: VariantType;
     validateVariant(newValue: VariantType, oldValue?: VariantType): void;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     */
-    identifier?: string;
     /**
      * aria-label
      * In case button text is not explicit enough

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

@@ -1,43 +1,10 @@
-import { ClassList } from '@mgdis/stencil-helpers';
-import { type VariantStyleType, type VariantType } from './mg-card.conf';
 /**
  * @slot - Card content
  */
 export declare class MgCard {
-    /*************
-     * Private *
-     *************/
-    private readonly name;
-    private readonly classBase;
-    /*************
-     * Decorators *
-     *************/
-    /**
-     * Define variant prop
-     */
-    variant: undefined | VariantType;
-    validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']): void;
-    /**
-     * Define variantStyle prop
-     */
-    variantStyle: undefined | VariantStyleType;
-    validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']): void;
-    /**
-     * Component classes
-     */
-    classCollection: ClassList;
-    /**
-     * Method to set default varianStyle props
-     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
-     */
-    private setDefaultVariantStyle;
     /*************
      * Lifecycle *
      *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -5,7 +5,7 @@ export declare class MgDivider {
     /**
      * Define component size
      */
-    size: 'regular' | 'full';
+    fullWidth: boolean;
     /**
      * Render
      * @returns HTML Element

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

@@ -1,4 +1,5 @@
 import { icons } from '../../../assets/icons';
+import type { Size, Variant, VariantStyle } from '../../../types';
 /**
  * List of all possibles icons
  */
@@ -6,11 +7,11 @@ export type IconType = keyof typeof icons;
 /**
  * List of all possibles sizes
  */
-export declare const sizes: readonly ["small", "regular", "medium", "large", "extra-large"];
+export declare const sizes: readonly ["small", "medium", "large", "xlarge", "xxlarge"];
 /**
  * Icon Size from sizes
  */
-export type IconSizeType = (typeof sizes)[number];
+export type IconSizeType = Size & (typeof sizes)[number];
 /**
  * List of all possibles variants
  */
@@ -18,7 +19,7 @@ export declare const variants: readonly ["success", "warning", "danger", "info",
 /**
  * Variant type from variants
  */
-export type IconVariantType = (typeof variants)[number];
+export type IconVariantType = Variant & (typeof variants)[number];
 /**
  * List of all possibles variants styles
  */
@@ -26,4 +27,4 @@ export declare const variantStyles: readonly ["icon", "background", "full"];
 /**
  * Variant style type from variant style
  */
-export type IconVariantStyleType = (typeof variantStyles)[number];
+export type IconVariantStyleType = VariantStyle & (typeof variantStyles)[number];

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

@@ -1,3 +1,4 @@
+import type { Variant } from '../../../types';
 /**
  * List of all possibles variants
  */
@@ -5,4 +6,4 @@ export declare const variants: readonly ["primary", "secondary", "success", "war
 /**
  * TagVariantType type from tag variants
  */
-export type TagVariantType = (typeof variants)[number];
+export type TagVariantType = Variant & (typeof variants)[number];

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

@@ -1,6 +1,2 @@
-export declare enum Guard {
-    FOCUS = "focus",
-    HOVER_TOOLTIP_ELEMENT = "hoverTooltipGuard",
-    HOVER_TOOLTIPED_ELEMENT = "hoverTooltipedGuard",
-    DISABLE_ON_CLICK = "disableOnClick"
-}
+export type GuardType = 'focus' | 'hoverTooltip' | 'hoverTooltiped' | 'disableOnClick';
+export declare const Guard: Record<string, GuardType>;

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

@@ -25,7 +25,7 @@ export declare class MgTooltip {
      * Needed by the input for accessibility `aria-decribedby`.
      */
     identifier: string;
-    watchIdentifier(): void;
+    watchIdentifier(newValue: MgTooltip['identifier']): void;
     /**
      * Displayed message in the tooltip
      */
@@ -54,12 +54,12 @@ export declare class MgTooltip {
      */
     private hide;
     /**
-     * Check if clicked outside of component and hidde tooltip
+     * Check if clicked outside of component and hide tooltip
      * @param event - mouse event
      */
     private handleClickOutside;
     /**
-     * Check if 'Escape' key is pressed of component and hidde tooltip
+     * Check if 'Escape' key is pressed of component and hide tooltip
      * @param event - keyboard event
      */
     private handlePressEscape;
@@ -87,6 +87,7 @@ export declare class MgTooltip {
     private setMgButtonWrapper;
     /**
      * Set popper instance
+     * @param strategy - popper strategy to apply on instance
      */
     private setPopper;
     /**
@@ -125,6 +126,10 @@ export declare class MgTooltip {
      * update popper position after props change on component did update hook to benefit from render ended
      */
     componentDidUpdate(): void;
+    /**
+     * remove listeners
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -23,13 +23,9 @@ export type HTMLMgInputsElement = (HTMLMgInputElement & {
     displayError: () => void;
 });
 /**
- * Available handlers
+ * Available WindowEvent types
  */
-export declare enum Handler {
-    BLUR = "blur",
-    FOCUS = "focus",
-    MOUSEENTER = "mouseenter"
-}
+export type EventType = keyof WindowEventMap & ('blur' | 'focus' | 'mouseenter');
 export declare const classFieldset = "mg-c-input--fieldset";
 export declare const classDisabled = "mg-c-input--disabled";
 export declare const classReadonly = "mg-c-input--readonly";

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

@@ -58,10 +58,6 @@ export declare class MgInput {
      * Define if input is required
      */
     required: boolean;
-    /**
-     * Defines value to display in readonly mode
-     */
-    readonlyValue: string | string[];
     /**
      * Define error message to display
      */
@@ -81,10 +77,6 @@ export declare class MgInput {
      * Component classes
      */
     watchClass(): void;
-    /**
-     * Trigger label update
-     */
-    watchLabel(): void;
     /**
      * Element is fieldset
      */
@@ -101,6 +93,10 @@ export declare class MgInput {
      * Element is disabled
      */
     isVerticalList: boolean;
+    /**
+     * Trigger label update
+     */
+    watchLabel(): void;
     /************
      * Methods *
      ************/
@@ -116,11 +112,6 @@ export declare class MgInput {
      * Render help text message
      */
     private renderHelpText;
-    /**
-     * Get readonly values
-     * @returns formated readonly value
-     */
-    private getReadonlyValues;
     /*************
      * Lifecycle *
      *************/

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

@@ -1,13 +1,15 @@
 import { EventEmitter } from '../../../../../stencil-public-runtime';
-import { CheckboxItem, IMgInputCheckboxBase, SectionKind, SectionTitleKind } from '../mg-input-checkbox.conf';
+import { CheckboxItem, IMgInputCheckboxBase, type SectionKindType } from '../mg-input-checkbox.conf';
 /**
  * Internal component use to manage sections instances
+ * @internal
  */
 export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
     /*************
      * Constantes *
      *************/
     private readonly offset;
+    private sectionKind;
     /*************
      * Decorators *
      *************/
@@ -35,12 +37,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
      * Define checkboxes to paginate
      */
     checkboxes: CheckboxItem[];
-    validateCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue: MgInputCheckboxPaginated['checkboxes']): void;
-    /**
-     * Define section kind
-     */
-    sectionKind?: SectionKind;
-    validateSectionKind(newValue: MgInputCheckboxPaginated['sectionKind']): void;
+    watchCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue?: MgInputCheckboxPaginated['checkboxes']): void;
     /**
      * Define component message
      */
@@ -49,11 +46,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
      * Emit 'mass-action' event
      * used to informe that select-all/unselect-all button listner is triggered
      */
-    massAction: EventEmitter<HTMLMgInputCheckboxPaginatedElement['sectionKind']>;
-    /**
-     * Define section title
-     */
-    titleKind: SectionTitleKind;
+    massAction: EventEmitter<SectionKindType>;
     /**
      * Is checked items values expanded
      */
@@ -96,7 +89,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
      * Lifecycle *
      *************/
     /**
-     * Check if component props are well configured on init
+     * Validate props
      */
     componentWillLoad(): void;
     /**

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

@@ -33,19 +33,13 @@ export declare const checkboxTypes: readonly ["checkbox", "multi"];
  */
 export type CheckboxType = (typeof checkboxTypes)[number];
 /**
- * mg-input-checkbox-paginated section kind
+ * mg-input-checkbox-paginated section kind type
  */
-export declare enum SectionKind {
-    SELECTED = "selected",
-    NOT_SELECTED = "not-selected"
-}
+export type SectionKindType = 'selected' | 'not-selected';
 /**
- * mg-input-checkbox-paginated section title kind
+ * mg-input-checkbox-paginated section kind value
  */
-export declare enum SectionTitleKind {
-    BUTTON = "button",
-    TEXT = "text"
-}
+export declare const SectionKind: Record<string, SectionKindType>;
 /**
  * Base mg-input-checkbox interface
  */
@@ -63,11 +57,3 @@ export interface MgInputCheckboxListProps extends IMgInputCheckboxBase {
     checkboxes: CheckboxItem[];
     id: string;
 }
-/**
- * Define select values button key
- */
-export declare enum SelectValuesButtonKey {
-    EDIT = "editButton",
-    SHOW = "showButton",
-    SELECT = "selectButton"
-}

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps, SelectValuesButtonKey } from './mg-input-checkbox.conf';
+import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
 import { type TooltipPosition } from '../mg-input/mg-input.conf';
 export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
     /************
@@ -109,6 +109,18 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Define input invalid state
      */
     invalid: boolean;
+    /**
+     * Overwrite default "edit" button message
+     */
+    editButtonMessage: string;
+    /**
+     * Overwrite default "show" button message
+     */
+    showButtonMessage: string;
+    /**
+     * Overwrite default "select" button message
+     */
+    selectButtonMessage: string;
     /**
      * Component classes
      */
@@ -139,7 +151,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Select values button text local key
      */
-    selectValuesButtonKey: SelectValuesButtonKey;
+    selectValuesButtonKey: 'editButton' | 'showButton' | 'selectButton';
     /**
      * Emitted event when value change
      */
@@ -235,7 +247,12 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Set button text locale key
      */
-    private setButtonText;
+    private setButtonTextKey;
+    /**
+     * Get select values button message
+     * @returns message to display
+     */
+    private getSelectValuesButtonMessage;
     /**
      * Set input error message
      * @param displayError - dispay error condition
@@ -280,6 +297,16 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @returns html element
      */
     private renderCheckboxMulti;
+    /**
+     * Renders the readonly value of the input.
+     * @returns The rendered readonly value.
+     */
+    private renderReadonly;
+    /**
+     * Renders the MgInputCheckboxList component.
+     * @returns The rendered MgInputCheckboxList component.
+     */
+    private renderMgInputCheckboxList;
     /**
      * Render
      * @returns HTML Element

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

@@ -1,7 +1,2 @@
-export declare enum InputError {
-    MIN = "min",
-    MAX = "max",
-    MINMAX = "minMax",
-    REQUIRED = "required",
-    PATTERN = "badInput"
-}
+import type { InputError } from '../../../../types';
+export type InputDateError = InputError & ('min' | 'max' | 'minMax' | 'required' | 'badInput');

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

@@ -1,13 +1,9 @@
+import type { InputError } from '../../../../types';
 /**
  * List of all possibles types
  */
-export declare const types: readonly ["decimal", "integer", "currency"];
+export declare const types: readonly ["decimal", "integer"];
 export type NumericType = (typeof types)[number];
 export declare const formats: readonly ["none", "number", "currency"];
 export type Format = (typeof formats)[number];
-export declare enum InputError {
-    MIN = "min",
-    MAX = "max",
-    MINMAX = "minMax",
-    REQUIRED = "required"
-}
+export type InputNumericError = InputError & ('min' | 'max' | 'minMax' | 'required');

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

@@ -12,6 +12,7 @@ export declare class MgInputNumeric {
     private storedValue;
     private numericValue;
     private readonlyValue;
+    private slotContent;
     private input;
     private locale;
     private messages;
@@ -103,7 +104,6 @@ export declare class MgInputNumeric {
     /**
      * Set local formatting.
      * Numbers are formatted based on the locale.
-     * When type is set to `currency`, formatting has no effect.
      */
     format: Format;
     watchFormat(newValue: MgInputNumeric['format']): void;
@@ -238,6 +238,11 @@ export declare class MgInputNumeric {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Renders the readonly content of the input component.
+     * @returns The readonly content element.
+     */
+    private renderReadonly;
     /**
      * Render
      * @returns HTML Element

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

@@ -1,10 +1,9 @@
+import { Option } from '../../../../types';
 /**
  * type SelectOption
  * use to match select \> option attributes
  */
-export type SelectOption = {
-    title: string;
-    value: unknown;
+export type SelectOption = Option & {
     disabled?: boolean;
     group?: string;
 };

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

@@ -1,4 +1,9 @@
+import { Option } from '../../../../types';
 /**
  * TextType from text types
  */
 export type TextType = 'text' | 'search';
+/**
+ * Option type
+ */
+export type OptionType = Option;

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '@mgdis/stencil-helpers';
-import { TextType } from './mg-input-text.conf';
+import { OptionType, TextType } from './mg-input-text.conf';
 import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
 import { IconType } from '../../../../components';
 /**
@@ -17,6 +17,7 @@ export declare class MgInputText {
     private readonly classIsAppendInputSlotContent;
     private characterLeftId;
     private datalistId;
+    private slotContent;
     private input;
     private messages;
     private hasDisplayedError;
@@ -31,7 +32,7 @@ export declare class MgInputText {
     /**
      * Component value
      */
-    value: string;
+    value: any;
     handleValue(newValue: string): void;
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
@@ -71,7 +72,7 @@ export declare class MgInputText {
     /**
      * Define datalist options
      */
-    datalistoptions: string[];
+    datalistoptions: string[] | OptionType[];
     validateDatalistoptions(newValue: MgInputText['datalistoptions']): void;
     /**
      * Input max length
@@ -118,7 +119,7 @@ export declare class MgInputText {
     /**
      * Define if component should display character left
      */
-    displayCharacterLeft: boolean;
+    characterLeftHide: boolean;
     /**
      * Add a help text under the input, usually expected data format and example
      */
@@ -207,6 +208,11 @@ export declare class MgInputText {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Renders the readonly content of the input component.
+     * @returns The readonly content element.
+     */
+    private renderReadonly;
     /**
      * Render
      * @returns HTML Element

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

@@ -6,7 +6,7 @@ export declare class MgInputTextarea {
      * Internal *
      ************/
     private readonly classFocus;
-    private readonly classHasDisplayCharacterLeft;
+    private readonly classDisplayCharacterLeft;
     private characterLeftId;
     private input;
     private messages;
@@ -99,8 +99,8 @@ export declare class MgInputTextarea {
     /**
      * Define if component should display character left
      */
-    displayCharacterLeft: boolean;
-    validateDisplayCharacterLeft(newValue: boolean): void;
+    characterLeftHide: boolean;
+    validatecharacterLeftHide(newValue: boolean): void;
     /**
      * Add a help text under the input, usually expected data format and example
      */

package/dist/types/components/molecules/{mg-item-more → internals/mg-item-more}/mg-item-more.conf.d.ts

@@ -1,5 +1,5 @@
-import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
-import type { MgMenu } from '../menu/mg-menu/mg-menu';
+import type { MgMenu } from '../../menu/mg-menu/mg-menu';
+import type { MgIcon } from '../../../atoms/mg-icon/mg-icon';
 /**
  * SlotLabel prop type
  */