@otto-de/b2b-core-components 1.33.0 → 1.35.0

package/dist/types/components/time-picker/time-picker.d.ts

@@ -0,0 +1,50 @@
+import { type ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { type DateClear, InputChangeEvent } from '../../utils/interfaces/form.interface';
+export declare class TimePickerComponent implements ComponentInterface {
+    /** The time picker label. */
+    label?: string;
+    /** Adds an asterisk at the end of the label to signify that the field is required. */
+    required: boolean;
+    /** The placeholder for the time picker input field. */
+    placeholder: string;
+    /** Whether the time picker is currently invalid. If true, the time picker is rendered with error styles. Per default, it is false. */
+    invalid: boolean;
+    /** The hint text that appears underneath the time picker field. */
+    hint?: string;
+    /** The interval in minutes for the time options. Default is 15 minutes. */
+    interval?: number;
+    /** The error message that is shown if the input is invalid. */
+    error?: string;
+    /** The value of the time picker. It has to be in the format "hh:mm". */
+    value: string;
+    /** Emits whenever the time picker receives focus. */
+    b2bFocus: EventEmitter<FocusEvent>;
+    /** Emits whenever the time picker loses focus. */
+    b2bBlur: EventEmitter<FocusEvent>;
+    /** Emits whenever the input value changes. */
+    b2bInput: EventEmitter<InputChangeEvent>;
+    /** Emits whenever a time is selected from the dropdown. */
+    b2bChange: EventEmitter<string>;
+    /** Emits when the user clicks the clear button. */
+    b2bClear: EventEmitter<DateClear>;
+    hasFocus: boolean;
+    isOpen: boolean;
+    availableTimes: string[];
+    internalErrorMessage: string;
+    internalInvalid: boolean;
+    private inputRef?;
+    componentWillLoad(): void;
+    private onFocus;
+    private onBlur;
+    private onInput;
+    handleIntervalChange(): void;
+    validateValue(newValue: string): void;
+    private validateInput;
+    private get isInvalid();
+    private get currentErrorMessage();
+    private getAvailableTimes;
+    private onSelect;
+    private onClear;
+    private toggleDropdown;
+    render(): any;
+}

package/dist/types/components/time-picker/time-picker.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+type Story = StoryObj;
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story;
+export declare const Focused: Story;
+export declare const Filled: Story;
+export declare const Error: Story;
+export declare const FilledWithIncorrectTime: Story;
+export declare const CustomIntervalSet: Story;

package/dist/types/components/toggle-switch/toggle-switch.stories.d.ts

@@ -1,7 +1,19 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
+import type { StoryObj } from '@storybook/web-components';
+import type { B2bToggleSwitchComponent } from './toggle-switch';
+declare const _default: {
+    title: string;
+    component: string;
+    args: {
+        label: string;
+        disabled: false;
+        labelPosition: "left";
+        state: true;
+    };
+    argTypes: any;
+    render: ({ ...args }: B2bToggleSwitchComponent) => import("lit-html").TemplateResult<1>;
+};
+export default _default;
+type Story = StoryObj<B2bToggleSwitchComponent>;
 export declare const SwitchOn: Story;
 export declare const SwitchOff: Story;
 export declare const SwitchOnDisabled: Story;

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";
@@ -293,6 +295,10 @@ export namespace Components {
         "value"?: any;
     }
     interface B2bCustomDropdown {
+        /**
+          * The horizontal alignment of the dropdown. Can be 'left', 'center', or 'right'. Default is 'left'.
+         */
+        "alignment": 'left' | 'center' | 'right';
         /**
           * Search is automatically disabled for lists with fewer than six options.
          */
@@ -508,6 +514,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.
@@ -1367,6 +1445,40 @@ export namespace Components {
          */
         "value": string;
     }
+    interface B2bTimePicker {
+        /**
+          * The error message that is shown if the input is invalid.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the time picker field.
+         */
+        "hint"?: string;
+        /**
+          * The interval in minutes for the time options. Default is 15 minutes.
+         */
+        "interval"?: number;
+        /**
+          * Whether the time picker is currently invalid. If true, the time picker is rendered with error styles. Per default, it is false.
+         */
+        "invalid": boolean;
+        /**
+          * The time picker label.
+         */
+        "label"?: string;
+        /**
+          * The placeholder for the time picker input field.
+         */
+        "placeholder": string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required": boolean;
+        /**
+          * The value of the time picker. It has to be in the format "hh:mm".
+         */
+        "value": string;
+    }
     interface B2bToggleButton {
         /**
           * Whether or not the toggle button is currently checked. Per default it is false.
@@ -1560,6 +1672,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;
@@ -1640,6 +1760,10 @@ export interface B2bTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bTextareaElement;
 }
+export interface B2bTimePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTimePickerElement;
+}
 export interface B2bToggleButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bToggleButtonElement;
@@ -1916,6 +2040,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;
@@ -2417,6 +2577,27 @@ declare global {
         prototype: HTMLB2bTextareaElement;
         new (): HTMLB2bTextareaElement;
     };
+    interface HTMLB2bTimePickerElementEventMap {
+        "b2b-focus": FocusEvent;
+        "b2b-blur": FocusEvent;
+        "b2b-input": InputChangeEvent;
+        "b2b-selected": string;
+        "b2b-clear": DateClear;
+    }
+    interface HTMLB2bTimePickerElement extends Components.B2bTimePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLB2bTimePickerElementEventMap>(type: K, listener: (this: HTMLB2bTimePickerElement, ev: B2bTimePickerCustomEvent<HTMLB2bTimePickerElementEventMap[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 HTMLB2bTimePickerElementEventMap>(type: K, listener: (this: HTMLB2bTimePickerElement, ev: B2bTimePickerCustomEvent<HTMLB2bTimePickerElementEventMap[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 HTMLB2bTimePickerElement: {
+        prototype: HTMLB2bTimePickerElement;
+        new (): HTMLB2bTimePickerElement;
+    };
     interface HTMLB2bToggleButtonElementEventMap {
         "b2b-change": ToggleButtonEventDetail;
     }
@@ -2532,6 +2713,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;
@@ -2573,6 +2756,7 @@ declare global {
         "b2b-table-row": HTMLB2bTableRowElement;
         "b2b-table-rowgroup": HTMLB2bTableRowgroupElement;
         "b2b-textarea": HTMLB2bTextareaElement;
+        "b2b-time-picker": HTMLB2bTimePickerElement;
         "b2b-toggle-button": HTMLB2bToggleButtonElement;
         "b2b-toggle-chip": HTMLB2bToggleChipElement;
         "b2b-toggle-group": HTMLB2bToggleGroupElement;
@@ -2877,6 +3061,10 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface B2bCustomDropdown {
+        /**
+          * The horizontal alignment of the dropdown. Can be 'left', 'center', or 'right'. Default is 'left'.
+         */
+        "alignment"?: 'left' | 'center' | 'right';
         /**
           * Search is automatically disabled for lists with fewer than six options.
          */
@@ -3140,6 +3328,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.
@@ -4095,6 +4371,60 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface B2bTimePicker {
+        /**
+          * The error message that is shown if the input is invalid.
+         */
+        "error"?: string;
+        /**
+          * The hint text that appears underneath the time picker field.
+         */
+        "hint"?: string;
+        /**
+          * The interval in minutes for the time options. Default is 15 minutes.
+         */
+        "interval"?: number;
+        /**
+          * Whether the time picker is currently invalid. If true, the time picker is rendered with error styles. Per default, it is false.
+         */
+        "invalid"?: boolean;
+        /**
+          * The time picker label.
+         */
+        "label"?: string;
+        /**
+          * Emits whenever the time picker loses focus.
+         */
+        "onB2b-blur"?: (event: B2bTimePickerCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits when the user clicks the clear button.
+         */
+        "onB2b-clear"?: (event: B2bTimePickerCustomEvent<DateClear>) => void;
+        /**
+          * Emits whenever the time picker receives focus.
+         */
+        "onB2b-focus"?: (event: B2bTimePickerCustomEvent<FocusEvent>) => void;
+        /**
+          * Emits whenever the input value changes.
+         */
+        "onB2b-input"?: (event: B2bTimePickerCustomEvent<InputChangeEvent>) => void;
+        /**
+          * Emits whenever a time is selected from the dropdown.
+         */
+        "onB2b-selected"?: (event: B2bTimePickerCustomEvent<string>) => void;
+        /**
+          * The placeholder for the time picker input field.
+         */
+        "placeholder"?: string;
+        /**
+          * Adds an asterisk at the end of the label to signify that the field is required.
+         */
+        "required"?: boolean;
+        /**
+          * The value of the time picker. It has to be in the format "hh:mm".
+         */
+        "value"?: string;
+    }
     interface B2bToggleButton {
         /**
           * Whether or not the toggle button is currently checked. Per default it is false.
@@ -4270,6 +4600,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;
@@ -4311,6 +4643,7 @@ declare namespace LocalJSX {
         "b2b-table-row": B2bTableRow;
         "b2b-table-rowgroup": B2bTableRowgroup;
         "b2b-textarea": B2bTextarea;
+        "b2b-time-picker": B2bTimePicker;
         "b2b-toggle-button": B2bToggleButton;
         "b2b-toggle-chip": B2bToggleChip;
         "b2b-toggle-group": B2bToggleGroup;
@@ -4343,6 +4676,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>;
@@ -4408,6 +4743,7 @@ declare module "@stencil/core" {
              * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
              */
             "b2b-textarea": LocalJSX.B2bTextarea & JSXBase.HTMLAttributes<HTMLB2bTextareaElement>;
+            "b2b-time-picker": LocalJSX.B2bTimePicker & JSXBase.HTMLAttributes<HTMLB2bTimePickerElement>;
             "b2b-toggle-button": LocalJSX.B2bToggleButton & JSXBase.HTMLAttributes<HTMLB2bToggleButtonElement>;
             "b2b-toggle-chip": LocalJSX.B2bToggleChip & JSXBase.HTMLAttributes<HTMLB2bToggleChipElement>;
             "b2b-toggle-group": LocalJSX.B2bToggleGroup & JSXBase.HTMLAttributes<HTMLB2bToggleGroupElement>;

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> {}