@siemens/ix 0.0.0-20240419081748

package/dist/collection/components/time-picker/time-picker.js

@@ -0,0 +1,491 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host, } from "@stencil/core";
+import { DateTime } from "luxon";
+export class TimePicker {
+    constructor() {
+        this.format = 'TT';
+        this.corners = 'rounded';
+        this.standaloneAppearance = true;
+        this.individual = true;
+        this.showHour = true;
+        this.showMinutes = true;
+        this.showSeconds = true;
+        this.time = DateTime.now().toFormat(this.format);
+        this.showTimeReference = undefined;
+        this.timeReference = undefined;
+        this.textSelectTime = 'Done';
+        this.textTime = 'Time';
+        this._time = undefined;
+        this._timeRef = undefined;
+        this._formattedTime = undefined;
+    }
+    watchTimePropHandler(newValue) {
+        this._time = DateTime.fromFormat(newValue, this.format);
+        if (!this._time.isValid) {
+            throw new Error('Format is not supported or not correct');
+        }
+    }
+    componentWillLoad() {
+        this._time = DateTime.fromFormat(this.time, this.format);
+        if (!this._time.isValid) {
+            console.error(`Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`);
+            return;
+        }
+        this._timeRef = this.format.includes('a')
+            ? DateTime.fromFormat(this.time, this.format).toFormat('a')
+            : undefined;
+        this.formatTime();
+    }
+    formatTime() {
+        const [hour, minute, second] = this._time
+            .toFormat(this.format)
+            .split(' ')[0]
+            .split(':');
+        this._formattedTime = {
+            hour: hour,
+            minute: minute,
+            second: second,
+        };
+    }
+    onInternalTimeChange() {
+        this.timeChange.emit(this._time.toFormat(this.format));
+        if (this._timeRef)
+            this._timeRef = this._time.toFormat('a');
+    }
+    timeUpdate(unit, value) {
+        let maxValue = DateTime.now().endOf('day').get(unit);
+        if (this._timeRef === 'PM' && unit === 'hour')
+            value += 12;
+        if (this._timeRef === 'AM' && unit === 'hour')
+            maxValue = 12;
+        if (value > maxValue) {
+            value = maxValue;
+        }
+        else if (value < 0) {
+            value = 0;
+        }
+        this._time = this._time.set({
+            [unit]: value,
+        });
+        return value;
+    }
+    changeTimeReference() {
+        this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';
+        if (!this._time.toFormat('a').includes(this._timeRef)) {
+            this._time = this._time.plus({
+                hour: 12,
+            });
+        }
+    }
+    /**
+     * Get the current time based on the wanted format
+     */
+    async getCurrentTime() {
+        return this._time.toFormat(this.format);
+    }
+    render() {
+        let timepickerInformation = [
+            {
+                unit: 'hour',
+                placeholder: 'HH',
+                hidden: !this.showHour,
+            },
+            {
+                unit: 'minute',
+                placeholder: 'MM',
+                hidden: !this.showMinutes,
+            },
+            {
+                unit: 'second',
+                placeholder: 'SS',
+                hidden: !this.showSeconds,
+            },
+        ];
+        timepickerInformation = timepickerInformation.filter((item) => !item.hidden);
+        return (h(Host, { key: 'c09337ff6d0366929f77fe9bbdd89eb43bcc71ea' }, h("ix-date-time-card", { key: '80c29872490f5968979a802b92113377ec9df678', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, h("div", { key: '35981c4cde62451368ee30fc4bcc19f894939cda', class: "header", slot: "header" }, h("ix-typography", { key: 'cd88a3f06e8907419acc45cd71d9954b7365096c', variant: "default-title" }, this.textTime || 'Time')), h("div", { key: 'fd5d74523fd649fedac87ac0887fb643fd9795ce', class: "clock" }, timepickerInformation.map((descriptor, index) => (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden } }, h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
+                [descriptor.unit]: 1,
+            })), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: descriptor.unit, type: "number", placeholder: descriptor.placeholder, value: this._formattedTime
+                ? this._formattedTime[descriptor.unit]
+                : null, onKeyDown: (e) => {
+                if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown')
+                    return;
+                const value = e.key === 'ArrowUp' ? 1 : -1;
+                this._time = this._time.plus({
+                    [descriptor.unit]: value,
+                });
+                e.preventDefault();
+            }, onChange: (e) => {
+                let inputElement = e.target;
+                inputElement.value = this.timeUpdate(descriptor.unit, +inputElement.value).toString();
+            } }), h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.minus({
+                [descriptor.unit]: 1,
+            })), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), index !== timepickerInformation.length - 1 && (h("div", { class: {
+                'column-seperator': true,
+                hidden: descriptor.hidden,
+            } }, ":"))))), h("div", { key: '819d9ce8cdfc94e7c4a1d2f7190587f052a9d246', class: {
+                columns: true,
+                'default-space': true,
+                hidden: this._timeRef === undefined,
+            } }, h("ix-icon-button", { key: '6ec3654d6a81bb2420695dd3292677395bd6adc2', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { key: '09b1dd7076112d4dc5168a968ed0ebebaa67e69f', class: "time-reference" }, this._timeRef), h("ix-icon-button", { key: 'ff24cdad6df286cc2da51958c2b51fe43f1e4fea', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { key: '82602709c4107324d9498426cb30959fe81bacc4', class: { button: true, hidden: !this.standaloneAppearance } }, h("ix-button", { key: '64da9baed02906baad694bbe066bc355197d293e', onClick: () => {
+                this.timeSelect.emit(this._time.toFormat(this.format));
+                this.done.emit(this._time.toFormat(this.format));
+            } }, this.textSelectTime)))));
+    }
+    static get is() { return "ix-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["time-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["time-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens."
+                },
+                "attribute": "format",
+                "reflect": false,
+                "defaultValue": "'TT'"
+            },
+            "corners": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerCorners",
+                    "resolved": "\"left\" | \"right\" | \"rounded\" | \"straight\"",
+                    "references": {
+                        "TimePickerCorners": {
+                            "location": "local",
+                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/time-picker/time-picker.tsx",
+                            "id": "src/components/time-picker/time-picker.tsx::TimePickerCorners"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner style"
+                },
+                "attribute": "corners",
+                "reflect": false,
+                "defaultValue": "'rounded'"
+            },
+            "standaloneAppearance": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual presentation and styling of the component when it is displayed as a standalone element"
+                },
+                "attribute": "standalone-appearance",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "individual": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Not supported since 2.0.0."
+                        }],
+                    "text": ""
+                },
+                "attribute": "individual",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showHour": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show hour input"
+                },
+                "attribute": "show-hour",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showMinutes": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show minutes input"
+                },
+                "attribute": "show-minutes",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showSeconds": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show seconds input"
+                },
+                "attribute": "show-seconds",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "time": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "Select time with format string\nFormat has to match the `format` property."
+                },
+                "attribute": "time",
+                "reflect": false,
+                "defaultValue": "DateTime.now().toFormat(this.format)"
+            },
+            "showTimeReference": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0 time reference is default aligned with format tt"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Since 2.0.0 time reference will be displayed depending on format."
+                        }],
+                    "text": "Show time reference input"
+                },
+                "attribute": "show-time-reference",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "timeReference": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'AM' | 'PM' | undefined",
+                    "resolved": "\"AM\" | \"PM\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set time reference"
+                },
+                "attribute": "time-reference",
+                "reflect": false
+            },
+            "textSelectTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "Text of date select button"
+                },
+                "attribute": "text-select-time",
+                "reflect": false,
+                "defaultValue": "'Done'"
+            },
+            "textTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.1.0"
+                        }],
+                    "text": "Text for top label"
+                },
+                "attribute": "text-time",
+                "reflect": false,
+                "defaultValue": "'Time'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_time": {},
+            "_timeRef": {},
+            "_formattedTime": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timeSelect",
+                "name": "timeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Time event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "done",
+                "name": "done",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Will be removed in 3.0.0. Use `time-select` event."
+                        }],
+                    "text": "Time event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "timeChange",
+                "name": "timeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Time change event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getCurrentTime": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the current time based on the wanted format",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "time",
+                "methodName": "watchTimePropHandler"
+            }, {
+                "propName": "_time",
+                "methodName": "formatTime"
+            }, {
+                "propName": "_time",
+                "methodName": "onInternalTimeChange"
+            }];
+    }
+}
+//# sourceMappingURL=time-picker.js.map

package/dist/collection/components/time-picker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\ninterface TimePickerDescriptor {\n  unit: 'hour' | 'minute' | 'second';\n  placeholder: string;\n  hidden: boolean;\n}\n\ninterface TimeOutputFormat {\n  hour: string;\n  minute: string;\n  second: string;\n}\n\n@Component({\n  tag: 'ix-time-picker',\n  styleUrl: 'time-picker.scss',\n  shadow: true,\n})\nexport class TimePicker {\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() format: string = 'TT';\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: TimePickerCorners = 'rounded';\n\n  /**\n   * Controls the visual presentation and styling of the component when it is displayed as a standalone element\n   */\n  @Prop() standaloneAppearance: boolean = true;\n\n  /**\n   * @deprecated Not supported since 2.0.0.\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * Select time with format string\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string = DateTime.now().toFormat(this.format);\n\n  @Watch('time')\n  watchTimePropHandler(newValue: string) {\n    this._time = DateTime.fromFormat(newValue, this.format);\n    if (!this._time.isValid) {\n      throw new Error('Format is not supported or not correct');\n    }\n  }\n\n  /**\n   * Show time reference input\n   *\n   * @since 1.1.0 time reference is default aligned with format tt\n   * @deprecated Since 2.0.0 time reference will be displayed depending on format.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) showTimeReference?: boolean = undefined;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM' | undefined;\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectTime = 'Done';\n\n  /**\n   * Text for top label\n   *\n   * @since 2.1.0\n   */\n  @Prop() textTime: string = 'Time';\n\n  /**\n   * Time event\n   */\n  @Event() timeSelect: EventEmitter<string>;\n\n  /**\n   * Time event\n   * @deprecated Will be removed in 3.0.0. Use `time-select` event.\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change event\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  @State() private _time: DateTime;\n  @State() private _timeRef: 'AM' | 'PM' | undefined;\n  @State() private _formattedTime: TimeOutputFormat;\n\n  componentWillLoad() {\n    this._time = DateTime.fromFormat(this.time, this.format);\n\n    if (!this._time.isValid) {\n      console.error(\n        `Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`\n      );\n      return;\n    }\n\n    this._timeRef = this.format.includes('a')\n      ? (DateTime.fromFormat(this.time, this.format).toFormat('a') as\n          | 'AM'\n          | 'PM')\n      : undefined;\n    this.formatTime();\n  }\n\n  @Watch('_time')\n  formatTime() {\n    const [hour, minute, second] = this._time\n      .toFormat(this.format)\n      .split(' ')[0]\n      .split(':');\n\n    this._formattedTime = {\n      hour: hour,\n      minute: minute,\n      second: second,\n    };\n  }\n\n  @Watch('_time')\n  onInternalTimeChange() {\n    this.timeChange.emit(this._time.toFormat(this.format));\n    if (this._timeRef) this._timeRef = this._time.toFormat('a') as 'AM' | 'PM';\n  }\n\n  timeUpdate(unit: 'hour' | 'minute' | 'second', value: number): number {\n    let maxValue = DateTime.now().endOf('day').get(unit);\n\n    if (this._timeRef === 'PM' && unit === 'hour') value += 12;\n    if (this._timeRef === 'AM' && unit === 'hour') maxValue = 12;\n\n    if (value > maxValue) {\n      value = maxValue;\n    } else if (value < 0) {\n      value = 0;\n    }\n\n    this._time = this._time.set({\n      [unit]: value,\n    });\n    return value;\n  }\n\n  changeTimeReference() {\n    this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';\n\n    if (!this._time.toFormat('a').includes(this._timeRef)) {\n      this._time = this._time.plus({\n        hour: 12,\n      });\n    }\n  }\n\n  /**\n   * Get the current time based on the wanted format\n   */\n  @Method()\n  async getCurrentTime() {\n    return this._time.toFormat(this.format);\n  }\n\n  render() {\n    let timepickerInformation: TimePickerDescriptor[] = [\n      {\n        unit: 'hour',\n        placeholder: 'HH',\n        hidden: !this.showHour,\n      },\n      {\n        unit: 'minute',\n        placeholder: 'MM',\n        hidden: !this.showMinutes,\n      },\n      {\n        unit: 'second',\n        placeholder: 'SS',\n        hidden: !this.showSeconds,\n      },\n    ];\n\n    timepickerInformation = timepickerInformation.filter(\n      (item) => !item.hidden\n    );\n\n    return (\n      <Host>\n        <ix-date-time-card\n          standaloneAppearance={this.standaloneAppearance}\n          corners={this.corners}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-typography variant=\"default-title\">\n              {this.textTime || 'Time'}\n            </ix-typography>\n          </div>\n          <div class=\"clock\">\n            {timepickerInformation.map((descriptor, index: number) => (\n              <div class=\"flex\">\n                <div class={{ columns: true, hidden: descriptor.hidden }}>\n                  <ix-icon-button\n                    size=\"16\"\n                    onClick={() =>\n                      (this._time = this._time.plus({\n                        [descriptor.unit]: 1,\n                      }))\n                    }\n                    ghost\n                    icon=\"chevron-up\"\n                    variant=\"primary\"\n                    class=\"arrows\"\n                  ></ix-icon-button>\n\n                  <input\n                    class=\"form-control\"\n                    name={descriptor.unit}\n                    type=\"number\"\n                    placeholder={descriptor.placeholder}\n                    value={\n                      this._formattedTime\n                        ? this._formattedTime[descriptor.unit]\n                        : null\n                    }\n                    onKeyDown={(e) => {\n                      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n                      const value = e.key === 'ArrowUp' ? 1 : -1;\n                      this._time = this._time.plus({\n                        [descriptor.unit]: value,\n                      });\n                      e.preventDefault();\n                    }}\n                    onChange={(e: any) => {\n                      let inputElement = e.target as HTMLInputElement;\n                      inputElement.value = this.timeUpdate(\n                        descriptor.unit,\n                        +inputElement.value\n                      ).toString();\n                    }}\n                  ></input>\n\n                  <ix-icon-button\n                    size=\"16\"\n                    onClick={() =>\n                      (this._time = this._time.minus({\n                        [descriptor.unit]: 1,\n                      }))\n                    }\n                    ghost\n                    icon=\"chevron-down\"\n                    variant=\"primary\"\n                    class=\"arrows\"\n                  ></ix-icon-button>\n                </div>\n\n                {index !== timepickerInformation.length - 1 && (\n                  <div\n                    class={{\n                      'column-seperator': true,\n                      hidden: descriptor.hidden,\n                    }}\n                  >\n                    :\n                  </div>\n                )}\n              </div>\n            ))}\n\n            <div\n              class={{\n                columns: true,\n                'default-space': true,\n                hidden: this._timeRef === undefined,\n              }}\n            >\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeTimeReference()}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <div class=\"time-reference\">{this._timeRef}</div>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeTimeReference()}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n          </div>\n          <div class={{ button: true, hidden: !this.standaloneAppearance }}>\n            <ix-button\n              onClick={() => {\n                this.timeSelect.emit(this._time.toFormat(this.format));\n                this.done.emit(this._time.toFormat(this.format));\n              }}\n            >\n              {this.textSelectTime}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/toast/styles/toast-container.css

@@ -0,0 +1,90 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+
+#toast-container > :not(:last-child) {
+  margin-block-end: 1rem;
+}
+
+.toast-container {
+  display: block;
+  position: fixed;
+}
+
+.toast-container--top-right {
+  right: 1rem;
+  top: 2rem;
+}
+
+.toast-container--bottom-right {
+  right: 1rem;
+  bottom: 2rem;
+}