@ukic/web-components 2.1.0-beta.10 → 2.1.0-beta.12

package/dist/types/components.d.ts

@@ -15,6 +15,7 @@ import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
 import { IcAriaLiveModeVariants } from "./components/ic-input-validation/ic-input-validation.types";
 import { IcLoadingSizes, IcLoadingTypes } from "./components/ic-loading-indicator/ic-loading-indicator.types";
 import { IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcOptionSelectEventDetail } from "./components/ic-menu/ic-menu.types";
+import { IcMenuItemVariants } from "./components/ic-menu-item/ic-menu-item.types";
 import { IcAutocompleteTypes as IcAutocompleteTypes1, IcAutocorrectStates as IcAutocorrectStates1, IcBlurEventDetail, IcInformationStatusOrEmpty as IcInformationStatusOrEmpty1, IcValueEventDetail } from "./interface";
 import { IcSearchBarBlurEventDetail } from "./components/ic-search-bar/ic-search-bar.types";
 import { IcSkeletonVariants } from "./components/ic-skeleton/ic-skeleton.types";
@@ -104,6 +105,30 @@ export namespace Components {
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
         "download"?: string | boolean;
+        /**
+          * The <form> element to associate the button with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.
+         */
+        "formtarget"?: string;
         /**
           * If `true`, the button will fill the width of the container.
          */
@@ -245,6 +270,10 @@ export namespace Components {
           * Sets focus on the checkbox.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * If true, the small styling will be applied to the checkbox.
+         */
+        "small"?: boolean;
         /**
           * The value for the checkbox.
          */
@@ -595,7 +624,7 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * If `true`, the 'open in new tab/window' icon will be displayed.
+          * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target="_blank".
          */
         "showIcon"?: boolean;
         /**
@@ -697,6 +726,58 @@ export namespace Components {
          */
         "value": string;
     }
+    interface IcMenuGroup {
+        /**
+          * The label to display as the title of the menu group.
+         */
+        "label"?: string;
+    }
+    interface IcMenuItem {
+        /**
+          * The description displayed in the menu item, below the label.
+         */
+        "description"?: string;
+        /**
+          * If `true`, the menu item will be in disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * The URL that the link points to. This will render the menu item as an "a" tag.
+         */
+        "href"?: string;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The label describing the keyboard shortcut for a menu item's action.
+         */
+        "keyboardShortcut"?: string;
+        /**
+          * The label to display in the menu item.
+         */
+        "label": string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.
+         */
+        "submenuTriggerFor"?: string;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * The variant of the menu item.
+         */
+        "variant": IcMenuItemVariants;
+    }
     interface IcNavigationButton {
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
@@ -830,6 +911,25 @@ export namespace Components {
          */
         "subheading"?: string;
     }
+    interface IcPopoverMenu {
+        /**
+          * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
+         */
+        "anchor": string;
+        /**
+          * If `true`, the popover menu will be displayed.
+         */
+        "open": boolean;
+        "openFromChild": () => Promise<void>;
+        "openFromParent": () => Promise<void>;
+        "parentLabel"?: string;
+        "parentPopover"?: HTMLIcPopoverMenuElement;
+        /**
+          * The unique identifier for a popover submenu.
+         */
+        "submenuId"?: string;
+        "submenuLevel": number;
+    }
     interface IcRadioGroup {
         /**
           * If `true`, the disabled state will be set.
@@ -1020,7 +1120,7 @@ export namespace Components {
     }
     interface IcSelect {
         /**
-          * The number of characters until suggestions appear for a searchable select.
+          * @deprecated This prop should not be used anymore.
          */
         "charactersUntilSuggestions"?: number;
         /**
@@ -1301,11 +1401,12 @@ export namespace Components {
           * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.
          */
         "selectedTabIndex"?: number;
+        "tabRemovedHandler": (hadFocus?: boolean) => Promise<void>;
     }
     interface IcTabGroup {
         "appearance"?: IcThemeForegroundNoDefault;
         /**
-          * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+          * @deprecated This is no longer required. The context id is passed down from `ic-tab-context`
          */
         "contextId"?: string;
         /**
@@ -1320,7 +1421,7 @@ export namespace Components {
     interface IcTabPanel {
         "appearance"?: IcThemeForegroundNoDefault;
         /**
-          * The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.
+          * @deprecated This is no longer required. The context id is passed down from `ic-tab-context`
          */
         "contextId"?: string;
         "panelId"?: string;
@@ -1381,10 +1482,18 @@ export namespace Components {
           * The label for the input.
          */
         "label": string;
+        /**
+          * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
+         */
+        "max": number;
         /**
           * The maximum number of characters that can be entered in the field.
          */
         "maxLength": number;
+        /**
+          * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
+         */
+        "min": number;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -1575,6 +1684,10 @@ export interface IcMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcMenuElement;
 }
+export interface IcMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcMenuItemElement;
+}
 export interface IcNavigationItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcNavigationItemElement;
@@ -1611,6 +1724,10 @@ export interface IcTabContextCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTabContextElement;
 }
+export interface IcTabPanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcTabPanelElement;
+}
 export interface IcTextFieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTextFieldElement;
@@ -1778,6 +1895,18 @@ declare global {
         prototype: HTMLIcMenuElement;
         new (): HTMLIcMenuElement;
     };
+    interface HTMLIcMenuGroupElement extends Components.IcMenuGroup, HTMLStencilElement {
+    }
+    var HTMLIcMenuGroupElement: {
+        prototype: HTMLIcMenuGroupElement;
+        new (): HTMLIcMenuGroupElement;
+    };
+    interface HTMLIcMenuItemElement extends Components.IcMenuItem, HTMLStencilElement {
+    }
+    var HTMLIcMenuItemElement: {
+        prototype: HTMLIcMenuItemElement;
+        new (): HTMLIcMenuItemElement;
+    };
     interface HTMLIcNavigationButtonElement extends Components.IcNavigationButton, HTMLStencilElement {
     }
     var HTMLIcNavigationButtonElement: {
@@ -1808,6 +1937,12 @@ declare global {
         prototype: HTMLIcPageHeaderElement;
         new (): HTMLIcPageHeaderElement;
     };
+    interface HTMLIcPopoverMenuElement extends Components.IcPopoverMenu, HTMLStencilElement {
+    }
+    var HTMLIcPopoverMenuElement: {
+        prototype: HTMLIcPopoverMenuElement;
+        new (): HTMLIcPopoverMenuElement;
+    };
     interface HTMLIcRadioGroupElement extends Components.IcRadioGroup, HTMLStencilElement {
     }
     var HTMLIcRadioGroupElement: {
@@ -1966,11 +2101,14 @@ declare global {
         "ic-link": HTMLIcLinkElement;
         "ic-loading-indicator": HTMLIcLoadingIndicatorElement;
         "ic-menu": HTMLIcMenuElement;
+        "ic-menu-group": HTMLIcMenuGroupElement;
+        "ic-menu-item": HTMLIcMenuItemElement;
         "ic-navigation-button": HTMLIcNavigationButtonElement;
         "ic-navigation-group": HTMLIcNavigationGroupElement;
         "ic-navigation-item": HTMLIcNavigationItemElement;
         "ic-navigation-menu": HTMLIcNavigationMenuElement;
         "ic-page-header": HTMLIcPageHeaderElement;
+        "ic-popover-menu": HTMLIcPopoverMenuElement;
         "ic-radio-group": HTMLIcRadioGroupElement;
         "ic-radio-option": HTMLIcRadioOptionElement;
         "ic-search-bar": HTMLIcSearchBarElement;
@@ -2077,6 +2215,30 @@ declare namespace LocalJSX {
           * If `true`, the user can save the linked URL instead of navigating to it.
          */
         "download"?: string | boolean;
+        /**
+          * The <form> element to associate the button with.
+         */
+        "form"?: string;
+        /**
+          * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.
+         */
+        "formaction"?: string;
+        /**
+          * The way the submitted form data is encoded.
+         */
+        "formenctype"?: string;
+        /**
+          * The HTTP method used to submit the form.
+         */
+        "formmethod"?: string;
+        /**
+          * If `true`, the form will not be validated when submitted.
+         */
+        "formnovalidate"?: boolean;
+        /**
+          * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.
+         */
+        "formtarget"?: string;
         /**
           * If `true`, the button will fill the width of the container.
          */
@@ -2221,6 +2383,10 @@ declare namespace LocalJSX {
           * Emitted when a checkbox has been checked.
          */
         "onIcCheck"?: (event: IcCheckboxCustomEvent<void>) => void;
+        /**
+          * If true, the small styling will be applied to the checkbox.
+         */
+        "small"?: boolean;
         /**
           * The value for the checkbox.
          */
@@ -2574,7 +2740,7 @@ declare namespace LocalJSX {
          */
         "rel"?: string;
         /**
-          * If `true`, the 'open in new tab/window' icon will be displayed.
+          * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target="_blank".
          */
         "showIcon"?: boolean;
         /**
@@ -2666,6 +2832,58 @@ declare namespace LocalJSX {
          */
         "value": string;
     }
+    interface IcMenuGroup {
+        /**
+          * The label to display as the title of the menu group.
+         */
+        "label"?: string;
+    }
+    interface IcMenuItem {
+        /**
+          * The description displayed in the menu item, below the label.
+         */
+        "description"?: string;
+        /**
+          * If `true`, the menu item will be in disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * The URL that the link points to. This will render the menu item as an "a" tag.
+         */
+        "href"?: string;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The label describing the keyboard shortcut for a menu item's action.
+         */
+        "keyboardShortcut"?: string;
+        /**
+          * The label to display in the menu item.
+         */
+        "label": string;
+        /**
+          * How much of the referrer to send when following the link.
+         */
+        "referrerpolicy"?: ReferrerPolicy;
+        /**
+          * The relationship of the linked URL as space-separated link types.
+         */
+        "rel"?: string;
+        /**
+          * This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default.
+         */
+        "submenuTriggerFor"?: string;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * The variant of the menu item.
+         */
+        "variant"?: IcMenuItemVariants;
+    }
     interface IcNavigationButton {
         /**
           * If `true`, the user can save the linked URL instead of navigating to it.
@@ -2784,6 +3002,20 @@ declare namespace LocalJSX {
          */
         "subheading"?: string;
     }
+    interface IcPopoverMenu {
+        /**
+          * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
+         */
+        "anchor"?: string;
+        /**
+          * If `true`, the popover menu will be displayed.
+         */
+        "open"?: boolean;
+        /**
+          * The unique identifier for a popover submenu.
+         */
+        "submenuId"?: string;
+    }
     interface IcRadioGroup {
         /**
           * If `true`, the disabled state will be set.
@@ -3018,7 +3250,7 @@ declare namespace LocalJSX {
     }
     interface IcSelect {
         /**
-          * The number of characters until suggestions appear for a searchable select.
+          * @deprecated This prop should not be used anymore.
          */
         "charactersUntilSuggestions"?: number;
         /**
@@ -3320,7 +3552,7 @@ declare namespace LocalJSX {
     }
     interface IcTabGroup {
         /**
-          * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+          * @deprecated This is no longer required. The context id is passed down from `ic-tab-context`
          */
         "contextId"?: string;
         /**
@@ -3334,7 +3566,7 @@ declare namespace LocalJSX {
     }
     interface IcTabPanel {
         /**
-          * The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.
+          * @deprecated This is no longer required. The context id is passed down from `ic-tab-context`
          */
         "contextId"?: string;
     }
@@ -3387,10 +3619,18 @@ declare namespace LocalJSX {
           * The label for the input.
          */
         "label": string;
+        /**
+          * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
+         */
+        "max"?: number;
         /**
           * The maximum number of characters that can be entered in the field.
          */
         "maxLength"?: number;
+        /**
+          * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
+         */
+        "min"?: number;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -3586,11 +3826,14 @@ declare namespace LocalJSX {
         "ic-link": IcLink;
         "ic-loading-indicator": IcLoadingIndicator;
         "ic-menu": IcMenu;
+        "ic-menu-group": IcMenuGroup;
+        "ic-menu-item": IcMenuItem;
         "ic-navigation-button": IcNavigationButton;
         "ic-navigation-group": IcNavigationGroup;
         "ic-navigation-item": IcNavigationItem;
         "ic-navigation-menu": IcNavigationMenu;
         "ic-page-header": IcPageHeader;
+        "ic-popover-menu": IcPopoverMenu;
         "ic-radio-group": IcRadioGroup;
         "ic-radio-option": IcRadioOption;
         "ic-search-bar": IcSearchBar;
@@ -3644,11 +3887,14 @@ declare module "@stencil/core" {
             "ic-link": LocalJSX.IcLink & JSXBase.HTMLAttributes<HTMLIcLinkElement>;
             "ic-loading-indicator": LocalJSX.IcLoadingIndicator & JSXBase.HTMLAttributes<HTMLIcLoadingIndicatorElement>;
             "ic-menu": LocalJSX.IcMenu & JSXBase.HTMLAttributes<HTMLIcMenuElement>;
+            "ic-menu-group": LocalJSX.IcMenuGroup & JSXBase.HTMLAttributes<HTMLIcMenuGroupElement>;
+            "ic-menu-item": LocalJSX.IcMenuItem & JSXBase.HTMLAttributes<HTMLIcMenuItemElement>;
             "ic-navigation-button": LocalJSX.IcNavigationButton & JSXBase.HTMLAttributes<HTMLIcNavigationButtonElement>;
             "ic-navigation-group": LocalJSX.IcNavigationGroup & JSXBase.HTMLAttributes<HTMLIcNavigationGroupElement>;
             "ic-navigation-item": LocalJSX.IcNavigationItem & JSXBase.HTMLAttributes<HTMLIcNavigationItemElement>;
             "ic-navigation-menu": LocalJSX.IcNavigationMenu & JSXBase.HTMLAttributes<HTMLIcNavigationMenuElement>;
             "ic-page-header": LocalJSX.IcPageHeader & JSXBase.HTMLAttributes<HTMLIcPageHeaderElement>;
+            "ic-popover-menu": LocalJSX.IcPopoverMenu & JSXBase.HTMLAttributes<HTMLIcPopoverMenuElement>;
             "ic-radio-group": LocalJSX.IcRadioGroup & JSXBase.HTMLAttributes<HTMLIcRadioGroupElement>;
             "ic-radio-option": LocalJSX.IcRadioOption & JSXBase.HTMLAttributes<HTMLIcRadioOptionElement>;
             "ic-search-bar": LocalJSX.IcSearchBar & JSXBase.HTMLAttributes<HTMLIcSearchBarElement>;

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

@@ -35,7 +35,7 @@ export declare type IcNavParentDetails = {
   navType: IcNavType | "";
   parent: HTMLElement;
 };
-export declare type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase";
+export declare type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small";
 export interface IcMenuOption {
   value?: string;
   label: string;