@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/data/data-label.js

@@ -0,0 +1,72 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, Type } from "../../utils/index";
+/**
+ * DataLabel is a label element for use within ds-data-item.
+ * It displays a label with optional required indicator.
+ *
+ * @slot - The label text content.
+ */
+export class DataLabel {
+    constructor() {
+        /**
+         * If `true` an asterisk is added after the label.
+         */
+        this.required = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (h(Host, { key: '605cf2c6c7d1c6f87dd8a2b8193dd0cdfa3e0280' }, h("slot", { key: '283a1682ea8a8c062978fceb7438a8aa70c8359b' }), this.required ? h("span", null, "*") : ''));
+    }
+    static get is() { return "ds-data-label"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["data-label.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["data-label.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` an asterisk is added after the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('data-label'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DataLabel.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], DataLabel.prototype, "required", void 0);

package/dist/collection/components/data/data-value.host.css

@@ -0,0 +1 @@
+:host{display:contents}

package/dist/collection/components/data/data-value.js

@@ -0,0 +1,38 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger } from "../../utils/index";
+/**
+ * DataValue is a value element for use within ds-data-item.
+ * Pass-through slot container for value content.
+ *
+ * @slot - The value content (text, HTML, or custom elements).
+ */
+export class DataValue {
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (h(Host, { key: '123fe49b6436403ace13f8e2974898472bdc1618' }, h("slot", { key: 'a86bde096c9af8a10c90365cef142d4edd5665be' })));
+    }
+    static get is() { return "ds-data-value"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["data-value.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["data-value.host.css"]
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('data-value'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], DataValue.prototype, "createLogger", null);

package/dist/collection/components/data/data.host.css

@@ -0,0 +1 @@
+:host{display:block}.data-container{display:grid;grid-template-columns:1fr;width:100%}:host(.is-horizontal) .data-container{gap:1rem}@media screen and (min-width: 769px){:host(.is-horizontal) .data-container{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}}

package/dist/collection/components/data/data.js

@@ -0,0 +1,75 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, Type } from "../../utils/index";
+/**
+ * Data displays a list of label-value pairs in a organized, accessible format.
+ * Supports vertical and horizontal layouts with dividers always shown in vertical layout.
+ *
+ * @slot - The content of the data list (typically ds-data-item elements).
+ */
+export class Data {
+    constructor() {
+        /**
+         * If `true` the data list is horizontal instead of vertical.
+         */
+        this.horizontal = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (h(Host, { key: '5a1f5b93e705edeb124c790623da2829d19a0b5b', class: {
+                'is-horizontal': this.horizontal,
+            } }, h("div", { key: 'aadbae5d22739f3e0c73402d18a9d855a4ab18d3', class: "data-container" }, h("slot", { key: '1bedd3928a17e0a159369dd60d7b0ad61ac552e2' }))));
+    }
+    static get is() { return "ds-data"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["data.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["data.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the data list is horizontal instead of vertical."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "horizontal",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('data'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Data.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Data.prototype, "horizontal", void 0);

package/dist/collection/components/data/test/data.a11y.play.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('default', async ({ page, a11y }) => {
+    await page.mount(`<ds-data>
+    <ds-data-item>
+      <ds-data-label>Label</ds-data-label>
+      <ds-data-value>Value</ds-data-value>
+    </ds-data-item>
+  </ds-data>`);
+    await a11y('ds-data');
+});
+test('required label', async ({ page, a11y }) => {
+    await page.mount(`<ds-data>
+    <ds-data-item>
+      <ds-data-label required>Required Field</ds-data-label>
+      <ds-data-value>Value</ds-data-value>
+    </ds-data-item>
+  </ds-data>`);
+    await a11y('ds-data');
+});
+test('disabled', async ({ page, a11y }) => {
+    await page.mount(`<ds-data>
+    <ds-data-item disabled>
+      <ds-data-label>Disabled Field</ds-data-label>
+      <ds-data-value>Disabled Value</ds-data-value>
+    </ds-data-item>
+  </ds-data>`);
+    await a11y('ds-data');
+});

package/dist/collection/components/data/test/data.component.play.js

@@ -0,0 +1,104 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test, DsData, DsDataItem } from "../../../../../../playwright/src/index";
+test.describe('ds-data', () => {
+    test.describe('vertical layout (default)', () => {
+        test('should render list of data items', async ({ page }) => {
+            await page.mount(`
+        <ds-data>
+          <ds-data-item>
+            <ds-data-label slot="label">Name</ds-data-label>
+            <ds-data-value>John Doe</ds-data-value>
+          </ds-data-item>
+          <ds-data-item>
+            <ds-data-label slot="label">Email</ds-data-label>
+            <ds-data-value>john@example.com</ds-data-value>
+          </ds-data-item>
+          <ds-data-item>
+            <ds-data-label slot="label">Phone</ds-data-label>
+            <ds-data-value>+1 (555) 123-4567</ds-data-value>
+          </ds-data-item>
+        </ds-data>
+      `);
+            const data = new DsData(page.locator('ds-data'));
+            await data.assertItemCount(3);
+            await data.assertIsNotHorizontal();
+        });
+    });
+    test.describe('horizontal layout', () => {
+        test('should render items in horizontal layout when horizontal prop is true', async ({ page }) => {
+            await page.mount(`
+        <ds-data horizontal>
+          <ds-data-item>
+            <ds-data-label slot="label">Metric 1</ds-data-label>
+            <ds-data-value>100</ds-data-value>
+          </ds-data-item>
+          <ds-data-item>
+            <ds-data-label slot="label">Metric 2</ds-data-label>
+            <ds-data-value>200</ds-data-value>
+          </ds-data-item>
+        </ds-data>
+      `);
+            const data = new DsData(page.locator('ds-data'));
+            await data.assertIsHorizontal();
+            await data.assertItemCount(2);
+        });
+    });
+    test.describe('state props', () => {
+        test('should apply disabled state to items', async ({ page }) => {
+            await page.mount(`
+        <ds-data>
+          <ds-data-item disabled>
+            <ds-data-label slot="label">Status</ds-data-label>
+            <ds-data-value>Inactive</ds-data-value>
+          </ds-data-item>
+        </ds-data>
+      `);
+            const data = new DsData(page.locator('ds-data'));
+            const item = new DsDataItem(data.getItem(0));
+            await item.assertIsDisabled();
+        });
+        test('should apply multiline state to items', async ({ page }) => {
+            await page.mount(`
+        <ds-data>
+          <ds-data-item multiline>
+            <ds-data-label slot="label">Description</ds-data-label>
+            <ds-data-value>This is a long description that spans multiple lines</ds-data-value>
+          </ds-data-item>
+        </ds-data>
+      `);
+            const data = new DsData(page.locator('ds-data'));
+            const item = new DsDataItem(data.getItem(0));
+            await item.assertIsMultiline();
+        });
+        test('should apply editable state to items', async ({ page }) => {
+            await page.mount(`
+        <ds-data>
+          <ds-data-item editable>
+            <ds-data-label slot="label">Name</ds-data-label>
+            <ds-data-value>John</ds-data-value>
+          </ds-data-item>
+        </ds-data>
+      `);
+            const data = new DsData(page.locator('ds-data'));
+            const item = new DsDataItem(data.getItem(0));
+            await item.assertIsEditable();
+        });
+    });
+    test.describe('semantic accessibility', () => {
+        test('should link labels and values within items', async ({ page }) => {
+            await page.mount(`
+        <ds-data>
+          <ds-data-item>
+            <ds-data-label slot="label">Name</ds-data-label>
+            <ds-data-value>John</ds-data-value>
+          </ds-data-item>
+        </ds-data>
+      `);
+            const data = new DsData(page.locator('ds-data'));
+            const item = new DsDataItem(data.getItem(0));
+            await item.assertLabelLinksToValue();
+        });
+    });
+});

package/dist/collection/components/data/test/data.visual.play.js

@@ -0,0 +1,25 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'data';
+const VARIANTS = [
+    'basic',
+    'horizontal',
+    'multiline',
+    'required',
+    'disabled',
+    'editable',
+    'custom-form',
+    'mixed-content',
+];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expectScreenshot(el, image(variant));
+    });
+});

package/dist/collection/components/date/date.host.css

@@ -0,0 +1 @@
+.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);box-sizing:border-box;cursor:pointer;display:flex;position:relative;align-items:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover,.air-datepicker-cell.-in-range-.-focus-{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}.air-datepicker-body{transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:flex;align-items:center;justify-content:center;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)}.air-datepicker-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:flex;cursor:pointer;align-items:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:rgba(255, 255, 255, 0)}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.air-datepicker-time{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:12px;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:flex;align-items:center;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:flex;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size)/2*-1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0, 0, 0, 0);background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:rgba(0, 0, 0, 0)}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:rgba(0, 0, 0, 0)}.air-datepicker{--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--adp-font-size: 14px;--adp-width: 246px;--adp-z-index: 100;--adp-padding: 4px;--adp-grid-areas: "nav" "body" "timepicker" "buttons";--adp-transition-duration: .3s;--adp-transition-ease: ease-out;--adp-transition-offset: 8px;--adp-background-color: #fff;--adp-background-color-hover: #f0f0f0;--adp-background-color-active: #eaeaea;--adp-background-color-in-range: rgba(92, 196, 239, .1);--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);--adp-background-color-selected-other-month-focused: #8ad5f4;--adp-background-color-selected-other-month: #a2ddf6;--adp-color: #4a4a4a;--adp-color-secondary: #9c9c9c;--adp-accent-color: #4eb5e6;--adp-color-current-date: var(--adp-accent-color);--adp-color-other-month: #dedede;--adp-color-disabled: #aeaeae;--adp-color-disabled-in-range: #939393;--adp-color-other-month-hover: #c5c5c5;--adp-border-color: #dbdbdb;--adp-border-color-inner: #efefef;--adp-border-radius: 4px;--adp-border-color-inline: #d7d7d7;--adp-nav-height: 32px;--adp-nav-arrow-color: var(--adp-color-secondary);--adp-nav-action-size: 32px;--adp-nav-color-secondary: var(--adp-color-secondary);--adp-day-name-color: #ff9a19;--adp-day-name-color-hover: #8ad5f4;--adp-day-cell-width: 1fr;--adp-day-cell-height: 32px;--adp-month-cell-height: 42px;--adp-year-cell-height: 56px;--adp-pointer-size: 10px;--adp-poiner-border-radius: 2px;--adp-pointer-offset: 14px;--adp-cell-border-radius: 4px;--adp-cell-background-color-hover: var(--adp-background-color-hover);--adp-cell-background-color-selected: #5cc4ef;--adp-cell-background-color-selected-hover: #45bced;--adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);--adp-btn-height: 32px;--adp-btn-color: var(--adp-accent-color);--adp-btn-color-hover: var(--adp-color);--adp-btn-border-radius: var(--adp-border-radius);--adp-btn-background-color-hover: var(--adp-background-color-hover);--adp-btn-background-color-active: var(--adp-background-color-active);--adp-time-track-height: 1px;--adp-time-track-color: #dedede;--adp-time-track-color-hover: #b1b1b1;--adp-time-thumb-size: 12px;--adp-time-padding-inner: 10px;--adp-time-day-period-color: var(--adp-color-secondary);--adp-mobile-font-size: 16px;--adp-mobile-nav-height: 40px;--adp-mobile-width: 320px;--adp-mobile-day-cell-height: 38px;--adp-mobile-month-cell-height: 48px;--adp-mobile-year-cell-height: 64px}.air-datepicker-overlay{--adp-overlay-background-color: rgba(0, 0, 0, .3);--adp-overlay-transition-duration: .3s;--adp-overlay-transition-ease: ease-out;--adp-overlay-z-index: 99}.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border-radius:var(--adp-border-radius);box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family),sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;transition:opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size: var(--adp-mobile-font-size);--adp-day-cell-height: var(--adp-mobile-day-cell-height);--adp-month-cell-height: var(--adp-mobile-month-cell-height);--adp-year-cell-height: var(--adp-mobile-year-cell-height);--adp-nav-height: var(--adp-mobile-nav-height);--adp-nav-action-size: var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size: calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size)/2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size)/2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;transition-delay:0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s}:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-container-background: var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));--_form-container-border-color: var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));--_form-container-border-width: var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));--_form-container-radius: var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));--_form-container-hover-background: var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));--_form-container-active-background: var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));--_form-container-focus-background: var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));--_form-container-hover-border: var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));--_form-container-active-border: var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));--_form-container-focus-border: var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_date-family: var(--date-family, var(--mod-date-family, var(--ds-form-control-family)));--_date-weight: var(--date-weight, var(--mod-date-weight, var(--ds-form-control-weight)));--_date-line-height: var(--date-line-height, var(--mod-date-line-height, var(--ds-form-control-line-height)));--_date-size: var(--date-size, var(--mod-date-size, var(--ds-form-control-size-device)));--_date-color: var(--date-color, var(--mod-date-color, var(--ds-form-control-color-value-base)));--_date-placeholder: var(--date-placeholder, var(--mod-date-placeholder, var(--ds-form-control-color-placeholder-base)));--_date-trigger-icon-color-hover: var(--date-trigger-icon-color-hover, var(--mod-date-trigger-icon-color-hover, var(--ds-date-trigger-color-hover)));--_date-trigger-icon-color-active: var(--date-trigger-icon-color-active, var(--mod-date-trigger-icon-color-active, var(--ds-date-trigger-color-active)));--_date-trigger-icon-color-disabled: var(--date-trigger-icon-color-disabled, var(--mod-date-trigger-icon-color-disabled, var(--ds-date-trigger-color-disabled)));--_date-focus-color: var(--date-focus-color, var(--mod-date-focus-color, var(--ds-alias-interaction-focus-color-base)));--_date-popup-shadow: var(--date-popup-shadow, var(--mod-date-popup-shadow, var(--ds-date-popup-shadow)));--_date-calendar-text-color: var(--date-calendar-text-color, var(--mod-date-calendar-text-color, var(--ds-date-calendar-color-text)));--_date-calendar-family: var(--date-calendar-family, var(--mod-date-calendar-family, var(--ds-date-calendar-family)));--_date-calendar-size: var(--date-calendar-size, var(--mod-date-calendar-size, var(--ds-date-calendar-size)));--_date-calendar-weight: var(--date-calendar-weight, var(--mod-date-calendar-weight, var(--ds-date-calendar-weight)));--_date-calendar-radius: var(--date-calendar-radius, var(--mod-date-calendar-radius, var(--ds-date-calendar-radius)));--_date-calendar-shadow: var(--date-calendar-shadow, var(--mod-date-calendar-shadow, var(--ds-date-calendar-shadow)));--_date-calendar-color-inner-border: var(--date-calendar-color-inner-border, var(--mod-date-calendar-color-inner-border, var(--ds-date-calendar-color-inner-border)));--_date-calendar-disabled-color: var(--date-calendar-disabled-color, var(--mod-date-calendar-disabled-color, var(--ds-date-calendar-color-disabled)));--_date-calendar-day-background-hover: var(--date-calendar-day-background-hover, var(--mod-date-calendar-day-background-hover, var(--ds-date-calendar-color-day-hover-background)));--_date-calendar-day-background-active: var(--date-calendar-day-background-active, var(--mod-date-calendar-day-background-active, var(--ds-date-calendar-color-day-active-background)));--_date-calendar-day-background-selected: var(--date-calendar-day-background-selected, var(--mod-date-calendar-day-background-selected, var(--ds-date-calendar-color-day-selected-background)));--_date-calendar-day-background-selected-hover: var(--date-calendar-day-background-selected-hover, var(--mod-date-calendar-day-background-selected-hover, var(--ds-date-calendar-color-day-selected-hover-background)));--_date-calendar-color-current-date: var(--date-calendar-color-current-date, var(--mod-date-calendar-color-current-date, var(--ds-date-calendar-color-current-date)));--_date-calendar-day-weight: var(--date-calendar-day-weight, var(--mod-date-calendar-day-weight, var(--ds-date-calendar-day-weight-base)));--_date-calendar-day-weight-selected: var(--date-calendar-day-weight-selected, var(--mod-date-calendar-day-weight-selected, var(--ds-date-calendar-day-weight-selected)));--_date-calendar-day-name-family: var(--date-calendar-day-name-family, var(--mod-date-calendar-day-name-family, var(--ds-date-calendar-day-name-family)));--_date-calendar-day-name-weight: var(--date-calendar-day-name-weight, var(--mod-date-calendar-day-name-weight, var(--ds-date-calendar-day-name-weight)));--_date-calendar-nav-color: var(--date-calendar-nav-color, var(--mod-date-calendar-nav-color, var(--ds-date-calendar-nav-color-base)));--_date-calendar-nav-color-hover: var(--date-calendar-nav-color-hover, var(--mod-date-calendar-nav-color-hover, var(--ds-date-calendar-nav-color-hover)));--_date-calendar-nav-color-active: var(--date-calendar-nav-color-active, var(--mod-date-calendar-nav-color-active, var(--ds-date-calendar-nav-color-active)));--_date-calendar-nav-radius: var(--date-calendar-nav-radius, var(--mod-date-calendar-nav-radius, var(--ds-date-calendar-nav-radius)));--_date-calendar-nav-color-disabled: var(--date-calendar-nav-color-disabled, var(--mod-date-calendar-nav-color-disabled, var(--ds-date-calendar-nav-color-disabled)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_form-container-background);border:var(--_form-container-border-width) solid var(--_form-container-border-color);border-radius:var(--_form-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_form-container-hover-background);border-color:var(--_form-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_form-container-active-background);border-color:var(--_form-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_form-container-focus-background);border-color:var(--_form-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #input{border:none;outline:none;box-shadow:none;position:relative;background:inherit;flex:1;color:var(--_date-color);font-family:var(--_date-family);font-weight:var(--_date-weight);font-size:var(--_date-size);line-height:var(--_date-line-height);border-radius:var(--_date-container-radius)}:host #input::placeholder{color:var(--_date-placeholder)}:host #input::-moz-placeholder{color:var(--_date-placeholder)}:host #input::-webkit-input-placeholder{color:var(--_date-placeholder)}:host #input:-moz-placeholder{color:var(--_date-placeholder)}:host #input:-ms-input-placeholder{color:var(--_date-placeholder)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host #trigger{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host #trigger{display:none !important}}:host #trigger{border-radius:var(--ds-alias-radius-base);background:rgba(0,0,0,0);width:1.5rem;height:1.5rem;border:none;appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host #trigger::-moz-focus-inner{border:0}:host #trigger:disabled{pointer-events:none}@media(hover: hover)and (pointer: fine){:host #trigger:hover,:host #trigger.is-hovered{--icon-color: var(--_date-trigger-icon-color-hover)}}:host #trigger:active,:host #trigger.is-pressed{--icon-color: var(--_date-trigger-icon-color-active)}@media(hover: hover)and (pointer: fine){:host #trigger:focus-visible:not(:active),:host #trigger.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_date-focus-color) 0 0 0 5px !important}}:host #clear{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host #clear{display:none !important}}:host #clear{border-radius:var(--ds-alias-radius-rounded);background:rgba(0,0,0,0);width:1.5rem;height:1.5rem;border:none;appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host #clear::-moz-focus-inner{border:0}:host #clear:disabled{pointer-events:none}@media(hover: hover)and (pointer: fine){:host #clear:hover,:host #clear.is-hovered{--icon-color: var(--ds-alias-text-color-primary-hover);background:var(--ds-alias-background-color-highlight)}}:host #clear:active,:host #clear.is-pressed{--icon-color: var(--ds-alias-text-color-primary-active);background:var(--ds-alias-background-color-highlight)}@media(hover: hover)and (pointer: fine){:host #clear:focus-visible:not(:active),:host #clear.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host #container{position:relative}:host #popup{position:absolute;display:block;top:100%;left:0;z-index:var(--ds-popup-z-index, 100);box-shadow:var(--_date-popup-shadow);transition:transform .2s,opacity .2s,-webkit-transform .2s;opacity:1;transform:scaleY(1);transform-origin:center top;overflow:hidden}:host #popup[aria-hidden=true]{opacity:0;transform:scaleY(0)}@media(prefers-reduced-motion: reduce){:host #popup{transition:none !important;animation:none !important}}:host(.is-danger){--mod-form-container-border-color: var(--ds-form-container-color-danger-border);--mod-form-description-color: var(--ds-form-description-color-danger);--mod-form-container-hover-border: var(--ds-form-container-color-danger-border);--mod-form-container-active-border: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-container-border-color: var(--ds-form-container-color-success-border);--mod-form-description-color: var(--ds-form-description-color-success);--mod-form-container-hover-border: var(--ds-form-container-color-success-border);--mod-form-container-active-border: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-container-border-color: var(--ds-form-container-color-warning-border);--mod-form-description-color: var(--ds-form-description-color-warning);--mod-form-container-hover-border: var(--ds-form-container-color-warning-border);--mod-form-container-active-border: var(--ds-form-container-color-warning-border)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input,:host(.is-disabled) #clear,:host(.is-disabled) #trigger{pointer-events:none;cursor:default}:host(.is-disabled) #trigger{--icon-color: var(--_date-trigger-icon-color-disabled)}:host(.is-disabled){--mod-form-container-background: var(--ds-form-container-color-disabled-background);--mod-form-container-border-color: var(--ds-form-container-color-disabled-border);--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-date-color: var(--ds-form-control-color-value-disabled);--mod-date-placeholder: var(--ds-form-control-color-placeholder-disabled)}.air-datepicker{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{.air-datepicker{display:none !important}}.air-datepicker{--adp-cell-background-color-in-range: unset;--adp-hover-color: unset;--adp-cell-border-width: 2px;--adp-padding: 0.5rem;--adp-width: 264px;--adp-color: var(--_date-calendar-text-color);--adp-font-family: var(--_date-calendar-family);--adp-font-size: var(--_date-calendar-size);--adp-border-color-inner: var(--_date-calendar-color-inner-border);--adp-background-color-hover: var(--_date-calendar-day-background-hover);--adp-background-color-active: var(--_date-calendar-day-background-active);--adp-day-name-color: var(--_date-calendar-text-color);--adp-color-current-date: var(--_date-calendar-text-color);--adp-cell-background-color-selected: var(--_date-calendar-day-background-selected);--adp-cell-background-color-selected-hover: var(--_date-calendar-day-background-selected-hover);--adp-color-other-month: var(--_date-calendar-disabled-color);--adp-color-other-decade: var(--_date-calendar-disabled-color);--adp-color-disabled: var(--_date-calendar-disabled-color);font-family:inherit;font-size:var(--_date-calendar-size);border-radius:var(--_date-calendar-radius);box-shadow:var(--_date-calendar-shadow);font-weight:var(--_date-calendar-weight);border:none}.air-datepicker *{font-family:inherit}.air-datepicker.-inline-{border:none;box-shadow:var(--_date-calendar-shadow)}.air-datepicker .air-datepicker-nav{border-width:2px}.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;cursor:pointer;user-select:none;appearance:button}.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button::-moz-focus-inner,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button::-moz-focus-inner{border:0}.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button{display:flex;gap:.5rem;align-items:center;justify-content:center;height:2rem;min-width:2rem;color:var(--_date-calendar-nav-color);border-radius:var(--_date-calendar-nav-radius);box-shadow:none;outline:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button::-moz-focus-inner,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button::-moz-focus-inner{border:0}@media(hover: hover)and (pointer: fine){.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button:hover,.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button.is-hovered,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button:hover,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button.is-hovered{color:var(--_date-calendar-nav-color-hover);--icon-color: var(--_date-calendar-nav-color-hover)}}.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button:active,.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button.is-pressed,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button:active,.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button.is-pressed{color:var(--_date-calendar-nav-color-active);--icon-color: var(--_date-calendar-nav-color-active);translate:0 .5px}@media(hover: hover)and (pointer: fine){.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button:focus-visible:not(:active),.air-datepicker .air-datepicker-nav--title:not(.-disabled-) button.is-focused:not(:active),.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button:focus-visible:not(:active),.air-datepicker .air-datepicker-nav--action:not(.-disabled-) button.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_date-focus-color) 0 0 0 5px !important}}.air-datepicker .air-datepicker-nav--action{margin-left:.5rem}.air-datepicker .air-datepicker-nav--title{margin-right:auto}.air-datepicker .air-datepicker-nav--title button{flex:1 1 auto;justify-content:flex-start}.air-datepicker .air-datepicker-body--cells.-days-{gap:.25rem}.air-datepicker .air-datepicker-body--day-name{font-weight:var(--_date-calendar-day-name-weight);font-size:1rem;text-transform:none;font-family:var(--_date-calendar-day-name-family)}.air-datepicker .air-datepicker-cell.-selected-:not(.-disabled-){font-weight:var(--_date-calendar-day-weight-selected)}.air-datepicker .air-datepicker-cell.-day-{font-weight:var(--_date-calendar-day-weight);height:2rem;width:2rem}.air-datepicker .air-datepicker-cell.-day-.-current-:not(.-disabled-){border:2px solid var(--_date-calendar-color-current-date)}.air-datepicker .air-datepicker-cell.-day-.-selected-:not(.-disabled-){font-weight:var(--_date-calendar-day-weight-selected)}.air-datepicker .air-datepicker-cell[tabindex="0"]{outline:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.air-datepicker .air-datepicker-cell[tabindex="0"]::-moz-focus-inner{border:0}@media(hover: hover)and (pointer: fine){.air-datepicker .air-datepicker-cell[tabindex="0"]:focus-visible:not(:active),.air-datepicker .air-datepicker-cell[tabindex="0"].is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_date-focus-color) 0 0 0 5px !important}}.air-datepicker .air-datepicker-cell.-disabled-{pointer-events:none}.air-datepicker #previous-disabled,.air-datepicker #next-disabled{display:none}.air-datepicker .air-datepicker-nav--action.-disabled-{pointer-events:none;visibility:visible}.air-datepicker .air-datepicker-nav--action.-disabled- button{display:none;visibility:hidden;pointer-events:none}.air-datepicker .air-datepicker-nav--action.-disabled- #previous-disabled,.air-datepicker .air-datepicker-nav--action.-disabled- #next-disabled{display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;color:var(--_date-calendar-nav-color-disabled);--icon-color: var(--_date-calendar-nav-color-disabled);pointer-events:none}.air-datepicker .air-datepicker-nav--action.-disabled- #previous-disabled ds-icon,.air-datepicker .air-datepicker-nav--action.-disabled- #next-disabled ds-icon{pointer-events:none}

package/dist/collection/components/date/date.i18n.js

@@ -0,0 +1,105 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsDate = {
+    de: {
+        selectDate: 'Datum auswählen',
+        switchToYearView: 'Zur Jahresansicht wechseln',
+        previousMonth: 'Vorheriger Monat',
+        nextMonth: 'Nächster Monat',
+        previousYear: 'Vorheriges Jahr',
+        nextYear: 'Nächstes Jahr',
+        previousDecade: 'Vorherige Dekade',
+        nextDecade: 'Nächste Dekade',
+    },
+    en: {
+        selectDate: 'Select date',
+        switchToYearView: 'Switch to year view',
+        previousMonth: 'Previous month',
+        nextMonth: 'Next month',
+        previousYear: 'Previous year',
+        nextYear: 'Next year',
+        previousDecade: 'Previous decade',
+        nextDecade: 'Next decade',
+    },
+    fr: {
+        selectDate: 'Sélectionner une date',
+        switchToYearView: 'Passer à la vue annuelle',
+        previousMonth: 'Mois précédent',
+        nextMonth: 'Mois suivant',
+        previousYear: 'Année précédente',
+        nextYear: 'Année suivante',
+        previousDecade: 'Décennie précédente',
+        nextDecade: 'Décennie suivante',
+    },
+    it: {
+        selectDate: 'Seleziona una data',
+        switchToYearView: 'Passa alla vista annuale',
+        previousMonth: 'Mese precedente',
+        nextMonth: 'Mese successivo',
+        previousYear: 'Anno precedente',
+        nextYear: 'Anno successivo',
+        previousDecade: 'Decennio precedente',
+        nextDecade: 'Decennio successivo',
+    },
+    nl: {
+        selectDate: 'Selecteer een datum',
+        switchToYearView: 'Overschakelen naar jaarweergave',
+        previousMonth: 'Vorige maand',
+        nextMonth: 'Volgende maand',
+        previousYear: 'Vorig jaar',
+        nextYear: 'Volgend jaar',
+        previousDecade: 'Vorig decennium',
+        nextDecade: 'Volgend decennium',
+    },
+    es: {
+        selectDate: 'Seleccionar una fecha',
+        switchToYearView: 'Cambiar a vista anual',
+        previousMonth: 'Mes anterior',
+        nextMonth: 'Mes siguiente',
+        previousYear: 'Año anterior',
+        nextYear: 'Año siguiente',
+        previousDecade: 'Década anterior',
+        nextDecade: 'Década siguiente',
+    },
+    pl: {
+        selectDate: 'Wybierz datę',
+        switchToYearView: 'Przełącz na widok roczny',
+        previousMonth: 'Poprzedni miesiąc',
+        nextMonth: 'Następny miesiąc',
+        previousYear: 'Poprzedni rok',
+        nextYear: 'Następny rok',
+        previousDecade: 'Poprzednia dekada',
+        nextDecade: 'Następna dekada',
+    },
+    pt: {
+        selectDate: 'Selecionar uma data',
+        switchToYearView: 'Mudar para a vista anual',
+        previousMonth: 'Mês anterior',
+        nextMonth: 'Mês seguinte',
+        previousYear: 'Ano anterior',
+        nextYear: 'Ano seguinte',
+        previousDecade: 'Década anterior',
+        nextDecade: 'Década seguinte',
+    },
+    sv: {
+        selectDate: 'Välj ett datum',
+        switchToYearView: 'Byt till årsvy',
+        previousMonth: 'Föregående månad',
+        nextMonth: 'Nästa månad',
+        previousYear: 'Föregående år',
+        nextYear: 'Nästa år',
+        previousDecade: 'Föregående decennium',
+        nextDecade: 'Nästa decennium',
+    },
+    fi: {
+        selectDate: 'Valitse päivämäärä',
+        switchToYearView: 'Vaihda vuosinäkymään',
+        previousMonth: 'Edellinen kuukausi',
+        nextMonth: 'Seuraava kuukausi',
+        previousYear: 'Edellinen vuosi',
+        nextYear: 'Seuraava vuosi',
+        previousDecade: 'Edellinen vuosikymmen',
+        nextDecade: 'Seuraava vuosikymmen',
+    },
+};

package/dist/collection/components/date/date.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const DATE_COLORS = ['primary', 'danger', 'success', 'warning', ''];