@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.15

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

@@ -1,12 +1,13 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
 export declare class DateInput {
+    private DEFAULT_DATE_FORMAT;
     private ARIA_INVALID;
     private ARIA_LABEL;
     private ARIA_LABELLED_BY;
     private assistiveHintId;
     private calendarButtonEl;
-    private dayInputEl;
+    private dayInputEl?;
     private defaultHelperText;
     private EVENT_OBJECT_STRING;
     private FIT_TO_VALUE;
@@ -26,46 +27,52 @@ export declare class DateInput {
     private KEYBOARD_EVENT_OBJECT_STRING;
     private MAX_DAY;
     private MAX_MONTH;
-    private monthInputEl;
+    private monthInputEl?;
     private preventAutoFormatting;
     private preventDayInput;
     private preventMonthInput;
     private preventYearInput;
     private previousInvalidDateTest;
-    private previousEmittedDate;
     private previousSelectedDate;
     private selectedDate;
-    private selectedDateInfoEl;
+    private selectedDateInfoEl?;
     private screenReaderInfoId;
     private selectedDateInfoId;
-    private yearInputEl;
+    private yearInputEl?;
+    private externalSetDate;
+    private clearInput;
     el: HTMLIcDateInputElement;
-    day: string;
     invalidDateText: string;
     maxDate: Date;
     minDate: Date;
-    month: string;
-    year: string;
     calendarFocused: boolean;
     clearButtonFocused: boolean;
     removeLabelledBy: boolean;
+    day: string;
+    month: string;
+    year: string;
+    watchInputHandler(): void;
     /**
      * The format in which the date will be displayed.
      */
-    dateFormat?: IcDateFormat;
+    dateFormat: IcDateFormat;
+    /**
+     * If `true`, every individual input field completed will emit an icChange event.
+     */
+    emitDatePartChange?: boolean;
     /**
      * If `true`, the disabled state will be set.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * The days of the week to disable.
      */
-    disableDays?: IcWeekDays[];
+    disableDays: IcWeekDays[];
     /**
      * The text to display as the validation message when `disableDays` is set and a disabled date is entered.
      */
-    disableDaysMessage?: string;
+    disableDaysMessage: string;
     /**
      * If `true`, dates in the future are not allowed. A validation message will appear if a date in the future is entered.
      */
@@ -74,7 +81,7 @@ export declare class DateInput {
     /**
      * The text to display as the validation message when `disableFuture` is true and a date in the future is entered.
      */
-    disableFutureMessage?: string;
+    disableFutureMessage: string;
     /**
      * If `true`, dates in the past are not allowed. A validation message will appear if a date in the past is entered.
      */
@@ -83,11 +90,11 @@ export declare class DateInput {
     /**
      * The text to display as the validation message when `disablePast` is true and a date in the past is entered.
      */
-    disablePastMessage?: string;
+    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;
+    helperText: string | null;
     /**
      * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
      */
@@ -99,11 +106,11 @@ export declare class DateInput {
     /**
      * The ID for the input.
      */
-    inputId?: string;
+    inputId: string;
     /**
      * The text to display as the validation message when an invalid date is entered.
      */
-    invalidDateMessage?: string;
+    invalidDateMessage: string;
     /**
      * The label for the date input.
      */
@@ -112,13 +119,13 @@ export declare class DateInput {
      * 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;
+    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;
+    min: string | Date;
     watchMinHandler(): void;
     /**
      * The name of the control, which is submitted with the form data.
@@ -127,7 +134,7 @@ export declare class DateInput {
     /**
      * If `true`, the input will require a value.
      */
-    required?: boolean;
+    required: boolean;
     watchRequiredHandler(): void;
     /**
      * @internal If `true`, a button which displays the calendar view when clicked will be displayed.
@@ -140,7 +147,7 @@ export declare class DateInput {
     /**
      * The size of the date input to be displayed.
      */
-    size?: IcSizes;
+    size: IcSizes;
     /**
      * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
      */
@@ -152,7 +159,7 @@ export declare class DateInput {
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */
-    validationStatus?: IcInformationStatusOrEmpty;
+    validationStatus: IcInformationStatusOrEmpty;
     /**
      * The text to display as the validation message. This will override the built-in date validation.
      */
@@ -161,25 +168,31 @@ export declare class DateInput {
      * @internal Emitted when the calendar is opened.
      */
     calendarButtonClicked: EventEmitter<{
-        value: Date;
+        value: Date | null;
     }>;
     /**
      * Emitted when the input loses focus.
      */
     icBlur: EventEmitter<{
-        value: Date;
+        value: Date | null;
     }>;
     /**
      * Emitted when the value has changed.
      */
     icChange: EventEmitter<{
-        value: Date;
+        value: Date | null;
+        dateObject: {
+            day: string | null;
+            month: string | null;
+            year: string | null;
+        };
+        utcValue: Date | null;
     }>;
     /**
      * Emitted when the input gains focus.
      */
     icFocus: EventEmitter<{
-        value: Date;
+        value: Date | null;
     }>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
@@ -190,7 +203,7 @@ export declare class DateInput {
      * Returns the value as a Date object
      * @returns Date
      */
-    getDate(): Promise<Date>;
+    getDate(): Promise<Date | null>;
     /**
      * @internal Sets focus on the calendar button.
      */
@@ -202,7 +215,7 @@ export declare class DateInput {
     /**
      * @internal Used to enable other components to invoke an IcChange event from the input.
      */
-    triggerIcChange(d: Date): Promise<void>;
+    triggerIcChange(d: Date | null): Promise<void>;
     private setInputPasteValue;
     private checkSingleCopiedValueIsValid;
     /**
@@ -236,11 +249,15 @@ export declare class DateInput {
     private getDescOfInputsOrder;
     private getScreenReaderInfo;
     private preventInput;
+    /**
+     * Get whether date has been disabled using disableFuture or disablePast prop, but always allow current day
+     * Consider using dateClamp and inDateRange
+     * @returns `boolean`
+     */
     private isSelectedDateDisabled;
     private moveToNextInput;
     private moveToPreviousInput;
     private autocompleteInput;
-    private autocompleteYear;
     private convertToDate;
     private handleHostBlur;
     private handleHostFocus;

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

@@ -118,4 +118,10 @@ export namespace WithClearingValue {
     let name_17: string;
     export { name_17 as name };
 }
+export namespace IcChangeEmitDatePartChanges {
+    export function render_19(): import("lit-html").TemplateResult<1>;
+    export { render_19 as render };
+    let name_18: string;
+    export { name_18 as name };
+}
 import readme from "./readme.md";

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
 export declare class DatePicker {
-    private inputEl;
+    private inputEl?;
     private clearButtonEl;
     private dateInputProps;
     private daysOfWeek;
@@ -12,7 +12,7 @@ export declare class DatePicker {
     private dialogDescription;
     private focusDay;
     private focussedYearEl;
-    private liveRegionEl;
+    private liveRegionEl?;
     private monthButtonEl;
     private monthNames;
     private monthInViewUpdateHandled;
@@ -27,29 +27,33 @@ export declare class DatePicker {
     currMonthView: Date[];
     currYearPickerView: number[];
     decadeView: number[];
-    focussedDate: Date;
+    focussedDate: Date | null;
     focussedDay: number;
     focussedDayEl: HTMLButtonElement;
     focussedMonth: number;
     focussedMonthEl: HTMLIcButtonElement;
     focussedYear: number;
-    maxDate: Date;
-    minDate: Date;
+    maxDate: Date | null;
+    minDate: Date | null;
     monthInView: number;
     monthPickerVisible: boolean;
     orderedDaysOfWeek: string[];
-    selectedDate: Date;
+    selectedDate: Date | null;
     yearInView: number;
     yearPickerVisible: boolean;
     /**
      * The format in which the date will be displayed.
      */
-    dateFormat?: IcDateFormat;
+    dateFormat: IcDateFormat;
     /**
      * If `true`, the disabled state will be set.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
+    /**
+     *  If `true`, every individual input field completed will emit an icChange event.
+     */
+    emitDatePartChange?: boolean;
     /**
      * The days of the week to disable.
      */
@@ -104,13 +108,13 @@ export declare class DatePicker {
      * 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;
+    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;
+    min: string | Date;
     watchMinHandler(): void;
     /**
      * The name of the control, which is submitted with the form data.
@@ -145,7 +149,7 @@ export declare class DatePicker {
      * The first day of the week. `0` for Sunday, `1` for Monday, etc.
      * Default is Monday.
      */
-    startOfWeek?: IcWeekDays;
+    startOfWeek: IcWeekDays;
     watchStartOfWeekHandler(): void;
     /**
      * Sets the date picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
@@ -179,7 +183,9 @@ export declare class DatePicker {
     componentWillLoad(): void;
     componentWillRender(): void;
     componentWillUpdate(): void;
-    localCalendarButtonClickHandler(ev: CustomEvent): void;
+    localCalendarButtonClickHandler(ev: CustomEvent<{
+        value: Date | null;
+    }>): void;
     calendarButtonClickHandler(): void;
     private setDecadeView;
     private setSelectedDate;

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

@@ -133,4 +133,12 @@ export namespace IcChangeEvent {
     let height_15: string;
     export { height_15 as height };
 }
+export namespace IcChangeEventEmitDatePartChange {
+    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 };
+}
 import readme from "./readme.md";

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

@@ -10,7 +10,7 @@ export type DayButtonProps = {
     selected: boolean;
     focussedDayRef?: (element: HTMLButtonElement) => void;
     inRange: boolean;
-    showDaysOutsideMonth: boolean;
-    disableDay: boolean;
+    showDaysOutsideMonth?: boolean;
+    disableDay?: boolean;
 };
 export declare const DayButton: FunctionalComponent<DayButtonProps>;

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

@@ -1,14 +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;
+    minDate: Date | null;
+    maxDate: Date | null;
+    size?: IcSizes;
 };
 export declare const MonthPicker: FunctionalComponent<MonthPickerProps>;

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

@@ -2,15 +2,15 @@ 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;
+    minDate: Date | null;
+    maxDate: Date | null;
     focussedYearRef: (element: HTMLIcButtonElement) => void;
+    size?: IcSizes;
 };
 export declare const YearPicker: FunctionalComponent<YearPickerProps>;

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

@@ -20,3 +20,4 @@ export declare const HideOutsideMonth: () => HTMLIcDatePickerElement;
 export declare const HideButtons: () => HTMLIcDatePickerElement;
 export declare const JSDates: () => HTMLIcDatePickerElement;
 export declare const IcChangeDate: () => HTMLElement;
+export declare const IcChangeDateEmitDatePartChanges: () => HTMLElement;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeMode } from "../../utils/types";
+import { IcThemeMode } from "@ukic/web-components";
 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 {
@@ -9,7 +9,7 @@ export declare class PaginationBar {
     private pageDropdownEl;
     private pageInputEl;
     private pageInputTooltipEl;
-    private paginationBarEl;
+    private paginationBarEl?;
     private paginationEl;
     private userSetItemsPerPage;
     el: HTMLIcPaginationBarElement;

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

@@ -13,12 +13,13 @@ export declare class TreeItem {
     private hostMutationObserver;
     private TOOLTIP;
     private TREE_ITEM_LABEL_CLASS_SELECTOR;
+    private TREE_ITEM_CONTENT_CLASS_SELECTOR;
     el: HTMLIcTreeItemElement;
     childTreeItems: HTMLIcTreeItemElement[];
     /**
      * If `true`, the tree item appears in the disabled state.
      */
-    disabled?: boolean;
+    disabled: boolean;
     watchDisabledHandler(): void;
     /**
      * If `true`, the tree item appears in the expanded state.
@@ -27,7 +28,7 @@ export declare class TreeItem {
     /**
      * @internal If `true`, the tree item will have an inset focus border.
      */
-    focusInset?: boolean;
+    focusInset: boolean;
     /**
      * @internal Determines if the parent tree item has been expanded.
      */
@@ -48,6 +49,10 @@ export declare class TreeItem {
      * The label of the tree item.
      */
     label: string;
+    /**
+     * @internal Holds the previous truncation state before the screen switches to a small viewport, so it can be reset when screen size changes again.
+     */
+    previousTruncateTreeItem?: boolean;
     /**
      * How much of the referrer to send when following the link.
      */
@@ -100,6 +105,7 @@ export declare class TreeItem {
     updateAriaLabel(): Promise<void>;
     private setTreeItemPadding;
     private truncateTreeItemLabel;
+    private removeTreeItemTruncation;
     private hasRouterSlot;
     private handleDisplayTooltip;
     render(): any;

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

@@ -1,4 +1,5 @@
 import { IcSizes, IcThemeMode } from "../../utils/types";
+import { IcTreeItemOptions } from "./ic-tree-view.types";
 /**
  * @slot heading - Content is set as the tree view heading.
  * @slot icon - Content is placed to the left of the heading.
@@ -8,17 +9,23 @@ export declare class TreeView {
     private treeItemTag;
     private hostMutationObserver;
     private isLoaded;
+    private resizeObserver;
+    private TOOLTIP;
+    private previousTruncateHeading;
+    private previousTruncateTreeItems;
     el: HTMLIcTreeViewElement;
+    smallDevice: boolean;
+    watchSmallDeviceHandler(): void;
     treeItems: HTMLIcTreeItemElement[];
     /**
      * If `true`, tree items will have inset focus.
      */
-    focusInset?: boolean;
+    focusInset: boolean;
     watchFocusInsetHandler(): void;
     /**
      * The heading of the tree view.
      */
-    heading?: string;
+    heading: string;
     /**
      * The size of the tree view.
      */
@@ -29,20 +36,29 @@ export declare class TreeView {
      */
     theme?: IcThemeMode;
     watchThemeHandler(): void;
+    /**
+     * The content within the tree view tree items. This will take precedence over slotted content.
+     * */
+    treeItemData: IcTreeItemOptions[];
+    watchTreeItemOptionsHandler(): void;
     /**
      * If `true`, the tree view heading will be truncated instead of text wrapping.
+     * When used on small devices, this prop will be overridden and headings will be set to text-wrap.
      */
-    truncateHeading?: boolean;
+    truncateHeading: boolean;
     /**
      * If `true`, tree items will be truncated, unless they are individually overridden.
+     * When used on small devices, this prop will be overridden and tree-items will be set to text-wrap.
      */
-    truncateTreeItems?: boolean;
+    truncateTreeItems: boolean;
     watchTruncateTreeItemsHandler(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidRender(): void;
     componentDidLoad(): void;
     handleTreeItemSelected(event: CustomEvent): void;
+    private runResizeObserver;
+    private removeTruncation;
     private handleKeyDown;
     private getNextItemToSelect;
     private linkTreeItems;
@@ -50,6 +66,7 @@ export declare class TreeView {
     private getAllTreeItems;
     private addSlotChangeListener;
     private truncateTreeViewHeading;
+    private removeHeadingTruncation;
     private isHeadingDefined;
     private hasHeadingAreaContent;
     render(): any;