@mgdis/mg-components 6.17.0 → 6.19.0

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

@@ -33,6 +33,7 @@ export declare const icons: {
     'book-outline': string;
     briefcase: string;
     'briefcase-outline': string;
+    building: string;
     'building-outline': string;
     calculator: string;
     'calculator-outline': string;
@@ -64,6 +65,7 @@ export declare const icons: {
     'comment-question': string;
     'comment-question-outline': string;
     'comment-sms': string;
+    'comment-sms-outline': string;
     conversation: string;
     'conversation-outline': string;
     copy: string;
@@ -96,7 +98,9 @@ export declare const icons: {
     'fax-outline': string;
     file: string;
     'file-cog': string;
+    'file-cog-outline': string;
     'file-download': string;
+    'file-download-outline': string;
     'file-excel': string;
     'file-excel-outline': string;
     'file-outline': string;
@@ -105,6 +109,7 @@ export declare const icons: {
     'file-text': string;
     'file-text-outline': string;
     'file-upload': string;
+    'file-upload-outline': string;
     'file-word': string;
     'file-word-outline': string;
     filter: string;
@@ -122,6 +127,7 @@ export declare const icons: {
     'folder-link-outline': string;
     'folder-outline': string;
     'folder-star': string;
+    'folder-star-outline': string;
     folders: string;
     'folders-outline': string;
     gavel: string;
@@ -182,9 +188,12 @@ export declare const icons: {
     'play-circle': string;
     plus: string;
     'plus-circle': string;
+    'plus-circle-outline': string;
     share: string;
     'share-outline': string;
     shuffle: string;
+    'sidebar-arrow-left': string;
+    'sidebar-arrow-right': string;
     sitemap: string;
     sliders: string;
     'sliders-outline': string;

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

@@ -8,6 +8,11 @@ export type Width = (typeof widths)[number];
  */
 export declare const tooltipPositions: readonly ["input", "label"];
 export type TooltipPosition = (typeof tooltipPositions)[number];
+/**
+ * Possible label headings
+ */
+export declare const labelHeadings: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export type labelHeading = (typeof labelHeadings)[number];
 /**
  * Base interface for common methods
  */
@@ -31,4 +36,5 @@ 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";
+export declare const classDisplayCharacterLeft = "mg-c-input--display-character-left";
 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, labelHeading } from './mg-input.conf';
 /**
  * @slot - Input content
  */
@@ -16,6 +16,9 @@ export declare class MgInput {
     private readonly classInput;
     private readonly classHasError;
     private readonly classLabelOnTop;
+    private readonly classHasHeading;
+    private readonly classLabelBorderDisplay;
+    private readonly classInputsOnBottom;
     /**************
      * Decorators *
      **************/
@@ -42,6 +45,18 @@ export declare class MgInput {
      */
     labelHide: boolean;
     watchLabelConfig(): void;
+    /**
+     * Define label heading, use to define label with associated semantic
+     * You must pair this mode with `labelOnTop`and `fieldset` class
+     */
+    labelHeading?: labelHeading;
+    watchlabelHeading(newValue: MgInput['labelHeading']): void;
+    /**
+     * Define if label border is visible
+     * You must pair this mode with `labelOnTop`and `fieldset` class
+     */
+    labelBorderDisplay: boolean;
+    watchLabelBorderDisplay(newValue: MgInput['labelBorderDisplay']): void;
     /**
      * Add a tooltip message next to the input
      */
@@ -65,6 +80,11 @@ export declare class MgInput {
      */
     helpText?: string;
     watchHelpText(newValue: MgInput['helpText']): void;
+    /**
+     * Display inputs after help-text and error message
+     */
+    inputsOnBottom?: boolean;
+    watchInputsOnBottom(newValue: MgInput['inputsOnBottom']): void;
     /**
      * Define aria-describedby ids to link with
      */
@@ -97,6 +117,12 @@ export declare class MgInput {
     /************
      * Methods *
      ************/
+    /**
+     * Update element aria-describedby
+     * @param element - element to update
+     * @param ariaDescribedbyIDs - ariaDescribedbyIDs references
+     */
+    private updateElementAriaDescribedby;
     /**
      * Render input label
      */
@@ -125,6 +151,11 @@ export declare class MgInput {
      * @returns mg-tooltip
      */
     private renderTooltip;
+    /**
+     * Get input container element
+     * @returns ordered elements
+     */
+    private inputContainerElements;
     /**
      * Render
      * @returns HTML Element

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

@@ -10,6 +10,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private searchInput;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private mode;
     private readonly baseClassName;
     private readonly classTypeMulti;
@@ -179,8 +180,9 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputCheckbox['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -259,8 +261,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
     private getSelectValuesButtonMessage;
     /**
      * Set input error message
-     * @param displayError - dispay error condition
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

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

@@ -11,6 +11,7 @@ export type ActionType = {
  */
 export type RequestMappingType = {
     filter: string;
+    filterTransform?: (filter: string) => string;
 };
 /**
  * Define response mapping type

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

@@ -7,12 +7,12 @@ export declare class MgInputCombobox {
     /************
      * Internal *
      ************/
-    private readonly classFocus;
     private input;
     private loadMoreElement;
     private popoverId;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private handlerInProgress;
     private loadingAction;
     private debounce;
@@ -168,7 +168,7 @@ export declare class MgInputCombobox {
      * Formated items for display
      */
     options: Paginate<Option>;
-    watchOptions(newValue: Paginate<Option>): void;
+    watchOptions(): void;
     /**
      * Active option
      */
@@ -226,8 +226,9 @@ export declare class MgInputCombobox {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputCombobox['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputCombobox['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -299,14 +300,14 @@ export declare class MgInputCombobox {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**
-     * Get filtered options from `filter` input value
-     * @returns filtered options
+     * Get first page with filter applied
+     * @returns first page with filter applied
      */
-    private optionsFilter;
+    private getFirstPage;
     /**
      * Loading wrapper with a given action
      * @param action - wrapped loading action

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

@@ -11,6 +11,7 @@ export declare class MgInputDate {
     private systemLocale;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -126,8 +127,9 @@ export declare class MgInputDate {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputDate['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -173,7 +175,7 @@ export declare class MgInputDate {
     private getInputError;
     /**
      * Check input errors
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

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

@@ -18,6 +18,7 @@ export declare class MgInputNumeric {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -174,8 +175,9 @@ export declare class MgInputNumeric {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputNumeric['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputNumeric['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -229,7 +231,7 @@ export declare class MgInputNumeric {
     private formatErrorValue;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

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

@@ -9,6 +9,7 @@ export declare class MgInputPassword {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -126,8 +127,9 @@ export declare class MgInputPassword {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputPassword['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputPassword['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -155,7 +157,7 @@ export declare class MgInputPassword {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

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

@@ -11,6 +11,7 @@ export declare class MgInputRadio {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -128,8 +129,9 @@ export declare class MgInputRadio {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputRadio['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputRadio['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -154,7 +156,7 @@ export declare class MgInputRadio {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

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

@@ -10,7 +10,7 @@ export declare class MgInputRichTextEditor {
     private wrapperElement;
     private messages;
     private hasDisplayedError;
-    private readonly classFocus;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -138,8 +138,9 @@ export declare class MgInputRichTextEditor {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputRichTextEditor['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputRichTextEditor['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -170,7 +171,7 @@ export declare class MgInputRichTextEditor {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

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

@@ -10,6 +10,7 @@ export declare class MgInputSelect {
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -140,8 +141,9 @@ export declare class MgInputSelect {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputSelect['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputSelect['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -181,7 +183,7 @@ export declare class MgInputSelect {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

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

@@ -10,7 +10,6 @@ export declare class MgInputText {
     /************
      * Internal *
      ************/
-    private readonly classFocus;
     private readonly classIsInputGroupAppend;
     private readonly classHasIcon;
     private readonly classHasButtonsGroupAppend;
@@ -21,6 +20,7 @@ export declare class MgInputText {
     private input;
     private messages;
     private hasDisplayedError;
+    private customErrorMessage;
     private handlerInProgress;
     /**************
      * Decorators *
@@ -121,6 +121,7 @@ export declare class MgInputText {
      * Define if component should display character left
      */
     characterLeftHide: boolean;
+    validateCharacterLeftHide(newValue: boolean): void;
     /**
      * Add a help text under the input, usually expected data format and example
      */
@@ -165,8 +166,9 @@ export declare class MgInputText {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputText['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputText['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -184,10 +186,6 @@ export declare class MgInputText {
      * Handle input event
      */
     private handleInput;
-    /**
-     * Handle focus event
-     */
-    private handleFocus;
     /**
      * Handle blur event
      */
@@ -198,7 +196,7 @@ export declare class MgInputText {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /**

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

@@ -5,13 +5,12 @@ export declare class MgInputTextarea {
     /************
      * Internal *
      ************/
-    private readonly classFocus;
-    private readonly classDisplayCharacterLeft;
     private characterLeftId;
     private input;
     private messages;
     private hasDisplayedError;
     private handlerInProgress;
+    private customErrorMessage;
     /**************
      * Decorators *
      **************/
@@ -148,8 +147,9 @@ export declare class MgInputTextarea {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void>;
+    setError(valid: MgInputTextarea['valid'], errorMessage?: string, errorMessageLock?: boolean): Promise<void>;
     /**
      * Reset value, validity and error state
      */
@@ -163,10 +163,6 @@ export declare class MgInputTextarea {
      * Handle input event
      */
     private handleInput;
-    /**
-     * Handle focus event
-     */
-    private handleFocus;
     /**
      * Handle blur event
      */
@@ -183,7 +179,7 @@ export declare class MgInputTextarea {
     private checkValidity;
     /**
      * Set input error message
-     * @param errorMessage - errorMessage override
+     * @param fromSetErrorContext - context come from `setError` method
      */
     private setErrorMessage;
     /*************

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

@@ -53,7 +53,9 @@ export declare class MgInputToggle {
      */
     labelHide: boolean;
     /**
-     * Define if toggle have on/off style
+     * Define if toggle have on/off style,
+     * the left icon is hidden.
+     * Only available in combination with the "isIcon" prop.
      */
     isOnOff: boolean;
     watchIsOnOff(newValue: MgInputToggle['isOnOff']): void;
@@ -125,7 +127,7 @@ export declare class MgInputToggle {
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
      */
-    setError(valid: boolean, errorMessage: string): Promise<void>;
+    setError(valid: boolean, errorMessage?: string): Promise<void>;
     /**
      * Reset value, validity, error and visual state
      */

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

@@ -0,0 +1,105 @@
+import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
+import { labelHeading } from '../inputs/mg-input/mg-input.conf';
+export declare class MgFieldset {
+    /************
+     * Internal *
+     ************/
+    private mgInputs;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgFieldsetElement;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * Fieldset name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Fieldset legend
+     */
+    legend: string;
+    /**
+     * Define if legend is visible
+     */
+    legendHide: boolean;
+    /**
+     * Define legend heading, use to define legend with associated semantic
+     */
+    legendHeading?: labelHeading;
+    /**
+     * Define if legend border is visible.
+     */
+    legendBorderDisplay: boolean;
+    watchLegendBorderDisplay(newValue: MgFieldset['legendBorderDisplay']): void;
+    /**
+     * Define if inputs are readonly
+     */
+    readonly: boolean;
+    watchReadonly(newValue: MgFieldset['readonly']): void;
+    /**
+     * Define if inputs are disabled
+     */
+    disabled: boolean;
+    handleAttributeChange(): void;
+    /**
+     * Add a tooltip message next to the fieldset
+     */
+    tooltip?: string;
+    /**
+     * Add a help text under the fieldset, usually expected data format and example
+     */
+    helpText?: string;
+    /**
+     * Define custom error message to display
+     */
+    errorMessage?: string;
+    /**
+     * Define fieldset valid state
+     */
+    valid: boolean;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Component is not a candidate for constraint validation.
+     * You can use this method to define the `errorMessage` and set the `valid` state to `false`.
+     * @param errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error
+     */
+    setCustomValidity(errorMessage?: string): Promise<void>;
+    /**
+     * Display inputs error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Check if fieldset is valid
+     */
+    private checkValidity;
+    /**
+     * Set mgInputs
+     */
+    private setMgInputs;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Add slot listeners
+     */
+    componentDidLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

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

@@ -92,7 +92,7 @@ export declare class MgForm {
      */
     formReset: EventEmitter<boolean>;
     /**
-     * Display input error if it exists.
+     * Display inputs/fieldsets errors if it exists.
      */
     displayError(): Promise<void>;
     /**

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

@@ -3,6 +3,7 @@ import { ClassList } from '@mgdis/core-ui-helpers/dist/utils';
 import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
 /**
  * @slot - Panel content
+ * @slot panel-title - Panel title content (replaces panel-title prop when used)
  * @slot header-right - Header right panel content
  */
 export declare class MgPanel {
@@ -27,7 +28,7 @@ export declare class MgPanel {
     /**
      * Panel title
      */
-    panelTitle: string;
+    panelTitle?: string;
     validatePanelTitle(newValue: MgPanel['panelTitle']): void;
     /**
      * Panel title pattern
@@ -42,6 +43,7 @@ export declare class MgPanel {
      * Define if panel title is editable
      */
     titleEditable: boolean;
+    validateTitleEditable(newValue: MgPanel['titleEditable']): void;
     /**
      * Define title position
      */
@@ -88,6 +90,11 @@ export declare class MgPanel {
     /************
      * Methods *
      ************/
+    /**
+     * Check if panel-title slot is used
+     * @returns true if slot is used
+     */
+    private hasPanelTitleSlot;
     /**
      * Toggle is editing state
      */