@ukic/canary-web-components 3.0.0-canary.34 → 3.0.0-canary.35

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-select/ic-select.d.ts

@@ -0,0 +1,282 @@
+import { EventEmitter } from "../../../../../../../../../../../../stencil-public-runtime";
+import { IcAriaLive, IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcMultiValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
+import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
+/**
+ * @slot helper-text - Content is set as the helper text for the select.
+ * @slot icon - Content will be placed to the left of the select text input.
+ */
+export declare class Select {
+    private anchorEl?;
+    private blurredBecauseButtonPressed;
+    private characterKeyPressTimer?;
+    private clearButton?;
+    private customSelectElement?;
+    private debounceAria?;
+    private hasSetDefaultValue;
+    private hasTimedOut;
+    private inheritedAttributes;
+    private initialOptionsEmpty;
+    private inputId;
+    private menu?;
+    private menuId;
+    private nativeSelectElement?;
+    private retryButtonClick;
+    private searchableMenuItemSelected;
+    private searchableSelectElement?;
+    private timeoutTimer?;
+    private ungroupedOptions;
+    private hostMutationObserver;
+    el: HTMLIcSelectElement;
+    ariaActiveDescendant?: string;
+    clearButtonFocused: boolean;
+    debounceIcInput?: number;
+    hiddenInputValue: string | null;
+    noOptions: IcMenuOption[] | null;
+    open: boolean;
+    pressedCharacters: string;
+    searchableSelectInputValue: string | null;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled: boolean;
+    watchDisabledHandler(): void;
+    /**
+     * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+     */
+    disableAutoFiltering: boolean;
+    /**
+     * The text displayed when there are no options in the option list.
+     */
+    emptyOptionListText: string;
+    /**
+     * The <form> element to associate the select with.
+     */
+    form?: string;
+    /**
+     * If `true`, the select will fill the width of the container.
+     */
+    fullWidth: 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;
+    /**
+     * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+     */
+    includeDescriptionsInSearch: boolean;
+    /**
+     * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+     */
+    includeGroupTitlesInSearch: boolean;
+    /**
+     * The label for the select.
+     */
+    label: string;
+    /**
+     * The message displayed when external loading times out.
+     */
+    loadingErrorLabel: string;
+    /**
+     * The message displayed whilst the options are being loaded externally.
+     */
+    loadingLabel: string;
+    /**
+     * If `true`, multiple options can be selected.
+     */
+    multiple: boolean;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: string;
+    /**
+     * The placeholder value to be displayed.
+     */
+    placeholder: string;
+    /**
+     * If `true`, the readonly state will be set.
+     */
+    readonly: boolean;
+    /**
+     * If `true`, the select will require a value.
+     */
+    required: boolean;
+    /**
+     * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
+     */
+    searchable: boolean;
+    /**
+     * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+     */
+    searchMatchPosition: IcSearchMatchPositions;
+    /**
+     * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
+     */
+    selectOnEnter: boolean;
+    /**
+     * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+     */
+    showClearButton: boolean;
+    /**
+     * The size of the select.
+     */
+    size: IcSizes;
+    /**
+     * If using external filtering, set a timeout for when loading takes too long.
+     */
+    timeout?: number;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme: IcThemeMode;
+    /**
+     * The value of the `aria-live` attribute on the validation message.
+     */
+    validationAriaLive: IcAriaLive;
+    /**
+     * The validation status - e.g. 'error' | 'warning' | 'success'.
+     */
+    validationStatus: IcInformationStatusOrEmpty;
+    /**
+     * The text to display as the validation message.
+     */
+    validationText: string;
+    /**
+     * If `true`, the loading state will be triggered when fetching options asynchronously.
+     */
+    loading: boolean;
+    loadingHandler(newValue: boolean): void;
+    /**
+     * The possible selection options.
+     */
+    options: IcMenuOption[];
+    filteredOptions: IcMenuOption[];
+    uniqueOptions: IcMenuOption[];
+    watchOptionsHandler(): void;
+    /**
+     * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
+     */
+    debounce: number;
+    currDebounce: number;
+    debounceChangedHandler(newValue: number): void;
+    /**
+     * The value of the select, reflected by the value of the currently selected option.
+     * For the searchable variant, the value is also reflected by the user input.
+     * For the multi-select variant, the value must be an array of option values.
+     */
+    value: string | string[] | null;
+    initialValue: string | string[] | null;
+    inputValueToFilter: string | null;
+    currValue: string | string[] | null;
+    valueChangedHandler(): void;
+    openChangedHandler(): void;
+    /**
+     * Emitted when the select loses focus.
+     */
+    icBlur: EventEmitter<void>;
+    /**
+     * Emitted when the value changes.
+     */
+    icChange: EventEmitter<IcMultiValueEventDetail>;
+    /**
+     * Emitted when the clear or clear all button is clicked.
+     */
+    icClear: EventEmitter<void>;
+    /**
+     * Emitted when the select options menu is closed.
+     */
+    icClose: EventEmitter<void>;
+    /**
+     * Emitted when the select gains focus.
+     */
+    icFocus: EventEmitter<void>;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    icInput: EventEmitter<IcMultiValueEventDetail>;
+    /**
+     * Emitted when the select options menu is opened.
+     */
+    icOpen: EventEmitter<void>;
+    /**
+     * Emitted when an option is selected.
+     * Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
+     */
+    icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * Emitted when `multiple` is `true` and an option is deselected.
+     */
+    icOptionDeselect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * Emitted when the 'retry loading' button is clicked for a searchable variant.
+     */
+    icRetryLoad: EventEmitter<IcMultiValueEventDetail>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    /**
+     * Sets focus on the input box.
+     */
+    setFocus(): Promise<void>;
+    private hostMutationCallback;
+    private handleRetry;
+    private emitIcChange;
+    private emitIcInput;
+    private setOptions;
+    /**
+     * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
+     * @param options array of IcMenuOptions
+     * @returns a new options object, with all entries possessing a duplicate 'value' field removed
+     */
+    private deduplicateOptions;
+    /**
+     * Loop through options array and for all options with no value, infer it from the label
+     */
+    private setOptionsValuesFromLabels;
+    private setUngroupedOptions;
+    private setTextColor;
+    private setMenuChange;
+    private getLabelFromValue;
+    private getMultipleOptionsString;
+    private getFilteredChildMenuOptions;
+    private getValueSortedByOptions;
+    private handleNativeSelectChange;
+    private handleCustomSelectChange;
+    private handleSelectAllChange;
+    private handleMenuChange;
+    private handleMenuKeyPress;
+    private handleFocusIndicatorDisplay;
+    private handleMouseDown;
+    private isExternalFiltering;
+    private handleClick;
+    private handleExpandIconMouseDown;
+    private handleClear;
+    private handleCharacterKeyDown;
+    private handleNativeSelectKeyDown;
+    private handleKeyDown;
+    private handleClearButtonFocus;
+    private handleClearButtonBlur;
+    private handleFilter;
+    /**
+     * Put the select component into loading state.
+     * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
+     */
+    private triggerLoading;
+    private getValueFromLabel;
+    private handleSearchableSelectInput;
+    private updateSearchableSelectResultAriaLive;
+    private updateMultiSelectedCountAriaLive;
+    private getDefaultValue;
+    private setDefaultValue;
+    private onFocus;
+    private onBlur;
+    private onTimeoutBlur;
+    private handleFormReset;
+    private clearInput;
+    private renderNativeOption;
+    render(): any;
+}

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-side-navigation/ic-side-navigation.types.d.ts

@@ -0,0 +1,13 @@
+import { IcBrandForeground } from "../../utils/types";
+export interface IcTopBar {
+    isSDevice: boolean;
+    foregroundColor: IcBrandForeground;
+    menuOpen: boolean;
+    href: string;
+    isAppNameSubtitleVariant: boolean;
+    appTitle: string;
+}
+export interface IcExpandedDetail {
+    sideNavExpanded: boolean;
+    sideNavMobile: boolean;
+}

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-skip-link/ic-skip-link.d.ts

@@ -0,0 +1,38 @@
+import { IcThemeMode } from "../../utils/types";
+export declare class SkipLink {
+    private linkEl?;
+    el: HTMLIcSkipLinkElement;
+    /**
+     * If `true`, the skip link will fill the width of the page.
+     */
+    fullWidth: boolean;
+    /**
+     * If `true`, the skip link will appear inline with surrounding page content when focused.
+     */
+    inline: boolean;
+    /**
+     * The label displayed when the skip link is focused.
+     */
+    label: string;
+    /**
+     * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
+     */
+    monochrome: boolean;
+    /**
+     * The target ID for the element which should receive focus when triggering the skip link.
+     */
+    target: string;
+    /**
+     * Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.
+     */
+    theme: IcThemeMode;
+    /**
+     * If `true`, the background will be hidden.
+     */
+    transparentBackground: boolean;
+    /**
+     * Sets focus on the element.
+     */
+    setFocus(): Promise<void>;
+    render(): any;
+}

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-status-tag/ic-status-tag.d.ts

@@ -0,0 +1,35 @@
+import { IcStatusTagStatuses } from "./ic-status-tag.types";
+import { IcEmphasisType, IcSizes } from "../../utils/types";
+export declare class StatusTag {
+    /**
+     * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.
+     * Screen readers will announce changes to the `label`, but not the initial value.
+     */
+    announced?: boolean;
+    /**
+     * The content rendered within the status tag.
+     */
+    label: string;
+    /**
+     * The size of the status tag component.
+     */
+    size?: IcSizes;
+    /**
+     * The colour of the status tag.
+     */
+    status?: IcStatusTagStatuses;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: "dark" | "light" | "inherit";
+    /**
+     * The letter case of the status tag's label.
+     */
+    uppercase?: boolean;
+    /**
+     * The emphasis of the status tag.
+     */
+    variant?: IcEmphasisType;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-status-tag/ic-status-tag.types.d.ts

@@ -0,0 +1 @@
+export type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-text-field/ic-text-field.d.ts

@@ -0,0 +1,262 @@
+import { EventEmitter } from "../../../../../../../../../../../../stencil-public-runtime";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge, IcThemeMode, IcValidationAriaLive } from "../../utils/types";
+import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldKeydownEventDetail, IcTextFieldTypes } from "./ic-text-field.types";
+/**
+ * @slot helper-text - Content is set as the helper text for the text field.
+ * @slot validation-text - Content is set as validation text for the text field.
+ * @slot icon - Content will be placed to the left of the text input.
+ */
+export declare class TextField {
+    private inheritedAttributes;
+    private inputEl;
+    private hostMutationObserver;
+    private interval;
+    el: HTMLIcTextFieldElement;
+    numChars: number;
+    maxCharactersReached: boolean;
+    maxCharactersWarning: boolean;
+    minCharactersUnattained: boolean;
+    maxValueExceeded: boolean;
+    minValueUnattained: boolean;
+    isFocussed: boolean;
+    /**
+     * @slot clear-button - an ic-button clear component will render as an end adornment to the input.
+     * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.
+     * @slot menu - an ic-menu component will appear below the input.
+     */
+    /**
+     * @internal The active element when focus is on the ic-menu items.
+     */
+    ariaActiveDescendant?: string;
+    /**
+     * @internal Used to identify whether inputting any text triggers more predictions
+     */
+    ariaAutocomplete?: IcAriaAutocompleteTypes;
+    /**
+     * @internal Used to identify if the slotted menu is rendered
+     */
+    ariaExpanded: string | null;
+    /**
+     * @internal Used to identify any related child component
+     */
+    ariaOwns?: string;
+    /**
+     * The automatic capitalisation of the text value as it is entered/edited by the user.
+     * Available options: "off", "none", "on", "sentences", "words", "characters".
+     */
+    autocapitalize: string;
+    /**
+     * The state of autocompletion the browser can apply on the text value.
+     */
+    autocomplete?: IcAutocompleteTypes;
+    /**
+     * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+     */
+    autocorrect?: IcAutocorrectStates;
+    /**
+     * If `true`, the form control will have input focus when the page loads.
+     */
+    autofocus: boolean;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled: boolean;
+    watchDisabledHandler(): void;
+    /**
+     * Specify whether the text field fills the full width of the container.
+     * If `true`, this overrides the --input-width CSS variable.
+     */
+    fullWidth: boolean;
+    /**
+     * The helper text that will be displayed for additional field guidance.
+     */
+    helperText: string;
+    /**
+     * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
+     */
+    hideCharCount: boolean;
+    /**
+     * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+     */
+    hideLabel: boolean;
+    /**
+     * @internal If `true`, the hidden form input will stop rendering for form submission.
+     */
+    hiddenInput: boolean;
+    /**
+     * The ID for the input.
+     */
+    inputId: string;
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     */
+    inputmode: IcTextFieldInputModes;
+    /**
+     * The label for the input.
+     */
+    label: string;
+    /**
+     * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)
+     */
+    max?: string | number;
+    /**
+     * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
+     */
+    maxCharacters: number;
+    /**
+     * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+     */
+    maxCharactersMessage: string;
+    /**
+     * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+     */
+    maxMessage: string;
+    /**
+     * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
+     */
+    min?: string | number;
+    /**
+     * The minimum number of characters that can be entered in the field.
+     */
+    minCharacters: number;
+    /**
+     * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+     */
+    minCharactersMessage: string;
+    /**
+     * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+     */
+    minMessage: string;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name: string;
+    /**
+     * The placeholder value to be displayed.
+     */
+    placeholder: string;
+    /**
+     * If `true`, the read only state will be set.
+     */
+    readonly: boolean;
+    /**
+     * If `true`, the input will require a value.
+     */
+    required: boolean;
+    /**
+     * If `true`, the multiline text area will be resizeable.
+     */
+    resize: boolean;
+    /**
+     * @internal Used to set the role if not default textbox;
+     */
+    role: string | null;
+    /**
+     * The number of rows to transform the text field into a text area with a specific height.
+     */
+    rows: number;
+    /**
+     * The size of the text field component.
+     */
+    size: IcSizesNoLarge;
+    /**
+     * If `true`, the value of the text field will have its spelling and grammar checked.
+     */
+    spellcheck: boolean;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme: IcThemeMode;
+    /**
+     * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
+     */
+    truncateValue: boolean;
+    /**
+     * The type of control to display. The default type is text.
+     */
+    type: IcTextFieldTypes;
+    /**
+     * The value of the `aria-live` attribute on the validation message. When set to "default", the `aria-live` value will be handled automatically, e.g. "assertive" for `validation-status="error"`.
+     */
+    validationAriaLive: IcValidationAriaLive;
+    /**
+     * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
+     */
+    validationInline: boolean;
+    /**
+     *  @internal If `true`, the validation will display inline.
+     */
+    validationInlineInternal: boolean;
+    /**
+     * The validation state - e.g. 'error' | 'warning' | 'success'.
+     */
+    validationStatus: IcInformationStatusOrEmpty;
+    /**
+     * The text to display as the validation message.
+     */
+    validationText: string;
+    /**
+     * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+     */
+    debounce: number;
+    private debounceChanged;
+    /**
+     * The value of the text field.
+     */
+    value: string;
+    initialValue: string;
+    private watchValueHandler;
+    /**
+     * @internal Emitted when the validationInlineInternal is `true`
+     */
+    getValidationText: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when input loses focus.
+     */
+    icBlur: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when the value has changed.
+     */
+    icChange: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when input gains focus.
+     */
+    icFocus: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    icInput: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when a keydown event occurred.
+     */
+    icKeydown: EventEmitter<IcTextFieldKeydownEventDetail>;
+    /**
+     * Emitted when the textarea variant is scrolled.
+     */
+    icScroll: EventEmitter;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private checkChildHydration;
+    handleKeyDown(ev: KeyboardEvent): void;
+    /**
+     * Sets focus on the native `input`.
+     */
+    setFocus(): Promise<void>;
+    private getNumberOfCharacters;
+    private getMaxValueExceeded;
+    private getMaxCharactersReached;
+    private onInput;
+    private onBlur;
+    private onFocus;
+    private onTextAreaScroll;
+    private onWheel;
+    private hasStatus;
+    private handleFormReset;
+    private showValidationMargin;
+    private hostMutationCallback;
+    render(): any;
+}

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-text-field/ic-text-field.types.d.ts

@@ -0,0 +1,8 @@
+export type IcTextFieldTypes = "email" | "password" | "tel" | "text" | "url" | "number" | "search";
+export type IcTextFieldInputModes = "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+export type IcAriaAutocompleteTypes = "inline" | "list" | undefined;
+export interface IcTextFieldKeydownEventDetail {
+    event: KeyboardEvent;
+    cursorPosition: number;
+    selectionEnd: number;
+}

package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-theme/ic-theme.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from "../../../../../../../../../../../../stencil-public-runtime";
+import { IcColor, IcBrand, IcThemeSettings } from "../../utils/types";
+export declare class Theme {
+    themeClass: string;
+    /**
+     * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+     */
+    brandColor?: IcColor | null;
+    watchBrandColorPropHandler(): void;
+    /**
+     * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
+     */
+    theme?: IcThemeSettings;
+    watchThemePropHandler(): void;
+    /**
+     * @internal Emitted when the brand color is changed.
+     */
+    brandChange: EventEmitter<IcBrand>;
+    /**
+     * Emitted when the theme is changed.
+     */
+    icThemeChange: EventEmitter<IcThemeSettings>;
+    componentWillLoad(): void;
+    private darkModeChangeHandler;
+    private checkBrandColorContrast;
+    private setBrandColor;
+    render(): any;
+}