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

package/dist/collection/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,466 @@
+import { h, Host, } from "@stencil/core";
+import { dateAsNumber, isDateRangeEqual, splitDate, toDate, toDateRange, toDateRangeString, } from "./date-range-picker-utils";
+export class B2bDateRangePicker {
+    constructor() {
+        this.label = 'Zeitraum auswählen';
+        this.required = false;
+        this.dateRange = undefined;
+        this.disableDates = () => false;
+        this.presets = {};
+        this.invalid = false;
+        this.hint = undefined;
+        this.error = undefined;
+        this.language = 'de';
+        this.open = false;
+        this.tempDate = undefined;
+        this.internalDateRange = undefined;
+        this.highlightDateRange = undefined;
+        this.viewMode = "Days" /* DatePickerView.Days */;
+        this.viewedYear = undefined;
+        this.viewedMonth = undefined;
+        this.viewedDay = undefined;
+    }
+    updateDateRange(value) {
+        this.internalDateRange = toDateRange(value);
+        this.resetViewedDate();
+    }
+    // #endregion
+    // #region Logic
+    handleDatePickerViewChanged(event) {
+        this.viewMode = event.detail.value;
+    }
+    previousMonth() {
+        if (this.viewedMonth === 0) {
+            this.viewedMonth = 11;
+            this.viewedYear -= 1;
+        }
+        else {
+            this.viewedMonth -= 1;
+        }
+    }
+    nextMonth() {
+        if (this.viewedMonth === 11) {
+            this.viewedMonth = 0;
+            this.viewedYear += 1;
+        }
+        else {
+            this.viewedMonth += 1;
+        }
+    }
+    handleMonthSelected(event) {
+        this.viewedMonth = event.detail.value + 1;
+        this.viewMode = "Days" /* DatePickerView.Days */;
+    }
+    handleYearSelected(event) {
+        this.viewedYear = event.detail.value;
+        this.viewMode = "Days" /* DatePickerView.Days */;
+    }
+    handleEscapePress() {
+        this.toggleOpen(false);
+    }
+    handleDateSelected(event) {
+        event.preventDefault();
+        this.selectDate(event.detail.selectedDate);
+    }
+    selectDate(selected) {
+        if (this.tempDate == null) {
+            this.tempDate = splitDate(selected);
+        }
+        else if (dateAsNumber(selected) >= dateAsNumber(this.tempDate)) {
+            this.setDate([toDate(this.tempDate), toDate(selected)]);
+        }
+        else {
+            this.setDate([toDate(selected), toDate(this.tempDate)]);
+        }
+    }
+    setDate(selected) {
+        this.internalDateRange = selected;
+        this.toggleOpen(false);
+        if (selected == null) {
+            this.b2bClear.emit();
+        }
+        else {
+            this.b2bSelected.emit({ selected });
+        }
+    }
+    toggleOpen(open = !this.open) {
+        this.open = open;
+        if (!open) {
+            this.tempDate = undefined;
+            this.resetViewedDate();
+        }
+    }
+    resetViewedDate() {
+        var _a;
+        const startDate = (_a = this.internalDateRange) === null || _a === void 0 ? void 0 : _a[0];
+        if (startDate == null) {
+            const now = new Date();
+            this.viewedYear = now.getFullYear();
+            this.viewedMonth = now.getMonth() + 1;
+            this.viewedDay = now.getDate();
+        }
+        else {
+            const [year, month, day] = splitDate(startDate);
+            this.viewedYear = year;
+            this.viewedMonth = month;
+            this.viewedDay = day;
+        }
+        this.viewMode = "Days" /* DatePickerView.Days */;
+    }
+    // #endregion
+    // #region Component-Hooks
+    componentWillLoad() {
+        this.internalDateRange = toDateRange(this.dateRange);
+        this.resetViewedDate();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (h(Host, { key: '36a6fd2d45a9019e57dda728f47961cf54bf2535' }, h("div", { key: '26c3eca4579e092b68ddb76fdb72de3fb3e1d1a0', class: "b2b-date-range-picker" }, h("b2b-input-label", { key: 'c6324a8b0ec07dc719e44ae35ce6987a46e012e3', required: this.required }, this.label), h("div", { key: '3f27ec4c6054966866d1184e80c0b1a9b5c50178', class: {
+                'b2b-date-range-picker-input-wrapper': true,
+                'b2b-date-range-picker-input-wrapper--error': this.invalid,
+                'b2b-date-range-picker-input-wrapper--open': this.open,
+            }, onClick: () => this.toggleOpen() }, h("b2b-paragraph", { key: '23690e8fc98fd82699dbc1319fa26308af7ce23f', margin: false }, toDateRangeString(this.internalDateRange, '')), h("div", { key: '6665672a212e59d228aaf56f53ab03b27df857ea', class: "b2b-icons" }, this.internalDateRange && (h("div", { tabIndex: 0, onClick: () => this.setDate(undefined), onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    this.setDate(undefined);
+                }
+            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: 'c87f07fb2e73d9c250c26a92b77d4802f4f0a72f', tabindex: 0, onClick: () => this.toggleOpen(), onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.toggleOpen();
+                }
+            }, class: "b2b-event-icon" }, h("b2b-icon-100", { key: 'cb2bdceb7a80747fd3e8efcf294189a7e7f0b6fb', "aria-label": this.open ? 'close date picker' : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: '84ba8c35eccb089f50a24134bcb5b9e447bdaa95', class: {
+                'b2b-date-range-picker-body': true,
+                'b2b-date-range-picker-body--hidden': !this.open,
+            } }, h("div", { key: '154bc92126a558f33be046de4a1e9cd0a2b3bfdb', class: "b2b-date-range-picker-body--calendar" }, this.viewMode === "Days" /* DatePickerView.Days */ && (h("div", null, h("b2b-date-picker-header", { language: this.language, selectedMonth: this.viewedMonth - 1, selectedYear: this.viewedYear }), h("b2b-date-picker-days-header", { language: this.language }), h("b2b-date-range-picker-days", { viewedDate: [this.viewedYear, this.viewedMonth, this.viewedDay], firstDate: (_c = (_b = (_a = this.highlightDateRange) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : this.tempDate) !== null && _c !== void 0 ? _c : (_d = this.internalDateRange) === null || _d === void 0 ? void 0 : _d[0], secondDate: (_f = (_e = this.highlightDateRange) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (this.tempDate == null
+                ? (_g = this.internalDateRange) === null || _g === void 0 ? void 0 : _g[1]
+                : undefined), disableDates: day => this.disableDates(toDate([this.viewedYear, this.viewedMonth, day])), preview: this.highlightDateRange != null }))), this.viewMode === "Months" /* DatePickerView.Months */ && (h("b2b-date-picker-months", { language: this.language, selectedMonth: this.viewedMonth - 1 })), this.viewMode === "Years" /* DatePickerView.Years */ && (h("b2b-date-picker-years", { selectedYear: this.viewedYear }))), Object.keys(this.presets).length > 0 && (h("div", { class: "b2b-date-range-picker-body--presets" }, Object.entries(this.presets).map(([text, value]) => (h("b2b-paragraph", { class: {
+                'b2b-date-range-picker-body--presets--selected': isDateRangeEqual(this.internalDateRange, value),
+            }, margin: false, onClick: () => this.setDate(value), onMouseOver: () => (this.highlightDateRange = value), onMouseOut: () => (this.highlightDateRange = undefined) }, text)))))), this.open && (h("div", { class: "b2b-date-range-picker--backdrop", onClick: () => this.toggleOpen(false) })), (this.error != null || this.hint != null) && (h("span", { class: {
+                'b2b-date-range-picker-hint': true,
+                'b2b-date-range-picker-hint--error': this.invalid,
+            } }, this.invalid ? this.error : this.hint))));
+    }
+    static get is() { return "b2b-date-range-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-range-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-range-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Zeitraum ausw\u00E4hlen'"
+                        }],
+                    "text": "Label for the date range picker component."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Zeitraum ausw\u00E4hlen'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dateRange": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DatishRange",
+                    "resolved": "readonly [Dateish, Dateish] | string",
+                    "references": {
+                        "DatishRange": {
+                            "location": "import",
+                            "path": "./date-range-picker-utils",
+                            "id": "src/components/date-range-picker/date-range-picker-utils.ts::DatishRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The start and the end date of the selected date range.\nFormat: `TT.MM.YYYY`"
+                },
+                "attribute": "date-range",
+                "reflect": false
+            },
+            "disableDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "date The date to check. Format: `TT.MM.YYYY`"
+                        }, {
+                            "name": "returns",
+                            "text": "True, if the date should be disabled. False otherwise."
+                        }, {
+                            "name": "default",
+                            "text": "(date) => false"
+                        }],
+                    "text": "Function used to determine, whether a date should be disabled e.g. because it is in the past.\nThis 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."
+                },
+                "defaultValue": "() => false"
+            },
+            "presets": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, DateRange>",
+                    "resolved": "{ [x: string]: DateRange; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "DateRange": {
+                            "location": "import",
+                            "path": "./date-range-picker-utils",
+                            "id": "src/components/date-range-picker/date-range-picker-utils.ts::DateRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{}"
+                        }],
+                    "text": "A list of presets, that the user can click on to simplify time range selection."
+                },
+                "defaultValue": "{}"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the input is currently invalid. If true, the input is rendered with error styles."
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The hint text that appears underneath the input field."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message that is shown if the input is invalid."
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'de' | 'en'",
+                    "resolved": "\"de\" | \"en\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'de'"
+                        }],
+                    "text": "The language for month and the weekdays will be decided based on the given input.\nOne of `'de'` (German) or `'English'`."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'de'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "tempDate": {},
+            "internalDateRange": {},
+            "highlightDateRange": {},
+            "viewMode": {},
+            "viewedYear": {},
+            "viewedMonth": {},
+            "viewedDay": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bSelected",
+                "name": "b2b-selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the selected date range as tuple type."
+                },
+                "complexType": {
+                    "original": "DateRangePickerEventDetail",
+                    "resolved": "DateRangePickerEventDetail",
+                    "references": {
+                        "DateRangePickerEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::DateRangePickerEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "b2bClear",
+                "name": "b2b-clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the user clicks the clear button."
+                },
+                "complexType": {
+                    "original": "DateClear",
+                    "resolved": "DateClear",
+                    "references": {
+                        "DateClear": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::DateClear"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "dateRange",
+                "methodName": "updateDateRange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "b2b-date-picker-view-changed",
+                "method": "handleDatePickerViewChanged",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-picker-previous-month",
+                "method": "previousMonth",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-picker-next-month",
+                "method": "nextMonth",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-picker-month-selected",
+                "method": "handleMonthSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-picker-year-selected",
+                "method": "handleYearSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-picker-escape",
+                "method": "handleEscapePress",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "b2b-date-selected",
+                "method": "handleDateSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/date-range-picker/date-range-picker.spec.js

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2bDateRangePicker } from "./date-range-picker";
+import { ParagraphComponent } from "../paragraph/paragraph";
+it('should render the date-range-picker', async () => {
+    const page = await newSpecPage({
+        components: [B2bDateRangePicker],
+        template: () => h("b2b-date-range-picker", null),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should display custom properties', async () => {
+    const page = await newSpecPage({
+        components: [B2bDateRangePicker, ParagraphComponent],
+        template: () => (h("b2b-date-range-picker", { label: "Test", hint: "Test", error: "Error" })),
+    });
+    expect(page.root).toMatchSnapshot();
+});

package/dist/collection/components/date-range-picker/date-range-picker.stories.js

@@ -0,0 +1,131 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { userEvent } from "@storybook/test";
+import { getArgTypes } from "../../docs/config/utils";
+function toHtmlAttribute(args, key) {
+    const value = args[key];
+    if (value == null || value === '') {
+        return '';
+    }
+    return `${key}=${JSON.stringify(value)}`;
+}
+const controls = {
+    dateRange: false,
+    presets: false,
+    disableDates: 'function',
+    hint: 'text',
+    error: 'text',
+};
+export default {
+    title: 'Components/Form/Date Range Picker',
+    component: 'b2b-date-range-picker',
+    args: {
+        label: 'Zeitraum auswählen',
+        required: false,
+        dateRange: undefined,
+        disableDates: undefined,
+        presets: {},
+        invalid: false,
+        hint: undefined,
+        error: undefined,
+        language: 'de',
+    },
+    argTypes: Object.assign({}, getArgTypes('b2b-date-range-picker', controls)),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return `<div style="margin-left: 2px; width: 300px">
+      <b2b-date-range-picker
+        ${toHtmlAttribute(args, 'label')}
+        ${toHtmlAttribute(args, 'required')}
+        ${toHtmlAttribute(args, 'dateRange')}
+        ${toHtmlAttribute(args, 'disableDates')}
+        ${toHtmlAttribute(args, 'presets')}
+        ${toHtmlAttribute(args, 'invalid')}
+        ${toHtmlAttribute(args, 'hint')}
+        ${toHtmlAttribute(args, 'error')}
+        ${toHtmlAttribute(args, 'language')} >
+      </b2b-date-range-picker>
+    </div>`;
+    },
+};
+function findDatePicker(canvasElement) {
+    return canvasElement.querySelector('b2b-date-range-picker');
+}
+async function open(datePicker) {
+    var _a;
+    const wrapper = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-range-picker-input-wrapper');
+    await userEvent.click(wrapper);
+}
+const LOAD_DELAY = 500;
+export const Default = {
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            const datePicker = findDatePicker(canvasElement);
+            datePicker.dateRange = [new Date(2025, 0, 1), new Date(2025, 0, 1)];
+            await open(datePicker);
+        }, LOAD_DELAY);
+    },
+};
+export const AllProperties = {
+    args: {
+        label: 'Custom Label',
+        required: true,
+        invalid: false,
+        hint: 'Please Readme',
+        error: 'Sorry, but this is a test',
+    },
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            const datePicker = findDatePicker(canvasElement);
+            datePicker.dateRange = [new Date(2025, 0, 1), new Date(2025, 1, 0)];
+            datePicker.disableDates = date => date.getDay() == 1;
+            datePicker.presets = {
+                'Today': [new Date(), new Date()],
+                'Feature Added': [new Date(2025, 8, 1), new Date(2025, 8, 23)],
+            };
+            await open(datePicker);
+        }, LOAD_DELAY);
+    },
+};
+export const PresetHover = {
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            const datePicker = findDatePicker(canvasElement);
+            datePicker.dateRange = [new Date(2025, 8, 1), new Date(2025, 8, 1)];
+            datePicker.presets = {
+                'Today': [new Date(), new Date()],
+                'Feature Added': [new Date(2025, 8, 1), new Date(2025, 8, 23)],
+            };
+            setTimeout(async () => {
+                var _a;
+                const presets = (_a = datePicker.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-date-range-picker-body--presets');
+                const preset2 = presets === null || presets === void 0 ? void 0 : presets.children[1];
+                userEvent.hover(preset2);
+            }, 500);
+            await open(datePicker);
+        }, LOAD_DELAY);
+    },
+};
+export const PresetSelected = {
+    play: async ({ canvasElement }) => {
+        setTimeout(async () => {
+            const datePicker = findDatePicker(canvasElement);
+            datePicker.dateRange = [new Date(2025, 8, 1), new Date(2025, 8, 23)];
+            datePicker.presets = {
+                'Today': [new Date(), new Date()],
+                'Feature Added': [new Date(2025, 8, 1), new Date(2025, 8, 23)],
+            };
+            await open(datePicker);
+        }, LOAD_DELAY);
+    },
+};