@ukic/canary-web-components 2.0.0-canary.0

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

@@ -0,0 +1,132 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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.
+ */
+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 ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
+   */
+  disableTooltip?: boolean;
+  /**
+   * If `true`, the user can save the linked URL instead of navigating to it.
+   */
+  download?: string | boolean;
+  /**
+   * The <form> element to associate the button with.
+   */
+  form?: string;
+  /**
+   * 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.
+   */
+  formaction?: string;
+  /**
+   * The way the submitted form data is encoded.
+   */
+  formenctype?: string;
+  /**
+   * The HTTP method used to submit the form.
+   */
+  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 relationship of the linked URL as space-separated link types.
+   */
+  rel?: string;
+  /**
+   * The size of the button to be displayed.
+   */
+  size?: IcSizes;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  /**
+   * The position of the tooltip in relation to the button.
+   */
+  tooltipPlacement?: IcButtonTooltipPlacement;
+  /**
+   * The type of the button.
+   */
+  type?: IcButtonTypes;
+  /**
+   * The variant of the button to be displayed.
+   */
+  variant?: IcButtonVariants;
+  /**
+   * Emitted when button has blur
+   */
+  icBlur: EventEmitter<void>;
+  /**
+   * Emitted when button has focus
+   */
+  icFocus: EventEmitter<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): 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 hasIconSlot;
+  private handleHiddenFormButtonClick;
+  private handleClick;
+  private onFocus;
+  private onBlur;
+  private updateTheme;
+  private mutationCallback;
+  render(): any;
+}

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

@@ -0,0 +1,3 @@
+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-button/test/a11y/ic-button.test.a11y.d.ts

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

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

@@ -0,0 +1,83 @@
+import { IcThemeForeground } from "../../utils/types";
+/**
+ * @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.
+ * @slot subheading - Content will be placed below the card heading.
+ * @slot adornment - Content will be placed below the card subheading.
+ * @slot image-top - Content will be placed at the top of the card above all other content.
+ * @slot image-mid - Content will be placed below the card heading section.
+ * @slot icon - Content will be placed to the left of the card heading.
+ * @slot interaction-button - Content will be placed in the top right corner of the heading section.
+ * @slot interaction-controls - Content will be placed below the card message.
+ * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.
+ */
+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;
+  /**
+   * If `true`, the card will be disabled if it is clickable.
+   */
+  disabled?: boolean;
+  /**
+   *  If `true`, the card will have an expandable area and expansion toggle button.
+   */
+  expandable?: boolean;
+  /**
+   *  If `true`, the card will fill the width of the container.
+   */
+  fullWidth?: boolean;
+  /**
+   * The heading for the card.
+   */
+  heading: string;
+  /**
+   * 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;
+  /**
+   * The main body message of the 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 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;
+  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;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,72 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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 text to be displayed when dynamic.
+   */
+  dynamicText: string;
+  /**
+   * The group label for the checkbox.
+   */
+  groupLabel: string;
+  /**
+   * If `true`, the indeterminate state will be displayed when checked.
+   */
+  indeterminate: boolean;
+  /**
+   * The label for the checkbox.
+   */
+  label: string;
+  /**
+   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
+   */
+  name: string;
+  /**
+   * 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.
+   */
+  size?: IcSizes;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small?: boolean;
+  /**
+   * The value for the checkbox.
+   */
+  value: string;
+  /**
+   * @deprecated This event should not be used anymore. Use icCheck instead.
+   */
+  checkboxChecked: EventEmitter<void>;
+  /**
+   * Emitted when a checkbox has been checked.
+   */
+  icCheck: EventEmitter<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  /**
+   * Sets focus on the checkbox.
+   */
+  setFocus(): Promise<void>;
+  private eventHandler;
+  private handleClick;
+  private handleFormReset;
+  render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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.
+   */
+  label: string;
+  /**
+   * The name for the checkbox group to differentiate from other groups.
+   */
+  name: string;
+  /**
+   * If `true`, the checkbox group will require a value.
+   */
+  required: boolean;
+  /**
+   * The size of the checkboxes to be displayed. This does not affect the font size of the label.
+   */
+  size?: IcSizes;
+  /**
+   * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+   */
+  small: boolean;
+  /**
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  /**
+   * The validation text - e.g. 'error' | 'warning' | 'success'.
+   */
+  validationText: string;
+  /**
+   * Emitted when a checkbox is checked.
+   */
+  icChange: EventEmitter<IcChangeEventDetail>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  selectHandler(ev: CustomEvent): void;
+  render(): any;
+}

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+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;
+  isHovered: boolean;
+  visible: boolean;
+  /**
+   * The emphasis of the chip.
+   */
+  appearance?: IcChipAppearance;
+  /**
+   * If `true`, the chip will appear disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the chip will have a close button at the end to dismiss it.
+   */
+  dismissible?: boolean;
+  /**
+   * The text rendered within the chip.
+   */
+  label: string;
+  /**
+   * The size of the chip.
+   */
+  size?: IcSizes;
+  /**
+   * @deprecated This event should not be used anymore. Use icDismiss instead.
+   */
+  dismiss: EventEmitter<void>;
+  /**
+   * Is emitted when the user dismisses the chip.
+   */
+  icDismiss: EventEmitter<void>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleClick(): void;
+  /**
+   * Sets focus on the chip.
+   */
+  setFocus(): Promise<void>;
+  private dismissAction;
+  private mouseEnterHandler;
+  private mouseLeaveHandler;
+  render(): any;
+}

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

@@ -0,0 +1 @@
+export type IcChipAppearance = "filled" | "outline";

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

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

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 {
+  /**
+   * The additional information that will be displayed after the classification.
+   */
+  additionalSelectors?: string;
+  /**
+   * The classification level to be displayed - also determines the banner and text colour.
+   */
+  classification?: IcProtectiveMarkings;
+  /**
+   * The optional text that will be displayed before classification to specify relevant country/countries.
+   */
+  country?: string;
+  /**
+   * If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.
+   */
+  inline?: boolean;
+  /**
+   * If `true`, "Up to" will be displayed before the classification and country.
+   */
+  upTo?: boolean;
+  render(): any;
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+export declare class DataEntity {
+  el: HTMLIcDataEntityElement;
+  /**
+   * The title for the data entity.
+   */
+  heading: string;
+  /**
+   * If `true`, the small styling will be applied to the data heading and all child data rows.
+   */
+  small: boolean;
+  render(): any;
+}

package/dist/types/components/ic-data-entity/test/a11y/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,37 @@
+/**
+ * @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 {
+  private hasEndComponent;
+  private resizeObserver;
+  el: HTMLIcDataRowElement;
+  deviceSize: number;
+  entitySize: "xl" | "m" | "xs";
+  /**
+   * The label in the leftmost cell of the row.
+   */
+  label: 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;
+  /**
+   * 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;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,97 @@
+import { IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableSortOrderOptions } from "./ic-data-table.types";
+import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+export declare class DataTable {
+  private SORT_ICONS;
+  el: HTMLIcUnstableDataTableElement;
+  fromRow: number;
+  previousRowsPerPage: number;
+  rowsPerPage: number;
+  scrollable: boolean;
+  scrollOffset: number;
+  selectedRow: object;
+  sortedColumn: string;
+  sortedColumnOrder: IcDataTableSortOrderOptions;
+  toRow: number;
+  /**
+   * The title for the table only visible to screen readers.
+   */
+  caption: string;
+  /**
+   * The column headers for the table.
+   */
+  columns: IcDataTableColumnObject[];
+  /**
+   * The row content for the table.
+   */
+  data: {
+    [key: string]: any;
+  }[];
+  /**
+   * Set the density of the table including font and padding.
+   */
+  density?: IcDataTableDensityOptions;
+  /**
+   * Applies a border to the table container.
+   */
+  embedded?: boolean;
+  /**
+   * If `true`, column headers will not be visible.
+   */
+  hideColumnHeaders?: boolean;
+  /**
+   * Sets the props for the pagination bar.
+   */
+  paginationOptions?: {
+    itemsPerPage?: {
+      label: string;
+      value: string;
+    }[];
+    type?: IcPaginationTypes;
+    control?: IcPaginationControlTypes;
+    itemsPerPageControl?: boolean;
+    goToPageControl?: boolean;
+    alignment?: IcPaginationAlignmentOptions;
+  };
+  /**
+   * If `true`, adds a pagination bar to the bottom of the table.
+   */
+  showPagination?: boolean;
+  /**
+   * If `true`, allows table columns to be sorted using applied sort buttons.
+   */
+  sortable?: boolean;
+  /**
+   * Sets the order columns will be sorted in and allows for 'default' sorts to be added.
+   */
+  sortOptions?: {
+    sortOrders: IcDataTableSortOrderOptions[];
+    defaultColumn?: string;
+  };
+  /**
+   * If `true`, column headers will remain at the top of the table when scrolling vertically.
+   */
+  stickyColumnHeaders?: boolean;
+  /**
+   * If `true`, row headers will remain to the left when scrolling horizontally.
+   */
+  stickyRowHeaders?: boolean;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  handleItemsPerPageChange(ev: CustomEvent): void;
+  handlePageChange(ev: CustomEvent): void;
+  clickListener(ev: MouseEvent): void;
+  private isObject;
+  private notDefaultDensity;
+  private getCellContent;
+  private getCellAlignment;
+  private createCells;
+  private createColumnHeaders;
+  private createRows;
+  private getObjectValue;
+  private getSortButtonLabel;
+  private getComparison;
+  private getSortFunction;
+  private sortRows;
+  private updateScrollOffset;
+  render(): any;
+}

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

@@ -0,0 +1,15 @@
+export type IcDataTableSortOrderOptions = "unsorted" | "ascending" | "descending";
+export type IcDataTableDensityOptions = "default" | "dense" | "spacious";
+export type IcDataTableColumnDataTypes = "string" | "number" | "address" | "element" | "date";
+export type IcDataTableColumnObject = {
+  key: string;
+  title: string;
+  dataType: IcDataTableColumnDataTypes;
+  columnAlignment?: {
+    horizontal?: string;
+    vertical?: string;
+  };
+  cellAlignment?: string;
+  emphasis?: string;
+  colspan?: number;
+};

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

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