@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -1,85 +1,118 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcButtonSizes, IcButtonTypes, IcButtonVariants, IcButtonTooltipPlacement } from "./ic-button.types";
-import { IcThemeForeground } from "../../utils/types";
+import { IcButtonTypes, IcButtonVariants, IcButtonTooltipPlacement } from "./ic-button.types";
+import { IcThemeForeground, IcSizes } from "../../utils/types";
 /**
- * @slot icon - Content will be placed to the left of the button label.
+ * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.
+ * @slot left-icon - Content will be placed to the left of the button label.
+ * @slot right-icon - Content will be placed to the right of the button label.
  */
 export declare class Button {
+  private buttonEl;
+  private buttonIdNum;
+  private hasTooltip;
+  private id;
+  private inheritedAttributes;
+  private tooltipEl;
+  private describedByEl;
+  private describedById;
+  private mutationObserver;
   el: HTMLIcButtonElement;
+  describedByContent: string;
+  /**
+   * The appearance of the button, e.g. dark, light, or the default.
+   */
+  appearance?: IcThemeForeground;
   /**
    * If `true`, the button will be in disabled state.
    */
   disabled?: boolean;
   /**
-   * If `true`, the button will be in loading state.
+   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
    */
-  loading?: boolean;
+  disableTooltip?: boolean;
   /**
-   * The type of the button.
+   * If `true`, the user can save the linked URL instead of navigating to it.
    */
-  type?: IcButtonTypes;
+  download?: string | boolean;
   /**
-   * The URL that the link points to. This will render the button as an "a" tag.
+   * The <form> element to associate the button with.
    */
-  href?: string;
+  form?: string;
   /**
-   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   * 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.
    */
-  target?: string;
+  formaction?: string;
   /**
-   * The relationship of the linked URL as space-separated link types.
+   * The way the submitted form data is encoded.
    */
-  rel?: string;
+  formenctype?: string;
   /**
-   * If `true`, the user can save the linked URL instead of navigating to it.
+   * The HTTP method used to submit the form.
    */
-  download?: string | boolean;
+  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.
+   */
+  fullWidth?: boolean;
+  /**
+   * The URL that the link points to. This will render the button as an "a" tag.
+   */
+  href?: string;
   /**
    * The human language of the linked URL.
    */
   hreflang?: string;
+  /**
+   * If `true`, the button will be in loading state.
+   */
+  loading?: boolean;
   /**
    * How much of the referrer to send when following the link.
    */
   referrerpolicy?: ReferrerPolicy;
   /**
-   * The variant of the button to be displayed.
+   * The relationship of the linked URL as space-separated link types.
    */
-  variant?: IcButtonVariants;
+  rel?: string;
   /**
    * The size of the button to be displayed.
    */
-  size?: IcButtonSizes;
+  size?: IcSizes;
   /**
-   * If `true`, the button will fill the width of the container.
-   */
-  fullWidth?: boolean;
-  /**
-   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
-  disableTooltip?: boolean;
+  target?: string;
   /**
    * The position of the tooltip in relation to the button.
    */
   tooltipPlacement?: IcButtonTooltipPlacement;
   /**
-   * The appearance of the button, e.g. dark, light, or the default.
+   * The type of the button.
    */
-  appearance?: IcThemeForeground;
+  type?: IcButtonTypes;
   /**
-   * Emitted when button has focus
+   * The variant of the button to be displayed.
    */
-  icFocus: EventEmitter<void>;
+  variant?: IcButtonVariants;
   /**
    * Emitted when button has blur
    */
   icBlur: EventEmitter<void>;
-  private inheritedAttributes;
-  private buttonEl;
-  private hasTooltip;
-  private buttonIdNum;
-  private tooltipEl;
-  private id;
+  /**
+   * Emitted when button has focus
+   */
+  icFocus: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   handleHostClick(event: Event): void;
   themeChangeHandler(ev: CustomEvent): void;
   /**
@@ -91,12 +124,13 @@ export declare class Button {
    */
   updateAriaLabel(newValue: string): Promise<void>;
   private hasIconSlot;
+  private hasLeftIconSlot;
+  private hasRightIconSlot;
   private handleHiddenFormButtonClick;
   private handleClick;
   private onFocus;
   private onBlur;
   private updateTheme;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
+  private mutationCallback;
   render(): any;
 }

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

@@ -1,4 +1,3 @@
-export declare type IcButtonTypes = "reset" | "submit" | "button";
-export declare type IcButtonVariants = "primary" | "secondary" | "tertiary" | "icon" | "destructive";
-export declare type IcButtonSizes = "default" | "large" | "small";
-export declare type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";
+export type IcButtonTypes = "reset" | "submit" | "button";
+export type IcButtonVariants = "primary" | "secondary" | "tertiary" | "icon" | "destructive";
+export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";

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

@@ -13,71 +13,71 @@ import { IcThemeForeground } from "../../utils/types";
  */
 export declare class Card {
   el: HTMLIcCardElement;
+  appearance?: IcThemeForeground;
+  areaExpanded: boolean;
+  isFocussed: boolean;
+  parentEl: HTMLElement | null;
+  parentIsAnchorTag: boolean;
   /**
    * If `true`, the card will be a clickable variant, instead of static.
    */
   clickable?: boolean;
   /**
-   * The URL that the clickable card link points to. If set, the clickable 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;
-  /**
-   * How much of the referrer to send when following the link.
+   * If `true`, the card will be disabled if it is clickable.
    */
-  referrerpolicy?: ReferrerPolicy;
+  disabled?: boolean;
   /**
-   * The relationship of the linked URL as space-separated link types.
+   *  If `true`, the card will have an expandable area and expansion toggle button.
    */
-  rel?: string;
+  expandable?: boolean;
   /**
-   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   *  If `true`, the card will fill the width of the container.
    */
-  target?: string;
+  fullWidth?: boolean;
   /**
    * The heading for the card.
    */
   heading: string;
   /**
-   * The subheading for the card.
+   * The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.
    */
-  subheading?: string;
+  href?: string | undefined;
+  /**
+   * The human language of the linked URL.
+   */
+  hreflang?: string;
   /**
    * The main body message of the card.
    */
   message?: string;
   /**
-   * If `true`, the card will be disabled if it is clickable.
+   * How much of the referrer to send when following the link.
    */
-  disabled?: boolean;
+  referrerpolicy?: ReferrerPolicy;
   /**
-   *  If `true`, the card will fill the width of the container.
+   * The relationship of the linked URL as space-separated link types.
    */
-  fullWidth?: boolean;
+  rel?: string;
   /**
-   *  If `true`, the card will have an expandable area and expansion toggle button.
+   * The subheading for the card.
    */
-  expandable?: boolean;
-  parentIsAnchorTag: boolean;
-  isFocussed: boolean;
-  parentEl: HTMLElement | null;
-  appearance?: IcThemeForeground;
-  areaExpanded: boolean;
+  subheading?: string;
   /**
-   * Sets focus on the card.
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
-  setFocus(): Promise<void>;
+  target?: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   handleHostClick(event: Event): void;
   themeChangeHandler(ev: CustomEvent): void;
+  /**
+   * Sets focus on the card.
+   */
+  setFocus(): Promise<void>;
   private parentFocussed;
   private parentBlurred;
   private updateTheme;
   private toggleExpanded;
-  componentWillLoad(): void;
-  disconnectedCallback(): void;
-  componentDidLoad(): void;
   render(): any;
 }

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

@@ -1,44 +1,54 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAdditionalFieldTypes } from "../../utils/types";
+import { IcAdditionalFieldTypes, IcSizes } from "../../utils/types";
 export declare class Checkbox {
+  private additionalFieldContainer;
+  private IC_TEXT_FIELD;
+  host: HTMLIcCheckboxElement;
+  /**
+   * The style of additionalField that will be displayed if used.
+   */
+  additionalFieldDisplay: IcAdditionalFieldTypes;
   /**
    * If `true`, the checkbox will be set to the checked state.
    */
   checked?: boolean;
+  initiallyChecked: boolean;
   /**
    * If `true`, the checkbox will be set to the disabled state.
    */
   disabled?: boolean;
   /**
-   * The label for the checkbox.
+   * The text to be displayed when dynamic.
    */
-  label: string;
+  dynamicText: string;
   /**
-   * The value for the checkbox.
+   * The group label for the checkbox.
    */
-  value: string;
+  groupLabel: string;
   /**
-   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
+   * If `true`, the indeterminate state will be displayed when checked.
    */
-  name: string;
+  indeterminate: boolean;
   /**
-   * The group label for the checkbox.
+   * The label for the checkbox.
    */
-  groupLabel: string;
+  label: string;
   /**
-   * The text to be displayed when dynamic.
+   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
    */
-  dynamicText: string;
+  name: string;
   /**
-   * The style of additionalField that will be displayed if used.
+   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
    */
-  additionalFieldDisplay: IcAdditionalFieldTypes;
+  size?: IcSizes;
   /**
-   * If `true`, the indeterminate state will be displayed when checked.
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
-  indeterminate: boolean;
-  initiallyChecked: boolean;
-  host: HTMLIcCheckboxElement;
+  small?: boolean;
+  /**
+   * The value for the checkbox.
+   */
+  value: string;
   /**
    * @deprecated This event should not be used anymore. Use icCheck instead.
    */
@@ -47,16 +57,16 @@ export declare class Checkbox {
    * Emitted when a checkbox has been checked.
    */
   icCheck: EventEmitter<void>;
-  private additionalFieldContainer;
-  private handleClick;
-  private handleFormReset;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
   /**
    * Sets focus on the checkbox.
    */
   setFocus(): Promise<void>;
-  componentDidRender(): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
+  private eventHandler;
+  private handleClick;
+  private handleFormReset;
   render(): any;
 }

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

@@ -1,8 +1,20 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-checkbox-group.types";
 export declare class CheckboxGroup {
   host: HTMLIcCheckboxGroupElement;
+  /**
+   * If `true`, the checkbox group will be set to the disabled state.
+   */
+  disabled: boolean;
+  /**
+   * The helper text that will be displayed for additional field guidance.
+   */
+  helperText: string;
+  /**
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+   */
+  hideLabel: boolean;
   /**
    * The label for the checkbox group to be displayed.
    */
@@ -16,19 +28,11 @@ export declare class CheckboxGroup {
    */
   required: boolean;
   /**
-   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
-   */
-  hideLabel: boolean;
-  /**
-   * If `true`, the checkbox group will be set to the disabled state.
+   * The size of the checkboxes to be displayed. This does not affect the font size of the label.
    */
-  disabled: boolean;
-  /**
-   * The helper text that will be displayed for additional field guidance.
-   */
-  helperText: string;
+  size?: IcSizes;
   /**
-   * If `true`, the small styling will be applied to the checkbox group.
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
    */
   small: boolean;
   /**
@@ -43,9 +47,8 @@ export declare class CheckboxGroup {
    * Emitted when a checkbox is checked.
    */
   icChange: EventEmitter<IcChangeEventDetail>;
-  private checkboxOptions;
-  checkedOptions: string[];
-  selectHandler(): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
+  selectHandler(ev: CustomEvent): void;
   render(): any;
 }

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

@@ -1,3 +1,8 @@
 export interface IcChangeEventDetail {
   value: string[];
+  checkedOptions: {
+    checkbox: HTMLIcCheckboxElement;
+    textFieldValue?: string;
+  }[];
+  selectedOption: HTMLIcCheckboxElement;
 }

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

@@ -1,33 +1,33 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcChipAppearance, IcChipSizes } from "./ic-chip.types";
+import { IcChipAppearance } from "./ic-chip.types";
+import { IcSizes } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered at the start of the chip.
  */
 export declare class Chip {
   el: HTMLIcChipElement;
-  /**
-   * The text rendered within the chip.
-   */
-  label: string;
+  isHovered: boolean;
+  visible: boolean;
   /**
    * The emphasis of the chip.
    */
   appearance?: IcChipAppearance;
   /**
-   * The size of the chip.
+   * If `true`, the chip will appear disabled.
    */
-  size?: IcChipSizes;
+  disabled?: boolean;
   /**
    * If `true`, the chip will have a close button at the end to dismiss it.
    */
   dismissible?: boolean;
   /**
-   * If `true`, the chip will appear disabled.
+   * The text rendered within the chip.
    */
-  disabled?: boolean;
-  visible: boolean;
-  isHovered: boolean;
-  handleClick(): void;
+  label: string;
+  /**
+   * The size of the chip.
+   */
+  size?: IcSizes;
   /**
    * @deprecated This event should not be used anymore. Use icDismiss instead.
    */
@@ -36,13 +36,15 @@ export declare class Chip {
    * Is emitted when the user dismisses the chip.
    */
   icDismiss: EventEmitter<void>;
-  private dismissAction;
-  private mouseEnterHandler;
-  private mouseLeaveHandler;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleClick(): void;
   /**
    * Sets focus on the chip.
    */
   setFocus(): Promise<void>;
-  componentDidLoad(): void;
+  private dismissAction;
+  private mouseEnterHandler;
+  private mouseLeaveHandler;
   render(): any;
 }

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

@@ -1,2 +1 @@
-export declare type IcChipSizes = "default" | "large" | "small";
-export declare type IcChipAppearance = "filled" | "outline";
+export type IcChipAppearance = "filled" | "outline";

package/dist/types/components/ic-classification-banner/ic-classification-banner.types.d.ts

@@ -1 +1 @@
-export declare type IcProtectiveMarkings = "default" | "official" | "official-sensitive" | "secret" | "top-secret";
+export type IcProtectiveMarkings = "default" | "official" | "official-sensitive" | "secret" | "top-secret";

package/dist/types/components/ic-data-row/ic-data-row.d.ts

@@ -4,28 +4,34 @@
  * @slot end-component - Content will be displayed in the rightmost cell.
  */
 export declare class DataRow {
+  private hasEndComponent;
+  private resizeObserver;
   el: HTMLIcDataRowElement;
+  deviceSize: number;
+  entitySize: "xl" | "m" | "xs";
   /**
    * The label in the leftmost cell of the row.
    */
   label: string;
-  /**
-   * The value of the middle (right if no end-component supplied) cell of the row.
-   */
-  value: string;
   /**
    * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.
    */
   small: boolean;
-  deviceSize: number;
-  entitySize: "xl" | "m" | "xs";
-  private resizeObserver;
-  private hasEndComponent;
+  /**
+   * The value of the middle (right if no end-component supplied) cell of the row.
+   */
+  value: string;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   private runResizeObserver;
   private checkLabelAbove;
+  /**
+   * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
+   * @param label string - label of value
+   * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
+   */
+  private renderLabel;
   private labelEndComponent;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }