@ukic/web-components 2.1.0-beta.15 → 2.1.0-beta.17

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,48 +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.
-   */
-  label: string;
-  /**
-   * The value for the checkbox.
-   */
-  value: string;
-  /**
-   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
+   * The text to be displayed when dynamic.
    */
-  name: string;
+  dynamicText: string;
   /**
    * The group label for the checkbox.
    */
   groupLabel: string;
   /**
-   * The text to be displayed when dynamic.
+   * If `true`, the indeterminate state will be displayed when checked.
    */
-  dynamicText: string;
+  indeterminate: boolean;
   /**
-   * The style of additionalField that will be displayed if used.
+   * The label for the checkbox.
    */
-  additionalFieldDisplay: IcAdditionalFieldTypes;
+  label: string;
   /**
-   * If `true`, the indeterminate state will be displayed when checked.
+   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
    */
-  indeterminate: boolean;
+  name: string;
   /**
    * If true, the small styling will be applied to the checkbox.
    */
   small?: boolean;
-  initiallyChecked: boolean;
-  host: HTMLIcCheckboxElement;
+  /**
+   * The value for the checkbox.
+   */
+  value: string;
   /**
    * @deprecated This event should not be used anymore. Use icCheck instead.
    */
@@ -51,17 +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>;
-  private IC_TEXT_FIELD;
-  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,7 +43,8 @@ export declare class CheckboxGroup {
    * Emitted when a checkbox is checked.
    */
   icChange: EventEmitter<IcChangeEventDetail>;
-  selectHandler(ev: CustomEvent): void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
+  selectHandler(ev: CustomEvent): void;
   render(): any;
 }

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,28 @@
  * @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;
   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;
+}

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

@@ -8,15 +8,11 @@ import { IcFooterBreakpoints } from "./ic-footer.types";
  * @slot caption - Content will be rendered above Crown Copyright.
  */
 export declare class Footer {
+  private footerEl;
+  private resizeObserver;
   el: HTMLIcFooterElement;
-  /**
-   *  @internal Triggers on page resize and triggers style changes in footer links and link groups
-   */
-  footerResized: EventEmitter<void>;
-  /**
-   * The description displayed at the top of the footer.
-   */
-  description: string;
+  deviceSize: number;
+  foregroundColor: IcThemeForeground;
   /**
    * The alignment of the section containers used within the footer.
    */
@@ -25,10 +21,6 @@ export declare class Footer {
    * The screen size breakpoint at which to switch to the small layout.
    */
   breakpoint?: IcFooterBreakpoints;
-  /**
-   * If `true`, the footer will be set up to handle link groups instead of standalone links.
-   */
-  groupLinks?: boolean;
   /**
    * The caption displayed at the bottom of the footer.
    */
@@ -37,16 +29,24 @@ export declare class Footer {
    * If `true`, the footer will display the crown copyright at the bottom.
    */
   copyright: boolean;
-  deviceSize: number;
-  foregroundColor: IcThemeForeground;
-  private isSmall;
+  /**
+   * The description displayed at the top of the footer.
+   */
+  description: string;
+  /**
+   * If `true`, the footer will be set up to handle link groups instead of standalone links.
+   */
+  groupLinks?: boolean;
+  /**
+   *  @internal Triggers on page resize and triggers style changes in footer links and link groups
+   */
+  footerResized: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
   themeChangeHandler(ev: CustomEvent): void;
-  private resizeObserver;
-  private footerEl;
+  private isSmall;
   private resizeObserverCallback;
   private runResizeObserver;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  disconnectedCallback(): void;
   render(): any;
 }

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

@@ -1 +1 @@
-export declare type IcFooterBreakpoints = "extra small" | "small" | "medium" | "large" | "extra large";
+export type IcFooterBreakpoints = "extra small" | "small" | "medium" | "large" | "extra large";

package/dist/types/components/ic-footer-link/ic-footer-link.d.ts

@@ -1,10 +1,17 @@
 import { IcThemeForeground } from "../../utils/types";
-declare type FooterConfig = {
+type FooterConfig = {
   small: boolean;
   grouped: boolean;
 };
 export declare class FooterLink {
   el: HTMLIcFooterLinkElement;
+  deviceSize: number;
+  footerConfig: FooterConfig;
+  foregroundColor: IcThemeForeground;
+  /**
+   * If `true`, the user can save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
   /**
    * The URL that the link points to.
    */
@@ -25,17 +32,10 @@ export declare class FooterLink {
    * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
    */
   target?: string;
-  /**
-   * If `true`, the user can save the linked URL instead of navigating to it.
-   */
-  download?: string | boolean;
-  footerConfig: FooterConfig;
-  deviceSize: number;
-  foregroundColor: IcThemeForeground;
-  private inferConfig;
+  componentWillLoad(): void;
   footerResizeHandler(): void;
   footerThemeChangeHandler(ev: CustomEvent): void;
-  componentWillLoad(): void;
+  private inferConfig;
   render(): any;
 }
 export {};

package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts

@@ -1,19 +1,19 @@
 export declare class FooterLinkGroup {
   el: HTMLIcFooterLinkGroupElement;
+  expanded: boolean;
+  deviceSize: number;
+  dropdownIconStyle: import("../../utils/types").IcThemeForeground;
+  small: boolean;
   /**
    * The title of the link group to be displayed.
    */
   groupTitle: string;
-  small: boolean;
-  expanded: boolean;
-  dropdownIconStyle: import("../../utils/types").IcThemeForeground;
-  deviceSize: number;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  footerResizeHandler(): void;
+  footerThemeChangeHandler(ev: CustomEvent): void;
   private isSmall;
   private handleKeydown;
   private toggleExpanded;
-  footerResizeHandler(): void;
-  footerThemeChangeHandler(ev: CustomEvent): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
   render(): any;
 }