@ukic/canary-web-components 3.0.0-canary.3 → 3.0.0-canary.5

package/dist/types/components/ic-data-table/ic-data-table.d.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcDataTableDataType, IcDataTableColumnObject, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./ic-data-table.types";
-import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-import { IcPaginationBarOptions } from "../../utils/types";
+import { IcPaginationBarOptions, IcThemeMode } from "../../utils/types";
 /**
  * @slot empty-state - Content is slotted below the table header when there is no data and the table is not loading.
  * @slot {COLUMN_KEY}-{ROW_INDEX}[-icon] - Each cell should have its own slot, named using the column tag and the row index, allowing for custom elements to be displayed. Include `-icon` at the end for that cell's icon slot.
@@ -37,6 +36,10 @@ export declare class DataTable {
     private previousPaginationPage;
     private truncationPatternUpdated;
     private isNewDebounceDelaySet;
+    private headerResizeObserver;
+    private prevTableContainerWidth;
+    private IC_TOOLTIP_STRING;
+    private SHOW_TRUNC_TOOLTIP_STRING;
     el: HTMLIcDataTableElement;
     fromRow: number;
     previousRowsPerPage: number;
@@ -53,6 +56,11 @@ export declare class DataTable {
      * The title for the table only visible to screen readers.
      */
     caption: string;
+    /**
+     * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+     */
+    columnHeaderTruncation: boolean;
+    headerTruncationChangeHandler(): void;
     /**
      * The column headers for the table.
      */
@@ -60,7 +68,7 @@ export declare class DataTable {
     /**
      * The row content for the table.
      */
-    data: IcDataTableDataType[];
+    data?: IcDataTableDataType[];
     /**
      * Set the density of the table including font and padding.
      */
@@ -89,7 +97,6 @@ export declare class DataTable {
      * Sets the props for the circular loading indicator used in the loading state.
      */
     loadingOptions?: {
-        appearance?: IcThemeForegroundNoDefault;
         description?: string;
         label?: string;
         labelDuration?: number;
@@ -142,6 +149,10 @@ export declare class DataTable {
      * Sets the layout of the table
      */
     tableLayout?: "fixed" | "auto";
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
      */
@@ -154,7 +165,6 @@ export declare class DataTable {
      * Sets the props for the linear loading indicator used in the updating state.
      */
     updatingOptions?: {
-        appearance?: IcThemeForegroundNoDefault;
         description?: string;
         max?: number;
         min?: number;
@@ -186,6 +196,8 @@ export declare class DataTable {
     componentDidLoad(): void;
     componentDidUpdate(): void;
     componentDidRender(): void;
+    private runHeaderResizeObserver;
+    private headerResizeCallback;
     private truncateUpdatedData;
     private updateSetRowHeight;
     private createShowHideTruncation;

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

@@ -171,6 +171,31 @@ export declare const DATA_CELL_ALIGNMENT: ({
     jobTitle: string;
     address: string;
 })[];
+export declare const DATA_EMPHASIS: ({
+    firstName: {
+        data: string;
+        emphasis: string;
+    };
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: {
+        data: string;
+        emphasis: string;
+    };
+    age: number;
+    jobTitle: string;
+    address: string;
+} | {
+    firstName: string;
+    lastName: string;
+    age: number;
+    jobTitle: string;
+    address: string;
+})[];
 export declare const ROW_ALIGNMENT: ({
     header: {
         title: string;
@@ -329,6 +354,7 @@ export declare const Embedded: () => HTMLIcDataTableElement;
 export declare const Dense: () => HTMLElement;
 export declare const Spacious: () => HTMLElement;
 export declare const Scrollable: () => HTMLElement;
+export declare const HeaderTruncation: () => HTMLElement;
 export declare const RowHeaders: () => HTMLIcDataTableElement;
 export declare const Sort: () => HTMLIcDataTableElement;
 export declare const SortOptions: () => HTMLIcDataTableElement;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes, IcDateFormat, IcWeekDays, IcThemeMode } from "../../utils/types";
 export declare class DateInput {
     private ARIA_INVALID;
     private ARIA_LABEL;
@@ -140,6 +140,10 @@ export declare class DateInput {
      * The size of the date input to be displayed.
      */
     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.
+     */
+    theme?: IcThemeMode;
     /**
      * The value of the date input. 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.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty } from "../../utils/types";
+import { IcWeekDays, IcDateFormat, IcSizes, IcInformationStatusOrEmpty, IcThemeMode } from "../../utils/types";
 export declare class DatePicker {
     private inputEl;
     private clearButtonEl;
@@ -146,6 +146,10 @@ export declare class DatePicker {
      */
     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.
+     */
+    theme?: IcThemeMode;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
+import { IcThemeMode } from "../../utils/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 {
@@ -33,10 +33,6 @@ export declare class PaginationBar {
      * Sets the alignment of the items in the pagination bar.
      */
     alignment?: IcPaginationAlignmentOptions;
-    /**
-     * Sets the styling for the items in the pagination bar.
-     */
-    appearance?: IcThemeForeground;
     /**
      * The current page number to be displayed on the pagination bar.
      */
@@ -65,6 +61,14 @@ export declare class PaginationBar {
         label: string;
         value: string;
     }[]): void;
+    /**
+     * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * Whether the displayed pagination is simple or complex.
      */
@@ -127,5 +131,6 @@ export declare class PaginationBar {
     private setItemsPerPage;
     private setPaginationBarContent;
     private setUpperBound;
+    private handleButtonAppearance;
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot label - Content is set as the tree item label.
  * @slot icon - Content is placed to the left of the label.
@@ -14,10 +14,6 @@ export declare class TreeItem {
     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.
      */
@@ -71,6 +67,10 @@ export declare class TreeItem {
      * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
     target?: string;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * Emitted when tree item is selected.
      */

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

@@ -1,4 +1,4 @@
-import { IcSizes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot heading - Content is set as the tree view heading.
  * @slot icon - Content is placed to the left of the heading.
@@ -9,11 +9,6 @@ export declare class TreeView {
     private hostMutationObserver;
     el: HTMLIcTreeViewElement;
     treeItems: HTMLIcTreeItemElement[];
-    /**
-     * The appearance of the tree view, e.g. dark, or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
-    watchAppearanceHandler(): void;
     /**
      * If `true`, tree items will have inset focus.
      */
@@ -28,6 +23,11 @@ export declare class TreeView {
      */
     size?: IcSizes;
     watchSizeHandler(): void;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
+    watchThemeHandler(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     handleTreeItemSelected(event: CustomEvent): void;

package/dist/types/components.d.ts

@@ -6,18 +6,14 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcWeekDays } from "./utils/types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
-import { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 import { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
+export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-export { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
-export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeForegroundNoDefault as IcThemeForegroundNoDefault1, IcWeekDays } from "./utils/types";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
-export { IcThemeForeground } from "@ukic/web-components/dist/types/interface";
 export { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
 export namespace Components {
     interface IcCardHorizontal {
@@ -65,12 +61,20 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
          */
         "caption": string;
+        /**
+          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+         */
+        "columnHeaderTruncation": boolean;
         /**
           * The column headers for the table.
          */
@@ -78,7 +82,7 @@ export namespace Components {
         /**
           * The row content for the table.
          */
-        "data": IcDataTableDataType[];
+        "data"?: IcDataTableDataType[];
         /**
           * Set the density of the table including font and padding.
          */
@@ -107,7 +111,6 @@ export namespace Components {
           * Sets the props for the circular loading indicator used in the loading state.
          */
         "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     label?: string;
     labelDuration?: number;
@@ -164,6 +167,10 @@ export namespace Components {
           * Sets the layout of the table
          */
         "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
          */
@@ -176,7 +183,6 @@ export namespace Components {
           * Sets the props for the linear loading indicator used in the updating state.
          */
         "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     max?: number;
     min?: number;
@@ -302,6 +308,10 @@ export namespace Components {
           * The size of the date input to be displayed.
          */
         "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.
+         */
+        "theme"?: IcThemeMode;
         "triggerIcChange": (d: Date) => Promise<void>;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
@@ -413,6 +423,10 @@ export namespace Components {
           * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
          */
         "startOfWeek"?: IcWeekDays;
+        /**
+          * 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.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -431,10 +445,6 @@ export namespace Components {
           * Sets the alignment of the items in the pagination bar.
          */
         "alignment"?: IcPaginationAlignmentOptions;
-        /**
-          * Sets the styling for the items in the pagination bar.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * The current page number to be displayed on the pagination bar.
          */
@@ -458,6 +468,10 @@ export namespace Components {
     label: string;
     value: string;
   }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The text which will be used in place of 'Page' on the pagination bar.
          */
@@ -474,6 +488,10 @@ export namespace Components {
           * If `true`, the select input to control 'items per page' should be displayed.
          */
         "showItemsPerPageControl"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -484,7 +502,6 @@ export namespace Components {
         "type"?: IcPaginationTypes;
     }
     interface IcTreeItem {
-        "appearance"?: IcThemeForegroundNoDefault1;
         /**
           * If `true`, the tree item appears in the disabled state.
          */
@@ -529,13 +546,13 @@ export namespace Components {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         "updateAriaLabel": () => Promise<void>;
     }
     interface IcTreeView {
-        /**
-          * The appearance of the tree view, e.g. dark, or light.
-         */
-        "appearance"?: IcThemeForegroundNoDefault1;
         /**
           * If `true`, tree items will have inset focus.
          */
@@ -548,6 +565,10 @@ export namespace Components {
           * The size of the tree view.
          */
         "size"?: IcSizes;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
 }
 export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
@@ -747,12 +768,20 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IcDataTable {
         /**
           * The title for the table only visible to screen readers.
          */
         "caption": string;
+        /**
+          * Determines whether the column header should be truncated and display a tooltip. Default is `false`.
+         */
+        "columnHeaderTruncation"?: boolean;
         /**
           * The column headers for the table.
          */
@@ -789,7 +818,6 @@ declare namespace LocalJSX {
           * Sets the props for the circular loading indicator used in the loading state.
          */
         "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     label?: string;
     labelDuration?: number;
@@ -850,6 +878,10 @@ declare namespace LocalJSX {
           * Sets the layout of the table
          */
         "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
          */
@@ -862,7 +894,6 @@ declare namespace LocalJSX {
           * Sets the props for the linear loading indicator used in the updating state.
          */
         "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     max?: number;
     min?: number;
@@ -996,6 +1027,10 @@ declare namespace LocalJSX {
           * The size of the date input to be displayed.
          */
         "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.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1110,6 +1145,10 @@ declare namespace LocalJSX {
           * The first day of the week. `0` for Sunday, `1` for Monday, etc. Default is Monday.
          */
         "startOfWeek"?: IcWeekDays;
+        /**
+          * 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.
+         */
+        "theme"?: IcThemeMode;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in date validation.
          */
@@ -1128,10 +1167,6 @@ declare namespace LocalJSX {
           * Sets the alignment of the items in the pagination bar.
          */
         "alignment"?: IcPaginationAlignmentOptions;
-        /**
-          * Sets the styling for the items in the pagination bar.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * The current page number to be displayed on the pagination bar.
          */
@@ -1155,6 +1190,10 @@ declare namespace LocalJSX {
     label: string;
     value: string;
   }[];
+        /**
+          * If `true`, the pagination bar will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when the items per page option is changed.
          */
@@ -1179,6 +1218,10 @@ declare namespace LocalJSX {
           * If `true`, the select input to control 'items per page' should be displayed.
          */
         "showItemsPerPageControl"?: boolean;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -1229,12 +1272,12 @@ declare namespace LocalJSX {
           * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
          */
         "target"?: string;
-    }
-    interface IcTreeView {
         /**
-          * The appearance of the tree view, e.g. dark, or light.
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "appearance"?: IcThemeForegroundNoDefault1;
+        "theme"?: IcThemeMode;
+    }
+    interface IcTreeView {
         /**
           * If `true`, tree items will have inset focus.
          */
@@ -1247,6 +1290,10 @@ declare namespace LocalJSX {
           * The size of the tree view.
          */
         "size"?: IcSizes;
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
     }
     interface IntrinsicElements {
         "ic-card-horizontal": IcCardHorizontal;

package/dist/types/utils/types.d.ts

@@ -23,6 +23,7 @@ export type IcTheme = {
     mode: IcThemeForeground;
     color: IcColorRGB;
 };
+export type IcThemeMode = "dark" | "light" | "inherit";
 export type IcAdditionalFieldTypes = "static" | "dynamic";
 export type IcColorRGB = {
     r: number;
@@ -69,11 +70,12 @@ export interface IcPaginationBarOptions {
     showItemsPerPageControl?: boolean;
     showGoToPageControl?: boolean;
     alignment?: IcPaginationAlignmentOptions;
-    appearance?: IcThemeForeground;
     itemLabel?: string;
     pageLabel?: string;
     hideRangeLabel?: boolean;
     hideAllFromItemsPerPage?: boolean;
+    theme?: IcThemeMode;
+    monochrome?: boolean;
 }
 export type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;
 export type IcDateFormat = "DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD";