@ukic/web-components 2.4.0 → 2.5.0

package/dist/types/components.d.ts

@@ -6,6 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
@@ -30,6 +31,7 @@ import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-t
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcChipAppearance } from "./components/ic-chip/ic-chip.types";
@@ -54,6 +56,55 @@ export { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-t
 export { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export namespace Components {
+    interface IcAccordion {
+        "appearance"?: IcThemeForeground;
+        /**
+          * If `true`, the accordion will be disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the accordion appears expanded.
+         */
+        "expanded": boolean;
+        /**
+          * The section header outlining section content.
+         */
+        "heading"?: string;
+        /**
+          * The main body message of the accordion.
+         */
+        "message"?: string;
+        /**
+          * Sets focus on accordion heading.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
+    interface IcAccordionGroup {
+        /**
+          * The appearance of the accordion group, e.g dark, or light.
+         */
+        "appearance": IcThemeForeground;
+        /**
+          * If `true`, the accordion will load in an expanded state.
+         */
+        "expanded": boolean;
+        /**
+          * The header for the accordion group.
+         */
+        "groupTitle": string;
+        /**
+          * If `true`, only one accordion will open at a time.
+         */
+        "singleExpansion": boolean;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
     interface IcAlert {
         /**
           * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
@@ -86,6 +137,48 @@ export namespace Components {
          */
         "target": string;
     }
+    interface IcBadge {
+        /**
+          * The accessible label of the badge component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * The custom badge colour. This will only style the badge component if variant="custom". Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+         */
+        "customColor"?: IcColor;
+        /**
+          * Use to hide the badge.
+         */
+        "hideBadge": () => Promise<void>;
+        /**
+          * The maximum number shown on the badge appended with a +. This will only be displayed if type="text" and textLabel is not empty.
+         */
+        "maxNumber"?: number;
+        /**
+          * The positioning of the badge in reference to the parent element.
+         */
+        "position"?: IcBadgePositions;
+        /**
+          * Use to show the badge.
+         */
+        "showBadge": () => Promise<void>;
+        /**
+          * The size of the badge to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The text displayed in the badge. This will only be displayed if type="text".
+         */
+        "textLabel"?: string;
+        /**
+          * The type of badge to be displayed.
+         */
+        "type"?: IcBadgeTypes;
+        /**
+          * The variant of the badge to be displayed.
+         */
+        "variant"?: IcBadgeVariants;
+    }
     interface IcBreadcrumb {
         /**
           * If `true`, aria-current will be set on the breadcrumb.
@@ -1954,6 +2047,10 @@ export namespace Components {
         "variant"?: IcTypographyVariants;
     }
 }
+export interface IcAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcAccordionElement;
+}
 export interface IcAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcAlertElement;
@@ -2055,6 +2152,18 @@ export interface IcTopNavigationCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIcTopNavigationElement;
 }
 declare global {
+    interface HTMLIcAccordionElement extends Components.IcAccordion, HTMLStencilElement {
+    }
+    var HTMLIcAccordionElement: {
+        prototype: HTMLIcAccordionElement;
+        new (): HTMLIcAccordionElement;
+    };
+    interface HTMLIcAccordionGroupElement extends Components.IcAccordionGroup, HTMLStencilElement {
+    }
+    var HTMLIcAccordionGroupElement: {
+        prototype: HTMLIcAccordionGroupElement;
+        new (): HTMLIcAccordionGroupElement;
+    };
     interface HTMLIcAlertElement extends Components.IcAlert, HTMLStencilElement {
     }
     var HTMLIcAlertElement: {
@@ -2067,6 +2176,12 @@ declare global {
         prototype: HTMLIcBackToTopElement;
         new (): HTMLIcBackToTopElement;
     };
+    interface HTMLIcBadgeElement extends Components.IcBadge, HTMLStencilElement {
+    }
+    var HTMLIcBadgeElement: {
+        prototype: HTMLIcBadgeElement;
+        new (): HTMLIcBadgeElement;
+    };
     interface HTMLIcBreadcrumbElement extends Components.IcBreadcrumb, HTMLStencilElement {
     }
     var HTMLIcBreadcrumbElement: {
@@ -2410,8 +2525,11 @@ declare global {
         new (): HTMLIcTypographyElement;
     };
     interface HTMLElementTagNameMap {
+        "ic-accordion": HTMLIcAccordionElement;
+        "ic-accordion-group": HTMLIcAccordionGroupElement;
         "ic-alert": HTMLIcAlertElement;
         "ic-back-to-top": HTMLIcBackToTopElement;
+        "ic-badge": HTMLIcBadgeElement;
         "ic-breadcrumb": HTMLIcBreadcrumbElement;
         "ic-breadcrumb-group": HTMLIcBreadcrumbGroupElement;
         "ic-button": HTMLIcButtonElement;
@@ -2472,6 +2590,50 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface IcAccordion {
+        /**
+          * If `true`, the accordion will be disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the accordion appears expanded.
+         */
+        "expanded"?: boolean;
+        /**
+          * The section header outlining section content.
+         */
+        "heading"?: string;
+        /**
+          * The main body message of the accordion.
+         */
+        "message"?: string;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
+    interface IcAccordionGroup {
+        /**
+          * The appearance of the accordion group, e.g dark, or light.
+         */
+        "appearance"?: IcThemeForeground;
+        /**
+          * If `true`, the accordion will load in an expanded state.
+         */
+        "expanded"?: boolean;
+        /**
+          * The header for the accordion group.
+         */
+        "groupTitle"?: string;
+        /**
+          * If `true`, only one accordion will open at a time.
+         */
+        "singleExpansion"?: boolean;
+        /**
+          * The size of the accordion.
+         */
+        "size"?: IcSizes;
+    }
     interface IcAlert {
         /**
           * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
@@ -2512,6 +2674,40 @@ declare namespace LocalJSX {
          */
         "target": string;
     }
+    interface IcBadge {
+        /**
+          * The accessible label of the badge component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * The custom badge colour. This will only style the badge component if variant="custom". Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+         */
+        "customColor"?: IcColor;
+        /**
+          * The maximum number shown on the badge appended with a +. This will only be displayed if type="text" and textLabel is not empty.
+         */
+        "maxNumber"?: number;
+        /**
+          * The positioning of the badge in reference to the parent element.
+         */
+        "position"?: IcBadgePositions;
+        /**
+          * The size of the badge to be displayed.
+         */
+        "size"?: IcSizes;
+        /**
+          * The text displayed in the badge. This will only be displayed if type="text".
+         */
+        "textLabel"?: string;
+        /**
+          * The type of badge to be displayed.
+         */
+        "type"?: IcBadgeTypes;
+        /**
+          * The variant of the badge to be displayed.
+         */
+        "variant"?: IcBadgeVariants;
+    }
     interface IcBreadcrumb {
         /**
           * If `true`, aria-current will be set on the breadcrumb.
@@ -4415,8 +4611,11 @@ declare namespace LocalJSX {
         "variant"?: IcTypographyVariants;
     }
     interface IntrinsicElements {
+        "ic-accordion": IcAccordion;
+        "ic-accordion-group": IcAccordionGroup;
         "ic-alert": IcAlert;
         "ic-back-to-top": IcBackToTop;
+        "ic-badge": IcBadge;
         "ic-breadcrumb": IcBreadcrumb;
         "ic-breadcrumb-group": IcBreadcrumbGroup;
         "ic-button": IcButton;
@@ -4480,8 +4679,11 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "ic-accordion": LocalJSX.IcAccordion & JSXBase.HTMLAttributes<HTMLIcAccordionElement>;
+            "ic-accordion-group": LocalJSX.IcAccordionGroup & JSXBase.HTMLAttributes<HTMLIcAccordionGroupElement>;
             "ic-alert": LocalJSX.IcAlert & JSXBase.HTMLAttributes<HTMLIcAlertElement>;
             "ic-back-to-top": LocalJSX.IcBackToTop & JSXBase.HTMLAttributes<HTMLIcBackToTopElement>;
+            "ic-badge": LocalJSX.IcBadge & JSXBase.HTMLAttributes<HTMLIcBadgeElement>;
             "ic-breadcrumb": LocalJSX.IcBreadcrumb & JSXBase.HTMLAttributes<HTMLIcBreadcrumbElement>;
             "ic-breadcrumb-group": LocalJSX.IcBreadcrumbGroup & JSXBase.HTMLAttributes<HTMLIcBreadcrumbGroupElement>;
             "ic-button": LocalJSX.IcButton & JSXBase.HTMLAttributes<HTMLIcButtonElement>;

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

@@ -5,6 +5,7 @@ export declare enum IcInformationStatus {
   Error = "error",
   Success = "success"
 }
+export type IcSizes = "default" | "large" | "small";
 export type IcInformationStatusOrEmpty = "warning" | "error" | "success" | "";
 export type IcNavType = "side" | "top" | "page-header";
 export type IcAutocompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
@@ -35,7 +36,7 @@ export type IcNavParentDetails = {
   navType: IcNavType | "";
   parent: HTMLElement;
 };
-export 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 type IcTypographyVariants = "h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small" | "badge" | "badge-small";
 /**
  * @interface IcMenuOption
  * @field {string} A label field to options. Defaults to "label", but can have any custom name.
@@ -64,7 +65,6 @@ export type IcPropObject = {
 };
 export type IcRelatedTarget = EventTarget | undefined;
 export type IcOrientation = "horizontal" | "vertical";
-export type IcSizes = "default" | "large" | "small";
 export interface IcValueEventDetail {
   value: string;
   keyPressed?: string;