@ukic/web-components 2.1.0-beta.8 → 2.2.0

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

@@ -5,81 +5,112 @@ import { IcThemeForeground } from "../../utils/types";
  * @slot icon - Content will be placed to the left 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;
   /**
-   * 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;
   /**
@@ -96,7 +127,6 @@ export declare class Button {
   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,4 @@
-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 IcButtonSizes = "default" | "large" | "small";
+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,50 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcAdditionalFieldTypes } 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.
+   * If true, the small styling will be applied to the checkbox.
    */
-  additionalFieldDisplay: IcAdditionalFieldTypes;
+  small?: boolean;
   /**
-   * If `true`, the indeterminate state will be displayed when checked.
+   * The value for the checkbox.
    */
-  indeterminate: boolean;
-  initiallyChecked: boolean;
-  host: HTMLIcCheckboxElement;
+  value: string;
   /**
    * @deprecated This event should not be used anymore. Use icCheck instead.
    */
@@ -47,16 +53,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

@@ -4,29 +4,29 @@ import { IcChangeEventDetail } from "./ic-checkbox-group.types";
 export declare class CheckboxGroup {
   host: HTMLIcCheckboxGroupElement;
   /**
-   * The label for the checkbox group to be displayed.
-   */
-  label: string;
-  /**
-   * The name for the checkbox group to differentiate from other groups.
+   * If `true`, the checkbox group will be set to the disabled state.
    */
-  name: string;
+  disabled: boolean;
   /**
-   * If `true`, the checkbox group will require a value.
+   * The helper text that will be displayed for additional field guidance.
    */
-  required: boolean;
+  helperText: string;
   /**
    * 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 label for the checkbox group to be displayed.
    */
-  disabled: boolean;
+  label: string;
   /**
-   * The helper text that will be displayed for additional field guidance.
+   * The name for the checkbox group to differentiate from other groups.
    */
-  helperText: string;
+  name: string;
+  /**
+   * If `true`, the checkbox group will require a value.
+   */
+  required: boolean;
   /**
    * If `true`, the small styling will be applied to the checkbox group.
    */
@@ -43,9 +43,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

@@ -5,29 +5,28 @@ import { IcChipAppearance, IcChipSizes } from "./ic-chip.types";
  */
 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?: IcChipSizes;
   /**
    * @deprecated This event should not be used anymore. Use icDismiss instead.
    */
@@ -36,13 +35,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,2 @@
-export declare type IcChipSizes = "default" | "large" | "small";
-export declare type IcChipAppearance = "filled" | "outline";
+export type IcChipSizes = "default" | "large" | "small";
+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;
 }

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

@@ -0,0 +1,123 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class Dialog {
+  private DATA_OVERFLOW;
+  private DATA_GETS_FOCUS;
+  private DATA_GETS_FOCUS_SELECTOR;
+  private DIALOG_CONTROLS;
+  private dialogEl;
+  private dialogHeight;
+  private focusedElementIndex;
+  private IC_TEXT_FIELD;
+  private interactiveElementList;
+  private resizeObserver;
+  private resizeTimeout;
+  private sourceElement;
+  private buttonOnclick0;
+  private buttonOnclick1;
+  private buttonOnclick2;
+  el: HTMLIcDialogElement;
+  dialogRendered: boolean;
+  fadeIn: boolean;
+  /**
+   * @slot dialog-controls - Content will be place at the bottom of the dialog.
+   * @slot heading - Content will be placed at the top of the dialog.
+   * @slot label - Content will be placed above the dialog heading.
+   */
+  /**
+   * If a status is set, sets the heading for the displayed alert.
+   */
+  alertHeading?: string;
+  /**
+   * If a status is set, sets the message for the displayed alert.
+   */
+  alertMessage?: string;
+  /**
+   * If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls.
+   */
+  buttons?: boolean;
+  /**
+   * If set to `true`, the dialog will not close when the backdrop is clicked.
+   */
+  closeOnBackdropClick?: boolean;
+  /**
+   * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
+   */
+  destructive?: boolean;
+  /**
+   * Sets the dismiss label tooltip and aria label.
+   */
+  dismissLabel?: string;
+  /**
+   * Sets the heading for the dialog.
+   */
+  heading: string;
+  /**
+   * Sets the optional label for the dialog which appears above the heading.
+   */
+  label?: string;
+  /**
+   * Sets the maximum and minimum height and width for the dialog.
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * If set, displays an alert of the corresponding variant below the heading.
+   */
+  status?: "neutral" | "info" | "warning" | "error" | "success";
+  /**
+   * Sets the label and onclick functions for default buttons.
+   */
+  buttonProps?: {
+    label: string;
+    onclick: string;
+  }[];
+  watchPropHandler(): void;
+  /**
+   * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.
+   */
+  icDialogCancelled: EventEmitter<void>;
+  /**
+   * Emitted when dialog has closed.
+   */
+  icDialogClosed: EventEmitter<void>;
+  /**
+   * Confirmation event emitted when default 'Confirm' primary button clicked or 'confirmDialog' method is called.
+   */
+  icDialogConfirmed: EventEmitter<void>;
+  /**
+   * Emitted when dialog has opened.
+   */
+  icDialogOpened: EventEmitter<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleKeyboard(ev: KeyboardEvent): void;
+  handleClick(ev: MouseEvent): void;
+  /**
+   * Use to show the dialog.
+   */
+  showDialog(): Promise<void>;
+  /**
+   * Use to hide the dialog.
+   */
+  hideDialog(): Promise<void>;
+  /**
+   * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.
+   */
+  cancelDialog(): Promise<void>;
+  /**
+   * Confirms the dialog. Used by the default 'Confirm' button or can be called manually to trigger confirming of dialog.
+   */
+  confirmDialog(): Promise<void>;
+  private setContentOverflow;
+  private runResizeObserver;
+  private resizeObserverCallback;
+  private setInitialFocus;
+  private getFocusedElementIndex;
+  private setAlertVariant;
+  private closeIconClick;
+  private getInteractiveElements;
+  private focusNextInteractiveElement;
+  private setButtonOnClick;
+  private getButtonOnclick;
+  private getButtonVariant;
+  render(): any;
+}