@ukic/canary-web-components 3.0.0-canary.14 → 3.0.0-canary.16

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,7 +27,7 @@ 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;
@@ -34,10 +35,10 @@ export declare class DateInput {
     private previousInvalidDateTest;
     private previousSelectedDate;
     private selectedDate;
-    private selectedDateInfoEl;
+    private selectedDateInfoEl?;
     private screenReaderInfoId;
     private selectedDateInfoId;
-    private yearInputEl;
+    private yearInputEl?;
     private externalSetDate;
     private clearInput;
     el: HTMLIcDateInputElement;
@@ -54,7 +55,7 @@ export declare class DateInput {
     /**
      * 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.
      */
@@ -62,16 +63,16 @@ export declare class DateInput {
     /**
      * 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.
      */
@@ -80,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.
      */
@@ -89,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.
      */
@@ -105,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.
      */
@@ -118,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.
@@ -133,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.
@@ -146,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.
      */
@@ -158,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.
      */
@@ -167,30 +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;
-            month: string;
-            year: string;
+            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;
@@ -201,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.
      */
@@ -213,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;
     /**
@@ -247,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-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,28 +27,28 @@ 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.
@@ -108,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.
@@ -149,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.
@@ -183,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-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-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

@@ -19,7 +19,7 @@ export declare class TreeItem {
     /**
      * 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.
@@ -28,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.
      */
@@ -52,7 +52,7 @@ export declare class TreeItem {
     /**
      * @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;
+    previousTruncateTreeItem?: boolean;
     /**
      * How much of the referrer to send when following the link.
      */

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

@@ -20,12 +20,12 @@ export declare class TreeView {
     /**
      * 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.
      */
@@ -45,12 +45,12 @@ export declare class TreeView {
      * 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;