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

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-dialog/test/a11y/ic-dialog.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 {
+  private footerEl;
+  private resizeObserver;
+  el: HTMLIcFooterElement;
+  deviceSize: number;
+  foregroundColor: IcThemeForeground;
+  /**
+   * The alignment of the section containers used within the footer.
+   */
+  aligned?: IcAlignment;
+  /**
+   * The screen size breakpoint at which to switch to the small layout.
+   */
+  breakpoint?: IcFooterBreakpoints;
+  /**
+   * The caption displayed at the bottom of the footer.
+   */
+  caption: string;
+  /**
+   * If `true`, the footer will display the crown copyright at the bottom.
+   */
+  copyright: boolean;
+  /**
+   * 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 isSmall;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  render(): any;
+}

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { IcThemeForeground } from "../../utils/types";
+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.
+   */
+  href?: string;
+  /**
+   * The human language of the linked 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;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  componentWillLoad(): void;
+  footerResizeHandler(): void;
+  footerThemeChangeHandler(ev: CustomEvent): void;
+  private inferConfig;
+  render(): any;
+}
+export {};

package/dist/types/components/ic-footer-link/test/a11y/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;
+  expanded: boolean;
+  deviceSize: number;
+  dropdownIconStyle: import("../../utils/types").IcThemeForeground;
+  small: boolean;
+  /**
+   * The title of the link group to be displayed.
+   */
+  groupTitle: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  footerResizeHandler(): void;
+  footerThemeChangeHandler(ev: CustomEvent): void;
+  private isSmall;
+  private handleKeydown;
+  private toggleExpanded;
+  render(): any;
+}

package/dist/types/components/ic-footer-link-group/test/a11y/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 secondary - Content will be rendered in the secondary content area.
+ */
+export declare class Hero {
+  el: HTMLIcHeroElement;
+  foregroundColor: IcThemeForeground;
+  rightContent: boolean;
+  leftContentFullWidth: boolean;
+  scrollFactor: string;
+  /**
+   * The alignment of the hero.
+   */
+  aligned: IcAlignment;
+  /**
+   * The optional background image.
+   */
+  backgroundImage?: string;
+  /**
+   * The alignment of the hero content.
+   */
+  contentAligned: IcHeroContentAlignments;
+  /**
+   * If `true`, the background image (if set) will not scroll using a parallax effect.
+   */
+  disableBackgroundParallax?: boolean;
+  /**
+   * The heading of the hero.
+   */
+  heading: string;
+  /**
+   * The optional secondary heading, replaced by slotted right content.
+   */
+  secondaryHeading?: string;
+  /**
+   * The optional secondary subheading, replaced by slotted right content.
+   */
+  secondarySubheading?: string;
+  /**
+   * If `true`, the small styling will be applied to the hero.
+   */
+  small: boolean;
+  /**
+   * The description for the hero.
+   */
+  subheading?: string;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  doScroll(): void;
+  render(): any;
+}

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

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

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

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

package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts

@@ -0,0 +1,40 @@
+import { IcThemeForeground } from "../../utils/types";
+export declare class HorizontalScroll {
+  private buttonStateSet;
+  private isScrolling;
+  private itemOffsets;
+  private items;
+  private itemsContainerEl;
+  private resizeObserver;
+  private scrollDelay;
+  el: HTMLIcHorizontalScrollElement;
+  firstItemVisible: boolean;
+  itemOverflow: boolean;
+  lastItemVisible: boolean;
+  /**
+   * The appearance of the horizontal scroll, e.g. dark, light or the default.
+   */
+  appearance?: IcThemeForeground;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /**
+   * @internal if side scrolling enabled, scrolls the specified item into view.
+   */
+  scrollItemIntoView(itemPosition: number): Promise<void>;
+  private focusHandler;
+  private itemFocusHandler;
+  private resizeObserverCallback;
+  private runResizeObserver;
+  private scrollLeft;
+  private scrollRight;
+  private longScrollRight;
+  private longScrollLeft;
+  private leftArrowMouseDownHandler;
+  private rightArrowMouseDownHandler;
+  private arrowMouseUpHandler;
+  private getCurrentLeftItem;
+  private scrollHandler;
+  private scrollStopped;
+  render(): any;
+}

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

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

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 {
+  host: HTMLIcInputComponentContainerElement;
+  /**
+   *  If `true`, the dark variant of the input component container will be displayed.
+   */
+  dark?: boolean;
+  /**
+   *  If `true`, the disabled state will be set.
+   */
+  disabled: boolean;
+  /**
+   *  If `true`, the input component container will fill the width of the container it is in.
+   */
+  fullWidth: boolean;
+  /**
+   *  If `true`, the input component container will allow for multiple lines.
+   */
+  multiLine: boolean;
+  /**
+   *  If `true`, the readonly state will be set.
+   */
+  readonly: boolean;
+  /**
+   *  If `true`, the small styling will be applied to the input component container.
+   */
+  small: boolean;
+  /**
+   *  If `true`, the validation will display inline.
+   */
+  validationInline: boolean;
+  /**
+   * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
+   */
+  validationStatus: IcInformationStatusOrEmpty;
+  render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare class InputContainer {
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the readonly state will be set.
+   */
+  readonly?: boolean;
+  render(): any;
+}

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

@@ -0,0 +1,36 @@
+export declare class InputLabel {
+  /**
+   * If `true`, the dark variant of the input label will be displayed.
+   */
+  dark?: boolean;
+  /**
+   * If `true`, the disabled state will be set.
+   */
+  disabled: boolean;
+  /**
+   * If `true`, the input label will display with error styling.
+   */
+  error?: boolean;
+  /**
+   * The ID of the form element the label is bound to.
+   */
+  for: string;
+  /**
+   * The helper text that will be displayed.
+   */
+  helperText: string;
+  /**
+   * The text content of the label.
+   */
+  label: string;
+  /**
+   * If `true`, the readonly state will be set.
+   */
+  readonly: boolean;
+  /**
+   * If `true`, the input label will require a value.
+   */
+  required: 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 ARIA live mode to apply to the message.
+   */
+  ariaLiveMode: IcAriaLiveModeVariants;
+  /**
+   * The ID of the form element the validation is bound to.
+   */
+  for: string;
+  /**
+   *  If `true`, the input validation will fill the width of the container.
+   */
+  fullWidth: boolean;
+  /**
+   * The validation message to display.
+   */
+  message: string;
+  /**
+   * The status of the validation - e.g. 'error' | 'warning' | 'success'.
+   */
+  status: IcInformationStatusOrEmpty;
+  componentDidLoad(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,50 @@
+import { IcThemeForeground } from "../../utils/types";
+/**
+ * @slot router-item - Handle routing by nesting your routes in this slot.
+ */
+export declare class Link {
+  private inheritedAttributes;
+  private routerSlot;
+  el: HTMLIcLinkElement;
+  /**
+   * The appearance of the link, e.g. dark, light, or default.
+   */
+  appearance?: 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.
+   */
+  href?: string;
+  /**
+   * The human language of the linked 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;
+  /**
+   * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target="_blank".
+   */
+  showIcon?: boolean;
+  /**
+   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+   */
+  target?: string;
+  componentWillLoad(): void;
+  themeChangeHandler(ev: CustomEvent): void;
+  /**
+   * Sets focus on the link.
+   */
+  setFocus(): Promise<void>;
+  private updateTheme;
+  private hasRouterSlot;
+  render(): any;
+}

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

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

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts

@@ -0,0 +1,80 @@
+import { IcLoadingSizes, IcLoadingTypes } from "./ic-loading-indicator.types";
+import { IcThemeForegroundNoDefault } from "../../utils/types";
+export declare class LoadingIndicator {
+  private circularMeter;
+  private innerElement?;
+  private interval;
+  private labelList;
+  private outerElement?;
+  host: HTMLIcLoadingIndicatorElement;
+  circularDiameter: number;
+  circularLineWidth: number;
+  indeterminate: boolean;
+  indicatorLabel: string;
+  showSecond: boolean;
+  /**
+   * The appearance of the loading indicator, e.g. dark or light.
+   */
+  appearance?: IcThemeForegroundNoDefault;
+  /**
+   * The description that will be set as the aria-label of the loading indicator when not using a visible label.
+   */
+  description?: string;
+  /**
+   * If `true`, when linear, the full-width variant (i.e. without a border radius) will be displayed.
+   */
+  fullWidth?: boolean;
+  /**
+   * @internal The step number of a compact step, managed by ic-step.
+   */
+  innerLabel?: number;
+  /**
+   * The time in milliseconds before the label changes.
+   */
+  labelDuration?: number;
+  /**
+   * The maximum value that the progress value can take.
+   * Used to calculate the proportional width of the progress bar.
+   */
+  max?: number;
+  /**
+   * The minimum value that the progress value can take.
+   * Used to calculate the proportional width of the progress bar.
+   */
+  min?: number;
+  /**
+   * The size of the loading indicator.
+   */
+  size?: IcLoadingSizes;
+  /**
+   * The type of indicator, either linear or circular.
+   */
+  type?: IcLoadingTypes;
+  /**
+   * The label to be displayed beneath the loading indicator.
+   * Display a changing label by separating multiple messages with forward slashes.
+   */
+  label?: string;
+  watchPropHandler(): void;
+  /**
+   * The current amount of progress made.
+   * If not provided, component acts as an indeterminate loading indicator.
+   */
+  progress?: number;
+  watchProgressHandler(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillUpdate(): void;
+  componentDidUpdate(): void;
+  private updateCircularProgressMeter;
+  private getLabel;
+  private getLabelVariant;
+  private setCircleLineWidth;
+  private setLinearDeterminateWidth;
+  private calcOuterClass;
+  private updateLabel;
+  private setCircleXY;
+  private setDashSteps;
+  render(): any;
+}

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.types.d.ts

@@ -0,0 +1,7 @@
+export type IcLoadingSizes = "default" | "small" | "large" | "icon";
+export type IcLoadingTypes = "circular" | "linear";
+export interface IcLoadingCircleXYR {
+  x: number;
+  y: number;
+  r: number;
+}

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

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