@mgdis/mg-components 6.9.0 → 6.10.1

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { type PopoverPlacementType } from './mg-popover.conf';
+import { Placement } from '@popperjs/core';
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
@@ -9,10 +9,11 @@ export declare class MgPopover {
     /************
      * Internal *
      ************/
+    private popper;
     private mgPopover;
     private mgPopoverContent;
     private windows;
-    private floatingUICleanup;
+    private interactiveElement;
     /**************
      * Decorators *
      **************/
@@ -29,8 +30,7 @@ export declare class MgPopover {
     /**
      * Popover placement
      */
-    placement: PopoverPlacementType;
-    watchPlacement(newValue: any): void;
+    placement: Placement;
     /**
      * Hide popover arrow
      */
@@ -63,11 +63,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
      */
@@ -76,6 +71,11 @@ export declare class MgPopover {
      * Hide popover
      */
     private hide;
+    /**
+     * Set popper listeners
+     * @param newValue - if true enable popper listners
+     */
+    private setPopperListeners;
     /**
      * Manage all clickOustside listeners
      * @param action - top process on elements listeners
@@ -89,20 +89,6 @@ export declare class MgPopover {
      * Render popover content element
      */
     private renderPopoverContent;
-    /**
-     * Get alternative placements ordered by proximity to initial placement
-     * First check fallbackPlacement attribute, then generate alternatives:
-     * 1. Same side with different alignments (start, center, end)
-     * 2. Other sides in order
-     * @param placement - initial placement
-     * @returns array of alternative placements
-     */
-    private getClosestPlacements;
-    /**
-     * Set up Floating UI positioning and arrow behavior
-     * @param interactiveElement - Element that triggers the popover
-     */
-    private setFloatingUI;
     /*************
      * Lifecycle *
      *************/
@@ -118,10 +104,6 @@ export declare class MgPopover {
      * Check if component props are well configured on init
      */
     componentDidLoad(): void;
-    /**
-     * Cleanup when component is disconnected
-     */
-    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components.d.ts

@@ -14,6 +14,8 @@ import { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from ".
 import { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 import { TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 import { CheckboxItem, CheckboxType, CheckboxValue, SectionKindType } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
+import { Direction, Option } from "./types";
+import { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
 import { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { EditorOptionsType } from "./components/molecules/inputs/mg-input-rich-text-editor/editor";
@@ -22,19 +24,17 @@ import { OptionType, TextType } from "./components/molecules/inputs/mg-input-tex
 import { IconType as IconType1 } from "./components";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 import { IconType as IconType2, SizeType as SizeType1, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
-import { Direction } from "./types";
 import { ItemMoreType, MenuSizeType } from "./components/molecules/menus/mg-menu/mg-menu.conf";
 import { MgMenuStatusType, TargetType } from "./components/molecules/menus/mg-menu-item/mg-menu-item.conf";
 import { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 import { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-import { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
+import { Placement } from "@popperjs/core";
 import { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { ColumnsType, TableSizeType } from "./components/molecules/mg-table/mg-table.conf";
 import { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
-import { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export { MgActionMoreButtonType, MgActionMoreDividerType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 export { VariantStyleType, VariantType } from "./components/molecules/mg-alert/mg-alert.conf";
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
@@ -44,6 +44,8 @@ export { IconSizeType, IconType, IconVariantStyleType, IconVariantType } from ".
 export { IllustratedMessageDirectionType, IllustratedMessageSizeType } from "./components/molecules/mg-illustrated-message/mg-illustrated-message.conf";
 export { TooltipPosition, Width } from "./components/molecules/inputs/mg-input/mg-input.conf";
 export { CheckboxItem, CheckboxType, CheckboxValue, SectionKindType } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
+export { Direction, Option } from "./types";
+export { RequestMappingType, ResponseMappingType } from "./components/molecules/inputs/mg-input-combobox/mg-input-combobox.conf";
 export { Format, NumericType } from "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { EditorOptionsType } from "./components/molecules/inputs/mg-input-rich-text-editor/editor";
@@ -52,19 +54,17 @@ export { OptionType, TextType } from "./components/molecules/inputs/mg-input-tex
 export { IconType as IconType1 } from "./components";
 export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 export { IconType as IconType2, SizeType as SizeType1, SlotLabelType } from "./components/molecules/internals/mg-item-more/mg-item-more.conf";
-export { Direction } from "./types";
 export { ItemMoreType, MenuSizeType } from "./components/molecules/menus/mg-menu/mg-menu.conf";
 export { MgMenuStatusType, TargetType } from "./components/molecules/menus/mg-menu-item/mg-menu-item.conf";
 export { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 export { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 export { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-export { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
+export { Placement } from "@popperjs/core";
 export { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 export { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 export { ColumnsType, TableSizeType } from "./components/molecules/mg-table/mg-table.conf";
 export { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 export { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
-export { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export namespace Components {
     interface MgActionMore {
         /**
@@ -443,6 +443,115 @@ export namespace Components {
          */
         "readonly": boolean;
     }
+    interface MgInputCombobox {
+        /**
+          * Define if input is disabled
+         */
+        "disabled": boolean;
+        /**
+          * Display input error if it exists.
+         */
+        "displayError": () => Promise<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 };
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * Add a help text under the input, usually expected data format and example
+         */
+        "helpText"?: string;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         */
+        "identifier": string;
+        /**
+          * Define input invalid state
+         */
+        "invalid": boolean;
+        /**
+          * Define components items
+         */
+        "items": (string | Option)[];
+        /**
+          * Define items label Include short description. Required for accessibility.
+          * @example ``` Countries ```
+         */
+        "itemsLabel": string;
+        /**
+          * Input label
+         */
+        "label": string;
+        /**
+          * Define if label is visible
+         */
+        "labelHide": boolean;
+        /**
+          * Define if label is displayed on top
+         */
+        "labelOnTop": boolean;
+        /**
+          * Define input width
+         */
+        "mgWidth": Width;
+        /**
+          * Input name If not set the value equals the identifier
+         */
+        "name": string;
+        /**
+          * 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 readonly
+         */
+        "readonly": boolean;
+        /**
+          * Define if input is required
+         */
+        "required": boolean;
+        /**
+          * Reset value, validity and error state
+         */
+        "reset": () => 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>;
+        /**
+          * Public method to play input focus
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Add a tooltip message next to the input
+         */
+        "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition": TooltipPosition;
+        /**
+          * Define input valid state
+         */
+        "valid": boolean;
+        /**
+          * Define component value
+         */
+        "value": string | Option;
+    }
     interface MgInputDate {
         /**
           * Define if input is disabled
@@ -1479,7 +1588,7 @@ export namespace Components {
         /**
           * Popover placement
          */
-        "placement": PopoverPlacementType;
+        "placement": Placement;
     }
     interface MgPopoverContent {
         /**
@@ -1585,7 +1694,7 @@ export namespace Components {
         /**
           * Tooltip placement
          */
-        "placement": TooltipPlacementType;
+        "placement": Placement;
     }
     interface MgTooltipContent {
         /**
@@ -1618,6 +1727,10 @@ export interface MgInputCheckboxPaginatedCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgInputCheckboxPaginatedElement;
 }
+export interface MgInputComboboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgInputComboboxElement;
+}
 export interface MgInputDateCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgInputDateElement;
@@ -1844,6 +1957,26 @@ declare global {
         prototype: HTMLMgInputCheckboxPaginatedElement;
         new (): HTMLMgInputCheckboxPaginatedElement;
     };
+    interface HTMLMgInputComboboxElementEventMap {
+        "value-change": HTMLMgInputComboboxElement['value'];
+        "filter-change": string;
+        "load-more": void;
+        "input-valid": HTMLMgInputComboboxElement['valid'];
+    }
+    interface HTMLMgInputComboboxElement extends Components.MgInputCombobox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLMgInputComboboxElementEventMap>(type: K, listener: (this: HTMLMgInputComboboxElement, ev: MgInputComboboxCustomEvent<HTMLMgInputComboboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLMgInputComboboxElementEventMap>(type: K, listener: (this: HTMLMgInputComboboxElement, ev: MgInputComboboxCustomEvent<HTMLMgInputComboboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLMgInputComboboxElement: {
+        prototype: HTMLMgInputComboboxElement;
+        new (): HTMLMgInputComboboxElement;
+    };
     interface HTMLMgInputDateElementEventMap {
         "value-change": HTMLMgInputDateElement['value'];
         "input-valid": HTMLMgInputDateElement['valid'];
@@ -2222,6 +2355,7 @@ declare global {
         "mg-input": HTMLMgInputElement;
         "mg-input-checkbox": HTMLMgInputCheckboxElement;
         "mg-input-checkbox-paginated": HTMLMgInputCheckboxPaginatedElement;
+        "mg-input-combobox": HTMLMgInputComboboxElement;
         "mg-input-date": HTMLMgInputDateElement;
         "mg-input-numeric": HTMLMgInputNumericElement;
         "mg-input-password": HTMLMgInputPasswordElement;
@@ -2647,6 +2781,113 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
     }
+    interface MgInputCombobox {
+        /**
+          * Define if input is disabled
+         */
+        "disabled"?: boolean;
+        /**
+          * 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 };
+        /**
+          * 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;
+        /**
+          * 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;
+        /**
+          * Add a help text under the input, usually expected data format and example
+         */
+        "helpText"?: string;
+        /**
+          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         */
+        "identifier": string;
+        /**
+          * Define input invalid state
+         */
+        "invalid"?: boolean;
+        /**
+          * Define components items
+         */
+        "items"?: (string | Option)[];
+        /**
+          * Define items label Include short description. Required for accessibility.
+          * @example ``` Countries ```
+         */
+        "itemsLabel": string;
+        /**
+          * Input label
+         */
+        "label": string;
+        /**
+          * Define if label is visible
+         */
+        "labelHide"?: boolean;
+        /**
+          * Define if label is displayed on top
+         */
+        "labelOnTop"?: boolean;
+        /**
+          * Define input width
+         */
+        "mgWidth"?: Width;
+        /**
+          * Input name If not set the value equals the identifier
+         */
+        "name"?: string;
+        /**
+          * Emited event when filter change
+         */
+        "onFilter-change"?: (event: MgInputComboboxCustomEvent<string>) => void;
+        /**
+          * Emited event when checking validity
+         */
+        "onInput-valid"?: (event: MgInputComboboxCustomEvent<HTMLMgInputComboboxElement['valid']>) => void;
+        /**
+          * Emited event when `load-more` is called
+         */
+        "onLoad-more"?: (event: MgInputComboboxCustomEvent<void>) => void;
+        /**
+          * Emited event when value change
+         */
+        "onValue-change"?: (event: MgInputComboboxCustomEvent<HTMLMgInputComboboxElement['value']>) => void;
+        /**
+          * 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 readonly
+         */
+        "readonly"?: boolean;
+        /**
+          * Define if input is required
+         */
+        "required"?: boolean;
+        /**
+          * Add a tooltip message next to the input
+         */
+        "tooltip"?: string;
+        /**
+          * Define tooltip position
+         */
+        "tooltipPosition"?: TooltipPosition;
+        /**
+          * Define input valid state
+         */
+        "valid"?: boolean;
+        /**
+          * Define component value
+         */
+        "value"?: string | Option;
+    }
     interface MgInputDate {
         /**
           * Define if input is disabled
@@ -3659,7 +3900,7 @@ declare namespace LocalJSX {
         /**
           * Popover placement
          */
-        "placement"?: PopoverPlacementType;
+        "placement"?: Placement;
     }
     interface MgPopoverContent {
         /**
@@ -3777,7 +4018,7 @@ declare namespace LocalJSX {
         /**
           * Tooltip placement
          */
-        "placement"?: TooltipPlacementType;
+        "placement"?: Placement;
     }
     interface MgTooltipContent {
         /**
@@ -3800,6 +4041,7 @@ declare namespace LocalJSX {
         "mg-input": MgInput;
         "mg-input-checkbox": MgInputCheckbox;
         "mg-input-checkbox-paginated": MgInputCheckboxPaginated;
+        "mg-input-combobox": MgInputCombobox;
         "mg-input-date": MgInputDate;
         "mg-input-numeric": MgInputNumeric;
         "mg-input-password": MgInputPassword;
@@ -3850,6 +4092,7 @@ declare module "@stencil/core" {
              * Internal component use to manage sections instances
              */
             "mg-input-checkbox-paginated": LocalJSX.MgInputCheckboxPaginated & JSXBase.HTMLAttributes<HTMLMgInputCheckboxPaginatedElement>;
+            "mg-input-combobox": LocalJSX.MgInputCombobox & JSXBase.HTMLAttributes<HTMLMgInputComboboxElement>;
             "mg-input-date": LocalJSX.MgInputDate & JSXBase.HTMLAttributes<HTMLMgInputDateElement>;
             "mg-input-numeric": LocalJSX.MgInputNumeric & JSXBase.HTMLAttributes<HTMLMgInputNumericElement>;
             "mg-input-password": LocalJSX.MgInputPassword & JSXBase.HTMLAttributes<HTMLMgInputPasswordElement>;

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

@@ -0,0 +1,4 @@
+/**
+ * Keyboard keys
+ */
+export declare const Keys: Record<string, KeyboardEvent['key']>;