@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/types/components/ic-pagination-bar/ic-pagination-bar.stories.d.ts

@@ -0,0 +1,106 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    let component: string;
+    namespace parameters {
+        namespace componentAPI {
+            export { readme as data };
+        }
+    }
+}
+export default _default;
+export namespace Basic {
+    function render(): import("lit-html").TemplateResult<1>;
+    let name: string;
+}
+export namespace ItemsPerPageControl {
+    export function render_1(): import("lit-html").TemplateResult<1>;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace GoToPageControl {
+    export function render_2(): import("lit-html").TemplateResult<1>;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace PaginationRangeLabelType {
+    export function render_3(): import("lit-html").TemplateResult<1>;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace PaginationItemLabel {
+    export function render_4(): import("lit-html").TemplateResult<1>;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace PaginationType {
+    export function render_5(): import("lit-html").TemplateResult<1>;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}
+export namespace AlignmentLeft {
+    export function render_6(): import("lit-html").TemplateResult<1>;
+    export { render_6 as render };
+    let name_6: string;
+    export { name_6 as name };
+}
+export namespace AlignmentSpaceBetween {
+    export function render_7(): import("lit-html").TemplateResult<1>;
+    export { render_7 as render };
+    let name_7: string;
+    export { name_7 as name };
+}
+export namespace Appearance {
+    export function render_8(): import("lit-html").TemplateResult<1>;
+    export { render_8 as render };
+    let name_8: string;
+    export { name_8 as name };
+}
+export namespace HideRangeLabel {
+    export function render_9(): import("lit-html").TemplateResult<1>;
+    export { render_9 as render };
+    let name_9: string;
+    export { name_9 as name };
+}
+export namespace HideAllFromItemsPerPage {
+    export function render_10(): import("lit-html").TemplateResult<1>;
+    export { render_10 as render };
+    let name_10: string;
+    export { name_10 as name };
+}
+export namespace SetToFirstPageWhenItemsPerPageChanges {
+    export function render_11(): import("lit-html").TemplateResult<1>;
+    export { render_11 as render };
+    let name_11: string;
+    export { name_11 as name };
+}
+export namespace SetSelectedItemsPerPage {
+    export function render_12(): import("lit-html").TemplateResult<1>;
+    export { render_12 as render };
+    let name_12: string;
+    export { name_12 as name };
+}
+export namespace SetSelectedItemsPerPageToInvalidValue {
+    export function render_13(): import("lit-html").TemplateResult<1>;
+    export { render_13 as render };
+    let name_13: string;
+    export { name_13 as name };
+}
+export namespace SetCurrentPage {
+    export function render_14(): import("lit-html").TemplateResult<1>;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+}
+export namespace SetCurrentPageToInvalidValue {
+    export function render_15(): import("lit-html").TemplateResult<1>;
+    export { render_15 as render };
+    let name_15: string;
+    export { name_15 as name };
+}
+import readme from "./readme.md";

package/dist/types/components/ic-pagination-bar/ic-pagination-bar.types.d.ts

@@ -0,0 +1,4 @@
+export interface IcPageChangeEventDetail {
+    value: number;
+    fromItemsPerPage?: boolean;
+}

package/dist/types/components/ic-select-with-multi/ic-select-multi.stories.d.ts

@@ -0,0 +1,106 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    let component: string;
+    namespace parameters {
+        namespace componentAPI {
+            export { readme as data };
+        }
+    }
+}
+export default _default;
+export namespace DefaultExample {
+    function render(): HTMLDivElement;
+    let name: string;
+}
+export namespace DefaultValueExample {
+    export function render_1(): HTMLDivElement;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+}
+export namespace WithClearButtonExample {
+    export function render_2(): HTMLDivElement;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+}
+export namespace WithDescriptionsExample {
+    export function render_3(): HTMLDivElement;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+}
+export namespace HelperTextExample {
+    export function render_4(): HTMLDivElement;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+}
+export namespace SizesExample {
+    export function render_5(): HTMLDivElement;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+}
+export namespace DisabledExample {
+    export function render_6(): HTMLDivElement;
+    export { render_6 as render };
+    let name_6: string;
+    export { name_6 as name };
+}
+export namespace DisabledOptionsExample {
+    export function render_7(): HTMLDivElement;
+    export { render_7 as render };
+    let name_7: string;
+    export { name_7 as name };
+}
+export namespace HiddenLabelExample {
+    export function render_8(): HTMLDivElement;
+    export { render_8 as render };
+    let name_8: string;
+    export { name_8 as name };
+}
+export namespace RequiredExample {
+    export function render_9(): HTMLDivElement;
+    export { render_9 as render };
+    let name_9: string;
+    export { name_9 as name };
+}
+export namespace ReadOnlyExample {
+    export function render_10(): HTMLDivElement;
+    export { render_10 as render };
+    let name_10: string;
+    export { name_10 as name };
+}
+export namespace GroupsExample {
+    export function render_11(): HTMLDivElement;
+    export { render_11 as render };
+    let name_11: string;
+    export { name_11 as name };
+}
+export namespace RecommendedExample {
+    export function render_12(): HTMLDivElement;
+    export { render_12 as render };
+    let name_12: string;
+    export { name_12 as name };
+}
+export namespace ValidationExample {
+    export function render_13(): HTMLDivElement;
+    export { render_13 as render };
+    let name_13: string;
+    export { name_13 as name };
+}
+export namespace LoadingWithErrorExample {
+    export function render_14(): HTMLDivElement;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+}
+export namespace InFormExample {
+    export function render_15(): HTMLDivElement;
+    export { render_15 as render };
+    let name_15: string;
+    export { name_15 as name };
+}
+import readme from "./readme.md";

package/dist/types/components/ic-select-with-multi/ic-select.d.ts

@@ -0,0 +1,289 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcOptionSelectEventDetail } from "@ukic/web-components/dist/types/components";
+import { IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
+import { IcInformationStatusOrEmpty, IcSearchMatchPositions, IcValueEventDetail, IcSizes } from "../../utils/types";
+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;
+    el: HTMLIcSelectWithMultiElement;
+    ariaActiveDescendant: string;
+    clearButtonFocused: boolean;
+    debounceIcChange: number;
+    hiddenInputValue: string;
+    noOptions: IcMenuOption[];
+    open: boolean;
+    pressedCharacters: string;
+    searchableSelectInputValue: string;
+    /**
+     * **[DEPRECATED]** This prop should not be used anymore.
+     */
+    charactersUntilSuggestions?: number;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+     */
+    disableFilter?: 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;
+    /**
+     * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.
+     * This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formaction?: string;
+    /**
+     * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formenctype?: string;
+    /**
+     * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formmethod?: string;
+    /**
+     * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formnovalidate?: boolean;
+    /**
+     * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.
+     * This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    formtarget?: string;
+    /**
+     * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+     */
+    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.
+     */
+    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;
+    /**
+     * **[DEPRECATED]** This prop should not be used anymore. Set prop `size` to "small" instead.
+     */
+    small?: boolean;
+    /**
+     * If using external filtering, set a timeout for when loading takes too long.
+     */
+    timeout?: number;
+    /**
+     * 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 `icChange` 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[];
+    initialValue: string | string[];
+    inputValueToFilter: string;
+    currValue: string | string[];
+    valueChangedHandler(): void;
+    /**
+     * Emitted when the select loses focus.
+     */
+    icBlur: EventEmitter<void>;
+    /**
+     * Emitted when the value changes.
+     */
+    icChange: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when the clear button is clicked.
+     */
+    icClear: EventEmitter<void>;
+    /**
+     * Emitted when the select gains focus.
+     */
+    icFocus: EventEmitter<void>;
+    /**
+     * Emitted when a keyboard input occurred.
+     */
+    icInput: EventEmitter<IcValueEventDetail>;
+    /**
+     * 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<IcValueEventDetail>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    /**
+     * Sets focus on the input box.
+     */
+    setFocus(): Promise<void>;
+    private handleRetry;
+    private updateOnChangeDebounce;
+    private emitIcChange;
+    private emitImmediateIcChange;
+    /**
+     * 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 handleMultipleSelectChange;
+    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 debounceAriaLiveUpdate;
+    private updateMultiSelectedCountAriaLive;
+    private getDefaultValue;
+    private setDefaultValue;
+    private onFocus;
+    private onBlur;
+    private onTimeoutBlur;
+    private handleFormReset;
+    render(): any;
+}

package/dist/types/components/ic-select-with-multi/story-data.d.ts

@@ -0,0 +1,32 @@
+import { IcMenuOption } from "@ukic/web-components";
+export declare const OPTIONS: IcMenuOption[];
+export declare const OPTIONS_WITH_DESCRIPTIONS: IcMenuOption[];
+export declare const OPTIONS_WITH_DISABLED: IcMenuOption[];
+export declare const GROUPED_OPTIONS: IcMenuOption[];
+export declare const OPTIONS_WITH_RECOMMENDED: ({
+    label: string;
+    value: string;
+    recommended?: undefined;
+} | {
+    label: string;
+    value: string;
+    recommended: boolean;
+})[];
+export declare const createMultiSelectElement: (options?: IcMenuOption[]) => HTMLIcSelectWithMultiElement;
+export declare const createContainer: (elementArray: HTMLElement[], height?: string) => HTMLDivElement;
+export declare const Default: () => HTMLDivElement;
+export declare const DefaultValue: () => HTMLDivElement;
+export declare const WithClearButton: () => HTMLDivElement;
+export declare const WithDescriptions: () => HTMLDivElement;
+export declare const HelperText: () => HTMLDivElement;
+export declare const Sizes: () => HTMLDivElement;
+export declare const Disabled: () => HTMLDivElement;
+export declare const DisabledOptions: () => HTMLDivElement;
+export declare const HiddenLabel: () => HTMLDivElement;
+export declare const Required: () => HTMLDivElement;
+export declare const ReadOnly: () => HTMLDivElement;
+export declare const Groups: () => HTMLDivElement;
+export declare const Recommended: () => HTMLDivElement;
+export declare const Validation: () => HTMLDivElement;
+export declare const LoadingWithError: () => HTMLDivElement;
+export declare const InForm: () => HTMLDivElement;

package/dist/types/components/ic-tree-item/ic-tree-item.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+/**
+ * @slot label - Content is set as the tree item label.
+ * @slot icon - Content is placed to the left of the label.
+ * @slot router-item - Handle routing by nesting your routes in this slot.
+ */
+export declare class TreeItem {
+    private treeItemId;
+    private treeItemElement;
+    private treeItemTag;
+    private routerSlot;
+    private hostMutationObserver;
+    private TOOLTIP;
+    el: HTMLIcTreeItemElement;
+    childTreeItems: HTMLIcTreeItemElement[];
+    /**
+     * @internal Determines whether the light or dark variant of the tree item should be displayed.
+     */
+    appearance?: IcThemeForegroundNoDefault;
+    /**
+     * If `true`, the tree item appears in the disabled state.
+     */
+    disabled?: boolean;
+    watchDisabledHandler(): void;
+    /**
+     * If `true`, the tree item appears in the expanded state.
+     */
+    expanded: boolean;
+    /**
+     * @internal Determines if the parent tree item has been expanded.
+     */
+    hasParentExpanded: boolean;
+    /**
+     * The URL that the tree item link points to. If set, the tree item will render as an "a" tag, otherwise it will render as a div.
+     */
+    href?: string | undefined;
+    /**
+     * The human language of the linked URL.
+     */
+    hreflang?: string;
+    /**
+     * @internal If `true`, the tree item is a parent of other tree items.
+     */
+    isParent: boolean;
+    /**
+     * The label of the tree item.
+     */
+    label: 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;
+    /**
+     * If `true`, the tree item appears in the selected state.
+     */
+    selected: boolean;
+    watchSelectedHandler(): void;
+    /**
+     * @internal Determines the size of the tree item.
+     */
+    size?: IcSizes;
+    /**
+     * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
+     */
+    target?: string;
+    /**
+     * If `true`, the tree item label will be truncated instead of text wrapping.
+     */
+    truncateTreeItem?: boolean;
+    /**
+     * Emitted when tree item is selected.
+     */
+    icTreeItemSelected: EventEmitter<{
+        id: string;
+    }>;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    componentDidUpdate(): void;
+    handleKeyDown(ev: KeyboardEvent): void;
+    /**
+     * Sets focus on the native `input`.
+     */
+    setFocus(): Promise<void>;
+    private handleTreeItemClicked;
+    /**
+     * @internal Updates the aria-label of the tree item.
+     */
+    updateAriaLabel(): Promise<void>;
+    private setTreeItemPadding;
+    private truncateTreeItemLabel;
+    private hasRouterSlot;
+    private handleDisplayTooltip;
+    render(): any;
+}

package/dist/types/components/ic-tree-view/ic-tree-view.d.ts

@@ -0,0 +1,51 @@
+import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+/**
+ * @slot heading - Content is set as the tree view heading.
+ * @slot icon - Content is placed to the left of the heading.
+ */
+export declare class TreeView {
+    private treeViewId;
+    private treeItemTag;
+    private hostMutationObserver;
+    private isLoaded;
+    el: HTMLIcTreeViewElement;
+    treeItems: HTMLIcTreeItemElement[];
+    /**
+     * The appearance of the tree view, e.g. dark, or light.
+     */
+    appearance?: IcThemeForegroundNoDefault;
+    watchAppearanceHandler(): void;
+    /**
+     * The heading of the tree view.
+     */
+    heading?: string;
+    /**
+     * The size of the tree view.
+     */
+    size?: IcSizes;
+    watchSizeHandler(): void;
+    /**
+     * If `true`, the tree view heading will be truncated instead of text wrapping.
+     */
+    truncateHeading?: boolean;
+    /**
+     * If `true`, tree items will be truncated, unless they are individually overridden.
+     */
+    truncateTreeItems?: boolean;
+    watchTruncateTreeItemsHandler(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    handleTreeItemSelected(event: CustomEvent): void;
+    private handleKeyDown;
+    private getNextItemToSelect;
+    private linkTreeItems;
+    private setTreeItems;
+    private getAllTreeItems;
+    private addSlotChangeListener;
+    private truncateTreeViewHeading;
+    private isHeadingDefined;
+    private hasHeadingAreaContent;
+    render(): any;
+}