@mgdis/mg-components 6.9.0 → 6.10.0

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,7 +24,6 @@ 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";
@@ -44,6 +45,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,7 +55,6 @@ 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";
@@ -443,6 +445,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
@@ -1618,6 +1729,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 +1959,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 +2357,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 +2783,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
@@ -3800,6 +4043,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 +4094,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']>;

package/dist/types/utils/floating-ui.utils.d.ts

@@ -11,10 +11,18 @@ export declare const placements: readonly ["top", "right", "bottom", "left", "au
  * Define placement type
  */
 export type ExtendedPlacement = Placement | (typeof placements)[number];
+export declare const alignments: readonly ["start", any, "end"];
 /**
  * FloatingUI Placement type guard
  * @param placement - value to check
  * @returns truthy if placement is valid
  */
 export declare const isFloatingUIPlacement: (placement: any) => placement is Placement;
-export declare const alignments: readonly ["start", any, "end"];
+/**
+ * Get translation for tooltip
+ * @param x - x-axis value
+ * @param y - y-axis value
+ * @returns translation string
+ */
+export declare const getTransformation: (x: number, y: number) => string;
+export declare const numberToPx: (number: number) => string;