@otto-de/b2b-core-components 1.32.3 → 1.34.0

package/dist/types/components.d.ts

@@ -6,7 +6,8 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
-import { CheckboxEventDetail, ChipComponentEventDetail, DateClear, DatePickerEventDetail, DatePickerViewChangedEventDetail, DateSelectedEventDetail, EscapePressed, InputChangeEvent, InputClear, MonthSelectedEventDetail, MultiSelectOptionEventDetail, NextMonth, OptionSelectedEventDetail, PreviousMonth, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail, YearSelectedEventDetail } from "./utils/interfaces/form.interface";
+import { CheckboxEventDetail, ChipComponentEventDetail, DateClear, DatePickerEventDetail, DatePickerViewChangedEventDetail, DateRangePickerEventDetail, DateSelectedEventDetail, EscapePressed, InputChangeEvent, InputClear, MonthSelectedEventDetail, MultiSelectOptionEventDetail, NextMonth, OptionSelectedEventDetail, PreviousMonth, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail, YearSelectedEventDetail } from "./utils/interfaces/form.interface";
+import { Dateish, DateRange, DatishRange } from "./components/date-range-picker/date-range-picker-utils";
 import { IconName } from "./components/icon/types";
 import { IconName as IconName1 } from "./components/icon-100/types";
 import { IconName as IconName2 } from "./components/icon-50/types";
@@ -16,7 +17,8 @@ import { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
 import { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
 import { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
 export { BreadCrumbChangeEventDetail, ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail, ToggleChipEventDetail, ToggleSwitchEventDetail } from "./utils/interfaces/interaction.interface";
-export { CheckboxEventDetail, ChipComponentEventDetail, DateClear, DatePickerEventDetail, DatePickerViewChangedEventDetail, DateSelectedEventDetail, EscapePressed, InputChangeEvent, InputClear, MonthSelectedEventDetail, MultiSelectOptionEventDetail, NextMonth, OptionSelectedEventDetail, PreviousMonth, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail, YearSelectedEventDetail } from "./utils/interfaces/form.interface";
+export { CheckboxEventDetail, ChipComponentEventDetail, DateClear, DatePickerEventDetail, DatePickerViewChangedEventDetail, DateRangePickerEventDetail, DateSelectedEventDetail, EscapePressed, InputChangeEvent, InputClear, MonthSelectedEventDetail, MultiSelectOptionEventDetail, NextMonth, OptionSelectedEventDetail, PreviousMonth, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail, YearSelectedEventDetail } from "./utils/interfaces/form.interface";
+export { Dateish, DateRange, DatishRange } from "./components/date-range-picker/date-range-picker-utils";
 export { IconName } from "./components/icon/types";
 export { IconName as IconName1 } from "./components/icon-100/types";
 export { IconName as IconName2 } from "./components/icon-50/types";
@@ -309,6 +311,9 @@ export namespace Components {
           * Whether the dropdown should have a drop shadow. Default is false.
          */
         "dropshadow": boolean;
+        /**
+          * The text to show, when no results have been found.
+         */
         "noResultsText": string;
         /**
           * Internal: if the dropdown is opened
@@ -505,6 +510,78 @@ export namespace Components {
          */
         "selectedYear": number;
     }
+    interface B2bDateRangePicker {
+        /**
+          * The start and the end date of the selected date range. Format: `TT.MM.YYYY`
+         */
+        "dateRange"?: string | DatishRange;
+        /**
+          * Function used to determine, whether a date should be disabled e.g. because it is in the past. This is only used for the start and end dates, it is valid to have a disabled date in the range of start and end date.
+          * @param date The date to check. Format: `TT.MM.YYYY`
+          * @returns True, if the date should be disabled. False otherwise.
+          * @default (date) => false
+         */
+        "disableDates": (date: Date) => boolean;
+        /**
+          * The error message that is shown if the input is invalid.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the input field.
+         */
+        "hint"?: string;
+        /**
+          * Whether the input is currently invalid. If true, the input is rendered with error styles.
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * Label for the date range picker component.
+          * @default 'Zeitraum auswählen'
+         */
+        "label": string;
+        /**
+          * The language for month and the weekdays will be decided based on the given input. One of `'de'` (German) or `'English'`.
+          * @default 'de'
+         */
+        "language": 'de' | 'en';
+        /**
+          * A list of presets, that the user can click on to simplify time range selection.
+          * @default {}
+         */
+        "presets": Record<string, DateRange>;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+          * @default false
+         */
+        "required": boolean;
+    }
+    interface B2bDateRangePickerDays {
+        /**
+          * Function used to determine, whether a day should be disabled e.g. because it is in the past. This is only used for the start and end dates, it is valid to have a disabled day in the range of start and end date.
+          * @param day The day of the month to check (1-indexed).
+          * @returns True, if the day should be disabled. False otherwise.
+          * @default (day) => false
+         */
+        "disableDates": (day: number) => boolean;
+        /**
+          * The first date of the selection. This may be absent if no dates have been selected yet. This is always smaller/earlier than the second date.
+         */
+        "firstDate"?: Dateish;
+        /**
+          * Whether the shown values are a preview and not the actual values (force-hover state).
+          * @default false
+         */
+        "preview": boolean;
+        /**
+          * The second date of the selection. This may be absent if none or only one date has been selected yet. This is always bigger/later than the first date.
+         */
+        "secondDate"?: Dateish;
+        /**
+          * The currently shown date (year+month).
+         */
+        "viewedDate": Dateish;
+    }
     interface B2bDropdown {
         /**
           * Method to programmatically clear selection of the dropdown.
@@ -518,6 +595,7 @@ export namespace Components {
           * An optional error message for the dropdown. This will only appear if invalid is set to true.
          */
         "error"?: string;
+        "groupDisabled": boolean;
         /**
           * An optional hint text for the dropdown.
          */
@@ -865,6 +943,7 @@ export namespace Components {
           * The error message that is shown if the multi select dropdown is invalid.
          */
         "errorMessage"?: string;
+        "groupDisabled": boolean;
         /**
           * The hint text that appears underneath the multi select dropdown field.
          */
@@ -884,7 +963,7 @@ export namespace Components {
         /**
           * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
          */
-        "optionsList": string | string[];
+        "optionsList": string | string[] | Option[];
         /**
           * The placeholder shown in the input field.
          */
@@ -904,12 +983,16 @@ export namespace Components {
         /**
           * The initial values to be selected in the dropdown.
          */
-        "selectedValues": string | string[];
+        "selectedValues": string | string[] | Option[];
     }
     interface B2bMultiselectOption {
         "indeterminate"?: boolean;
         /**
-          * The label of the option.
+          * Will provide the label instead of option if set
+         */
+        "label"?: string;
+        /**
+          * The label and value of the option.
          */
         "option": string;
         /**
@@ -1551,6 +1634,14 @@ export interface B2bDatePickerYearsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bDatePickerYearsElement;
 }
+export interface B2bDateRangePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bDateRangePickerElement;
+}
+export interface B2bDateRangePickerDaysCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bDateRangePickerDaysElement;
+}
 export interface B2bDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bDropdownElement;
@@ -1873,6 +1964,7 @@ declare global {
     };
     interface HTMLB2bDatePickerMonthsElementEventMap {
         "b2b-date-picker-month-selected": MonthSelectedEventDetail;
+        "b2b-date-picker-escape": EscapePressed;
     }
     interface HTMLB2bDatePickerMonthsElement extends Components.B2bDatePickerMonths, HTMLStencilElement {
         addEventListener<K extends keyof HTMLB2bDatePickerMonthsElementEventMap>(type: K, listener: (this: HTMLB2bDatePickerMonthsElement, ev: B2bDatePickerMonthsCustomEvent<HTMLB2bDatePickerMonthsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1890,6 +1982,7 @@ declare global {
     };
     interface HTMLB2bDatePickerYearsElementEventMap {
         "b2b-date-picker-year-selected": YearSelectedEventDetail;
+        "b2b-date-picker-escape": EscapePressed;
     }
     interface HTMLB2bDatePickerYearsElement extends Components.B2bDatePickerYears, HTMLStencilElement {
         addEventListener<K extends keyof HTMLB2bDatePickerYearsElementEventMap>(type: K, listener: (this: HTMLB2bDatePickerYearsElement, ev: B2bDatePickerYearsCustomEvent<HTMLB2bDatePickerYearsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1905,6 +1998,42 @@ declare global {
         prototype: HTMLB2bDatePickerYearsElement;
         new (): HTMLB2bDatePickerYearsElement;
     };
+    interface HTMLB2bDateRangePickerElementEventMap {
+        "b2b-selected": DateRangePickerEventDetail;
+        "b2b-clear": DateClear;
+    }
+    interface HTMLB2bDateRangePickerElement extends Components.B2bDateRangePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bDateRangePickerElementEventMap>(type: K, listener: (this: HTMLB2bDateRangePickerElement, ev: B2bDateRangePickerCustomEvent<HTMLB2bDateRangePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLB2bDateRangePickerElementEventMap>(type: K, listener: (this: HTMLB2bDateRangePickerElement, ev: B2bDateRangePickerCustomEvent<HTMLB2bDateRangePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLB2bDateRangePickerElement: {
+        prototype: HTMLB2bDateRangePickerElement;
+        new (): HTMLB2bDateRangePickerElement;
+    };
+    interface HTMLB2bDateRangePickerDaysElementEventMap {
+        "b2b-date-picker-escape": EscapePressed;
+        "b2b-date-selected": DateSelectedEventDetail;
+    }
+    interface HTMLB2bDateRangePickerDaysElement extends Components.B2bDateRangePickerDays, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bDateRangePickerDaysElementEventMap>(type: K, listener: (this: HTMLB2bDateRangePickerDaysElement, ev: B2bDateRangePickerDaysCustomEvent<HTMLB2bDateRangePickerDaysElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLB2bDateRangePickerDaysElementEventMap>(type: K, listener: (this: HTMLB2bDateRangePickerDaysElement, ev: B2bDateRangePickerDaysCustomEvent<HTMLB2bDateRangePickerDaysElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLB2bDateRangePickerDaysElement: {
+        prototype: HTMLB2bDateRangePickerDaysElement;
+        new (): HTMLB2bDateRangePickerDaysElement;
+    };
     interface HTMLB2bDropdownElementEventMap {
         "b2b-change": string;
         "b2b-focus": FocusEvent;
@@ -2521,6 +2650,8 @@ declare global {
         "b2b-date-picker-header": HTMLB2bDatePickerHeaderElement;
         "b2b-date-picker-months": HTMLB2bDatePickerMonthsElement;
         "b2b-date-picker-years": HTMLB2bDatePickerYearsElement;
+        "b2b-date-range-picker": HTMLB2bDateRangePickerElement;
+        "b2b-date-range-picker-days": HTMLB2bDateRangePickerDaysElement;
         "b2b-dropdown": HTMLB2bDropdownElement;
         "b2b-flyout-menu": HTMLB2bFlyoutMenuElement;
         "b2b-flyout-menu-option": HTMLB2bFlyoutMenuOptionElement;
@@ -2882,6 +3013,9 @@ declare namespace LocalJSX {
           * Whether the dropdown should have a drop shadow. Default is false.
          */
         "dropshadow"?: boolean;
+        /**
+          * The text to show, when no results have been found.
+         */
         "noResultsText"?: string;
         /**
           * Internal: if the dropdown is opened
@@ -3100,7 +3234,11 @@ declare namespace LocalJSX {
          */
         "language"?: 'de' | 'en';
         /**
-          * Event emitted on selecting month*
+          * Event emitted on escape press
+         */
+        "onB2b-date-picker-escape"?: (event: B2bDatePickerMonthsCustomEvent<EscapePressed>) => void;
+        /**
+          * Event emitted on selecting month
          */
         "onB2b-date-picker-month-selected"?: (event: B2bDatePickerMonthsCustomEvent<MonthSelectedEventDetail>) => void;
         /**
@@ -3110,7 +3248,11 @@ declare namespace LocalJSX {
     }
     interface B2bDatePickerYears {
         /**
-          * Event emitted on selecting year*
+          * Event emitted on escape press
+         */
+        "onB2b-date-picker-escape"?: (event: B2bDatePickerYearsCustomEvent<EscapePressed>) => void;
+        /**
+          * Event emitted on selecting year
          */
         "onB2b-date-picker-year-selected"?: (event: B2bDatePickerYearsCustomEvent<YearSelectedEventDetail>) => void;
         /**
@@ -3118,6 +3260,94 @@ declare namespace LocalJSX {
          */
         "selectedYear"?: number;
     }
+    interface B2bDateRangePicker {
+        /**
+          * The start and the end date of the selected date range. Format: `TT.MM.YYYY`
+         */
+        "dateRange"?: string | DatishRange;
+        /**
+          * Function used to determine, whether a date should be disabled e.g. because it is in the past. This is only used for the start and end dates, it is valid to have a disabled date in the range of start and end date.
+          * @param date The date to check. Format: `TT.MM.YYYY`
+          * @returns True, if the date should be disabled. False otherwise.
+          * @default (date) => false
+         */
+        "disableDates"?: (date: Date) => boolean;
+        /**
+          * The error message that is shown if the input is invalid.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the input field.
+         */
+        "hint"?: string;
+        /**
+          * Whether the input is currently invalid. If true, the input is rendered with error styles.
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * Label for the date range picker component.
+          * @default 'Zeitraum auswählen'
+         */
+        "label"?: string;
+        /**
+          * The language for month and the weekdays will be decided based on the given input. One of `'de'` (German) or `'English'`.
+          * @default 'de'
+         */
+        "language"?: 'de' | 'en';
+        /**
+          * Emits when the user clicks the clear button.
+         */
+        "onB2b-clear"?: (event: B2bDateRangePickerCustomEvent<DateClear>) => void;
+        /**
+          * Emits the selected date range as tuple type.
+         */
+        "onB2b-selected"?: (event: B2bDateRangePickerCustomEvent<DateRangePickerEventDetail>) => void;
+        /**
+          * A list of presets, that the user can click on to simplify time range selection.
+          * @default {}
+         */
+        "presets"?: Record<string, DateRange>;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+          * @default false
+         */
+        "required"?: boolean;
+    }
+    interface B2bDateRangePickerDays {
+        /**
+          * Function used to determine, whether a day should be disabled e.g. because it is in the past. This is only used for the start and end dates, it is valid to have a disabled day in the range of start and end date.
+          * @param day The day of the month to check (1-indexed).
+          * @returns True, if the day should be disabled. False otherwise.
+          * @default (day) => false
+         */
+        "disableDates"?: (day: number) => boolean;
+        /**
+          * The first date of the selection. This may be absent if no dates have been selected yet. This is always smaller/earlier than the second date.
+         */
+        "firstDate"?: Dateish;
+        /**
+          * Event emitted on escape press.
+         */
+        "onB2b-date-picker-escape"?: (event: B2bDateRangePickerDaysCustomEvent<EscapePressed>) => void;
+        /**
+          * Event emitted on selecting date.
+         */
+        "onB2b-date-selected"?: (event: B2bDateRangePickerDaysCustomEvent<DateSelectedEventDetail>) => void;
+        /**
+          * Whether the shown values are a preview and not the actual values (force-hover state).
+          * @default false
+         */
+        "preview"?: boolean;
+        /**
+          * The second date of the selection. This may be absent if none or only one date has been selected yet. This is always bigger/later than the first date.
+         */
+        "secondDate"?: Dateish;
+        /**
+          * The currently shown date (year+month).
+         */
+        "viewedDate"?: Dateish;
+    }
     interface B2bDropdown {
         /**
           * Whether the select as a whole is disabled. Per default it is false.
@@ -3530,7 +3760,7 @@ declare namespace LocalJSX {
         /**
           * The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire.
          */
-        "optionsList"?: string | string[];
+        "optionsList"?: string | string[] | Option[];
         /**
           * The placeholder shown in the input field.
          */
@@ -3550,15 +3780,19 @@ declare namespace LocalJSX {
         /**
           * The initial values to be selected in the dropdown.
          */
-        "selectedValues"?: string | string[];
+        "selectedValues"?: string | string[] | Option[];
     }
     interface B2bMultiselectOption {
+        /**
+          * Will provide the label instead of option if set
+         */
+        "label"?: string;
         /**
           * Emits the option as a string whenever an option is selected.
          */
         "onB2b-option-selected"?: (event: B2bMultiselectOptionCustomEvent<MultiSelectOptionEventDetail>) => void;
         /**
-          * The label of the option.
+          * The label and value of the option.
          */
         "option": string;
         /**
@@ -4244,6 +4478,8 @@ declare namespace LocalJSX {
         "b2b-date-picker-header": B2bDatePickerHeader;
         "b2b-date-picker-months": B2bDatePickerMonths;
         "b2b-date-picker-years": B2bDatePickerYears;
+        "b2b-date-range-picker": B2bDateRangePicker;
+        "b2b-date-range-picker-days": B2bDateRangePickerDays;
         "b2b-dropdown": B2bDropdown;
         "b2b-flyout-menu": B2bFlyoutMenu;
         "b2b-flyout-menu-option": B2bFlyoutMenuOption;
@@ -4317,6 +4553,8 @@ declare module "@stencil/core" {
             "b2b-date-picker-header": LocalJSX.B2bDatePickerHeader & JSXBase.HTMLAttributes<HTMLB2bDatePickerHeaderElement>;
             "b2b-date-picker-months": LocalJSX.B2bDatePickerMonths & JSXBase.HTMLAttributes<HTMLB2bDatePickerMonthsElement>;
             "b2b-date-picker-years": LocalJSX.B2bDatePickerYears & JSXBase.HTMLAttributes<HTMLB2bDatePickerYearsElement>;
+            "b2b-date-range-picker": LocalJSX.B2bDateRangePicker & JSXBase.HTMLAttributes<HTMLB2bDateRangePickerElement>;
+            "b2b-date-range-picker-days": LocalJSX.B2bDateRangePickerDays & JSXBase.HTMLAttributes<HTMLB2bDateRangePickerDaysElement>;
             "b2b-dropdown": LocalJSX.B2bDropdown & JSXBase.HTMLAttributes<HTMLB2bDropdownElement>;
             "b2b-flyout-menu": LocalJSX.B2bFlyoutMenu & JSXBase.HTMLAttributes<HTMLB2bFlyoutMenuElement>;
             "b2b-flyout-menu-option": LocalJSX.B2bFlyoutMenuOption & JSXBase.HTMLAttributes<HTMLB2bFlyoutMenuOptionElement>;

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

@@ -1,2 +1,16 @@
+/**
+ * Default controls can be changed by passing a controls object like so:
+ * `{ 'attribute-name': 'control-type' }`
+ *
+ * Example: `{ 'steps': 'select' }`
+ * For all the control types see https://storybook.js.org/docs/react/essentials/controls#annotation
+ */
 export declare const getArgTypes: (componentTag: string, controls?: any) => any;
+/**
+ * Function to hide all arguments from a single story.
+ * I wasn't able to find a way to do this in Storybook.
+ * This can be used like so:
+ * storyName.argTypes = hideAllControls(storyArgTypes);
+ * If you find a better way, remove this function and use Storybook solution
+ */
 export declare const hideAllControls: (argTypes: any) => {};

package/dist/types/utils/interfaces/form.interface.d.ts

@@ -26,7 +26,7 @@ export interface DateSelectedEventDetail {
   selectedDate: Date;
 }
 
-export interface DateClear<T = any> {}
+export interface DateClear {}
 
 export interface MultiSelectOptionEventDetail {
   selected: boolean;
@@ -49,10 +49,14 @@ export interface ToggleButtonEventDetail<T = any> {
 export interface ChipComponentEventDetail<T = any> {
   value: T;
 }
-export interface DatePickerEventDetail<T = any> {
+export interface DatePickerEventDetail {
   selectedDate: Date;
 }
 
+export interface DateRangePickerEventDetail {
+  selected: readonly [Date, Date];
+}
+
 export interface EscapePressed<T = any> {}
 export interface PreviousMonth<T = any> {}
 export interface NextMonth<T = any> {}