@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627115746

package/components/ix-datetime-picker.js

@@ -0,0 +1,204 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { d as defineCustomElement$c } from './p-CvvOe8xV.js';
+import { d as defineCustomElement$b } from './p-BedSAVZh.js';
+import { d as defineCustomElement$a } from './p-Cs8DEpjh.js';
+import { d as defineCustomElement$9 } from './p-5uA5ifmT.js';
+import { d as defineCustomElement$8 } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$7 } from './p-BXjBChze.js';
+import { d as defineCustomElement$6 } from './p-qauH9Ci4.js';
+import { d as defineCustomElement$5 } from './p-DMlmNp-B.js';
+import { d as defineCustomElement$4 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$3 } from './p-DaztMgDr.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}:host ix-layout-grid{border-radius:0.25rem;box-shadow:var(--theme-shadow-4)}:host ix-time-picker{width:100%}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}:host ix-time-picker{width:initial}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding:0 1rem 1rem}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}";
+
+const DatetimePicker = /*@__PURE__*/ proxyCustomElement(class DatetimePicker extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.timeChange = createEvent(this, "timeChange", 7);
+        this.dateChange = createEvent(this, "dateChange", 7);
+        this.dateSelect = createEvent(this, "dateSelect", 7);
+        /**
+         * If true a date-range can be selected (from/to).
+         */
+        this.range = true;
+        /**
+         * Show hour input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showHour = true;
+        /**
+         * Show minutes input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showMinutes = true;
+        /**
+         * Show seconds input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showSeconds = true;
+        /**
+         * Date format string.
+         * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         */
+        this.dateFormat = 'yyyy/LL/dd';
+        /**
+         * Time format string.
+         * See {@link "https://moment.github.io/luxon/#/formatting?id=table-of-tokens"} for all available tokens.
+         */
+        this.timeFormat = 'HH:mm:ss';
+        /**
+         * Show time reference input
+         * Time reference is default aligned with @see {this.timeFormat}
+         */
+        this.showTimeReference = false;
+        /**
+         * Text of date select button
+         */
+        this.i18nDone = 'Done';
+        /**
+         * Top label of time picker
+         *
+         * @since 3.0.0
+         */
+        this.i18nTime = 'Time';
+        /**
+         * The index of which day to start the week on, based on the Locale#weekdays array.
+         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+         */
+        this.weekStartIndex = 0;
+        /**
+         * Shows week numbers displayed on the left side of the date picker
+         *
+         * @since 3.0.0
+         */
+        this.showWeekNumbers = false;
+    }
+    async onDone() {
+        var _a, _b, _c, _d;
+        const date = await ((_a = this.datePickerElement) === null || _a === void 0 ? void 0 : _a.getCurrentDate());
+        const time = await ((_b = this.timePickerElement) === null || _b === void 0 ? void 0 : _b.getCurrentTime());
+        this.dateSelect.emit({
+            from: (_c = date === null || date === void 0 ? void 0 : date.from) !== null && _c !== void 0 ? _c : '',
+            to: (_d = date === null || date === void 0 ? void 0 : date.to) !== null && _d !== void 0 ? _d : '',
+            time: time !== null && time !== void 0 ? time : '',
+        });
+    }
+    async onDateChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: date } = event;
+        this.dateChange.emit(date);
+    }
+    async onTimeChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: time } = event;
+        this.timeChange.emit(time);
+    }
+    render() {
+        return (h(Host, { key: '308c88d2dad230a8f581d2598e63ca316c315c10' }, h("ix-layout-grid", { key: '7fa2cfc1581f91e1487e50448a7392f7264fc928', class: "no-padding" }, h("ix-row", { key: '2b9da7ebf643b10a1cde7ecc4093e1f08587844c' }, h("ix-col", { key: 'caa1c48e9214b1ed1948ad40f9eb8f4471c6ff57' }, h("ix-date-picker", { key: 'ae9297e5524a9c7c7bf81bd0a5308e77a45aa441', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale, showWeekNumbers: this.showWeekNumbers })), h("ix-col", { key: 'ddc4362c821ac08859423f0ed7bf5a3c8bc6ea87' }, h("ix-time-picker", { key: 'd75cdcf80b6c45a47d76ba84bc232fdb5af27b79', class: "min-width", ref: (ref) => (this.timePickerElement = ref), standaloneAppearance: false, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, textTime: this.i18nTime, time: this.time, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds }), h("div", { key: '724cec3daf9608659e8252718d6c52e54c0eede5', class: "btn-select-date-container" }, h("ix-button", { key: 'af58fcfc304fb2aa35db0198455148f229e9e229', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+    }
+    static get style() { return datetimePickerCss; }
+}, [1, "ix-datetime-picker", {
+        "range": [4],
+        "showHour": [4, "show-hour"],
+        "showMinutes": [4, "show-minutes"],
+        "showSeconds": [4, "show-seconds"],
+        "minDate": [1, "min-date"],
+        "maxDate": [1, "max-date"],
+        "dateFormat": [1, "date-format"],
+        "timeFormat": [1, "time-format"],
+        "from": [1],
+        "to": [1],
+        "time": [1],
+        "showTimeReference": [4, "show-time-reference"],
+        "timeReference": [1, "time-reference"],
+        "i18nDone": [1, "i18n-done"],
+        "i18nTime": [1, "i-1-8n-time"],
+        "weekStartIndex": [2, "week-start-index"],
+        "locale": [1],
+        "showWeekNumbers": [4, "show-week-numbers"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-datetime-picker", "ix-button", "ix-col", "ix-date-picker", "ix-date-time-card", "ix-dropdown", "ix-icon-button", "ix-layout-grid", "ix-row", "ix-spinner", "ix-time-picker", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-datetime-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DatetimePicker);
+            }
+            break;
+        case "ix-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ix-col":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ix-date-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ix-date-time-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ix-layout-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-row":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-time-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxDatetimePicker = DatetimePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDatetimePicker, defineCustomElement };
+//# sourceMappingURL=ix-datetime-picker.js.map
+
+//# sourceMappingURL=ix-datetime-picker.js.map

package/components/ix-datetime-picker.js.map

@@ -0,0 +1 @@
+{"file":"ix-datetime-picker.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","src/components/datetime-picker/datetime-picker.tsx"],"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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  ix-layout-grid {\n    border-radius: 0.25rem;\n    box-shadow: var(--theme-shadow-4);\n  }\n\n  ix-time-picker {\n    width: 100%;\n  }\n\n  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n\n    ix-time-picker {\n      width: initial;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 $default-space $default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker.events';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport type {\n  DateTimeDateChangeEvent,\n  DateTimeSelectEvent,\n} from './datetime-picker.types';\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker\n  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   *\n   * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   *\n   * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   *\n   * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate?: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate?: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   */\n  @Prop() from?: string;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   */\n  @Prop() to?: string;\n\n  /**\n   * Select time with format string\n   */\n  @Prop() time?: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   */\n  @Prop() showTimeReference: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\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  @Prop() locale?: string;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n   * Time change\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  /**\n   * Date change\n   */\n  @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   */\n  @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement?: HTMLIxDatePickerElement;\n  private timePickerElement?: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement?.getCurrentDate();\n    const time = await this.timePickerElement?.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date?.from ?? '',\n      to: date?.to ?? '',\n      time: time ?? '',\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                standaloneAppearance={false}\n                dateTimePickerAppearance={true}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                textTime={this.i18nTime}\n                time={this.time}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-divider.d.ts

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

package/components/ix-divider.js

@@ -0,0 +1,9 @@
+import { D as Divider, d as defineCustomElement$1 } from './p-C6o-AByw.js';
+
+const IxDivider = Divider;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDivider, defineCustomElement };
+//# sourceMappingURL=ix-divider.js.map
+
+//# sourceMappingURL=ix-divider.js.map

package/components/ix-divider.js.map

@@ -0,0 +1 @@
+{"file":"ix-divider.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-drawer.d.ts

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

package/components/ix-drawer.js

@@ -0,0 +1,200 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { u as iconClose } from './p-CGwHQeMX.js';
+import { a as anime } from './p-Ou74PMQs.js';
+import { d as defineCustomElement$3 } from './p-BXjBChze.js';
+import { d as defineCustomElement$2 } from './p-BygLxZIM.js';
+
+const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);display:block;position:absolute;justify-content:flex-start;align-items:center;opacity:0;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}:host .drawer-container{z-index:100}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.display-none){display:none}";
+
+const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.open = createEvent(this, "open", 7);
+        this.drawerClose = createEvent(this, "drawerClose", 7);
+        /**
+         * Show or hide the drawer
+         */
+        this.show = false;
+        /**
+         * Fired in case of an outside click during drawer showed state
+         */
+        this.closeOnClickOutside = true;
+        /**
+         * Render the drawer with maximum height
+         */
+        this.fullHeight = false;
+        /**
+         * Min width interpreted as REM
+         */
+        this.minWidth = 16;
+        /**
+         * Max width interpreted as REM
+         */
+        this.maxWidth = 28;
+        /**
+         * Width interpreted as REM if not set to 'auto'
+         */
+        this.width = this.minWidth;
+        this.toggle = false;
+        this.callback = this.clickedOutside.bind(this);
+        this.showContent = true;
+    }
+    onShowChanged(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        this.toggleDrawer(newValue);
+    }
+    /**
+     * Toggle or define show state of drawer
+     * @param show Overwrite toggle state with boolean
+     */
+    async toggleDrawer(show) {
+        show = show !== null && show !== void 0 ? show : !this.show;
+        if (show) {
+            const { defaultPrevented } = this.open.emit();
+            if (defaultPrevented) {
+                return;
+            }
+            this.show = true;
+            if (!this.toggle && this.divElement) {
+                this.slideInRight(this.divElement);
+                setTimeout(() => {
+                    window.addEventListener('mousedown', this.callback);
+                }, Drawer.duration);
+            }
+        }
+        else {
+            const { defaultPrevented } = this.drawerClose.emit();
+            if (defaultPrevented) {
+                return;
+            }
+            this.show = false;
+            if (this.toggle && this.divElement) {
+                this.slideOutRight(this.divElement);
+            }
+            window.removeEventListener('mousedown', this.callback);
+        }
+        this.toggle = this.show;
+        return Promise.resolve();
+    }
+    onCloseClicked() {
+        this.toggleDrawer(false);
+    }
+    clickedOutside(evt) {
+        if (!this.closeOnClickOutside) {
+            return;
+        }
+        const target = evt.target;
+        const closestElement = target.closest('#div-container');
+        const btn = target.closest('#drawer-btn');
+        if (evt.target.type !== 'button' &&
+            closestElement !== this.divElement &&
+            target !== btn) {
+            this.show = false;
+        }
+    }
+    getConstrainedWidth(width) {
+        return Math.min(Math.max(width, this.minWidth), this.maxWidth);
+    }
+    slideOutRight(el) {
+        const initialWidth = `${this.getConstrainedWidth(this.width === 'auto' ? this.minWidth : this.width)}rem`;
+        anime({
+            targets: el,
+            duration: Drawer.duration,
+            width: [initialWidth, 0],
+            opacity: [1, 0],
+            easing: 'easeInSine',
+            complete: () => {
+                el.classList.add('display-none');
+            },
+        });
+    }
+    slideInRight(el) {
+        const targetWidth = `${this.getConstrainedWidth(this.width === 'auto' ? this.minWidth : this.width)}rem`;
+        anime({
+            targets: el,
+            duration: Drawer.duration,
+            width: [0, targetWidth],
+            opacity: [0, 1],
+            easing: 'easeOutSine',
+            begin: () => {
+                el.classList.remove('display-none');
+            },
+            complete: () => {
+                this.showContent = true;
+            },
+        });
+    }
+    componentDidLoad() {
+        this.toggleDrawer(this.show);
+    }
+    render() {
+        return (h(Host, { key: '583a9857ead852d4af6dda28dd2f3cd43f7ccdf6', class: {
+                'drawer-container': true,
+                'display-none': true,
+            }, style: {
+                width: '0',
+                'max-width': `${this.maxWidth}rem`,
+                height: this.fullHeight ? '100%' : 'auto',
+                overflow: 'hidden',
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '314284968617cdd37f7240b00d11c6e5834bcc89', style: {
+                width: this.width === 'auto'
+                    ? 'auto'
+                    : `${this.getConstrainedWidth(this.width)}rem`,
+            } }, h("div", { key: '878f802e70941772d44d3b3774fe33eb682061e1', class: "header" }, h("div", { key: '29de426ed6849d8464b177c5171c20574d51711d', class: "header-content" }, h("slot", { key: '1fda9e78f5194f71bc8b38b94169502730665d4e', name: "header" })), h("ix-icon-button", { key: '101b53763d05760536497b56b456f07a4f8d1453', class: "close-button", style: {
+                display: this.showContent ? 'block' : 'none',
+            }, icon: iconClose, size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: 'e9e12c0473fefff7b2d4f2603e63f3ff75d3bd79', class: "content", style: {
+                display: this.showContent ? 'block' : 'none',
+            } }, h("slot", { key: '963505ea2543c97d0a1b83942a0676f47ad967cf' })))));
+    }
+    static get watchers() { return {
+        "show": ["onShowChanged"]
+    }; }
+    static get style() { return drawerCss; }
+}, [1, "ix-drawer", {
+        "show": [1028],
+        "closeOnClickOutside": [4, "close-on-click-outside"],
+        "fullHeight": [4, "full-height"],
+        "minWidth": [2, "min-width"],
+        "maxWidth": [2, "max-width"],
+        "width": [8],
+        "showContent": [32],
+        "toggleDrawer": [64]
+    }, undefined, {
+        "show": ["onShowChanged"]
+    }]);
+Drawer.duration = 300;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-drawer", "ix-icon-button", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-drawer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Drawer);
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxDrawer = Drawer;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDrawer, defineCustomElement };
+//# sourceMappingURL=ix-drawer.js.map
+
+//# sourceMappingURL=ix-drawer.js.map

package/components/ix-drawer.js.map

@@ -0,0 +1 @@
+{"file":"ix-drawer.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"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@import 'mixins/shadow-dom/component';\n@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  display: block;\n  position: absolute;\n  justify-content: flex-start;\n  align-items: center;\n  opacity: 0;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  .drawer-container {\n    z-index: 100;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\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 { iconClose } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open!: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose!: EventEmitter;\n\n  toggle = false;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @State() showContent = true;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean, oldValue?: boolean) {\n    if (newValue === oldValue) {\n      return;\n    }\n\n    this.toggleDrawer(newValue);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    show = show ?? !this.show;\n\n    if (show) {\n      const { defaultPrevented } = this.open.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = true;\n      if (!this.toggle && this.divElement) {\n        this.slideInRight(this.divElement);\n        setTimeout(() => {\n          window.addEventListener('mousedown', this.callback);\n        }, Drawer.duration);\n      }\n    } else {\n      const { defaultPrevented } = this.drawerClose.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = false;\n\n      if (this.toggle && this.divElement) {\n        this.slideOutRight(this.divElement);\n      }\n\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    this.toggle = this.show;\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.toggleDrawer(false);\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private getConstrainedWidth(width: number) {\n    return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    const initialWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      width: [initialWidth, 0],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('display-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    const targetWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      width: [0, targetWidth],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('display-none');\n      },\n      complete: () => {\n        this.showContent = true;\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.toggleDrawer(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          'display-none': true,\n        }}\n        style={{\n          width: '0',\n          'max-width': `${this.maxWidth}rem`,\n          height: this.fullHeight ? '100%' : 'auto',\n          overflow: 'hidden',\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div\n          style={{\n            width:\n              this.width === 'auto'\n                ? 'auto'\n                : `${this.getConstrainedWidth(this.width)}rem`,\n          }}\n        >\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              class=\"close-button\"\n              style={{\n                display: this.showContent ? 'block' : 'none',\n              }}\n              icon={iconClose}\n              size=\"24\"\n              ghost\n              onClick={() => this.onCloseClicked()}\n              data-testid=\"close-button\"\n            ></ix-icon-button>\n          </div>\n          <div\n            class=\"content\"\n            style={{\n              display: this.showContent ? 'block' : 'none',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-dropdown-button.d.ts

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

package/components/ix-dropdown-button.js

@@ -0,0 +1,106 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { v as iconChevronDownSmall } from './p-CGwHQeMX.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$5 } from './p-CvvOe8xV.js';
+import { d as defineCustomElement$4 } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$3 } from './p-BXjBChze.js';
+import { d as defineCustomElement$2 } from './p-BygLxZIM.js';
+
+const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";
+
+const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Button variant
+         */
+        this.variant = 'primary';
+        /**
+         * Outline button
+         */
+        this.outline = false;
+        /**
+         * Button with no background or outline
+         */
+        this.ghost = false;
+        /**
+         * Disable button
+         */
+        this.disabled = false;
+        /**
+         * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+         */
+        this.closeBehavior = 'both';
+        this.dropdownAnchor = makeRef();
+    }
+    getTriangle() {
+        return (h("div", { class: {
+                triangle: true,
+                hide: this.label !== '',
+                primary: this.variant === 'primary',
+                secondary: this.variant === 'secondary',
+                ghost: this.ghost,
+                outline: this.outline,
+                disabled: this.disabled,
+            } }));
+    }
+    render() {
+        return (h(Host, { key: '2d7496faf5f6950fe6e6c2c50a06b626e15c3324', class: {
+                disabled: this.disabled,
+            }, ref: this.dropdownAnchor }, h("div", { key: 'de1b0d7d8db9d2461e0983143808bd5f6ccb193c', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: iconChevronDownSmall, size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '66cb34c98ed57210eb92c9234576523981d82028', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '1667a871498f0ddeb89fecd4e6bb269e5e4c8e3f' }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return dropdownButtonCss; }
+}, [1, "ix-dropdown-button", {
+        "variant": [1],
+        "outline": [4],
+        "ghost": [4],
+        "disabled": [4],
+        "label": [1],
+        "icon": [1],
+        "closeBehavior": [8, "close-behavior"],
+        "placement": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-dropdown-button", "ix-button", "ix-dropdown", "ix-icon-button", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-dropdown-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DropdownButton);
+            }
+            break;
+        case "ix-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxDropdownButton = DropdownButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownButton, defineCustomElement };
+//# sourceMappingURL=ix-dropdown-button.js.map
+
+//# sourceMappingURL=ix-dropdown-button.js.map

package/components/ix-dropdown-button.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-button.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"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@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n    min-width: 0px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .dropdown-button .dropdown-icon {\n    margin-right: 0.25rem;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport { makeRef } from '../utils/make-ref';\nimport type { DropdownButtonVariant } from './dropdown-button.types';\n\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement?: AlignedPlacement;\n\n  private readonly dropdownAnchor = makeRef<HTMLElement>();\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        ref={this.dropdownAnchor}\n      >\n        <div class=\"dropdown-button\">\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name={iconChevronDownSmall} size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor.waitForCurrent()}\n          placement={this.placement}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}