@mgdis/mg-components 6.8.0 → 6.10.0

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

@@ -0,0 +1,340 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ClassList, Paginate } from '@mgdis/stencil-helpers';
+import { type RequestMappingType, type ResponseMappingType } from './mg-input-combobox.conf';
+import { type TooltipPosition, type Width } from '../mg-input/mg-input.conf';
+import type { Option } from '../../../../types';
+export declare class MgInputCombobox {
+    /************
+     * Internal *
+     ************/
+    private readonly classFocus;
+    private input;
+    private loadMoreElement;
+    private popoverId;
+    private messages;
+    private hasDisplayedError;
+    private handlerInProgress;
+    private loadingAction;
+    private page;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgInputComboboxElement;
+    /**
+     * Define component value
+     */
+    value: string | Option;
+    watchValue(newValue: MgInputCombobox['value']): void;
+    /**
+     * Define components items
+     */
+    items: (string | Option)[];
+    watchItems(newValue: MgInputCombobox['items']): void;
+    /**
+     * Define items label
+     * Include short description. Required for accessibility.
+     * @example
+     * ```
+     * Countries
+     * ```
+     */
+    itemsLabel: string;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    watchIdentifier(newValue: MgInputCombobox['identifier']): void;
+    /**
+     * Input name
+     * If not set the value equals the identifier
+     */
+    name: string;
+    /**
+     * Input label
+     */
+    label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop: boolean;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
+    /**
+     * Define input placeholder.
+     * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help combobox.
+     */
+    placeholder?: string;
+    /**
+     * Define if input is required
+     */
+    required: boolean;
+    /**
+     * Define if input is readonly
+     */
+    readonly: boolean;
+    watchReadonly(newValue: MgInputCombobox['readonly']): void;
+    /**
+     * Define if input is disabled
+     */
+    disabled: boolean;
+    watchValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
+    watchDisabled(newValue: MgInputCombobox['disabled']): void;
+    /**
+     * Define input width
+     */
+    mgWidth: Width;
+    watchMgWidth(newValue: MgInputCombobox['mgWidth']): void;
+    /**
+     * Add a tooltip message next to the input
+     */
+    tooltip?: string;
+    /**
+     * Define tooltip position
+     */
+    tooltipPosition: TooltipPosition;
+    /**
+     * Add a help text under the input, usually expected data format and example
+     */
+    helpText?: string;
+    /**
+     * Define API url to fetch
+     * @example
+     * ```
+     * {
+     *   url: "http://myapi.com?$select='href,name'&my-custom-param='my-custom-value'", // url to fetch
+     * }
+     * ```
+     */
+    fetchurl?: string | URL;
+    watchFetchUrl(newValue: MgInputCombobox['fetchurl']): void;
+    /**
+     * Define fetch options object
+     * Require `fetchurl` prop to be defined otherwith it will be ignored if defined
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/RequestInit}
+     * @example JSON headers:
+     * ```json
+     * {
+     *   "headers": {
+     *      "authorization": "my-token"
+     *   }
+     * }
+     * ```
+     */
+    fetchoptions?: RequestInit;
+    watchFetchOptions(newValue: MgInputCombobox['fetchoptions']): void;
+    /**
+     * Define fetch request mappings.
+     * Required with `fetchurl`
+     * @example
+     * ```
+     * {
+     *  request: {
+     *     filter: 'name', // `filter` key
+     *   },
+     *   response: {
+     *     total: 'body.data.total', // response object mapping to get `total` value
+     *     items: 'body.data.results' // response object mapping to get `items` value
+     *     next: 'body.next' // response object mapping to get `next` items
+     *     itemTitle: 'name', // item property to map on item['title']
+     *     itemValue: 'href', // item property to map on item['value']
+     *   }
+     * }
+     * ```
+     */
+    fetchmappings?: {
+        request: RequestMappingType;
+        response: ResponseMappingType;
+    };
+    watchFetchMappings(newValue: MgInputCombobox['fetchmappings']): void;
+    /**
+     * Define input valid state
+     */
+    valid: boolean;
+    /**
+     * Define input invalid state
+     */
+    invalid: boolean;
+    /**
+     * Define if items are loading
+     */
+    isLoading: boolean;
+    /**
+     * Formated items for display
+     */
+    options: Paginate<Option>;
+    watchOptions(newValue: Paginate<Option>): void;
+    /**
+     * Active option
+     */
+    option: Option;
+    /**
+     * Option filter
+     */
+    filter: string;
+    watchFilter(newValue: MgInputCombobox['filter']): void;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Error message to display
+     */
+    errorMessage: string;
+    /**
+     * Popover display state
+     */
+    popoverDisplay: boolean;
+    watchPopoverDisplay(newValue: MgInputCombobox['popoverDisplay']): void;
+    /**
+     * Emited event when value change
+     */
+    valueChange: EventEmitter<HTMLMgInputComboboxElement['value']>;
+    /**
+     * Emited event when filter change
+     */
+    filterChange: EventEmitter<string>;
+    /**
+     * Emited event when `load-more` is called
+     */
+    loadMore: EventEmitter<void>;
+    /**
+     * Emited event when checking validity
+     */
+    inputValid: EventEmitter<HTMLMgInputComboboxElement['valid']>;
+    /**
+     * Public method to play input focus
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Display input error if it exists.
+     */
+    displayError(): Promise<void>;
+    /**
+     * Set an error and display a custom error message.
+     * This method can be used to set the component's error state from its concombobox by passing a boolean value to the `valid` parameter.
+     * It must be paired with an error message to display for the given concombobox.
+     * 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
+     */
+    setError(valid: MgInputCombobox['valid'], errorMessage: string): Promise<void>;
+    /**
+     * Reset value, validity and error state
+     */
+    reset(): Promise<void>;
+    /**
+     * Handle `click` event on option
+     * @param event - option element click event
+     */
+    private handleOptionClick;
+    /**
+     * Handle `click` event on reset button
+     * @param event - click event
+     */
+    private handleResetButton;
+    /**
+     * Handle `display-change` event on mg-popover
+     */
+    private handlePopoverDisplay;
+    /**
+     * Handle input event
+     */
+    private handleFilterInput;
+    /**
+     * Handle `blur` event
+     */
+    private handleFilterBlur;
+    /**
+     * Handle `focus` event
+     */
+    private handleFilterFocus;
+    /**
+     * Handle load-more <mg-button> `click`
+     */
+    private handleLoadMoreButton;
+    /**
+     * Handle `keypress` event
+     * @param event - keyboard event
+     */
+    private handleFilterKeydown;
+    /**
+     * Scroll to next option from cursor
+     * @param index - targeted option index to scroll into
+     */
+    private scrollToIndex;
+    /**
+     * Is option the current value
+     * @param option - option to match with
+     * @returns true if option is the current value
+     */
+    private isCurrentOption;
+    /**
+     * Set value prop
+     * @param newValue - slected option item
+     */
+    private setValue;
+    /**
+     * get value prop title
+     * @returns value title
+     */
+    private getValueTitle;
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    private setValidity;
+    /**
+     * Check if input is valid
+     */
+    private checkValidity;
+    /**
+     * Set input error message
+     * @param errorMessage - errorMessage override
+     */
+    private setErrorMessage;
+    /**
+     * Get filtered options from `filter` input value
+     * @returns filtered options
+     */
+    private optionsFilter;
+    /**
+     * Loading wrapper with a given action
+     * @param action - wrapped loading action
+     * @returns promisified action
+     */
+    private loadingWrapper;
+    /**
+     * Go to next page
+     * @returns promise
+     */
+    private goToNextPage;
+    /**
+     * Go to next page
+     * @returns promise
+     */
+    private updatePage;
+    /**
+     * Fetch request
+     * @param url - to fetch
+     * @returns new page from url
+     */
+    private getOptions;
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     * @returns timeout
+     */
+    componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
+}

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

@@ -39,7 +39,7 @@ export declare class MgInputDate {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

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

@@ -46,7 +46,7 @@ export declare class MgInputNumeric {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

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

@@ -37,7 +37,7 @@ export declare class MgInputPassword {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -50,7 +50,7 @@ export declare class MgInputPassword {
     /**
      * Input max length
      */
-    maxlength: any;
+    maxlength?: number;
     /**
      * Define if input is required
      */

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

@@ -18,15 +18,15 @@ export declare class MgInputRichTextEditor {
      * Get component DOM element
      */
     element: HTMLMgInputRichTextEditorElement;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     */
-    identifier: string;
     /**
      * Define the value of the editor
      * Can be either HTML string or plain text
      */
     value: string;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
     /**
      * Input label
      */
@@ -34,7 +34,7 @@ export declare class MgInputRichTextEditor {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -85,6 +85,10 @@ export declare class MgInputRichTextEditor {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Editor modules configuration
+     */
+    modules?: EditorOptionsType['modules'];
     /**
      * Define input valid state
      */
@@ -93,10 +97,6 @@ export declare class MgInputRichTextEditor {
      * Define input invalid state
      */
     invalid: boolean;
-    /**
-     * Editor modules configuration
-     */
-    modules?: EditorOptionsType['modules'];
     /**
      * Component classes
      */

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

@@ -43,7 +43,7 @@ export declare class MgInputSelect {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

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

@@ -47,6 +47,14 @@ export declare class MgInputText {
      * Input label
      */
     label: string;
+    /**
+     * Define if label is displayed on top
+     */
+    labelOnTop: boolean;
+    /**
+     * Define if label is visible
+     */
+    labelHide: boolean;
     /**
      * Input type
      */
@@ -57,14 +65,6 @@ export declare class MgInputText {
      */
     icon?: IconType;
     validateIcon(newValue: string): void;
-    /**
-     * Define if label is displayed on top
-     */
-    labelOnTop?: boolean;
-    /**
-     * Define if label is visible
-     */
-    labelHide: boolean;
     /**
      * Input placeholder.
      * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.

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

@@ -40,7 +40,7 @@ export declare class MgInputTextarea {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */
@@ -105,6 +105,10 @@ export declare class MgInputTextarea {
      * Add a help text under the input, usually expected data format and example
      */
     helpText?: string;
+    /**
+     * Define if input is resizable
+     */
+    resizable: 'none' | 'both' | 'horizontal' | 'vertical';
     /**
      * Define input valid state
      */
@@ -113,10 +117,6 @@ export declare class MgInputTextarea {
      * Define input invalid state
      */
     invalid: boolean;
-    /**
-     * Define if input is resizable
-     */
-    resizable: 'none' | 'both' | 'horizontal' | 'vertical';
     /**
      * Component classes
      */

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

@@ -46,7 +46,7 @@ export declare class MgInputToggle {
     /**
      * Define if label is displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     /**
      * Define if label is visible
      */

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

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

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

@@ -1,7 +1,7 @@
 import type { MgBadge } from '../../atoms/mg-badge/mg-badge';
 import type { MgButton } from '../../atoms/mg-button/mg-button';
 import type { MgIcon } from '../../atoms/mg-icon/mg-icon';
-import type { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';
+import type { MgMenuItem } from '../menus/mg-menu-item/mg-menu-item';
 /**
  * prop icon type
  */

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

@@ -32,7 +32,7 @@ export declare class MgActionMore {
     /**
      * Define if chevron is display
      */
-    displayChevron?: boolean;
+    displayChevron: boolean;
     validateDisplayChevron(newValue: MgActionMore['displayChevron']): void;
     /**
      * Menu expanded state

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

@@ -55,7 +55,7 @@ export declare class MgForm {
     /**
      * Define if slotted mg-component's label are displayed on top
      */
-    labelOnTop?: boolean;
+    labelOnTop: boolean;
     handlelabelOnTop(newValue: MgForm['labelOnTop']): void;
     /**
      * Define if form is disabled

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

@@ -18,7 +18,7 @@ export declare class MgLoader {
     /**
      * Hide message
      */
-    messageHide?: boolean;
+    messageHide: boolean;
     /*************
      * Lifecycle *
      *************/

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

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

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

@@ -60,7 +60,7 @@ export declare class MgPanel {
     /**
      * Disable possibility to toggle expand
      */
-    expandToggleDisabled?: boolean;
+    expandToggleDisabled: boolean;
     /**
      * Component classes
      */

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

@@ -3,6 +3,7 @@ import { type PopoverPlacementType } from './mg-popover.conf';
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
+ * @slot title - popover title
  */
 export declare class MgPopover {
     /************
@@ -11,7 +12,8 @@ export declare class MgPopover {
     private mgPopover;
     private mgPopoverContent;
     private windows;
-    private floatingUICleanup;
+    private interactiveElement;
+    private arrowElement;
     /**************
      * Decorators *
      **************/
@@ -62,11 +64,6 @@ export declare class MgPopover {
      * @param event - mouse event
      */
     private clickOutside;
-    /**
-     * Update aria-expanded attribute on interactive element
-     * @param expanded - expanded state
-     */
-    private updateAriaExpanded;
     /**
      * Show popover
      */
@@ -98,10 +95,10 @@ export declare class MgPopover {
      */
     private getClosestPlacements;
     /**
-     * Set up Floating UI positioning and arrow behavior
-     * @param interactiveElement - Element that triggers the popover
+     * Update popover position
+     * @returns autoUpdate function
      */
-    private setFloatingUI;
+    private updatePopover;
     /*************
      * Lifecycle *
      *************/