@siemens/ix 2.0.0 → 2.0.1

package/components/ix-date-time-card.d.ts

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

package/components/ix-date-time-card.js

@@ -0,0 +1,8 @@
+import { D as DateTimeCard, d as defineCustomElement$1 } from './date-time-card.js';
+
+const IxDateTimeCard = DateTimeCard;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDateTimeCard, defineCustomElement };
+
+//# sourceMappingURL=ix-date-time-card.js.map

package/components/ix-date-time-card.js.map

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

package/components/ix-datetime-picker.d.ts

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

package/components/ix-datetime-picker.js

@@ -0,0 +1,149 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$9 } from './button.js';
+import { d as defineCustomElement$8 } from './date-picker.js';
+import { d as defineCustomElement$7 } from './date-time-card.js';
+import { d as defineCustomElement$6 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './icon-button.js';
+import { d as defineCustomElement$4 } from './spinner.js';
+import { d as defineCustomElement$3 } from './time-picker.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}: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}:host .flex{display:flex;justify-content:center}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem}:host .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
+
+const DateTimePicker = /*@__PURE__*/ proxyCustomElement(class DateTimePicker extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.done = createEvent(this, "done", 7);
+    this.timeChange = createEvent(this, "timeChange", 7);
+    this.dateChange = createEvent(this, "dateChange", 7);
+    this.dateSelect = createEvent(this, "dateSelect", 7);
+    this.range = true;
+    this.showHour = false;
+    this.showMinutes = false;
+    this.showSeconds = false;
+    this.minDate = undefined;
+    this.maxDate = undefined;
+    this.dateFormat = 'yyyy/LL/dd';
+    this.timeFormat = 'TT';
+    this.from = undefined;
+    this.to = null;
+    this.time = undefined;
+    this.showTimeReference = undefined;
+    this.eventDelimiter = ' - ';
+    this.timeReference = undefined;
+    this.textSelectDate = 'Done';
+  }
+  onDone() {
+    var _a;
+    this.done.emit([this._from, (_a = this._to) !== null && _a !== void 0 ? _a : '', this._time].join(this.eventDelimiter));
+    this.dateSelect.emit({
+      from: this._from,
+      to: this._to,
+      time: this._time,
+    });
+  }
+  async onDateChange(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: date } = event;
+    this.dateChange.emit(date);
+    const currentDateTime = await this.datePickerElement.getCurrentDate();
+    this._from = currentDateTime.start;
+    this._to = currentDateTime.end;
+  }
+  async onTimeChange(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: time } = event;
+    this.timeChange.emit(time);
+    const currentDateTime = await this.timePickerElement.getCurrentTime();
+    this._time = currentDateTime;
+  }
+  componentDidLoad() {
+    this._from = this.from;
+    this._to = this.to;
+    this._time = this.time;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("ix-button", { class: "btn-select-date", onClick: () => this.onDone() }, this.textSelectDate)));
+  }
+  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": [8, "show-time-reference"],
+    "eventDelimiter": [1, "event-delimiter"],
+    "timeReference": [1, "time-reference"],
+    "textSelectDate": [1, "text-select-date"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-datetime-picker", "ix-button", "ix-date-picker", "ix-date-time-card", "ix-dropdown", "ix-icon-button", "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$9();
+      }
+      break;
+    case "ix-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ix-date-time-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-icon-button":
+      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

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

@@ -0,0 +1 @@
+{"file":"ix-datetime-picker.js","mappings":";;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,47BAA47B;;MC2Bz8B,cAAc;;;;;;;;;iBAIT,IAAI;oBAKD,KAAK;uBAKF,KAAK;uBAKL,KAAK;;;sBAwBE,YAAY;sBAQZ,IAAI;;cAmBL,IAAI;;6BAeJ,SAAS;0BAQZ,KAAK;;0BAYL,MAAM;;EAqCvB,MAAM;;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,CACZ,CAAC,IAAI,CAAC,KAAK,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CACnE,CAAC;IAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,KAAK;MAChB,EAAE,EAAE,IAAI,CAAC,GAAG;MACZ,IAAI,EAAE,IAAI,CAAC,KAAK;KACjB,CAAC,CAAC;GACJ;EAEO,MAAM,YAAY,CAAC,KAA4C;IACrE,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACtE,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;IACnC,IAAI,CAAC,GAAG,GAAG,eAAe,CAAC,GAAG,CAAC;GAChC;EAEO,MAAM,YAAY,CAAC,KAA0B;IACnD,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,CAAC;IACtE,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC;GAC9B;EAED,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,WAAW,GAAO,EAC7B,sBACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,GACnB,EAElB,sBACE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAC5C,OAAO,EAAC,OAAO,EACf,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,YAAY,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,GACjB,EAClB,WAAK,KAAK,EAAC,WAAW,GAAO,CACzB,EAEN,iBAAW,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,IAC5D,IAAI,CAAC,cAAc,CACV,CACP,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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: 32.6875rem;\n\n  .flex {\n    display: flex;\n    justify-content: center;\n  }\n\n  .btn-select-date {\n    position: absolute;\n    bottom: $default-space;\n    right: $default-space;\n  }\n\n  .separator {\n    border: 1px solid var(--theme-datepicker-separator--background);\n    width: 100%;\n    margin-top: 72px;\n    height: 1px;\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';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\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   * @since 1.1.0\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   * @since 1.1.0\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   * @since 1.1.0\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   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\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            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n          {this.textSelectDate}\n        </ix-button>\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,8 @@
+import { D as Divider, d as defineCustomElement$1 } from './divider.js';
+
+const IxDivider = Divider;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDivider, defineCustomElement };
+
+//# 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,145 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}: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}:host .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height: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;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";
+
+const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.open = createEvent(this, "open", 7);
+    this.drawerClose = createEvent(this, "drawerClose", 7);
+    this.callback = this.clickedOutside.bind(this);
+    this.show = false;
+    this.closeOnClickOutside = true;
+    this.fullHeight = false;
+    this.minWidth = 16;
+    this.maxWidth = 28;
+    this.width = this.minWidth;
+  }
+  onShowChanged(newValue) {
+    this.show = newValue !== undefined ? newValue : !this.show;
+    this.toggleDrawer(this.show);
+  }
+  /**
+   * Toggle or define show state of drawer
+   * @param show Overwrite toggle state with boolean
+   */
+  async toggleDrawer(show) {
+    this.show = show !== undefined ? show : !this.show;
+    if (show) {
+      this.open.emit();
+      this.slideInRight(this.divElement);
+      setTimeout(() => {
+        window.addEventListener('mousedown', this.callback);
+      }, 300);
+    }
+    else {
+      this.drawerClose.emit();
+      this.slideOutRight(this.divElement);
+      window.removeEventListener('mousedown', this.callback);
+    }
+    return Promise.resolve();
+  }
+  onCloseClicked() {
+    this.show = 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;
+    }
+  }
+  slideOutRight(el) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: [0, '16rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        el.classList.add('d-none');
+      },
+    });
+  }
+  slideInRight(el) {
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: ['16rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        el.classList.remove('d-none');
+      },
+    });
+  }
+  componentDidLoad() {
+    this.onShowChanged(this.show);
+  }
+  render() {
+    return (h(Host, { class: {
+        'drawer-container': true,
+        toggle: this.show,
+        'full-height': this.fullHeight,
+        'd-none': true,
+      }, style: {
+        width: this.width === 'auto' ? this.width : `${this.width}rem`,
+        'min-width': `${this.minWidth}rem`,
+        'max-width': `${this.maxWidth}rem`,
+      }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { class: "header" }, h("div", { class: "header-content" }, h("slot", { name: "header" })), h("ix-icon-button", { class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { class: "content" }, h("slot", null))));
+  }
+  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],
+    "toggleDrawer": [64]
+  }]);
+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

package/components/ix-drawer.js.map

@@ -0,0 +1 @@
+{"file":"ix-drawer.js","mappings":"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","names":[],"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  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\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  transition: all $medium-time ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 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    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\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  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\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    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = 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 slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\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            icon={'close'}\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\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,92 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './icon-button.js';
+import { d as defineCustomElement$2 } from './spinner.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}: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;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;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 HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.variant = 'primary';
+    this.outline = false;
+    this.ghost = false;
+    this.disabled = false;
+    this.label = undefined;
+    this.icon = undefined;
+    this.placement = undefined;
+    this.dropdownAnchor = undefined;
+  }
+  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, { class: {
+        disabled: this.disabled,
+      } }, h("div", { class: "dropdown-button", ref: (ref) => {
+        this.dropdownAnchor = ref;
+      } }, 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: 'chevron-down-small', 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", { class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement }, h("slot", null))));
+  }
+  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],
+    "placement": [1],
+    "dropdownAnchor": [32]
+  }]);
+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

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

@@ -0,0 +1 @@
+{"file":"ix-dropdown-button.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+vEAA+vE;;MCuB5wE,cAAc;;;;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;oBAKF,KAAK;;;;;;EAqBhB,WAAW;IACjB,QACE,WACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,WACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,OAAO,IAEjB,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IACR,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,eAAe,GACb,IACT,IAAI,EACR,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAC,IAAI,GAAW,CACrD,CACI,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,mBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,eAAa,CACD,CACT,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\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   * Placement of the dropdown\n   *\n   * @since 2.0.0\n   */\n  @Prop() placement: AlignedPlacement;\n\n  @State() dropdownAnchor!: 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      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\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={'chevron-down-small'} 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}\n          placement={this.placement}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/components/ix-dropdown-header.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}: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}";
+
+const DropdownHeader = /*@__PURE__*/ proxyCustomElement(class DropdownHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+  }
+  render() {
+    return (h(Host, null, h("ix-typography", { class: 'category-text', variant: 'default-title' }, this.label)));
+  }
+  static get style() { return dropdownHeaderCss; }
+}, [1, "ix-dropdown-header", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-dropdown-header", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-dropdown-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DropdownHeader);
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxDropdownHeader = DropdownHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownHeader, defineCustomElement };
+
+//# sourceMappingURL=ix-dropdown-header.js.map

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

@@ -0,0 +1 @@
+{"file":"ix-dropdown-header.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,swBAAswB;;MCmBnxB,cAAc;;;;;;;EAMzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,qBAAe,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,IAC5D,IAAI,CAAC,KAAK,CACG,CACX,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","./src/components/dropdown-header/dropdown-header.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\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\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, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} variant={'default-title'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/components/ix-dropdown-item.js

@@ -0,0 +1,8 @@
+import { D as DropdownItem, d as defineCustomElement$1 } from './dropdown-item.js';
+
+const IxDropdownItem = DropdownItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxDropdownItem, defineCustomElement };
+
+//# sourceMappingURL=ix-dropdown-item.js.map

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

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

package/components/ix-dropdown-quick-actions.d.ts

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