@mgdis/mg-components 6.14.0 → 6.15.0

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

@@ -58,7 +58,11 @@ export declare const icons: {
     cog: string;
     'cog-outline': string;
     comment: string;
+    'comment-exclamation': string;
+    'comment-exclamation-outline': string;
     'comment-outline': string;
+    'comment-question': string;
+    'comment-question-outline': string;
     'comment-sms': string;
     conversation: string;
     'conversation-outline': string;
@@ -151,6 +155,8 @@ export declare const icons: {
     'log-out': string;
     'magnifying-glass': string;
     mail: string;
+    'mail-open': string;
+    'mail-open-outline': string;
     'mail-outline': string;
     'messages-square': string;
     'messages-square-outline': string;

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

@@ -31,4 +31,17 @@ export declare const classFieldset = "mg-c-input--fieldset";
 export declare const classDisabled = "mg-c-input--disabled";
 export declare const classReadonly = "mg-c-input--readonly";
 export declare const classVerticalList = "mg-c-input--vertical-list";
+/**
+ * Define MgInput['errorMessage'] Details type
+ */
+export type ErrorMessageDetailsType = {
+    summary: string;
+    details: string;
+};
+/**
+ * Define cutom errors
+ */
+export declare const CustomError: {
+    readonly NoValue: "noValue";
+};
 export {};

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

@@ -1,4 +1,4 @@
-import { type TooltipPosition } from './mg-input.conf';
+import { type TooltipPosition, type ErrorMessageDetailsType } from './mg-input.conf';
 /**
  * @slot - Input content
  */
@@ -6,10 +6,13 @@ export declare class MgInput {
     /************
      * Internal *
      ************/
+    private messages;
     private helpTextId;
     private helpTextErrorId;
     private readonly slotLabel;
     private readonly slotError;
+    private readonly slotSummary;
+    private readonly slotDetails;
     private readonly slotHelpText;
     private errorMessageSlotElement;
     private helptextMessageSlotElement;
@@ -58,7 +61,7 @@ export declare class MgInput {
     /**
      * Define error message to display
      */
-    errorMessage?: string;
+    errorMessage?: string | ErrorMessageDetailsType;
     watchErrorMessage(newValue: MgInput['errorMessage']): void;
     /**
      * Define help text to display
@@ -102,9 +105,17 @@ export declare class MgInput {
      */
     private renderLabel;
     /**
-     * Render error message
+     * Render error message details element
      */
-    private renderErrorMessage;
+    private renderErrorDetailsMessage;
+    /**
+     * Render error message element
+     */
+    private renderErrorStringMessage;
+    /**
+     * Render error message slot element
+     */
+    private renderErrorMessageSlot;
     /**
      * Render help text message
      */

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

@@ -0,0 +1,8 @@
+import type { ErrorMessageDetailsType } from './mg-input.conf';
+/**
+ * Define error message
+ * @param message - message to display
+ * @param details - message detail to display
+ * @returns formated MgInput["errorMessage"]
+ */
+export declare const defineErrorMessage: (message: string, details?: ErrorMessageDetailsType["details"]) => string | ErrorMessageDetailsType | undefined;

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

@@ -1,15 +1,14 @@
-import { EventEmitter } from '../../../../../stencil-public-runtime';
-import { CheckboxItem, IMgInputCheckboxBase, type SectionKindType } from '../mg-input-checkbox.conf';
+import { CheckboxItem, IMgInputCheckboxBase } from '../mg-input-checkbox.conf';
 /**
  * Internal component use to manage sections instances
  * @internal
  */
 export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
     /*************
-     * Constantes *
+     * Variables *
      *************/
-    private readonly offset;
-    private sectionKind;
+    private items;
+    private readonly step;
     /*************
      * Decorators *
      *************/
@@ -29,62 +28,40 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
      * Define mg-input-checkbox input invalid
      */
     invalid?: boolean;
-    /**
-     * Current page
-     */
-    currentPage: number;
     /**
      * Define checkboxes to paginate
      */
     checkboxes: CheckboxItem[];
-    watchCheckboxes(newValue: MgInputCheckboxPaginated['checkboxes'], oldValue?: MgInputCheckboxPaginated['checkboxes']): void;
+    watchCheckboxes(): void;
     /**
      * Define component message
      */
     messages: Record<string, string>;
     /**
-     * Emit 'mass-action' event
-     * used to informe that select-all/unselect-all button listner is triggered
+     * Page items limit to display
      */
-    massAction: EventEmitter<SectionKindType>;
+    limit: number;
+    watchLimit(): void;
     /**
-     * Is checked items values expanded
+     * Method to reset limit
      */
-    expanded: boolean;
+    resetLimit(): Promise<void>;
     /***********
      * Methods *
      ***********/
     /**
-     * Mass action handler
-     */
-    private massActionHandler;
-    /**
-     * Toggle 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
+     * Component has next checkboxes to display
+     * @returns truthy if have next elements
      */
-    private getFromToIndexes;
+    private hasNext;
     /**
-     * Method to get page count from items
-     * @param items - items to count
-     * @returns page count from items
+     * Set items from checkboxes and limit
      */
-    private getPageCount;
+    private setItems;
     /**
-     * Handle mg-pagination current page change event
-     * @param event - pagination current page change event
+     * Handle load-more <mg-button> click event
      */
-    private handleCurrentPageChange;
+    private handleLoadMore;
     /*************
      * Lifecycle *
      *************/

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

@@ -50,8 +50,7 @@ export interface IMgInputCheckboxBase {
  * mg-input-checkbox-list interface
  */
 export interface MgInputCheckboxListProps extends IMgInputCheckboxBase {
-    displaySearchInput: boolean;
-    messages: Record<string, unknown>;
     checkboxes: CheckboxItem[];
     id: string;
+    labelledby?: string;
 }

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

@@ -18,6 +18,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private readonly multiStart;
     private readonly searchStart;
     private hasOpenedPopover;
+    private readonly checkboxesId;
     /**************
      * Decorators *
      **************/
@@ -111,15 +112,19 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     /**
      * Overwrite default "edit" button message
      */
-    editButtonMessage: string;
+    editButtonMessage?: string;
     /**
      * Overwrite default "show" button message
      */
-    showButtonMessage: string;
+    showButtonMessage?: string;
     /**
      * Overwrite default "select" button message
      */
-    selectButtonMessage: string;
+    selectButtonMessage?: string;
+    /**
+     * Define no value error detail
+     */
+    noValueErrorDetail?: string;
     /**
      * Component classes
      */
@@ -151,6 +156,10 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Select values button text local key
      */
     selectValuesButtonKey: 'editButton' | 'showButton' | 'selectButton';
+    /**
+     * Define <mg-tabs> active-tab
+     */
+    activeTab: number;
     /**
      * Emitted event when value change
      */
@@ -204,16 +213,16 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @param event - input value-change event
      */
     private handleSearchChange;
+    /**
+     * Handle <mg-tabs> tab-change event
+     * @param event - tab change event
+     */
+    private handleActiveTabChange;
     /**
      * popover display-change handler
      * @param event - mg-popover display-change custom event
      */
     private handleMgPopoverDisplayChange;
-    /**
-     * Handle select all button
-     * @param event - mass action event trigger a global select/unselect on values
-     */
-    private handleMassAction;
     /**
      * Update values
      */
@@ -243,6 +252,16 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * Check if input is valid
      */
     private checkValidity;
+    /**
+     * Test if component has items
+     * @returns truthy if component has items
+     */
+    private hasInputValue;
+    /**
+     * Test if component has no value error message displayed
+     * @returns truthy if compent display no value error message
+     */
+    private hasNoValueErrorMessageDisplay;
     /**
      * Set button text locale key
      */
@@ -258,6 +277,10 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @param errorMessage - errorMessage override
      */
     private setErrorMessage;
+    /**
+     * Reset error message
+     */
+    private resetErrorMessage;
     /**
      * Method to get mg-popover identifier
      * @returns MgPopover identifier
@@ -273,6 +296,10 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @returns selected checkboxItems
      */
     private getSelectedItems;
+    /**
+     * Reset <mg-input-checkbox-paginated> limit state
+     */
+    private resetTabsLimit;
     /*************
      * Lifecycle *
      *************/
@@ -290,7 +317,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @param checkboxes - checkboxes to render
      * @returns render sections of checkboxes
      */
-    private renderCheckboxBySection;
+    private renderCheckboxTabs;
     /**
      * render checkbox multi element
      * @returns html element

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

@@ -13,6 +13,7 @@ export declare class MgInputCombobox {
     private popoverId;
     private messages;
     private hasDisplayedError;
+    private customError;
     private handlerInProgress;
     private loadingAction;
     private debounce;
@@ -152,6 +153,10 @@ export declare class MgInputCombobox {
         response: ResponseMappingType;
     };
     watchFetchMappings(newValue: MgInputCombobox['fetchmappings']): void;
+    /**
+     * Define no value error detail
+     */
+    noValueErrorDetail?: string;
     /**
      * Define input valid state
      */
@@ -202,7 +207,7 @@ export declare class MgInputCombobox {
     /**
      * Emited event when `load-more` is called
      */
-    loadMore: EventEmitter<void>;
+    showMore: EventEmitter<void>;
     /**
      * Emited event when checking validity
      */
@@ -288,9 +293,15 @@ export declare class MgInputCombobox {
      * @returns value title
      */
     private getValueTitle;
+    /**
+     * Test if component has no value error message displayed
+     * @returns truthy if compent display no value error message
+     */
+    private hasNoValueError;
     /**
      * Method to set validity values
-     * @param newValue - valid new value
+     * @param newValidValue - new valid value. `true` will bypass input check.
+     * @param customErrorMessage - custom error message
      */
     private setValidity;
     /**
@@ -299,9 +310,12 @@ export declare class MgInputCombobox {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
      */
     private setErrorMessage;
+    /**
+     * Reset error message
+     */
+    private resetErrorMessage;
     /**
      * Get filtered options from `filter` input value
      * @returns filtered options

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

@@ -81,6 +81,10 @@ export declare class MgInputRadio {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Define no value error detail
+     */
+    noValueErrorDetail?: string;
     /**
      * Define input valid state
      */
@@ -148,6 +152,16 @@ export declare class MgInputRadio {
      * Handle blur event
      */
     private handleBlur;
+    /**
+     * Test if component has items
+     * @returns truthy if component has items
+     */
+    private hasInputValue;
+    /**
+     * Test if component has no value error message displayed
+     * @returns truthy if compent display no value error message
+     */
+    private hasNoValueErrorMessageDisplay;
     /**
      * Check if input is valid
      */
@@ -157,6 +171,10 @@ export declare class MgInputRadio {
      * @param errorMessage - errorMessage override
      */
     private setErrorMessage;
+    /**
+     * Reset error message
+     */
+    private resetErrorMessage;
     /**
      * get invalid element
      * @returns element

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

@@ -93,6 +93,10 @@ export declare class MgInputSelect {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Define no value error detail
+     */
+    noValueErrorDetail?: string;
     /**
      * Define input valid state
      */
@@ -166,6 +170,16 @@ export declare class MgInputSelect {
      * @returns truthy if input.value is an item
      */
     private isInputValue;
+    /**
+     * Test if component has items
+     * @returns truthy if component has items
+     */
+    private hasInputValue;
+    /**
+     * Test if component has no value error message displayed
+     * @returns truthy if compent display no value error message
+     */
+    private hasNoValueErrorMessageDisplay;
     /**
      * Handle blur event
      */
@@ -184,6 +198,10 @@ export declare class MgInputSelect {
      * @param errorMessage - errorMessage override
      */
     private setErrorMessage;
+    /**
+     * Reset error message
+     */
+    private resetErrorMessage;
     /*************
      * Lifecycle *
      *************/

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

@@ -11,6 +11,7 @@ export declare class MgInputToggle {
      * Internal *
      ************/
     private button;
+    private messages;
     private readonly classIsActive;
     private readonly classOnOff;
     private readonly classIcon;
@@ -84,6 +85,18 @@ export declare class MgInputToggle {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Define no value error detail
+     */
+    noValueErrorDetail?: string;
+    /**
+     * Define input valid state
+     */
+    valid: boolean;
+    /**
+     * Define input invalid state
+     */
+    invalid: boolean;
     /**
      * Component classes
      */
@@ -96,10 +109,6 @@ export declare class MgInputToggle {
      * Error message to display
      */
     errorMessage: string;
-    /**
-     * Define input valid state
-     */
-    valid: boolean;
     /**
      * Checked internal value
      */
@@ -130,6 +139,33 @@ export declare class MgInputToggle {
      * Reset value, validity, error and visual state
      */
     reset(): Promise<void>;
+    /**
+     * Display input error if it exists.
+     */
+    private displayError;
+    /**
+     * Check if input is valid
+     */
+    private checkValidity;
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    private setValidity;
+    /**
+     * Reset error message
+     */
+    private resetErrorMessage;
+    /**
+     * Test if component has items
+     * @returns truthy if component has items
+     */
+    private hasInputItems;
+    /**
+     * Test if component has no value error message displayed
+     * @returns truthy if compent display no value error message
+     */
+    private hasNoValueErrorMessageDisplay;
     /**
      * Set input error message
      * @param errorMessage - errorMessage override