@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

package/dist/types/components/ic-date-picker/ic-date-picker.d.ts

@@ -1,31 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty } from "../../utils/types";
-interface IcDateInputProps {
-    dateFormat?: IcDateFormat;
-    disabled?: boolean;
-    disableDays?: IcWeekDays[];
-    disableDaysMessage?: string;
-    disableFuture?: boolean;
-    disableFutureMessage?: string;
-    disablePast?: boolean;
-    disablePastMessage?: string;
-    helperText?: string;
-    inputId?: string;
-    label: string;
-    max?: string | Date;
-    min?: string | Date;
-    name?: string;
-    required?: boolean;
-    showClearButton?: boolean;
-    showCalendarButton?: boolean;
-    size?: IcSizes;
-    value?: string | Date;
-    validationStatus?: IcInformationStatusOrEmpty;
-    validationText?: string;
-}
 export declare class DatePicker {
     private inputEl;
     private clearButtonEl;
+    private dateInputProps;
     private daysOfWeek;
     private dayButtonFocussed;
     private dayPickerKeyboardNav;
@@ -48,7 +26,6 @@ export declare class DatePicker {
     calendarOpen: boolean;
     currMonthView: Date[];
     currYearPickerView: number[];
-    dateInputProps: IcDateInputProps;
     decadeView: number[];
     focussedDate: Date;
     focussedDay: number;
@@ -84,6 +61,7 @@ export declare class DatePicker {
      * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
      */
     disableFuture?: boolean;
+    watchDisableFutureHandler(): void;
     /**
      * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
      */
@@ -92,6 +70,7 @@ export declare class DatePicker {
      * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
      */
     disablePast?: boolean;
+    watchDisablePastHandler(): void;
     /**
      * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
      */
@@ -100,10 +79,18 @@ export declare class DatePicker {
      * The helper text that will be displayed for additional field guidance. This will default to the text "Use format" along with the `dateFormat` value.
      */
     helperText?: string;
+    /**
+     * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+     */
+    hideHelperText: boolean;
     /**
      * The ID for the input field. The default will be an automatically generated value.
      */
     inputId?: string;
+    /**
+     * The text to display as the validation message when an invalid date is entered.
+     */
+    invalidDateMessage?: string;
     /**
      * The label for the date input.
      */
@@ -154,6 +141,7 @@ export declare class DatePicker {
      * Default is Monday.
      */
     startOfWeek?: IcWeekDays;
+    watchStartOfWeekHandler(): void;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */
@@ -180,6 +168,8 @@ export declare class DatePicker {
         value: Date;
     }>;
     componentWillLoad(): void;
+    componentWillRender(): void;
+    componentWillUpdate(): void;
     localCalendarButtonClickHandler(ev: CustomEvent): void;
     calendarButtonClickHandler(): void;
     private setDecadeView;
@@ -248,4 +238,3 @@ export declare class DatePicker {
     private setDateInputProps;
     render(): any;
 }
-export {};

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

@@ -12,12 +12,15 @@ export declare class Menu {
     private isMultiSelect;
     private isSearchBar;
     private isSearchableSelect;
+    private lastOptionSelected;
+    private lastOptionFocused;
     private menu;
     private multiOptionClicked;
     private popperInstance;
     private preventClickOpen;
     private preventMenuFocus;
     private selectAllButton;
+    private shiftPressed;
     private ungroupedOptions;
     el: HTMLIcMenuWithMultiElement;
     focusFromSearchKeypress: boolean;
@@ -83,10 +86,6 @@ export declare class Menu {
      * The size of the menu.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The possible menu selection options.
      */
@@ -178,6 +177,8 @@ export declare class Menu {
     private setHighlightedOption;
     private autoSetInputValueKeyboardOpen;
     private selectHighlightedOption;
+    private isOptionSelected;
+    private deselectSelectedOptions;
     private manualSetInputValueKeyboardOpen;
     private setInputValue;
     private handleOptionClick;
@@ -191,12 +192,17 @@ export declare class Menu {
     private handleSelectAllBlur;
     private handleSelectAllFocus;
     private handleSelectAllMouseDown;
+    private handleSingleShiftSelect;
+    private handleMultipleShiftSelect;
+    private handleOptionSelect;
+    private getFirstOptionInSelection;
     private emitSelectAll;
     private emitMenuKeyPress;
     private autoSetValueOnMenuKeyDown;
     private getOptionId;
     private getOptionAriaLabel;
     private getSortedOptions;
+    private getOptionHighlightedIndex;
     private isManualMode;
     private scrollToSelected;
     private loadUngroupedOptions;

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

@@ -1,20 +1,30 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
-import { IcPaginationAlignmentOptions, IcPaginationControlTypes, IcPaginationTypes } from "../ic-pagination/ic-pagination.types";
+import { IcPageChangeEventDetail } from "./ic-pagination-bar.types";
+import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
 export declare class PaginationBar {
-    private PAGINATION;
-    private TEXT_FIELD;
-    private TOOLTIP;
     private PAGE_INPUT_FIELD_ID;
     private INVALID_PAGE_ERROR;
-    private NAN_ERROR;
     private resizeObserver;
+    private pageDropdownEl;
+    private pageInputEl;
+    private pageInputTooltipEl;
     private paginationBarEl;
+    private paginationEl;
     el: HTMLIcPaginationBarElement;
-    currentPage: number;
+    capitalizedItemLabel: string;
+    capitalizedPageLabel: string;
+    activePage: number;
+    displayedItemsPerPageOptions?: {
+        label: string;
+        value: string;
+    }[];
     inputError: string;
-    itemsPerPage: string;
+    itemsPerPage: number;
+    itemsPerPageString: string;
     lowerBound: number;
+    lowerCaseItemLabel: string;
+    lowerCasePageLabel: string;
     paginationWidth: number;
     paginationWrapped: boolean;
     totalPages: number;
@@ -28,9 +38,15 @@ export declare class PaginationBar {
      */
     appearance?: IcThemeForeground;
     /**
-     * The label which will be used in place of 'items' if paginationType is data. Should be capitalised.
+     * The current page number to be displayed on the pagination bar.
+     */
+    currentPage?: number;
+    watchPageNumberHandler(): void;
+    /**
+     * The text which will be used in place of 'Item' on the pagination bar.
      */
     itemLabel?: string;
+    watchItemLabelHandler(): void;
     /**
      * The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items.
      */
@@ -38,26 +54,34 @@ export declare class PaginationBar {
         label: string;
         value: string;
     }[];
+    watchItemsPerPageOptionsHandler(newVal: {
+        label: string;
+        value: string;
+    }[], oldVal: {
+        label: string;
+        value: string;
+    }[]): void;
     /**
      * Whether the displayed pagination is simple or complex.
      */
-    paginationControl?: IcPaginationControlTypes;
+    type?: IcPaginationTypes;
     /**
      * Whether total number of items and current item range or total number of pages and current page is displayed.
      */
-    paginationType?: IcPaginationTypes;
+    rangeLabelType?: IcPaginationLabelTypes;
     /**
-     * The label which will be used in place of 'Page' if paginationType is page. Should be capitalised.
+     * The text which will be used in place of 'Page' on the pagination bar.
      */
     pageLabel?: string;
+    watchPageLabelHandler(): void;
     /**
      * If `true`, the 'go to page' control should be displayed.
      */
     showGoToPageControl?: boolean;
     /**
-     * If `true`, the number of total items and current item range or number of total pages and current page should be displayed.
+     * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
      */
-    showItemsPerPage?: boolean;
+    hideRangeLabel?: boolean;
     /**
      * If `true`, the select input to control 'items per page' should be displayed.
      */
@@ -66,12 +90,12 @@ export declare class PaginationBar {
      * Total number of items to be displayed across all pages.
      */
     totalItems: number;
+    watchTotalItemsHandler(): void;
     /**
      * Emitted when a page is navigated to via the 'go to' input.
+     * The `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring.
      */
-    icPageChange: EventEmitter<{
-        value: number;
-    }>;
+    icPageChange: EventEmitter<IcPageChangeEventDetail>;
     /**
      * Emitted when the items per page option is changed.
      */
@@ -84,20 +108,20 @@ export declare class PaginationBar {
     pageChangeHandler(ev: CustomEvent): void;
     private changeItemsPerPage;
     private changePage;
+    private focusElFromLabel;
     private goToPage;
+    private goToPageLabelClickHandler;
     private handleBlur;
     private handleFocus;
     private handleInputChange;
     private handleKeydown;
     private handleKeyUp;
+    private itemsPerPageLabelClickHandler;
     private paginationShouldWrap;
-    private resizeObserverCallback;
     private runResizeObserver;
-    private setDefaultItemsPerPage;
-    private setDefaultItemsPerPageOptions;
-    private setGoToPageInputStyles;
-    private setNumberPages;
+    private setInputError;
+    private setItemsPerPage;
+    private setPaginationBarContent;
     private setUpperBound;
-    private trimItemsPerPageOptions;
     render(): any;
 }

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.d.ts

@@ -31,10 +31,6 @@ export declare class Select {
     open: boolean;
     pressedCharacters: string;
     searchableSelectInputValue: string;
-    /**
-     * **[DEPRECATED]** This prop should not be used anymore.
-     */
-    charactersUntilSuggestions?: number;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -42,7 +38,7 @@ export declare class Select {
     /**
      * 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;
+    disableAutoFiltering?: boolean;
     /**
      * The text displayed when there are no options in the option list.
      */
@@ -51,28 +47,6 @@ export declare class Select {
      * 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.
      */
@@ -145,10 +119,6 @@ export declare class Select {
      * 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.
      */

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

@@ -0,0 +1,95 @@
+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;
+    /**
+     * @internal 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;
+    /**
+     * Emitted when tree item is selected.
+     */
+    icTreeItemSelected: EventEmitter<{
+        id: string;
+    }>;
+    disconnectedCallback(): void;
+    componentDidLoad(): 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 hostMutationCallback;
+    private handleDisplayTooltip;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+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;
+    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;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    handleTreeItemSelected(event: CustomEvent): void;
+    private handleKeyDown;
+    private getNextItemToSelect;
+    private linkTreeItems;
+    private setTreeItems;
+    private getAllTreeItems;
+    private addSlotChangeListener;
+    private truncateTreeViewHeading;
+    private hostMutationCallback;
+    private isHeadingDefined;
+    private hasHeadingAreaContent;
+    render(): any;
+}