@ukic/web-components 3.19.0 → 3.21.0

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAriaLive, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValidationAriaLive, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAriaLive, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcCardDensity, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValidationAriaLive, IcValueEventDetail } from "./utils/types";
 import { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcBackToTopPositions, IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
@@ -35,7 +35,7 @@ import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-t
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldKeydownEventDetail, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAriaLive, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValidationAriaLive, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAriaLive, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcButtonTooltipPlacement, IcCardDensity, IcColor, IcDeviceSizes, IcEmphasisType, IcIconPlacementOptions, IcInformationStatusOrEmpty, IcMenuOption, IcMultiValueEventDetail, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcThemeMode, IcThemeSettings, IcTypographyVariants, IcValidationAriaLive, IcValueEventDetail } from "./utils/types";
 export { IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcBackToTopPositions, IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
@@ -481,6 +481,64 @@ export namespace Components {
          */
         "variant": IcButtonVariants;
     }
+    interface IcCardHorizontal {
+        /**
+          * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        "clickable": boolean;
+        /**
+          * The padding of the horizontal card.
+         */
+        "density": IcCardDensity;
+        /**
+          * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        "disabled": boolean;
+        /**
+          * The heading for the horizontal card. This is required, unless a slotted heading is used.
+         */
+        "heading"?: string;
+        /**
+          * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an "a" tag, otherwise it will render as a button.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The main body message of the horizontal card.
+         */
+        "message"?: 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;
+        /**
+          * Sets focus on the card.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * The size of the horizontal card.
+         */
+        "size": IcSizes;
+        /**
+          * The subheading for the card.
+         */
+        "subheading"?: string;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+    }
     interface IcCardVertical {
         /**
           * If `true`, the card will be a clickable variant, instead of static.
@@ -2960,6 +3018,12 @@ declare global {
         prototype: HTMLIcButtonElement;
         new (): HTMLIcButtonElement;
     };
+    interface HTMLIcCardHorizontalElement extends Components.IcCardHorizontal, HTMLStencilElement {
+    }
+    var HTMLIcCardHorizontalElement: {
+        prototype: HTMLIcCardHorizontalElement;
+        new (): HTMLIcCardHorizontalElement;
+    };
     interface HTMLIcCardVerticalElement extends Components.IcCardVertical, HTMLStencilElement {
     }
     var HTMLIcCardVerticalElement: {
@@ -3703,6 +3767,7 @@ declare global {
         "ic-breadcrumb": HTMLIcBreadcrumbElement;
         "ic-breadcrumb-group": HTMLIcBreadcrumbGroupElement;
         "ic-button": HTMLIcButtonElement;
+        "ic-card-horizontal": HTMLIcCardHorizontalElement;
         "ic-card-vertical": HTMLIcCardVerticalElement;
         "ic-checkbox": HTMLIcCheckboxElement;
         "ic-checkbox-group": HTMLIcCheckboxGroupElement;
@@ -4171,6 +4236,60 @@ declare namespace LocalJSX {
          */
         "variant"?: IcButtonVariants;
     }
+    interface IcCardHorizontal {
+        /**
+          * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        "clickable"?: boolean;
+        /**
+          * The padding of the horizontal card.
+         */
+        "density"?: IcCardDensity;
+        /**
+          * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        "disabled"?: boolean;
+        /**
+          * The heading for the horizontal card. This is required, unless a slotted heading is used.
+         */
+        "heading"?: string;
+        /**
+          * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an "a" tag, otherwise it will render as a button.
+         */
+        "href"?: string | undefined;
+        /**
+          * The human language of the linked URL.
+         */
+        "hreflang"?: string;
+        /**
+          * The main body message of the horizontal card.
+         */
+        "message"?: 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;
+        /**
+          * The size of the horizontal card.
+         */
+        "size"?: IcSizes;
+        /**
+          * The subheading for the card.
+         */
+        "subheading"?: string;
+        /**
+          * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+         */
+        "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
+    }
     interface IcCardVertical {
         /**
           * If `true`, the card will be a clickable variant, instead of static.
@@ -6475,6 +6594,7 @@ declare namespace LocalJSX {
         "ic-breadcrumb": IcBreadcrumb;
         "ic-breadcrumb-group": IcBreadcrumbGroup;
         "ic-button": IcButton;
+        "ic-card-horizontal": IcCardHorizontal;
         "ic-card-vertical": IcCardVertical;
         "ic-checkbox": IcCheckbox;
         "ic-checkbox-group": IcCheckboxGroup;
@@ -6549,6 +6669,7 @@ declare module "@stencil/core" {
             "ic-breadcrumb": LocalJSX.IcBreadcrumb & JSXBase.HTMLAttributes<HTMLIcBreadcrumbElement>;
             "ic-breadcrumb-group": LocalJSX.IcBreadcrumbGroup & JSXBase.HTMLAttributes<HTMLIcBreadcrumbGroupElement>;
             "ic-button": LocalJSX.IcButton & JSXBase.HTMLAttributes<HTMLIcButtonElement>;
+            "ic-card-horizontal": LocalJSX.IcCardHorizontal & JSXBase.HTMLAttributes<HTMLIcCardHorizontalElement>;
             "ic-card-vertical": LocalJSX.IcCardVertical & JSXBase.HTMLAttributes<HTMLIcCardVerticalElement>;
             "ic-checkbox": LocalJSX.IcCheckbox & JSXBase.HTMLAttributes<HTMLIcCheckboxElement>;
             "ic-checkbox-group": LocalJSX.IcCheckboxGroup & JSXBase.HTMLAttributes<HTMLIcCheckboxGroupElement>;

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

@@ -42,3 +42,9 @@ export declare const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;
 export declare const WHITE_MAX_COLOR_BRIGHTNESS = 130;
 export declare const IGNORED_KEYBOARD_CHARACTERS: string[];
 export declare const IC_CUSTOM_ALLOWED_COMPONENTS: string[];
+export declare const IC_ACCORDION = "IC-ACCORDION";
+export declare const IC_ACCORDION_GROUP = "IC-ACCORDION-GROUP";
+export declare const IC_CHECKBOX = "IC-CHECKBOX";
+export declare const IC_SEARCH_BAR = "IC-SEARCH-BAR";
+export declare const IC_TAB_CONTEXT = "IC-TAB-CONTEXT";
+export declare const IC_TEXT_FIELD = "IC-TEXT-FIELD";

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcBrandForegroundNoDefault, IcThemeMode } from "./types";
-import { IcMenuOption, IcBrandForeground } from "../utils/types";
+import { IcBrandForeground, IcBrandForegroundNoDefault, IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcMenuOption, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcThemeMode } from "./types";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -165,3 +164,71 @@ export declare const hasDynamicChildSlots: (mutationList: MutationRecord[], slot
 export declare const renderDynamicChildSlots: (mutationList: MutationRecord[], slotNames: string | string[], ref: any) => void;
 export declare const getElementInheritedTheme: (el: HTMLElement) => IcThemeMode;
 export declare const isSafari: boolean;
+/**
+ * Focuses the provided element, or the next focusable element if it should be skipped. Used for focus trapping.
+ * @param focusAttemptCount - number of focus attempts that have been made
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ * @param shiftKey - whether the shift key is pressed
+ */
+export declare const focusElement: (focusAttemptCount: number, focusedElementIndex: number, interactiveElementList: HTMLElement[], shiftKey?: boolean) => {
+    newFocusAttemptCount: number;
+    newFocusedElementIndex: number;
+} | undefined;
+/**
+ * Gets the index of the currently focused element. Used for focus trapping.
+ * @param el - host element of the component
+ * @param interactiveElementList - list of interactive elements
+ */
+export declare const getFocusedElementIndex: (el: HTMLElement, interactiveElementList: HTMLElement[]) => number | null;
+/**
+ * Gets the next focusable element index based on whether the shift key is pressed. Used for focus trapping.
+ * @param focusedElementIndex - current focused element index
+ * @param shiftKey - whether the shift key is pressed
+ */
+export declare const getFocusIndexBasedOnShiftKey: (focusedElementIndex: number, shiftKey: boolean) => number;
+/**
+ * Gets the next focusable element index, looping back to the start or end if necessary. Used for focus trapping.
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ */
+export declare const getLoopedNextFocusIndexIfLastElement: (focusedElementIndex: number, interactiveElementList: HTMLElement[]) => number;
+/**
+ * Handles tab key press for focus trapping.
+ * @param el - host element of the component
+ * @param focusAttemptCount - number of focus attempts that have been made
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ * @param shiftKey - whether the shift key is pressed
+ */
+export declare function handleFocusTrapTabKeyPress(el: HTMLElement, focusAttemptCount: number, focusedElementIndex: number, interactiveElementList: HTMLElement[], shiftKey: boolean): {
+    newFocusAttemptCount: number;
+    newFocusedElementIndex: number;
+    preventDefault: boolean;
+};
+/**
+ * Sets up listener and mutation observer to refresh interactive elements on slot changes. Used for focus trapping.
+ * @param contentWrapper - content wrapper element
+ * @param getInteractiveElements - function to get interactive elements
+ */
+export declare const refreshInteractiveElementsOnSlotChange: (contentWrapper: HTMLElement | null, getInteractiveElements: () => void) => {
+    contentAreaSlot: HTMLSlotElement | null;
+    contentAreaMutationObserver: MutationObserver | null;
+};
+/**
+ * Removes listener and disconnects mutation observer for slot changes. Used for focus trapping.
+ * @param contentAreaSlotMutationObserver - mutation observer for content area slot
+ * @param contentAreaSlot - content area slot element
+ * @param getInteractiveElements - function to get interactive elements
+ */
+export declare const removeInteractiveElementSlotChangeListener: (contentAreaSlot: HTMLSlotElement | null | undefined, contentAreaSlotMutationObserver: MutationObserver | null, getInteractiveElements: () => void) => void;
+/**
+ * Determines whether an element should be skipped when focusing interactive elements. Used for focus trapping.
+ * @param element - element to check
+ */
+export declare const shouldSkipElement: (element: HTMLElement) => boolean;
+/**
+ * Gets all interactive elements slotted within a component. Used for focus trapping.
+ * @param el - host element of the component
+ */
+export declare const slottedInteractiveElements: (el: HTMLElement) => HTMLElement[];

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

@@ -95,4 +95,6 @@ export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
 export type IcThemeSettings = "dark" | "light" | "system";
 export type IcAriaLive = "polite" | "assertive" | "off";
 export type IcValidationAriaLive = "default" | "polite" | "assertive" | "off";
+export type IcPosition = "top" | "right" | "bottom" | "left";
+export type IcCardDensity = "default" | "spacious";
 export {};