@ukic/web-components 2.0.0-alpha.121

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

@@ -0,0 +1,111 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcButtonSizes, IcButtonTypes, IcButtonVariants, IcButtonTooltipPlacement } from "./ic-button.types";
+import { IcThemeForeground } from "../../utils/types";
+/**
+ * @slot icon - Content will be placed to the left of the button label.
+ */
+export declare class Button {
+  el: HTMLIcButtonElement;
+  /**
+   * Determines whether the button should be in disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * Determines whether the button should be in loading state.
+   */
+  loading?: boolean;
+  /**
+   * Determines whether the icon should appear on the right hand side of the button.
+   */
+  iconRight?: boolean;
+  /**
+   * The type of the button.
+   */
+  type?: IcButtonTypes;
+  /**
+   * The URL that the link points to. This will render the button as an "a" tag.
+   */
+  href?: string;
+  /**
+   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  /**
+   * The relationship of the linked URL as space-separated link types.
+   */
+  rel?: string;
+  /**
+   * Prompts the user to save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
+  /**
+   * Hints at the human language of the linked URL.
+   */
+  hreflang?: string;
+  /**
+   * How much of the referrer to send when following the link.
+   */
+  referrerpolicy?: ReferrerPolicy;
+  /**
+   * The button variant to be displayed.
+   */
+  variant?: IcButtonVariants;
+  /**
+   * The size of the button to be displayed.
+   */
+  size?: IcButtonSizes;
+  /**
+   * Fill the width of the container if true.
+   */
+  fullWidth?: boolean;
+  /**
+   * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.
+   */
+  withIcTooltip?: boolean;
+  /**
+   * The position of the tooltip in relation to the button.
+   */
+  IcTooltipPlacement?: IcButtonTooltipPlacement;
+  /**
+   * Determines the style of button to be displayed.
+   */
+  buttonStyle?: IcThemeForeground;
+  /**
+   * Emitted when button has focus
+   */
+  icFocus: EventEmitter<void>;
+  /**
+   * Emitted when button has blur
+   */
+  icBlur: EventEmitter<void>;
+  iconRightState: boolean;
+  private calculatedWidth;
+  private inheritedAttributes;
+  private buttonEl;
+  private hasTooltip;
+  private buttonIdNum;
+  private tooltipEl;
+  private id;
+  setIconRightState(): void;
+  calculateWidth(): void;
+  handleHostClick(event: Event): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  /**
+   * Sets focus on the native `button`
+   */
+  setFocus(): Promise<void>;
+  /**
+   * @internal Updates tooltip/aria-label text - needed as can't watch an aria attribute change.
+   */
+  updateAriaLabel(newValue: string): Promise<void>;
+  private getLoadingBarWidth;
+  private hasIconSlot;
+  private handleHiddenFormButtonClick;
+  private handleClick;
+  private onFocus;
+  private onBlur;
+  private updateTheme;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export declare type IcButtonTypes = "reset" | "submit" | "button";
+export declare type IcButtonVariants = "primary" | "secondary" | "tertiary" | "icon" | "destructive";
+export declare type IcButtonSizes = "default" | "emphasis" | "dense";
+export declare type IcButtonStyles = "default" | "dark" | "light";
+export declare type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";

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

@@ -0,0 +1,58 @@
+/**
+ * @slot icon - Content will be placed to the left of the card title.
+ * @slot heading - Content will be placed at the top of the card to the right of the icon.
+ * @slot message - Content will be placed in the main body of the card.
+ */
+export declare class Card {
+  el: HTMLIcCardElement;
+  /**
+   * Set the variant to static or clickable
+   */
+  clickable?: boolean;
+  /**
+   * URL for clickable cards
+   */
+  href?: string | undefined;
+  /**
+   * Human readable explanation of the URL
+   */
+  hreflang?: 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;
+  /**
+   * Where to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  /**
+   * Title for the card
+   */
+  heading: string;
+  /**
+   * Main body message of the card
+   */
+  message?: string;
+  /**
+   * Whether the card is disabled if it is clickable
+   */
+  disabled?: boolean;
+  /**
+   *  If true then fill width of container
+   */
+  fullWidth: boolean;
+  parentIsAnchorTag: boolean;
+  isFocussed: boolean;
+  parentEl: HTMLElement | null;
+  handleHostClick(event: Event): void;
+  private parentFocussed;
+  private parentBlurred;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAdditionalFieldTypes } from "../../utils/types";
+export declare class Checkbox {
+  /**
+   * Set the checkbox to the checked state
+   */
+  checked?: boolean;
+  /**
+   * Set the checkbox to the disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Provide a label for the input
+   */
+  label: string;
+  /**
+   * Provide a value for the input
+   */
+  value: string;
+  /**
+   * Provide a name for the input
+   */
+  name: string;
+  /**
+   * Provide a group label for the input
+   */
+  groupLabel: string;
+  /**
+   * Provide a text prop for the dynamic text
+   */
+  dynamicText: string;
+  /**
+   * Set which style of additionalField will be displayed if used
+   */
+  additionalFieldDisplay: IcAdditionalFieldTypes;
+  /**
+   * Display the indeterminate state when checked
+   */
+  indeterminate: boolean;
+  host: HTMLIcCheckboxElement;
+  /**
+   * Emitted when a checkbox has been checked
+   */
+  checkboxChecked: EventEmitter<void>;
+  private additionalFieldContainer;
+  private handleClick;
+  componentDidRender(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcChangeEventDetail } from "./ic-checkbox-group.types";
+export declare class CheckboxGroup {
+  host: HTMLIcCheckboxGroupElement;
+  /**
+   * Provide a label for the input.
+   */
+  label: string;
+  /**
+   * Provide a name for the input.
+   */
+  name: string;
+  /**
+   * Specify if the input requires a value.
+   */
+  required: boolean;
+  /**
+   * Hides the label and applies the required label value as an aria-label.
+   */
+  hideLabel: boolean;
+  /**
+   * Specify whether the input is disabled.
+   */
+  disabled: boolean;
+  /**
+   * Provide helper text to display additional field guidance.
+   */
+  helperText: string;
+  /**
+   * Specify whether dense styling to be applied to element.
+   */
+  dense: boolean;
+  /**
+   * Provide validation status - 'error'
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  /**
+   * Provide validation text - 'error'
+   */
+  validationText: string;
+  /**
+   * Emitted when a checkbox is checked.
+   */
+  icChange: EventEmitter<IcChangeEventDetail>;
+  private checkboxOptions;
+  checkedOptions: string[];
+  selectHandler(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export interface IcChangeEventDetail {
+  value: string[];
+}

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

@@ -0,0 +1,24 @@
+import { IcProtectiveMarkings } from "./ic-classification-banner.types";
+export declare class ClassificationBanner {
+  /**
+   * Additional information to display after the classification
+   */
+  additionalSelectors?: string;
+  /**
+   * The classification level to be displayed also determines the banner and text colour
+   */
+  classification?: IcProtectiveMarkings;
+  /**
+   * Optional text displayed before classification to specify relevant country/countries
+   */
+  country?: string;
+  /**
+   * Determines whether the banner appears inline with the page or sticks to the bottom of the page
+   */
+  inline?: boolean;
+  /**
+   * Optionally display "Up to" before classification and country if set
+   */
+  upTo?: boolean;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1,12 @@
+export declare class DataEntity {
+  el: HTMLIcDataEntityElement;
+  /**
+   * Title for the data entity
+   */
+  heading: string;
+  /**
+   * Set the data heading and all child data rows to dense styling
+   */
+  dense: boolean;
+  render(): any;
+}

package/dist/types/components/ic-data-entity/ic-data-entity.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+/**
+ * @slot label - Content will be rendered in the leftmost cell.
+ * @slot value - Content will be rendered to the right of the label.
+ * @slot end-component - Content will be displayed in the rightmost cell.
+ */
+export declare class DataRow {
+  el: HTMLIcDataRowElement;
+  /**
+   * Set the label in the leftmost cell of the row
+   */
+  label: string;
+  /**
+   * Set the value of the middle (right if no addition supplied) cell of the row
+   */
+  value: string;
+  /**
+   * Set the row to dense styling, this is automatically applied if dense is set on the parent data heading
+   */
+  dense: boolean;
+  deviceSize: number;
+  entitySize: "xl" | "m" | "xs";
+  private resizeObserver;
+  private hasEndComponent;
+  private runResizeObserver;
+  private checkLabelAbove;
+  private labelEndComponent;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { IcThemeForeground } from "../../utils/types";
+export declare class Divider {
+  foregroundColor: IcThemeForeground;
+  themeChangeHandler(ev: CustomEvent): void;
+  render(): any;
+}

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcAlignment, IcThemeForeground } from "../../utils/types";
+import { IcFooterBreakpoints } from "./ic-footer.types";
+/**
+ * @slot description - Content will be rendered at the top of the footer
+ * @slot link - Content will be rendered between description and logos
+ * @slot logo - Content will be rendered underneath footer links
+ * @slot caption - Content will be rendered above Crown Copyright
+ */
+export declare class Footer {
+  el: HTMLIcFooterElement;
+  /**
+   * Triggers on page resize and triggers style changes in footer links and link groups
+   */
+  icFooterResized: EventEmitter<void>;
+  /**
+   * The description displayed at the top of the footer
+   */
+  description: string;
+  /**
+   * Sets the aligned parameter for the section containers used within the footer
+   */
+  aligned?: IcAlignment;
+  /**
+   * Sets the screen size breakpoint at which to switch to the dense layout
+   */
+  breakpoint?: IcFooterBreakpoints;
+  /**
+   * Sets the footer up to handle link groups instead of standalone links
+   */
+  groupLinks?: boolean;
+  /**
+   * The caption displayed at the bottom of the footer
+   */
+  caption: string;
+  /**
+   * Whether the footer displays the crown copyright at the bottom
+   */
+  copyright: boolean;
+  deviceSize: number;
+  foregroundColor: IcThemeForeground;
+  private isDense;
+  themeChangeHandler(ev: CustomEvent): void;
+  private resizeObserver;
+  private footerEl;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare type IcFooterBreakpoints = "XS" | "S" | "M" | "L" | "XL";

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

@@ -0,0 +1,21 @@
+import { IcThemeForeground } from "../../utils/types";
+declare type FooterConfig = {
+  dense: boolean;
+  grouped: boolean;
+};
+export declare class FooterLink {
+  el: HTMLIcFooterLinkElement;
+  /**
+   * The URL that the link points to.
+   */
+  href?: string;
+  footerConfig: FooterConfig;
+  deviceSize: number;
+  foregroundColor: IcThemeForeground;
+  private inferConfig;
+  footerResizeHandler(): void;
+  footerThemeChangeHandler(ev: CustomEvent): void;
+  componentWillLoad(): void;
+  render(): any;
+}
+export {};

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,57 @@
+import { IcAlignment, IcThemeForeground } from "../../utils/types";
+import { IcHeroContentAlignments } from "./ic-hero.types";
+/**
+ * @slot heading - Content will be rendered in the title area, in place of the heading.
+ * @slot subheading - Content will be rendered in the title area, in place of the subheading.
+ * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.
+ * @slot right-content - Content will be rendered in the right content area.
+ */
+export declare class Hero {
+  el: HTMLIcHeroElement;
+  /**
+   * The heading of the hero
+   */
+  heading: string;
+  /**
+   * Description for the hero
+   */
+  subheading?: string;
+  /**
+   * Optional secondary heading, replaced by slotted right content
+   */
+  secondaryHeading?: string;
+  /**
+   * Optional secondary subheading, replaced by slotted right content
+   */
+  secondarySubheading?: string;
+  /**
+   * Optional background image
+   */
+  backgroundImage?: string;
+  /**
+   * Whether the background image (if set) scrolls using a parallax effect.
+   */
+  disableBackgroundParallax?: boolean;
+  /**
+   * The alignment of the hero content
+   */
+  aligned: IcAlignment;
+  /**
+   * The alignment of the hero content
+   */
+  contentAligned: IcHeroContentAlignments;
+  /**
+   * Alter styling for use with dense content/pages
+   */
+  dense: boolean;
+  rightContent: boolean;
+  scrollFactor: string;
+  leftContentFullWidth: boolean;
+  foregroundColor: IcThemeForeground;
+  themeChangeHandler(ev: CustomEvent): void;
+  doScroll(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  render(): any;
+}

package/dist/types/components/ic-hero/ic-hero.test.a11y.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare type IcHeroContentAlignments = "left" | "center";

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -0,0 +1,40 @@
+import { IcInformationStatusOrEmpty } from "../../utils/types";
+/**
+ * @slot left-icon - Content will be placed to the left of the input.
+ */
+export declare class InputComponentContainer {
+  /**
+   * disabled
+   */
+  disabled: boolean;
+  /**
+   * readonly
+   */
+  readonly: boolean;
+  /**
+   * validationStatus
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  /**
+   * dense
+   */
+  dense: boolean;
+  /**
+   * multiLine
+   */
+  multiLine: boolean;
+  /**
+   * validationInline
+   */
+  validationInline: boolean;
+  /**
+   * Determines whether the dark variant of the input-component-container focus indicator should be displayed.
+   */
+  dark?: boolean;
+  /**
+   *  If true then fill width of container
+   */
+  fullWidth: boolean;
+  host: HTMLIcInputComponentContainerElement;
+  render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare class InputContainer {
+  /**
+   * disabled
+   */
+  disabled?: boolean;
+  /**
+   * readonly
+   */
+  readonly?: boolean;
+  render(): any;
+}

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

@@ -0,0 +1,36 @@
+export declare class InputLabel {
+  /**
+   * for
+   */
+  for: string;
+  /**
+   * required
+   */
+  required: boolean;
+  /**
+   * helperText
+   */
+  helperText: string;
+  /**
+   * label
+   */
+  label: string;
+  /**
+   * disabled
+   */
+  disabled: boolean;
+  /**
+   * readonly
+   */
+  readonly: boolean;
+  /**
+   * error
+   */
+  error?: boolean;
+  /**
+   * dark
+   */
+  dark?: boolean;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,30 @@
+import { IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcAriaLiveModeVariants } from "./ic-input-validation.types";
+/**
+ * @slot validation-message-adornment - Content will be placed to the right of the validation message.
+ */
+export declare class InputValidation {
+  el: HTMLIcInputValidationElement;
+  /**
+   * The validation message to display
+   */
+  message: string;
+  /**
+   * The id of the input field the message relates to
+   */
+  for: string;
+  /**
+   * The status
+   */
+  status: IcInformationStatusOrEmpty;
+  /**
+   *  If true then fill width of container
+   */
+  fullWidth: boolean;
+  /**
+   *  aria live mode to apply to message
+   */
+  ariaLiveMode: IcAriaLiveModeVariants;
+  componentDidLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export declare type IcAriaLiveModeVariants = "polite" | "assertive";