@ukic/web-components 3.20.0 → 3.21.0

package/dist/types/components/ic-card-horizontal/ic-card-horizontal.d.ts

@@ -0,0 +1,89 @@
+import { IcBrand, IcBrandForeground, IcCardDensity, IcSizes, IcThemeMode } from "../../utils/types";
+/**
+ * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.
+ * @slot message - Content will be placed in the main body of the horizontal card.
+ * @slot subheading - Content will be placed below the card heading. Only for `density="spacious"`.
+ * @slot adornment - Content will be placed below the card subheading. Only for `density="spacious"`.
+ * @slot image-left - Content will be placed to the left of all other content.
+ * @slot image-right - Content will be placed to the right of all other content.
+ * @slot icon - Content will be placed to the left of the horizontal card heading.
+ * @slot interaction-button - Content will be placed in the top right corner of the heading section.
+ * @slot badge - Badge component overlaying the top right of the horizontal card.
+ */
+export declare class CardHorizontal {
+    private hostMutationObserver;
+    private IMAGE_LEFT;
+    private IMAGE_RIGHT;
+    private INTERACTION_BUTTON;
+    el: HTMLIcCardHorizontalElement;
+    appearance?: IcBrandForeground;
+    isFocussed: boolean;
+    parentEl: HTMLElement | null;
+    parentIsAnchorTag: boolean;
+    /**
+     * 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;
+    watchDisabledHandler(): void;
+    /**
+     * 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;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleHostClick(event: Event): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
+    /**
+     * Sets focus on the card.
+     */
+    setFocus(): Promise<void>;
+    private parentFocussed;
+    private parentBlurred;
+    private updateTheme;
+    render(): any;
+}

package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts

@@ -3,6 +3,7 @@ import { IcAriaLive, IcInformationStatusOrEmpty, IcSizes, IcThemeMode } from "..
 import { IcChangeEventDetail } from "./ic-checkbox-group.types";
 /**
  * @slot helper-text - Content is set as the helper text for the checkbox group.
+ * @slot label - Content is placed as the label text.
  */
 export declare class CheckboxGroup {
     private checkboxes;

package/dist/types/components/ic-divider/ic-divider.d.ts

@@ -1,6 +1,7 @@
 import { IcBrand, IcOrientation, IcBrandForeground, IcThemeMode } from "../../utils/types";
 import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./ic-divider.types";
 export declare class Divider {
+    private isSlottedInSideNav;
     el: HTMLIcDividerElement;
     foregroundColor: IcBrandForeground;
     /**
@@ -30,6 +31,7 @@ export declare class Divider {
      */
     weight?: IcDividerWeights;
     brandChangeHandler(ev: CustomEvent<IcBrand>): void;
+    private getHostAttributes;
     private updateMonochromeState;
     componentWillRender(): void;
     render(): any;

package/dist/types/components/ic-input-label/ic-input-label.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @slot label - Content is placed as the label text.
+ */
 export declare class InputLabel {
     el: HTMLIcInputLabelElement;
     /**
@@ -37,6 +40,6 @@ export declare class InputLabel {
      */
     useLabelTag: boolean;
     componentDidLoad(): void;
-    private isHelperTextSlotUsed;
+    private isSlotUsed;
     render(): any;
 }

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/types.d.ts

@@ -96,4 +96,5 @@ 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 {};