@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-datetime-picker.entry.cjs.js","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  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 $default-space $default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\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  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @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;\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;\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: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\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   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @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;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n\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\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                textTime={this.i18nTime}\n                time={this.time}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.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 Divider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return index.h(index.Host, { key: '0312482e071d26e01d683fe2f2500cf1748bc2e0' });
+    }
+};
+Divider.style = dividerCss;
+
+exports.ix_divider = Divider;
+//# sourceMappingURL=ix-divider.entry.cjs.js.map
+
+//# 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;;MCkBxI,OAAO,GAAA,MAAA;;;;IAClB,MAAM,GAAA;QACJ,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ;;;;;;;","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-divider.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-divider.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,kIAAkI;;MCkBxI,OAAO,GAAA,MAAA;;;;IAClB,MAAM,GAAA;QACJ,OAAOA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ;;;;;;;"}

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

@@ -0,0 +1,161 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.js');
+var index$1 = require('./index-DIFIjYrm.js');
+var anime_es = require('./anime.es-CgS5X9-e.js');
+
+const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);display:block;position:absolute;justify-content:flex-start;align-items:center;opacity:0;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .drawer-container{z-index:100}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.display-none){display:none}";
+
+const Drawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.open = index.createEvent(this, "open", 7);
+        this.drawerClose = index.createEvent(this, "drawerClose", 7);
+        /**
+         * Show or hide the drawer
+         */
+        this.show = false;
+        /**
+         * Fired in case of an outside click during drawer showed state
+         */
+        this.closeOnClickOutside = true;
+        /**
+         * Render the drawer with maximum height
+         */
+        this.fullHeight = false;
+        /**
+         * Min width interpreted as REM
+         */
+        this.minWidth = 16;
+        /**
+         * Max width interpreted as REM
+         */
+        this.maxWidth = 28;
+        /**
+         * Width interpreted as REM if not set to 'auto'
+         */
+        this.width = this.minWidth;
+        this.toggle = false;
+        this.callback = this.clickedOutside.bind(this);
+        this.showContent = true;
+    }
+    onShowChanged(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        this.toggleDrawer(newValue);
+    }
+    /**
+     * Toggle or define show state of drawer
+     * @param show Overwrite toggle state with boolean
+     */
+    async toggleDrawer(show) {
+        show = show !== null && show !== void 0 ? show : !this.show;
+        if (show) {
+            const { defaultPrevented } = this.open.emit();
+            if (defaultPrevented) {
+                return;
+            }
+            this.show = true;
+            if (!this.toggle && this.divElement) {
+                this.slideInRight(this.divElement);
+                setTimeout(() => {
+                    window.addEventListener('mousedown', this.callback);
+                }, Drawer.duration);
+            }
+        }
+        else {
+            const { defaultPrevented } = this.drawerClose.emit();
+            if (defaultPrevented) {
+                return;
+            }
+            this.show = false;
+            if (this.toggle && this.divElement) {
+                this.slideOutRight(this.divElement);
+            }
+            window.removeEventListener('mousedown', this.callback);
+        }
+        this.toggle = this.show;
+        return Promise.resolve();
+    }
+    onCloseClicked() {
+        this.toggleDrawer(false);
+    }
+    clickedOutside(evt) {
+        if (!this.closeOnClickOutside) {
+            return;
+        }
+        const target = evt.target;
+        const closestElement = target.closest('#div-container');
+        const btn = target.closest('#drawer-btn');
+        if (evt.target.type !== 'button' &&
+            closestElement !== this.divElement &&
+            target !== btn) {
+            this.show = false;
+        }
+    }
+    getConstrainedWidth(width) {
+        return Math.min(Math.max(width, this.minWidth), this.maxWidth);
+    }
+    slideOutRight(el) {
+        const initialWidth = `${this.getConstrainedWidth(this.width === 'auto' ? this.minWidth : this.width)}rem`;
+        anime_es.anime({
+            targets: el,
+            duration: Drawer.duration,
+            width: [initialWidth, 0],
+            opacity: [1, 0],
+            easing: 'easeInSine',
+            complete: () => {
+                el.classList.add('display-none');
+            },
+        });
+    }
+    slideInRight(el) {
+        const targetWidth = `${this.getConstrainedWidth(this.width === 'auto' ? this.minWidth : this.width)}rem`;
+        anime_es.anime({
+            targets: el,
+            duration: Drawer.duration,
+            width: [0, targetWidth],
+            opacity: [0, 1],
+            easing: 'easeOutSine',
+            begin: () => {
+                el.classList.remove('display-none');
+            },
+            complete: () => {
+                this.showContent = true;
+            },
+        });
+    }
+    componentDidLoad() {
+        this.toggleDrawer(this.show);
+    }
+    render() {
+        return (index.h(index.Host, { key: '909d53fac8f9b093953e32c351aa753e64d185ca', class: {
+                'drawer-container': true,
+                'display-none': true,
+            }, style: {
+                width: '0',
+                'max-width': `${this.maxWidth}rem`,
+                height: this.fullHeight ? '100%' : 'auto',
+                overflow: 'hidden',
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, index.h("div", { key: 'f1c46494754afe5bf34726bd62fc747925e96052', style: {
+                width: this.width === 'auto'
+                    ? 'auto'
+                    : `${this.getConstrainedWidth(this.width)}rem`,
+            } }, index.h("div", { key: '80059cbd571e3216c87a16913f5481d5028a1dcf', class: "header" }, index.h("div", { key: '9482f1bea71cf507ebc87f40663fa2586a286fc5', class: "header-content" }, index.h("slot", { key: 'f348a131de977557d6aeb45839e88b278ecdb3c6', name: "header" })), index.h("ix-icon-button", { key: 'a3578ca3c9802cfe777f30804549f3670089a510', class: "close-button", style: {
+                display: this.showContent ? 'block' : 'none',
+            }, icon: index$1.iconClose, size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), index.h("div", { key: '8b1aad2acde63f6c04c602fd098a08985a5057c1', class: "content", style: {
+                display: this.showContent ? 'block' : 'none',
+            } }, index.h("slot", { key: 'de9a51c6e383bce7dfdbf8b5f687f37d3767ff2c' })))));
+    }
+    static get watchers() { return {
+        "show": ["onShowChanged"]
+    }; }
+};
+Drawer.duration = 300;
+Drawer.style = drawerCss;
+
+exports.ix_drawer = Drawer;
+//# sourceMappingURL=ix-drawer.entry.cjs.js.map
+
+//# 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":"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","names":["anime","h","Host","iconClose"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  display: block;\n  position: absolute;\n  justify-content: flex-start;\n  align-items: center;\n  opacity: 0;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  .drawer-container {\n    z-index: 100;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.display-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconClose } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open!: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose!: EventEmitter;\n\n  toggle = false;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @State() showContent = true;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean, oldValue?: boolean) {\n    if (newValue === oldValue) {\n      return;\n    }\n\n    this.toggleDrawer(newValue);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    show = show ?? !this.show;\n\n    if (show) {\n      const { defaultPrevented } = this.open.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = true;\n      if (!this.toggle && this.divElement) {\n        this.slideInRight(this.divElement);\n        setTimeout(() => {\n          window.addEventListener('mousedown', this.callback);\n        }, Drawer.duration);\n      }\n    } else {\n      const { defaultPrevented } = this.drawerClose.emit();\n\n      if (defaultPrevented) {\n        return;\n      }\n\n      this.show = false;\n\n      if (this.toggle && this.divElement) {\n        this.slideOutRight(this.divElement);\n      }\n\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    this.toggle = this.show;\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.toggleDrawer(false);\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private getConstrainedWidth(width: number) {\n    return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    const initialWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      width: [initialWidth, 0],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('display-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    const targetWidth = `${this.getConstrainedWidth(\n      this.width === 'auto' ? this.minWidth : this.width\n    )}rem`;\n\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      width: [0, targetWidth],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('display-none');\n      },\n      complete: () => {\n        this.showContent = true;\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.toggleDrawer(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          'display-none': true,\n        }}\n        style={{\n          width: '0',\n          'max-width': `${this.maxWidth}rem`,\n          height: this.fullHeight ? '100%' : 'auto',\n          overflow: 'hidden',\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div\n          style={{\n            width:\n              this.width === 'auto'\n                ? 'auto'\n                : `${this.getConstrainedWidth(this.width)}rem`,\n          }}\n        >\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              class=\"close-button\"\n              style={{\n                display: this.showContent ? 'block' : 'none',\n              }}\n              icon={iconClose}\n              size=\"24\"\n              ghost\n              onClick={() => this.onCloseClicked()}\n              data-testid=\"close-button\"\n            ></ix-icon-button>\n          </div>\n          <div\n            class=\"content\"\n            style={{\n              display: this.showContent ? 'block' : 'none',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.js');
+var index$1 = require('./index-DIFIjYrm.js');
+var makeRef = require('./make-ref-BaH6_YJk.js');
+
+const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";
+
+const DropdownButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Button variant
+         */
+        this.variant = 'primary';
+        /**
+         * Outline button
+         */
+        this.outline = false;
+        /**
+         * Button with no background or outline
+         */
+        this.ghost = false;
+        /**
+         * Disable button
+         */
+        this.disabled = false;
+        /**
+         * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
+         * @since 2.1.0
+         */
+        this.closeBehavior = 'both';
+        this.dropdownAnchor = makeRef.makeRef();
+    }
+    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: '8e9e32c96d0ec280f7d70163004945dcc2cdc77f', class: {
+                disabled: this.disabled,
+            }, ref: this.dropdownAnchor }, index.h("div", { key: 'f4c1148f26de296814fb6b1b21151476f87038d2', 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: index$1.iconChevronDownSmall, 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: 'b999171ece591e675679172c4939d1a81ef26197', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior }, index.h("slot", { key: '09530ef7d76b07e5685d94569d95e54fd5c132ce' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+DropdownButton.style = dropdownButtonCss;
+
+exports.ix_dropdown_button = DropdownButton;
+//# sourceMappingURL=ix-dropdown-button.entry.cjs.js.map
+
+//# 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":"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","names":["makeRef","h","Host","iconChevronDownSmall"],"sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n    min-width: 0px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .dropdown-button .dropdown-icon {\n    margin-right: 0.25rem;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport { makeRef } from '../utils/make-ref';\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  private readonly dropdownAnchor = makeRef<HTMLElement>();\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        ref={this.dropdownAnchor}\n      >\n        <div class=\"dropdown-button\">\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name={iconChevronDownSmall} size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor.waitForCurrent()}\n          placement={this.placement}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-button.entry.cjs.js","sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n    min-width: 0px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .dropdown-button .dropdown-icon {\n    margin-right: 0.25rem;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { iconChevronDownSmall } from '@siemens/ix-icons/icons';\nimport { makeRef } from '../utils/make-ref';\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  private readonly dropdownAnchor = makeRef<HTMLElement>();\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        ref={this.dropdownAnchor}\n      >\n        <div class=\"dropdown-button\">\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name={iconChevronDownSmall} size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor.waitForCurrent()}\n          placement={this.placement}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":["makeRef","h","Host","iconChevronDownSmall"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
+
+const DropdownHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a34330869a1e53c3a2df09143066197b72b1abf8' }, index.h("ix-typography", { key: '95d1226055d927243c0b9fd2e81c3850071ca93e', class: 'category-text', format: 'h5' }, this.label)));
+    }
+};
+DropdownHeader.style = dropdownHeaderCss;
+
+exports.ix_dropdown_header = DropdownHeader;
+//# sourceMappingURL=ix-dropdown-header.entry.cjs.js.map
+
+//# 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,k6BAAk6B;;MCmB/6B,cAAc,GAAA,MAAA;;;;IAMzB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAChD,EAAA,IAAI,CAAC,KAAK,CACG,CACX;;;;;;;","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'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-header.entry.cjs.js","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'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,k6BAAk6B;;MCmB/6B,cAAc,GAAA,MAAA;;;;IAMzB,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAChD,EAAA,IAAI,CAAC,KAAK,CACG,CACX;;;;;;;"}

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.js');
+var index$1 = require('./index-DIFIjYrm.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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .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.5rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.5rem;color:var(--theme-color-std-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}: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 DropdownItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemClick = index.createEvent(this, "itemClick", 7);
+        /**
+         * Display hover state
+         */
+        this.hover = false;
+        /**
+         * Disable item and remove event listeners
+         */
+        this.disabled = false;
+        /**
+         * Whether the item is checked or not. If true a checkmark will mark the item as checked.
+         */
+        this.checked = false;
+        /** @internal */
+        this.isSubMenu = false;
+        /** @internal */
+        this.suppressChecked = false;
+    }
+    /** @internal */
+    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: '9422b6909b1e14603325f59d7414344f7ad52a36', class: {
+                hover: this.hover,
+                'icon-only': this.isIconOnly(),
+                disabled: this.disabled,
+                submenu: this.isSubMenu,
+            }, role: "listitem" }, index.h("button", { key: '5e6f69c10c1f1ca203f66bdc0f16bcff3f793fe2', 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: index$1.iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (index.h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, index.h("div", { key: '94ae83ecf8117a15b8ce82ae3dcd94bb5f8dee7e', class: "dropdown-item-text" }, this.label, index.h("slot", { key: 'cfe3fa2bc48853786f5fe9676ad55c5418c6821a' })), this.isSubMenu ? (index.h("ix-icon", { name: index$1.iconChevronRightSmall, class: 'submenu-icon' })) : null)));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+DropdownItem.style = dropdownItemCss;
+
+exports.ix_dropdown_item = DropdownItem;
+//# sourceMappingURL=ix-dropdown-item.entry.cjs.js.map
+
+//# 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,ohFAAohF;;MC8B/hF,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAkBE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;;AAGjB,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAyEhC;;AAlEC,IAAA,MAAM,aAAa,GAAA;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;;;AAKvC,IAAA,MAAM,sBAAsB,GAAA;QAC1B,OAAO,IAAI,CAAC,WAAW;;IAGjB,UAAU,GAAA;AAChB,QAAA,QACE,IAAI,CAAC,KAAK,KAAK,SAAS;AACxB,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;AACjC,YAAA,IAAI,CAAC,IAAI,KAAK,SAAS;;IAI3B,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,gBAAA,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,SAAS;aACxB,EACD,IAAI,EAAC,UAAU,EAAA,EAEfD,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EAAA,EAElC,CAAC,IAAI,CAAC,eAAe,IACpBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,OAAO,IACXA,OACE,CAAA,SAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EACjB,IAAI,EAAEE,uBAAe,EACrB,IAAI,EAAC,IAAI,EAAA,CACA,IACT,IAAI,CACJ,IACJ,IAAI,EACP,IAAI,CAAC,IAAI,IACRF,OAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,IAC7D,IAAI,EACRA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,SAAS,IACbA,OAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAEG,6BAAqB,EAC3B,KAAK,EAAE,cAAc,EACZ,CAAA,IACT,IAAI,CACD,CACJ;;;;;;;;","names":["h","Host","iconSingleCheck","iconChevronRightSmall"],"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.5rem;\n\n    color: var(--ix-dropdown-item-checked-color);\n  }\n\n  .dropdown-item-icon {\n    margin-right: 0.5rem;\n    color: var(--theme-color-std-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  .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';\nimport {\n  iconChevronRightSmall,\n  iconSingleCheck,\n} from '@siemens/ix-icons/icons';\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  /** @internal */\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={iconSingleCheck}\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={iconChevronRightSmall}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-item.entry.cjs.js","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.5rem;\n\n    color: var(--ix-dropdown-item-checked-color);\n  }\n\n  .dropdown-item-icon {\n    margin-right: 0.5rem;\n    color: var(--theme-color-std-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  .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';\nimport {\n  iconChevronRightSmall,\n  iconSingleCheck,\n} from '@siemens/ix-icons/icons';\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  /** @internal */\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={iconSingleCheck}\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={iconChevronRightSmall}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","iconSingleCheck","iconChevronRightSmall"],"mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ohFAAohF;;MC8B/hF,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAkBE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;;AAGjB,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AAyEhC;;AAlEC,IAAA,MAAM,aAAa,GAAA;QACjB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;;;AAKvC,IAAA,MAAM,sBAAsB,GAAA;QAC1B,OAAO,IAAI,CAAC,WAAW;;IAGjB,UAAU,GAAA;AAChB,QAAA,QACE,IAAI,CAAC,KAAK,KAAK,SAAS;AACxB,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,KAAK,EAAE;AACjC,YAAA,IAAI,CAAC,IAAI,KAAK,SAAS;;IAI3B,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,gBAAA,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,SAAS;aACxB,EACD,IAAI,EAAC,UAAU,EAAA,EAEfD,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,kBAAkB,EAAE,IAAI,CAAC,eAAe;AACzC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EAAA,EAElC,CAAC,IAAI,CAAC,eAAe,IACpBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,OAAO,IACXA,OACE,CAAA,SAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EACjB,IAAI,EAAEE,uBAAe,EACrB,IAAI,EAAC,IAAI,EAAA,CACA,IACT,IAAI,CACJ,IACJ,IAAI,EACP,IAAI,CAAC,IAAI,IACRF,OAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,IAC7D,IAAI,EACRA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,KAAK,EACXA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACL,IAAI,CAAC,SAAS,IACbA,OAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAEG,6BAAqB,EAC3B,KAAK,EAAE,cAAc,EACZ,CAAA,IACT,IAAI,CACD,CACJ;;;;;;;;"}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-DUl1Kp3_.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 DropdownQuickActions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '061157db21ab43a8655d1e5bc3cc834dc1470e38' }, index.h("slot", { key: 'c5af168d94e40f1deb0e82558778e43a9f5c684f' })));
+    }
+};
+DropdownQuickActions.style = dropdownQuickActionsCss;
+
+exports.ix_dropdown_quick_actions = DropdownQuickActions;
+//# sourceMappingURL=ix-dropdown-quick-actions.entry.cjs.js.map
+
+//# 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;;MCkB9N,oBAAoB,GAAA,MAAA;;;;IAC/B,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","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}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ix-dropdown-quick-actions.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,uBAAuB,GAAG,2MAA2M;;MCkB9N,oBAAoB,GAAA,MAAA;;;;IAC/B,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}