@siemens/ix 0.0.0-20240419081748

package/dist/cjs/ix-datetime-picker.cjs.entry.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.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}: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 .min-width{width:-moz-min-content;width:min-content}:host .no-padding{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{left:unset !important}}:host .individual{box-shadow:none;border:none}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem;left:1rem}";
+const IxDatetimePickerStyle0 = datetimePickerCss;
+
+const DatetimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.done = index.createEvent(this, "done", 7);
+        this.timeChange = index.createEvent(this, "timeChange", 7);
+        this.dateChange = index.createEvent(this, "dateChange", 7);
+        this.dateSelect = index.createEvent(this, "dateSelect", 7);
+        this.range = true;
+        this.showHour = true;
+        this.showMinutes = true;
+        this.showSeconds = true;
+        this.minDate = undefined;
+        this.maxDate = undefined;
+        this.dateFormat = 'yyyy/LL/dd';
+        this.timeFormat = 'HH:mm:ss';
+        this.from = undefined;
+        this.to = undefined;
+        this.time = undefined;
+        this.showTimeReference = undefined;
+        this.timeReference = undefined;
+        this.textSelectDate = undefined;
+        this.i18nDone = 'Done';
+        this.weekStartIndex = 0;
+        this.locale = undefined;
+        this.eventDelimiter = ' - ';
+    }
+    async onDone() {
+        var _a;
+        const date = await this.datePickerElement.getCurrentDate();
+        const time = await this.timePickerElement.getCurrentTime();
+        this.dateSelect.emit({
+            from: date.from,
+            to: date.to,
+            time: time,
+        });
+        this.done.emit([date.from, (_a = date.to) !== null && _a !== void 0 ? _a : '', time].join(this.eventDelimiter));
+    }
+    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 (index.h(index.Host, { key: 'ced15d6ebee8f55870b7fc36283556fae3cf72fd' }, index.h("ix-layout-grid", { key: '58e9916ce84c7ee9a3f7b930718a396cb76106f2', class: "no-padding" }, index.h("ix-row", { key: '593109d02398fd179303b7bc3030b13b5701f769' }, index.h("ix-col", { key: '4b6a39a1ba04096d522fc7943f72b14901e71006', class: "no-padding" }, index.h("ix-date-picker", { key: '5ee0c7a5a45749104a23e5f3eeea44e33bd7a815', 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 })), index.h("ix-col", { key: '6cbefe036d4a48efaca5a9b1a67ef801feab449f', class: "no-padding" }, index.h("ix-time-picker", { key: '285d034e938063753075f7f55d4f63a211483f18', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), index.h("ix-row", { key: '24ab1e4d0cf246456d34744d14404c6bbb629d06' }, index.h("ix-col", { key: '26daaa468b4d80e1c124f1776b7b773df4dd9b97' }, index.h("ix-button", { key: '38f073daffa3f337e26a319d1721f67ee28db729', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+    }
+};
+DatetimePicker.style = IxDatetimePickerStyle0;
+
+exports.ix_datetime_picker = DatetimePicker;
+
+//# sourceMappingURL=ix-datetime-picker.cjs.entry.js.map

package/dist/cjs/ix-datetime-picker.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-datetime-picker.entry.cjs.js","mappings":"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","names":["h","Host"],"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  .min-width {\n    width: min-content;\n  }\n\n  .no-padding {\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 {\n      left: unset !important;\n    }\n\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date {\n    position: absolute;\n    bottom: $default-space;\n    right: $default-space;\n    left: $default-space;\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';\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   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * 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 = '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   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\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   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\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   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   * @deprecated since 2.1.0. Use `i18nDone`\n   */\n  @Prop() textSelectDate: string;\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\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   * @since 2.1.0\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   * @since 2.1.0\n   */\n  @Prop() locale: string = 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   * @deprecated Not used anymore see `done` event\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   * @deprecated Use `this.dateChange`\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   * Datetime selection event is fired after confirm button is pressed\n   *\n   * @since 1.1.0\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    this.done.emit([date.from, date.to ?? '', time].join(this.eventDelimiter));\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 class=\"no-padding\">\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              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col class=\"no-padding\">\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                corners=\"right\"\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                time={this.time}\n              ></ix-time-picker>\n            </ix-col>\n          </ix-row>\n          <ix-row>\n            <ix-col>\n              <ix-button\n                class=\"btn-select-date btn-md-width\"\n                onClick={() => this.onDone()}\n              >\n                {this.textSelectDate || this.i18nDone}\n              </ix-button>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-divider.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+
+const dividerCss = ":host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
+const IxDividerStyle0 = dividerCss;
+
+const Divider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return index.h(index.Host, { key: 'c4ded9a12469394b7f35bebee62799640ccb905f' });
+    }
+};
+Divider.style = IxDividerStyle0;
+
+exports.ix_divider = Divider;
+
+//# sourceMappingURL=ix-divider.cjs.entry.js.map

package/dist/cjs/ix-divider.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-divider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,kIAAkI,CAAC;AACtJ,wBAAe,UAAU;;MCiBZ,OAAO;;;;IAClB,MAAM;QACJ,OAAOA,QAACC,UAAI,sDAAQ,CAAC;KACtB;;;;;;","names":["h","Host"],"sources":["src/components/divider/divider.scss?tag=ix-divider&encapsulation=shadow","src/components/divider/divider.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:host {\n  display: block;\n  position: relative;\n\n  width: 100%;\n  border-bottom: 0.0625rem solid var(--theme-color-x-weak-bdr);\n  margin: 0.25rem 0px;\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 */\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-divider',\n  styleUrl: 'divider.scss',\n  shadow: true,\n})\nexport class Divider {\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/cjs/ix-drawer.cjs.entry.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+const anime_es = require('./anime.es-e2814360.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 var(--theme-medium-time) 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}:host(.toggle){visibility:visible}";
+const IxDrawerStyle0 = drawerCss;
+
+const Drawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.open = index.createEvent(this, "open", 7);
+        this.drawerClose = index.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_es.anime({
+            targets: el,
+            duration: Drawer.duration,
+            translateX: [0, '16rem'],
+            opacity: [1, 0],
+            easing: 'easeInSine',
+            complete: () => {
+                el.classList.add('d-none');
+            },
+        });
+    }
+    slideInRight(el) {
+        anime_es.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 (index.h(index.Host, { key: '48546d54d8c859e184c75935f0729826247e36d5', 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" }, index.h("div", { key: 'a574087e718559ca1562a41617c457f24dd9fd33', class: "header" }, index.h("div", { key: '126ab85b1452d7338043cc5457db98b047185d1a', class: "header-content" }, index.h("slot", { key: '0f62e3434f942f72c268359aacdf11a881553104', name: "header" })), index.h("ix-icon-button", { key: '42c763a72136811a6e0c5999cd0b7689ef7c9035', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), index.h("div", { key: 'f7e7536dde130c707bf7584a64fae3002ddf3035', class: "content" }, index.h("slot", { key: '50c5e7afd95802fb9ceb537b788b826a888254df' }))));
+    }
+    static get watchers() { return {
+        "show": ["onShowChanged"]
+    }; }
+};
+Drawer.duration = 300;
+Drawer.style = IxDrawerStyle0;
+
+exports.ix_drawer = Drawer;
+
+//# sourceMappingURL=ix-drawer.cjs.entry.js.map

package/dist/cjs/ix-drawer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-drawer.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,i0CAAi0C,CAAC;AACp1C,uBAAe,SAAS;;MCyBX,MAAM;;;;;QA0CT,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAtClB,KAAK;mCAKP,IAAI;0BAKb,KAAK;wBAKP,EAAE;wBAKF,EAAE;qBAKY,IAAI,CAAC,QAAQ;;IAiB9C,aAAa,CAAC,QAAiB;QAC7B,IAAI,CAAC,IAAI,GAAG,QAAQ,KAAK,SAAS,GAAG,QAAQ,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;;;;;IAOD,MAAM,YAAY,CAAC,IAAc;QAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEnD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACnC,UAAU,CAAC;gBACT,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;aACrD,EAAE,GAAG,CAAC,CAAC;SACT;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACpC,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SACxD;QAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;KAC1B;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;IAEO,cAAc,CAAC,GAAQ;QAC7B,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC;QAC1B,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACxD,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAE1C,IACE,GAAG,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ;YAC5B,cAAc,KAAK,IAAI,CAAC,UAAU;YAClC,MAAM,KAAK,GAAG,EACd;YACA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;KACF;IAEO,aAAa,CAAC,EAAe;QACnCA,cAAK,CAAC;YACJ,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;YACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE;gBACR,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aAC5B;SACF,CAAC,CAAC;KACJ;IAEO,YAAY,CAAC,EAAe;QAClCA,cAAK,CAAC;YACJ,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;YACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,aAAa;YACrB,KAAK,EAAE;gBACL,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aAC/B;SACF,CAAC,CAAC;KACJ;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,QAAQ,EAAE,IAAI;aACf,EACD,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK;gBAC9D,WAAW,EAAE,GAAG,IAAI,CAAC,QAAQ,KAAK;gBAClC,WAAW,EAAE,GAAG,IAAI,CAAC,QAAQ,KAAK;aACnC,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,iBACtC,WAAW,EACvB,EAAE,EAAC,eAAe,IAElBD,kEAAK,KAAK,EAAC,QAAQ,IACjBA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACNA,6EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,KAAK,QACL,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,iBACxB,cAAc,GACV,CACd,EACNA,kEAAK,KAAK,EAAC,SAAS,IAClBA,oEAAa,CACT,CACD,EACP;KACH;;;;;AAzHc,eAAQ,GAAG,GAAH,CAAO;;;;;","names":["anime","h","Host"],"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 var(--theme-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:host(.toggle) {\n  visibility: visible;\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/dist/cjs/ix-dropdown-button.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.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;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 IxDropdownButtonStyle0 = dropdownButtonCss;
+
+const DropdownButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'primary';
+        this.outline = false;
+        this.ghost = false;
+        this.disabled = false;
+        this.label = undefined;
+        this.icon = undefined;
+        this.closeBehavior = 'both';
+        this.placement = undefined;
+        this.dropdownAnchor = undefined;
+    }
+    getTriangle() {
+        return (index.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 (index.h(index.Host, { key: 'a5b2f4263b3f7431414302dc9a2e387f902c0558', class: {
+                disabled: this.disabled,
+            }, ref: (ref) => {
+                this.dropdownAnchor = ref;
+            } }, index.h("div", { key: 'ee2c7e56e653437c11ddb0100be4fbbd87a768e3', class: "dropdown-button" }, this.label ? (index.h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, index.h("div", { class: 'content' }, this.icon ? (index.h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, index.h("div", { class: 'button-label' }, this.label), index.h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (index.h("div", null, index.h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), index.h("ix-dropdown", { key: '49de3d2d4cc2c4cea66247daa99c6d6c81f34962', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, index.h("slot", { key: '6d5420cff93937a002dd17cbe31cf68d39002a3e' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+DropdownButton.style = IxDropdownButtonStyle0;
+
+exports.ix_dropdown_button = DropdownButton;
+
+//# sourceMappingURL=ix-dropdown-button.cjs.entry.js.map

package/dist/cjs/ix-dropdown-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,+rEAA+rE,CAAC;AAC1tE,+BAAe,iBAAiB;;MCsBnB,cAAc;;;uBAMgB,SAAS;uBAKhC,KAAK;qBAKP,KAAK;wBAKF,KAAK;;;6BAgByC,MAAM;;;;IAW/D,WAAW;QACjB,QACEA,iBACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,GACI,EACP;KACH;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,GAAG,EAAE,CAAC,GAAG;gBACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;aAC3B,IAEDD,kEAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,KAAK,IACTA,uBACE,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,IAEjBA,iBAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IACRA,qBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,eAAe,GACb,IACT,IAAI,EACRA,iBAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9CA,qBAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAC,IAAI,GAAW,CACrD,CACI,KAEZA,qBACEA,4BACE,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,EAENA,0EACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjCA,oEAAa,CACD,CACT,EACP;KACH;;;;;;;","names":["h","Host"],"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   * 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   * @since 2.1.0\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\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        ref={(ref) => {\n          this.dropdownAnchor = ref;\n        }}\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={'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          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-dropdown-header.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.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 IxDropdownHeaderStyle0 = dropdownHeaderCss;
+
+const DropdownHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '47c0d91d77afa9bf491e95f573d11345f41006fe' }, index.h("ix-typography", { key: '17ed22d1ae6cd8b5cd993c986ac90963839636b0', class: 'category-text', variant: 'default-title' }, this.label)));
+    }
+};
+DropdownHeader.style = IxDropdownHeaderStyle0;
+
+exports.ix_dropdown_header = DropdownHeader;
+
+//# sourceMappingURL=ix-dropdown-header.cjs.entry.js.map

package/dist/cjs/ix-dropdown-header.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,swBAAswB,CAAC;AACjyB,+BAAe,iBAAiB;;MCkBnB,cAAc;;;;;IAMzB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,4EAAe,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,IAC5D,IAAI,CAAC,KAAK,CACG,CACX,EACP;KACH;;;;;;","names":["h","Host"],"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/dist/cjs/ix-dropdown-item.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+
+const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}: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 .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
+const IxDropdownItemStyle0 = dropdownItemCss;
+
+const DropdownItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemClick = index.createEvent(this, "itemClick", 7);
+        this.label = undefined;
+        this.icon = undefined;
+        this.hover = false;
+        this.disabled = false;
+        this.checked = false;
+        this.isSubMenu = false;
+        this.suppressChecked = false;
+    }
+    /**
+     * Internal usage only
+     */
+    async emitItemClick() {
+        this.itemClick.emit(this.hostElement);
+    }
+    /** @internal */
+    async getDropdownItemElement() {
+        return this.hostElement;
+    }
+    isIconOnly() {
+        return (this.label === undefined &&
+            this.hostElement.innerText === '' &&
+            this.icon !== undefined);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd2972c4154e4f43f3fc9b7b9d6726c05923109c6', class: {
+                hover: this.hover,
+                'icon-only': this.isIconOnly(),
+                disabled: this.disabled,
+                submenu: this.isSubMenu,
+            }, role: "listitem" }, index.h("button", { key: '7148b3977626016ffcb818384175e3b1feda5c62', type: "button", tabIndex: 0, class: {
+                'dropdown-item': true,
+                'no-checked-field': this.suppressChecked,
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (index.h("div", { class: "dropdown-item-checked" }, this.checked ? (index.h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (index.h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, index.h("div", { key: 'e347baeb8cf93401a7d92210cb5102301e41133b', class: "dropdown-item-text" }, this.label, index.h("slot", { key: 'fc99370903e7e37d3903f42451c3992b32d0399b' })), this.isSubMenu ? (index.h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+DropdownItem.style = IxDropdownItemStyle0;
+
+exports.ix_dropdown_item = DropdownItem;
+
+//# sourceMappingURL=ix-dropdown-item.cjs.entry.js.map

package/dist/cjs/ix-dropdown-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,u7EAAu7E,CAAC;AACh9E,6BAAe,eAAe;;MCyBjB,YAAY;;;;;;qBAgBP,KAAK;wBAKF,KAAK;uBAKN,KAAK;yBAGH,KAAK;+BAGC,KAAK;;;;;IAS/B,MAAM,aAAa;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACvC;;IAID,MAAM,sBAAsB;QAC1B,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAEO,UAAU;QAChB,QACE,IAAI,CAAC,KAAK,KAAK,SAAS;YACxB,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;YACjC,IAAI,CAAC,IAAI,KAAK,SAAS,EACvB;KACH;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,SAAS;aACxB,EACD,IAAI,EAAC,UAAU,IAEfD,qEACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;aACzC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAElC,CAAC,IAAI,CAAC,eAAe,IACpBA,iBAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,OAAO,IACXA,qBACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,cAAc,EACpB,IAAI,EAAC,IAAI,GACA,IACT,IAAI,CACJ,IACJ,IAAI,EACP,IAAI,CAAC,IAAI,IACRA,qBAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,IAC7D,IAAI,EACRA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,EACXA,oEAAa,CACT,EACL,IAAI,CAAC,SAAS,IACbA,qBACE,IAAI,EAAE,qBAAqB,EAC3B,KAAK,EAAE,cAAc,GACZ,IACT,IAAI,CACD,CACJ,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.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 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/hover';\n\n$itemPadding: 0.5rem;\n$itemPaddingRight: 1.5rem;\n$focusBorder: 0.0625rem;\n\n@mixin applyItemWidth($padding, $paddingRight) {\n  width: calc(100% - #{$padding} - #{$paddingRight});\n\n  padding: 0 $padding;\n  padding-right: $paddingRight;\n}\n\n:host {\n  --ix-dropdown-item-checked-color: var(--theme-color-primary);\n  @include ix-component;\n  display: flex;\n  flex-direction: row;\n\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n  overflow: hidden;\n  cursor: pointer;\n\n  .dropdown-item {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n    height: calc(100% - 2px);\n    @include applyItemWidth($itemPadding, $itemPaddingRight);\n    border: $focusBorder solid transparent;\n    white-space: nowrap;\n  }\n\n  .dropdown-item.no-checked-field {\n    @include applyItemWidth(1rem, $itemPaddingRight);\n  }\n\n  .dropdown-item:focus-visible {\n    border-color: var(--theme-color-focus-bdr);\n  }\n\n  .dropdown-item-checked {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    height: 100%;\n    width: 1rem;\n    min-width: 1rem;\n    margin-right: 0.25rem;\n\n    color: var(--ix-dropdown-item-checked-color);\n  }\n\n  .dropdown-item-icon {\n    margin-right: 0.25rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .dropdown-item-text {\n    display: block;\n    position: relative;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .dropdown-item:focus-visible {\n    outline: 1px solid yellow;\n  }\n\n  .submenu-icon {\n    margin-left: auto;\n  }\n}\n\n:host(.icon-only) {\n  .dropdown-item-icon {\n    margin-right: 0px;\n  }\n\n  .dropdown-item-checked {\n    display: none;\n  }\n\n  .dropdown-item {\n    @include applyItemWidth(0.5rem, 0.5rem);\n  }\n}\n\n:host(.submenu) {\n  .dropdown-item {\n    @include applyItemWidth($itemPadding, 0.5rem);\n  }\n}\n\n@include ghost-hover-pressed;\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-color-weak-text) !important;\n\n  .dropdown-item-icon {\n    color: var(--theme-color-weak-text) !important;\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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /** @internal */\n  @Prop() isSubMenu = false;\n\n  /** @internal */\n  @Prop() suppressChecked = false;\n\n  /** @internal */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.hostElement;\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name={'single-check'}\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon\n              name={'chevron-right-small'}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-dropdown-quick-actions.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c6f0ac73.js');
+
+const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";
+const IxDropdownQuickActionsStyle0 = dropdownQuickActionsCss;
+
+const DropdownQuickActions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '5e441f76795c14ce9c89745007b984a758ed6c68' }, index.h("slot", { key: '9134b8e85c0c92f2250305152d102f71cad38e8e' })));
+    }
+};
+DropdownQuickActions.style = IxDropdownQuickActionsStyle0;
+
+exports.ix_dropdown_quick_actions = DropdownQuickActions;
+
+//# sourceMappingURL=ix-dropdown-quick-actions.cjs.entry.js.map

package/dist/cjs/ix-dropdown-quick-actions.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-dropdown-quick-actions.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,2MAA2M,CAAC;AAC5O,qCAAe,uBAAuB;;MCiBzB,oBAAoB;;;;IAC/B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/dropdown-quick-actions/dropdown-quick-actions.scss?tag=ix-dropdown-quick-actions&encapsulation=shadow","src/components/dropdown-quick-actions/dropdown-quick-actions.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\n:host {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: $large-space;\n  margin-inline-end: $large-space;\n  margin-block-end: $tiny-space;\n\n  slot::slotted(*) {\n    display: flex;\n    margin-inline-end: 0.625rem;\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 */\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-dropdown-quick-actions',\n  styleUrl: 'dropdown-quick-actions.scss',\n  shadow: true,\n})\nexport class DropdownQuickActions {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}