@ukic/canary-web-components 2.0.0-canary.7 → 2.0.0-canary.9

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

@@ -0,0 +1,251 @@
+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 daysOfWeek;
+    private dayButtonFocussed;
+    private dayPickerKeyboardNav;
+    private decadeStart;
+    private decadeEnd;
+    private dialogDescription;
+    private focusDay;
+    private focussedYearEl;
+    private liveRegionEl;
+    private monthButtonEl;
+    private monthNames;
+    private monthInViewUpdateHandled;
+    private myCalendarButtonClicked;
+    private showPickerAbove;
+    private today;
+    private todayButtonEl;
+    private yearButtonEl;
+    private yearButtonFocussed;
+    el: HTMLIcDatePickerElement;
+    calendarOpen: boolean;
+    currMonthView: Date[];
+    currYearPickerView: number[];
+    dateInputProps: IcDateInputProps;
+    decadeView: number[];
+    focussedDate: Date;
+    focussedDay: number;
+    focussedDayEl: HTMLButtonElement;
+    focussedMonth: number;
+    focussedMonthEl: HTMLIcButtonElement;
+    focussedYear: number;
+    maxDate: Date;
+    minDate: Date;
+    monthInView: number;
+    monthPickerVisible: boolean;
+    orderedDaysOfWeek: string[];
+    selectedDate: Date;
+    yearInView: number;
+    yearPickerVisible: boolean;
+    /**
+     * The format in which the date will be displayed.
+     */
+    dateFormat?: IcDateFormat;
+    /**
+     * If `true`, the disabled state will be set.
+     */
+    disabled?: boolean;
+    /**
+     * The days of the week to disable.
+     */
+    disableDays?: IcWeekDays[];
+    /**
+     * The text to display as the validation message when `disableDays` is `true` and a disabled date is entered.
+     */
+    disableDaysMessage?: string;
+    /**
+     * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
+     */
+    disableFuture?: boolean;
+    /**
+     * The text to display as the validation message when `disableFuture` is `true` and a date in the future is entered.
+     */
+    disableFutureMessage?: string;
+    /**
+     * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
+     */
+    disablePast?: boolean;
+    /**
+     * The text to display as the validation message when `disablePast` is `true` and a date in the past is entered.
+     */
+    disablePastMessage?: string;
+    /**
+     * 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;
+    /**
+     * The ID for the input field. The default will be an automatically generated value.
+     */
+    inputId?: string;
+    /**
+     * The label for the date input.
+     */
+    label: string;
+    /**
+     * The latest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+     * The value of this prop is ignored if `disableFuture` is set to `true`.
+     */
+    max?: string | Date;
+    watchMaxHandler(): void;
+    /**
+     * The earliest date that will be allowed. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+     * The value of this prop is ignored if `disablePast` is set to `true`.
+     */
+    min?: string | Date;
+    watchMinHandler(): void;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name?: string;
+    /**
+     * The date visible when the calendar opens. Used if no date is currently selected.
+     * The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+     */
+    openAtDate: string | Date;
+    /**
+     * If `true`, the input will require a value.
+     */
+    required?: boolean;
+    /**
+     * If `true`, days outside the current month will be visible in the date picker.
+     */
+    showDaysOutsideMonth?: boolean;
+    /**
+     * If `true`, the `Clear` button on the date picker will be visible.
+     */
+    showPickerClearButton?: boolean;
+    /**
+     * If `true`, the `Go to today` button on the date picker will be visible.
+     */
+    showPickerTodayButton?: boolean;
+    /**
+     * The size of the date picker to be displayed.
+     */
+    size?: IcSizes;
+    /**
+     * The first day of the week. `0` for Sunday, `1` for Monday, etc.
+     * Default is Monday.
+     */
+    startOfWeek?: IcWeekDays;
+    /**
+     * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
+     */
+    validationStatus?: IcInformationStatusOrEmpty;
+    /**
+     * The text to display as the validation message. This will override the built-in date validation.
+     */
+    validationText?: string;
+    /**
+     * The value of the date picker. The value can be in any format supported as `dateFormat`, in ISO 8601 date string format (`yyyy-mm-dd`) or as a JavaScript `Date` object.
+     */
+    value?: string | Date | null | undefined;
+    watchOpenHandler(): void;
+    watchFocussedDateHandler(current: Date, previous: Date): void;
+    watchMonthInViewHandler(): void;
+    watchYearInViewHandler(): void;
+    watchYearPickerVisibleHandler(): void;
+    watchMonthPickerVisibleHandler(): void;
+    watchFocussedDayEl(): void;
+    /**
+     * Emitted when the value has changed.
+     */
+    icChange: EventEmitter<{
+        value: Date;
+    }>;
+    componentWillLoad(): void;
+    localCalendarButtonClickHandler(ev: CustomEvent): void;
+    calendarButtonClickHandler(): void;
+    private setDecadeView;
+    private setSelectedDate;
+    private handleCalendarMouseDown;
+    private handleCalendarClick;
+    private handleDocumentClick;
+    private keyDownHandler;
+    private closeButtonClickHandler;
+    private focusFirstElement;
+    private focusLastElement;
+    private focusFocussedDay;
+    private monthButtonClickHandler;
+    private yearButtonClickHandler;
+    private todayButtonClickHandler;
+    private todayButtonKeyDownHandler;
+    private clearButtonClickHandler;
+    private setMonthSelectedLiveRegionText;
+    private setYearSelectedLiveRegionText;
+    private getMonthInViewText;
+    private getDecadeInViewText;
+    private setAriaLiveRegionText;
+    private clearDialogDescription;
+    private clearButtonKeyDownHandler;
+    private goToPreviousMonth;
+    private goToNextMonth;
+    private goToPreviousYear;
+    private goToNextYear;
+    private navButtonMouseDownHandler;
+    private renderMonthYearNavButton;
+    private monthYearNavClickHandler;
+    private previousMonthButton;
+    private nextMonthButton;
+    private previousYearButton;
+    private nextYearButton;
+    private isPrevYearAllowed;
+    private isNextYearAllowed;
+    private isYearAllowed;
+    private getMonthView;
+    private isCurrentMonth;
+    private updateMonthInView;
+    private handleSelectDay;
+    private handleSelectMonth;
+    private handleSelectYear;
+    private monthPickerKeyDownHandler;
+    private yearPickerKeyDownHandler;
+    private onYearButtonFocusHandler;
+    private onYearButtonBlurHandler;
+    private monthButtonKeyDownHandler;
+    private yearButtonKeyDownHandler;
+    private handleCalendarKeyDown;
+    private calendarTabHandler;
+    private onDayButtonFocusHandler;
+    private onDayButtonBlurHandler;
+    private getNextDayToFocus;
+    private moveDays;
+    private moveMonths;
+    private moveYears;
+    private updateFocussedMonth;
+    private updateFocussedYear;
+    private setFocussedDate;
+    private setFocussedDayEl;
+    private setFocussedMonthEl;
+    private setFocussedYearEl;
+    private setFocussedYear;
+    private setDateInputProps;
+    render(): any;
+}
+export {};

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,22 @@
+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 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;

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,208 @@
+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 menu;
+    private multiOptionClicked;
+    private popperInstance;
+    private preventClickOpen;
+    private preventMenuFocus;
+    private selectAllButton;
+    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 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 emitSelectAll;
+    private emitMenuKeyPress;
+    private autoSetValueOnMenuKeyDown;
+    private getOptionId;
+    private getOptionAriaLabel;
+    private getSortedOptions;
+    private isManualMode;
+    private scrollToSelected;
+    private loadUngroupedOptions;
+    private setMenuScrollbar;
+    private handleTimeoutBlur;
+    private optionContent;
+    private displayOption;
+    render(): any;
+}