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

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

@@ -0,0 +1,153 @@
+/// <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(): HTMLIcDatePickerElement;
+    let name: string;
+    let height: string;
+}
+export namespace SizesExample {
+    export function render_1(): HTMLElement;
+    export { render_1 as render };
+    let name_1: string;
+    export { name_1 as name };
+    let height_1: string;
+    export { height_1 as height };
+}
+export namespace MaxWidthExample {
+    export function render_2(): HTMLElement;
+    export { render_2 as render };
+    let name_2: string;
+    export { name_2 as name };
+    let height_2: string;
+    export { height_2 as height };
+}
+export namespace DisabledExample {
+    export function render_3(): HTMLIcDatePickerElement;
+    export { render_3 as render };
+    let name_3: string;
+    export { name_3 as name };
+    let height_3: string;
+    export { height_3 as height };
+}
+export namespace DateFormatsExample {
+    export function render_4(): HTMLElement;
+    export { render_4 as render };
+    let name_4: string;
+    export { name_4 as name };
+    let height_4: string;
+    export { height_4 as height };
+}
+export namespace ValueExample {
+    export function render_5(): HTMLIcDatePickerElement;
+    export { render_5 as render };
+    let name_5: string;
+    export { name_5 as name };
+    let height_5: string;
+    export { height_5 as height };
+}
+export namespace ValueCalendarOnlyModeExample {
+    export function render_6(): HTMLIcDatePickerElement;
+    export { render_6 as render };
+    let name_6: string;
+    export { name_6 as name };
+    let height_6: string;
+    export { height_6 as height };
+}
+export namespace OpenAtDate {
+    export function render_7(): HTMLIcDatePickerElement;
+    export { render_7 as render };
+    let name_7: string;
+    export { name_7 as name };
+    let height_7: string;
+    export { height_7 as height };
+}
+export namespace StartOfWeek {
+    export function render_8(): HTMLIcDatePickerElement;
+    export { render_8 as render };
+    let name_8: string;
+    export { name_8 as name };
+    let height_8: string;
+    export { height_8 as height };
+}
+export namespace DisableDaysOfWeek {
+    export function render_9(): HTMLIcDatePickerElement;
+    export { render_9 as render };
+    let name_9: string;
+    export { name_9 as name };
+    let height_9: string;
+    export { height_9 as height };
+}
+export namespace MaxMinExample {
+    export function render_10(): HTMLIcDatePickerElement;
+    export { render_10 as render };
+    let name_10: string;
+    export { name_10 as name };
+    let height_10: string;
+    export { height_10 as height };
+}
+export namespace DisableDatesInPast {
+    export function render_11(): HTMLIcDatePickerElement;
+    export { render_11 as render };
+    let name_11: string;
+    export { name_11 as name };
+    let height_11: string;
+    export { height_11 as height };
+}
+export namespace DisableDatesInFuture {
+    export function render_12(): HTMLIcDatePickerElement;
+    export { render_12 as render };
+    let name_12: string;
+    export { name_12 as name };
+    let height_12: string;
+    export { height_12 as height };
+}
+export namespace DaysOutsideMonthHidden {
+    export function render_13(): HTMLIcDatePickerElement;
+    export { render_13 as render };
+    let name_13: string;
+    export { name_13 as name };
+    let height_13: string;
+    export { height_13 as height };
+}
+export namespace TodayClearButtonsHidden {
+    export function render_14(): HTMLIcDatePickerElement;
+    export { render_14 as render };
+    let name_14: string;
+    export { name_14 as name };
+    let height_14: string;
+    export { height_14 as height };
+}
+export namespace JavaScriptDates {
+    export function render_15(): HTMLIcDatePickerElement;
+    export { render_15 as render };
+    let name_15: string;
+    export { name_15 as name };
+    let height_15: string;
+    export { height_15 as height };
+}
+export namespace IcChangeEvent {
+    export function render_16(): HTMLElement;
+    export { render_16 as render };
+    let name_16: string;
+    export { name_16 as name };
+    let height_16: string;
+    export { height_16 as height };
+}
+export namespace IcSelectedDateChangeEvent {
+    export function render_17(): HTMLElement;
+    export { render_17 as render };
+    let name_17: string;
+    export { name_17 as name };
+    let height_17: string;
+    export { height_17 as height };
+}
+import readme from "./readme.md";

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

@@ -0,0 +1,16 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+export type DayButtonProps = {
+    focussed: boolean;
+    today: boolean;
+    day: Date;
+    monthInView: number;
+    onFocusDay: () => void;
+    onBlurDay: () => void;
+    onSelectDay: (day: Date) => void;
+    selected: boolean;
+    focussedDayRef?: (element: HTMLButtonElement) => void;
+    inRange: boolean;
+    showDaysOutsideMonth: boolean;
+    disableDay: boolean;
+};
+export declare const DayButton: FunctionalComponent<DayButtonProps>;

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

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { IcSizes } from "../../utils/types";
+export type MonthPickerProps = {
+    size: IcSizes;
+    focussedMonth: number;
+    monthInView: number;
+    yearInView: number;
+    onSelectMonth: (month: number) => void;
+    onKeyDown: (ev: KeyboardEvent) => void;
+    focussedMonthRef: (element: HTMLIcButtonElement) => void;
+    minDate: Date;
+    maxDate: Date;
+};
+export declare const MonthPicker: FunctionalComponent<MonthPickerProps>;

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

@@ -0,0 +1,16 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { IcSizes } from "../../utils/types";
+export type YearPickerProps = {
+    decadeView: number[];
+    size: IcSizes;
+    focussedYear: number;
+    yearInView: number;
+    onSelectYear: (year: number) => void;
+    onKeyDown: (ev: KeyboardEvent) => void;
+    onFocusYear: () => void;
+    onBlurYear: () => void;
+    minDate: Date;
+    maxDate: Date;
+    focussedYearRef: (element: HTMLIcButtonElement) => void;
+};
+export declare const YearPicker: FunctionalComponent<YearPickerProps>;

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

@@ -0,0 +1,24 @@
+export declare const DATE_PICKER_LABEL = "When would you like to collect your coffee?";
+export declare const createDatePickerElement: () => HTMLIcDatePickerElement;
+export declare const Default: () => HTMLIcDatePickerElement;
+export declare const Small: () => HTMLIcDatePickerElement;
+export declare const Large: () => HTMLIcDatePickerElement;
+export declare const Sizes: () => HTMLElement;
+export declare const MaxWidth: () => HTMLElement;
+export declare const MonthFirst: () => HTMLIcDatePickerElement;
+export declare const YearFirst: () => HTMLIcDatePickerElement;
+export declare const DateFormats: () => HTMLElement;
+export declare const Value: () => HTMLIcDatePickerElement;
+export declare const ValueCalendarOnlyMode: () => HTMLIcDatePickerElement;
+export declare const OpenAt: () => HTMLIcDatePickerElement;
+export declare const WeekStart: () => HTMLIcDatePickerElement;
+export declare const WorkingWeek: () => HTMLIcDatePickerElement;
+export declare const MaxMin: () => HTMLIcDatePickerElement;
+export declare const Disabled: () => HTMLIcDatePickerElement;
+export declare const DisablePast: () => HTMLIcDatePickerElement;
+export declare const DisableFuture: () => HTMLIcDatePickerElement;
+export declare const HideOutsideMonth: () => HTMLIcDatePickerElement;
+export declare const HideButtons: () => HTMLIcDatePickerElement;
+export declare const JSDates: () => HTMLIcDatePickerElement;
+export declare const IcChangeDate: () => HTMLElement;
+export declare const IcSelectedDateChange: () => HTMLElement;

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

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

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

@@ -0,0 +1,218 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcActivationTypes, IcMenuOption } from "@ukic/web-components/dist/types/utils/types";
+import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail, IcSearchBarSearchModes } from "@ukic/web-components/dist/types/components";
+import { IcValueEventDetail, IcSizes } from "../../utils/types";
+export declare class Menu {
+    private activeDescendantAttr;
+    private clearButtonId;
+    private disabledOptionSelected;
+    private hasPreviouslyBlurred;
+    private hasTimedOut;
+    private isLoading;
+    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;
+    initialOptionsListRender: boolean;
+    keyboardNav: boolean;
+    optionHighlighted: string;
+    preventIncorrectTabOrder: boolean;
+    menuOptions: IcMenuOption[];
+    /**
+     * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
+     */
+    activationType?: IcActivationTypes;
+    /**
+     * The reference to an anchor element the menu will position itself from when rendered.
+     */
+    anchorEl: HTMLElement;
+    /**
+     * @internal If `true`, autofocus will be applied on selected item when menu is open.
+     */
+    autoFocusOnSelected: boolean;
+    /**
+     *  If `true`, the menu will close when an option is selected.
+     */
+    closeOnSelect: boolean;
+    /**
+     *  If `true`, the menu will fill the width of the container.
+     */
+    fullWidth: boolean;
+    /**
+     * The reference to the input element.
+     */
+    inputEl: HTMLElement;
+    /**
+     * The label for the input element.
+     */
+    inputLabel: string;
+    /**
+     * The custom name for the label field for IcMenuOption.
+     */
+    labelField: string;
+    /**
+     * The ID of the menu.
+     */
+    menuId: string;
+    /**
+     * If `true`, the menu will be displayed open.
+     */
+    open: boolean;
+    watchOpenHandler(): void;
+    /**
+     * @internal - The parent element if ic-menu is nested inside another component.
+     */
+    parentEl?: HTMLElement;
+    /**
+     * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+     */
+    searchMode?: IcSearchBarSearchModes;
+    /**
+     * @internal If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+     */
+    selectOnEnter?: boolean;
+    /**
+     * 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.
+     */
+    options: IcMenuOption[];
+    watchOptionsHandler(newOptions: IcMenuOption[]): void;
+    /**
+     * The value of the currently selected option - or array of values (if multiple options allowed).
+     */
+    value: string | string[];
+    /**
+     * The custom name for the value field for IcMenuOption.
+     */
+    valueField: string;
+    /**
+     * @internal Emitted when key is pressed while menu is open.
+     */
+    menuKeyPress: EventEmitter<{
+        isNavKey: boolean;
+        key: string;
+    }>;
+    /**
+     * @internal Emitted when an option has been highlighted.
+     */
+    menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
+    /**
+     * @internal Emitted when an option is selected.
+     */
+    menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * @internal Emitted when all options are selected or deselected.
+     */
+    menuOptionSelectAll: EventEmitter<{
+        select: boolean;
+    }>;
+    /**
+     * @internal Emitted when state of menu changes (i.e. open or close).
+     */
+    menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+    /**
+     * @internal Emitted when the retry button is clicked.
+     */
+    retryButtonClicked: EventEmitter<IcValueEventDetail>;
+    /**
+     * @internal Emitted when the timeout menu loses focus.
+     */
+    timeoutBlur: EventEmitter<{
+        ev: FocusEvent;
+    }>;
+    /**
+     * @internal Emitted when the ungrouped options have been set.
+     */
+    ungroupedOptionsSet: EventEmitter<{
+        options: IcMenuOption[];
+    }>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    componentDidRender(): void;
+    /**
+     * @internal If menu is opened with the mouse, emit menuStateChange custom event.
+     */
+    handleClickOpen(): Promise<void>;
+    /**
+     * Used alongside activationType
+     * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
+     * @param {KeyboardEvent} event - keyboard event
+     */
+    handleKeyboardOpen(event: KeyboardEvent): Promise<void>;
+    /**
+     * @internal Used to highlight the first option in the menu.
+     */
+    handleSetFirstOption(): Promise<void>;
+    /**
+     * @internal Used to initialize popperJS with an anchor element.
+     * 5/12/2023: Tested with Floating UI, however, discovered inconsistent
+     * boundary behaviour so sticking with PopperJS.
+     */
+    initPopperJs(anchor: HTMLElement): Promise<void>;
+    private handleClearListener;
+    private handleSubmitSearch;
+    private handleMenuChange;
+    private setNextOptionValue;
+    private setPreviousOptionValue;
+    private getParentEl;
+    private arrowBehaviour;
+    private getMenuOptions;
+    private setHighlightedOption;
+    private autoSetInputValueKeyboardOpen;
+    private selectHighlightedOption;
+    private isOptionSelected;
+    private deselectSelectedOptions;
+    private manualSetInputValueKeyboardOpen;
+    private setInputValue;
+    private handleOptionClick;
+    private handleRetry;
+    private handleRetryKeyDown;
+    private handleBlur;
+    private handleMouseDown;
+    private handleMenuKeyDown;
+    private handleMenuKeyUp;
+    private handleSelectAllClick;
+    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;
+    private setMenuScrollbar;
+    private handleTimeoutBlur;
+    private optionContent;
+    private displayOption;
+    render(): any;
+}

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

@@ -1,20 +1,31 @@
 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;
+    private userSetItemsPerPage;
     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,36 +39,60 @@ 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 items per page option to be selected.
+     */
+    selectedItemsPerPage?: number;
+    watchSelectedItemsPerPageHandler(): void;
+    /**
+     * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+     */
+    hideAllFromItemsPerPage?: boolean;
+    watchHideAllFromItemsPerPageHandler(): 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.
+     * The options which will be displayed for 'items per page' select input.
      */
     itemsPerPageOptions?: {
         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 +101,17 @@ export declare class PaginationBar {
      * Total number of items to be displayed across all pages.
      */
     totalItems: number;
+    watchTotalItemsHandler(): void;
+    /**
+     If `true`, the pagination bar is set to the first page when the 'items per page' changes
+     */
+    setToFirstPageOnPaginationChange?: boolean;
+    watchSetToFirstPageOnPaginationChange(): 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 +124,22 @@ 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 setToFirstPage;
+    private setItemsPerPage;
+    private setItemsPerPageOptions;
+    private setPaginationBarContent;
     private setUpperBound;
-    private trimItemsPerPageOptions;
     render(): any;
 }