@otto-de/b2b-core-components 1.16.0 → 1.17.0

package/dist/collection/components/calendar/calendar-header.js

@@ -1,111 +0,0 @@
-import { h, Host, } from "@stencil/core";
-import { Months } from "./calendar.types";
-export class B2bCalendarHeader {
-    constructor() {
-        this.selectedMonth = undefined;
-        this.selectedYear = undefined;
-    }
-    render() {
-        return (h(Host, { key: 'c91f0ad8bc380befca694912ee91abfd42e9bc10' }, h("div", { key: '211538e4ae3c67e079040cc9b568cfe7f48ce249', class: "b2b-calendar-header" }, h("button", { key: '3cdde69184b9e6c500acb3c884f893492ee1b0a1', class: "b2b-calendar-nav--left", onClick: this.b2bCalendarPreviousMonth.emit, onMouseOut: event => {
-                event.target.blur();
-            }, "aria-label": "previous month" }, h("b2b-icon", { key: '8d8d4d8efdd3b11e9918229fed104487dcc381d5', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '77fbb323758d4397ac24c3b7acd3bb39a6daa463', size: '100', align: 'center', class: "b2b-calendar-month", "aria-live": "polite" }, Months[this.selectedMonth]), h("b2b-headline", { key: 'd796b831a8f5afa9c39203b380de272fd0e5c73c', size: '100', align: 'center', class: "b2b-calendar-year", "aria-live": "polite" }, this.selectedYear), h("button", { key: '12bec346d45f7e39885c91a4ea8918820244687b', class: "b2b-calendar-nav--right", onClick: this.b2bCalendarNextMonth.emit, onMouseOut: event => {
-                event.target.blur();
-            }, "aria-label": "next month" }, h("b2b-icon", { key: 'a2722ba253180085628355bafc00e3a685435d2a', icon: "b2b_icon-arrow-right", clickable: true })))));
-    }
-    static get is() { return "b2b-calendar-header"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["calendar-header.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["calendar-header.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "selectedMonth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal selected month"
-                },
-                "attribute": "selected-month",
-                "reflect": false
-            },
-            "selectedYear": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Internal selected year"
-                },
-                "attribute": "selected-year",
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "b2bCalendarPreviousMonth",
-                "name": "b2b-calendar-previous-month",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted for previous month click*"
-                },
-                "complexType": {
-                    "original": "PreviousMonth",
-                    "resolved": "PreviousMonth<any>",
-                    "references": {
-                        "PreviousMonth": {
-                            "location": "import",
-                            "path": "../../utils/interfaces/interaction.interface",
-                            "id": "src/utils/interfaces/interaction.interface.d.ts::PreviousMonth"
-                        }
-                    }
-                }
-            }, {
-                "method": "b2bCalendarNextMonth",
-                "name": "b2b-calendar-next-month",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted for next month click*"
-                },
-                "complexType": {
-                    "original": "NextMonth",
-                    "resolved": "NextMonth<any>",
-                    "references": {
-                        "NextMonth": {
-                            "location": "import",
-                            "path": "../../utils/interfaces/interaction.interface",
-                            "id": "src/utils/interfaces/interaction.interface.d.ts::NextMonth"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "host"; }
-}

package/dist/collection/components/calendar/calendar.e2e.js

@@ -1,67 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-//ToDo Rewrite the tests so that the next, previous button and date selection scenarios are also tested
-describe('B2B-Calendar', () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<b2b-calendar></b2b-calendar>`);
-    });
-    it('should render the calendar component', async () => {
-        const calendar = await page.find('b2b-calendar');
-        const clickableInputComponent = await page.find('b2b-calendar >>> div.b2b-calendar-input-wrapper');
-        expect(clickableInputComponent).not.toBeNull();
-        expect(calendar).not.toBeNull();
-    });
-    it('should render the datepicker component when calendar icon is clicked', async () => {
-        const calendar = await page.find('b2b-calendar');
-        const clickableInputComponent = await page.find('b2b-calendar >>> div.b2b-calendar-input-wrapper');
-        await clickableInputComponent.click();
-        await page.waitForChanges();
-        const datePickerComponent = await page.find('b2b-calendar >>> .b2b-calendar-body');
-        const datePickerHeader = await page.find('b2b-calendar >>> .b2b-calendar-body >>> b2b-calendar-header');
-        const datePickerDays = await page.find('b2b-calendar >>> .b2b-calendar-body >>> b2b-calendar-days');
-        expect(clickableInputComponent).not.toBeNull();
-        expect(calendar).not.toBeNull();
-        expect(datePickerComponent).not.toBeNull();
-        expect(datePickerHeader).not.toBeNull();
-        expect(datePickerDays).not.toBeNull();
-        expect(await datePickerComponent.isVisible()).toBe(true);
-        expect(await datePickerHeader.isVisible()).toBe(true);
-        expect(await datePickerDays.isVisible()).toBe(true);
-    });
-    it('should disable past dates', async () => {
-        page = await newE2EPage();
-        await page.setContent(`<b2b-calendar disable-past-dates=true></b2b-calendar>`);
-        const today = new Date();
-        const yesterday = new Date(today);
-        yesterday.setDate(today.getDate() - 1);
-        const prevDay = yesterday.getDate();
-        if (prevDay > 0 && prevDay >= 30) {
-            const prevDayElement = await page.find({ text: prevDay.toString() });
-            expect(prevDayElement.className).toBe('b2b-calendar-day b2b-calendar-day--disabled');
-        }
-    });
-    it('should disable future dates', async () => {
-        page = await newE2EPage();
-        await page.setContent(`<b2b-calendar disable-future-dates=true></b2b-calendar>`);
-        const today = new Date();
-        const tomorrow = new Date(today);
-        tomorrow.setDate(today.getDate() + 1);
-        const nextDay = tomorrow.getDate();
-        if (nextDay > 0 && nextDay !== 1) {
-            const nextDayElement = await page.find({ text: nextDay.toString() });
-            expect(nextDayElement.className).toBe('b2b-calendar-day b2b-calendar-day--disabled');
-        }
-    });
-    it('should disable weekends dates', async () => {
-        page = await newE2EPage();
-        await page.setContent(`<b2b-calendar disable-weekends=true></b2b-calendar>`);
-        const previousSunday = new Date().getDate() - (new Date().getDay() % 0);
-        if (previousSunday > 0) {
-            const prevDayElement = await page.find({
-                text: previousSunday.toString(),
-            });
-            expect(prevDayElement.className).toBe('b2b-calendar-day b2b-calendar-day--disabled');
-        }
-    });
-});

package/dist/collection/components/calendar/calendar.js

@@ -1,245 +0,0 @@
-import { h, Host, } from "@stencil/core";
-export class B2bCalendar {
-    constructor() {
-        this.setCurrentMonth = (selectedMonth) => {
-            this.selectedMonth = selectedMonth;
-            this.clearDateInput();
-            this.selectedDay = undefined;
-        };
-        this.setCurrentYear = (selectedYear) => {
-            this.selectedYear = selectedYear;
-            this.clearDateInput();
-            this.selectedDay = undefined;
-        };
-        this.showHideCalendar = () => {
-            this.showCalendar = !this.showCalendar;
-        };
-        this.clearDateInput = () => {
-            this.selectedDate = undefined;
-            this.selectedDay = undefined;
-        };
-        this.disablePastDates = undefined;
-        this.disableFutureDates = undefined;
-        this.disableWeekends = undefined;
-        this.label = 'Zeitraum auswählen';
-        this.showCalendar = false;
-        this.selectedMonth = new Date().getMonth();
-        this.selectedYear = new Date().getFullYear();
-        this.selectedDay = undefined;
-        this.selectedDate = undefined;
-    }
-    handleEscapePress() {
-        this.showCalendar = false;
-    }
-    handleDateSelection(event) {
-        this.selectedDay = event.detail.selectedDate.getDate();
-        this.setSelectedDate();
-        this.showCalendar = false;
-    }
-    getPreviousMonth() {
-        if (this.selectedMonth === 0) {
-            this.setCurrentMonth(11);
-            this.setCurrentYear(this.selectedYear - 1);
-        }
-        else {
-            this.setCurrentMonth(this.selectedMonth - 1);
-        }
-    }
-    getNextMonth() {
-        if (this.selectedMonth === 11) {
-            this.setCurrentMonth(0);
-            this.setCurrentYear(this.selectedYear + 1);
-        }
-        else {
-            this.setCurrentMonth(this.selectedMonth + 1);
-        }
-    }
-    setSelectedDate() {
-        if (this.selectedDay !== undefined)
-            this.selectedDate =
-                this.selectedDay +
-                    '.' +
-                    (this.selectedMonth + 1) +
-                    '.' +
-                    this.selectedYear;
-        this.b2bSelected.emit({
-            selectedDate: new Date(this.selectedYear, this.selectedMonth, this.selectedDay),
-        });
-        setTimeout(() => {
-            this.setFocusOnCloseIcon();
-        }, 100);
-    }
-    setFocusOnCloseIcon() {
-        let closeIcon = this.host.shadowRoot.querySelector('.b2b-close-icon');
-        if (closeIcon !== null) {
-            closeIcon.focus();
-        }
-    }
-    render() {
-        return (h(Host, { key: '21fc95c65c928fa7327155e17151ec06af95aece' }, h("div", { key: '970aea3b5571983d2be47844171e03cbe9c3c643', class: "b2b-calendar" }, h("div", { key: 'ee4e0c9b858e39dbb5fcd943549a621b85ed0bea', class: "b2b-calendar-label" }, this.label), h("div", { key: '30c92a685585bc976eca3e65a3fc61f23a8ad5f0', class: {
-                'b2b-calendar-input-wrapper': true,
-                'b2b-calendar-input-wrapper--opened': this.showCalendar,
-            }, tabindex: 0, onClick: this.showHideCalendar, onKeyDown: event => {
-                if (event.key === 'Enter') {
-                    this.showHideCalendar();
-                }
-            } }, h("div", { key: 'a84481a783aeb359dde66c6bd259f9dc03792a29', class: "b2b-calendar-selected-date" }, this.selectedDate), h("div", { key: 'bdcd8b418a37ad1b12c6c07b16ab51126ce87f0d', class: "b2b-icons" }, this.selectedDate && (h("div", { tabIndex: 0, onClick: () => {
-                this.clearDateInput();
-                this.showHideCalendar();
-            }, class: "b2b-close-icon", onKeyDown: event => {
-                if (event.key === 'Enter') {
-                    this.clearDateInput();
-                    this.showHideCalendar();
-                }
-            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { key: '2357e98eb1f59cb0494ba62c19d60db188a0291f', tabindex: 0 }, h("b2b-icon", { key: 'ed967ac9e16223e8c95c4d45b5c492bf1a33e890', "aria-label": this.showCalendar ? 'close calendar' : 'open calendar', icon: "b2b_icon-event", clickable: true }))))), h("div", { key: 'd1476b1a3733b08578895b0c097d0d17a6f47a28', class: {
-                'b2b-calendar-body': true,
-                'b2b-calendar-body--hidden': !this.showCalendar,
-            } }, h("b2b-calendar-header", { key: '73e2024a15c04e6f6a9078f7be3e9d69d0a31a49', selectedMonth: this.selectedMonth, selectedYear: this.selectedYear }), h("b2b-calendar-days-header", { key: 'c9d6de3cd556db4912a16febfe3a90a24779e1ed' }), h("b2b-calendar-days", { key: '7e2b589a8f0ddc93856744e3de0f61eeb599ebb8', selectedMonth: this.selectedMonth, selectedYear: this.selectedYear, selectedDay: this.selectedDay, disableWeekends: this.disableWeekends, disableFutureDates: this.disableFutureDates, disablePastDates: this.disablePastDates }))));
-    }
-    static get is() { return "b2b-calendar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["calendar.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["calendar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "disablePastDates": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the previous dates from the current date are disabled. By default, this is true."
-                },
-                "attribute": "disable-past-dates",
-                "reflect": false
-            },
-            "disableFutureDates": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the dates after the current date are disabled. By default, this is false."
-                },
-                "attribute": "disable-future-dates",
-                "reflect": false
-            },
-            "disableWeekends": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the dates that fall on the weekend are disabled. By default, this is false."
-                },
-                "attribute": "disable-weekends",
-                "reflect": false
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label for the calendar component."
-                },
-                "attribute": "label",
-                "reflect": false,
-                "defaultValue": "'Zeitraum ausw\u00E4hlen'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "showCalendar": {},
-            "selectedMonth": {},
-            "selectedYear": {},
-            "selectedDay": {},
-            "selectedDate": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "b2bSelected",
-                "name": "b2b-selected",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emits the selected date as Date type."
-                },
-                "complexType": {
-                    "original": "CalendarEventDetail",
-                    "resolved": "CalendarEventDetail<any>",
-                    "references": {
-                        "CalendarEventDetail": {
-                            "location": "import",
-                            "path": "../../utils/interfaces/form.interface",
-                            "id": "src/utils/interfaces/form.interface.d.ts::CalendarEventDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "host"; }
-    static get listeners() {
-        return [{
-                "name": "b2b-calendar-escape",
-                "method": "handleEscapePress",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "b2b-date-selected",
-                "method": "handleDateSelection",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "b2b-calendar-previous-month",
-                "method": "getPreviousMonth",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "b2b-calendar-next-month",
-                "method": "getNextMonth",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/calendar/calendar.stories.js

@@ -1,81 +0,0 @@
-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 { html } from "lit-html";
-import { getArgTypes } from "../../docs/config/utils";
-import { userEvent } from "@storybook/testing-library";
-const meta = {
-    title: 'Components/Interaction/Calendar',
-    component: 'b2b-calendar',
-    args: {
-        disablePastDates: false,
-        disableFutureDates: false,
-        disableWeekends: false,
-        label: 'Zeitraum auswählen',
-    },
-    argTypes: getArgTypes('b2b-calendar'),
-    render: (_a) => {
-        var args = __rest(_a, []);
-        return html ` <div style="margin-left: 100px">
-    <b2b-calendar
-      label=${args.label}
-      disable-past-dates=${args.disablePastDates}
-      disable-future-dates=${args.disableFutureDates}
-      disable-weekends=${args.disableWeekends}></b2b-calendar>
-  </div>`;
-    },
-};
-export default meta;
-export const Default = {
-    args: Object.assign({}, meta.args),
-    play: async ({ canvasElement }) => {
-        setTimeout(async () => {
-            var _a;
-            const calendar = canvasElement.querySelector('b2b-calendar');
-            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
-            await userEvent.click(b2bCalendarInputWrapper);
-        }, 500);
-    },
-};
-export const DisablePastDates = {
-    args: Object.assign(Object.assign({}, meta.args), { disablePastDates: true }),
-    play: async ({ canvasElement }) => {
-        setTimeout(async () => {
-            var _a;
-            const calendar = canvasElement.querySelector('b2b-calendar');
-            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
-            await userEvent.click(b2bCalendarInputWrapper);
-        }, 500);
-    },
-};
-export const DisableFutureDates = {
-    args: Object.assign(Object.assign({}, meta.args), { disableFutureDates: true }),
-    play: async ({ canvasElement }) => {
-        setTimeout(async () => {
-            var _a;
-            const calendar = canvasElement.querySelector('b2b-calendar');
-            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
-            await userEvent.click(b2bCalendarInputWrapper);
-        }, 500);
-    },
-};
-export const DisableWeekends = {
-    args: Object.assign(Object.assign({}, meta.args), { disableWeekends: true }),
-    play: async ({ canvasElement }) => {
-        setTimeout(async () => {
-            var _a;
-            const calendar = canvasElement.querySelector('b2b-calendar');
-            const b2bCalendarInputWrapper = (_a = calendar.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.b2b-calendar-input-wrapper');
-            await userEvent.click(b2bCalendarInputWrapper);
-        }, 500);
-    },
-};

package/dist/components/b2b-calendar-days-header.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface B2bCalendarDaysHeader extends Components.B2bCalendarDaysHeader, HTMLElement {}
-export const B2bCalendarDaysHeader: {
-    prototype: B2bCalendarDaysHeader;
-    new (): B2bCalendarDaysHeader;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/b2b-calendar-days-header.js

@@ -1,6 +0,0 @@
-import { B as B2bCalendarDaysHeader$1, d as defineCustomElement$1 } from './calendar-days-header.js';
-
-const B2bCalendarDaysHeader = B2bCalendarDaysHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { B2bCalendarDaysHeader, defineCustomElement };

package/dist/components/b2b-calendar-days.js

@@ -1,6 +0,0 @@
-import { B as B2bCalendarDays$1, d as defineCustomElement$1 } from './calendar-days.js';
-
-const B2bCalendarDays = B2bCalendarDays$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { B2bCalendarDays, defineCustomElement };

package/dist/components/b2b-calendar-header.js

@@ -1,6 +0,0 @@
-import { B as B2bCalendarHeader$1, d as defineCustomElement$1 } from './calendar-header.js';
-
-const B2bCalendarHeader = B2bCalendarHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { B2bCalendarHeader, defineCustomElement };