npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

package/dist/cjs/ix-date-time-card.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
-const dateTimeCardCss = ".card.sc-ix-date-time-card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset}.card.individual.sc-ix-date-time-card{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}.card.left.sc-ix-date-time-card{border-radius:4px 0 0 4px;height:100%}.card.right.sc-ix-date-time-card{border-radius:0 4px 4px 0;height:100%}.card.sc-ix-date-time-card .header.sc-ix-date-time-card{padding:1rem}.card.sc-ix-date-time-card .separator.sc-ix-date-time-card{border:1px solid var(--theme-datepicker-separator--background);width:100%}.card.sc-ix-date-time-card .content.sc-ix-date-time-card{height:100%;padding:0px 1rem 1rem 1rem}";
+const dateTimeCardCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.individual{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);border:1px solid var(--theme-menu--border-color);border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0px 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
 const DateTimeCard = class {
   constructor(hostRef) {
@@ -23,7 +23,6 @@ const DateTimeCard = class {
   render() {
     return (index.h(index.Host, null, index.h("div", { class: this.cardClasses() }, index.h("div", { class: "header" }, index.h("slot", { name: "header" })), index.h("div", { class: "separator" }), index.h("div", { class: "content" }, index.h("slot", null)))));
   }
-  get hostElement() { return index.getElement(this); }
 };
 DateTimeCard.style = dateTimeCardCss;

package/dist/cjs/ix-date-time-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-date-time-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,~~mxBAAmxB~~;;~~MCqB9xB~~,YAAY;;;~~sBAMO~~,IAAI;mBAKK,SAAS;;EAExC,WAAW;IACjB,OAAO;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;MAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;KAChC,CAAC;GACH;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5BA,iBAAK,KAAK,EAAC,QAAQ,IACjBA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAENA,iBAAK,KAAK,EAAC,WAAW,GAAO,EAE7BA,iBAAK,KAAK,EAAC,SAAS,IAClBA,qBAAa,CACT,CACF,CACD,EACP;GACH~~;;;;;;;~~","names":["h","Host"],"sources":["./src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=~~scoped~~","./src/components/date-time-card/date-time-card.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.card {\n background-color: var(--theme-menu--background);\n width: 100%;\n box-shadow: none;\n border: none;\n border-radius: unset;\n\n &.individual {\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1)~~,\n~~ 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n 0 12px 18px 0px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--theme-menu--border-color);\n border-radius: 4px;\n }\n\n &.left {\n border-radius: 4px 0 0 4px;\n height: 100%;\n }\n\n &.right {\n border-radius: 0 4px 4px 0;\n height: 100%;\n }\n\n .header {\n padding: $default-space;\n }\n\n .separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n }\n\n .content {\n ~~height: 100%;\n~~ padding: 0px $default-space $default-space $default-space;\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, ~~Element,~~ h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' \| 'left' \| 'right';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-date-time-card',\n styleUrl: 'date-time-card.scss',\n ~~scoped~~: true,\n})\nexport class DateTimeCard {\n ~~@Element() hostElement: HTMLIxDateTimeCardElement;\n\n~~ /\n set styles\n /\n @Prop() individual: boolean = true;\n\n /\n Set corners style\n */\n @Prop() corners: DateTimeCardCorners = 'rounded';\n\n private cardClasses() {\n return {\n card: true,\n individual: this.individual,\n left: this.corners === 'left',\n right: this.corners === 'right',\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClasses()}>\n <div class=\"header\">\n <slot name=\"header\"></slot>\n </div>\n\n <div class=\"separator\"></div>\n\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-date-time-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,myBAAmyB;;MCqB9yB,YAAY;;;sBAIO,IAAI;mBAKK,SAAS;;EAExC,WAAW;IACjB,OAAO;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;MAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;KAChC,CAAC;GACH;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5BA,iBAAK,KAAK,EAAC,QAAQ,IACjBA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAENA,iBAAK,KAAK,EAAC,WAAW,GAAO,EAE7BA,iBAAK,KAAK,EAAC,SAAS,IAClBA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","./src/components/date-time-card/date-time-card.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 .card {\n background-color: var(--theme-menu--background);\n width: 100%;\n box-shadow: none;\n border: none;\n border-radius: unset;\n display: flex;\n flex-direction: column;\n\n &.individual {\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n 0 12px 18px 0px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--theme-menu--border-color);\n border-radius: 4px;\n }\n\n &.left {\n border-radius: 4px 0 0 4px;\n height: 100%;\n }\n\n &.right {\n border-radius: 0 4px 4px 0;\n height: 100%;\n }\n\n .header {\n padding: $default-space;\n flex: 0 1 auto;\n }\n\n .separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n flex: 0 1 auto;\n }\n\n .content {\n padding: 0px $default-space $default-space $default-space;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\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, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' \| 'left' \| 'right';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-date-time-card',\n styleUrl: 'date-time-card.scss',\n shadow: true,\n})\nexport class DateTimeCard {\n /\n set styles\n /\n @Prop() individual: boolean = true;\n\n /\n Set corners style\n */\n @Prop() corners: DateTimeCardCorners = 'rounded';\n\n private cardClasses() {\n return {\n card: true,\n individual: this.individual,\n left: this.corners === 'left',\n right: this.corners === 'right',\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClasses()}>\n <div class=\"header\">\n <slot name=\"header\"></slot>\n </div>\n\n <div class=\"separator\"></div>\n\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
-const datetimePickerCss = ".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.btn-select-date.sc-ix-datetime-picker{position:absolute;bottom:1rem;right:1rem}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
+const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:32.6875rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .flex{display:flex;justify-content:center}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem}:host .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";
 const DateTimePicker = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"ix-datetime-picker.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~maAAma~~;;~~MC2Bhb~~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","names":["h","Host"],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=~~scoped~~","./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\n:host {\n display: block;\n background-color: var(--theme-menu--background);\n border-radius: 4px;\n position: relative;\n width: 32.6875rem;\n}\n\n.flex {\n display: flex;\n justify-content: center;\n}\n\n.btn-select-date{\n position: absolute;\n bottom: $default-space;\n right: $default-space;\n}\n\n.separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n margin-top: 72px;\n height: 1px;\n}\n","/\n * 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 { DateChangeEvent } from '~~src~~/~~components~~';\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 ~~scoped~~: true,\n})\nexport class DateTimePicker {\n /\n Set range size\n /\n @Prop() range = true;\n\n /\n Show hour input\n /\n @Prop() showHour = false;\n\n /\n Show minutes input\n /\n @Prop() showMinutes = false;\n\n /\n Show seconds input\n /\n @Prop() showSeconds = false;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n \n @since 1.1.0\n /\n @Prop() minDate: string;\n\n /\n The latest date that can be selected by the date picker.\n * If not set there will be no restriction.\n \n @since 1.1.0\n /\n @Prop() maxDate: string;\n\n /\n Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n /\n Time format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() timeFormat: string = 'TT';\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n \n Format is based on `format`\n \n @since 1.1.0\n /\n @Prop() from: string;\n\n /\n Picker date. If the picker is in range mode this property is the end date.\n * If the picker is not in range mode leave this value `null`\n \n Format is based on `format`\n \n @since 1.1.0\n /\n @Prop() to: string \| null = null;\n\n /\n Select time with format string\n \n @since 1.1.0\n /\n @Prop() time: string;\n\n /\n Show time reference input\n * Time reference is default aligned with @see {this.timeFormat}\n \n @since 1.1.0\n /\n @Prop() showTimeReference = undefined;\n\n /\n Default behavior of the done event is to join the two events (date and time) into one combined string output.\n * This combination can be configured over the delimiter\n \n @since 1.1.0\n /\n @Prop() eventDelimiter = ' - ';\n\n /\n Set time reference\n /\n @Prop() timeReference: 'AM' \| 'PM';\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectDate = 'Done';\n\n /\n Done event\n \n Set `doneEventDelimiter` to null or undefine to get the typed event\n /\n @Event() done: EventEmitter<string>;\n\n /\n Time change\n \n @since 1.1.0\n /\n @Event() timeChange: EventEmitter<string>;\n\n /\n Date change\n \n @since 1.1.0\n /\n @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n /\n Date selection event is fired after confirm button is pressend\n \n @since 1.1.0\n */\n @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n private datePickerElement: HTMLIxDatePickerElement;\n private timePickerElement: HTMLIxTimePickerElement;\n\n private _from: string;\n private _to: string;\n private _time: string;\n\n private onDone() {\n this.done.emit(\n [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n );\n\n this.dateSelect.emit({\n from: this._from,\n to: this._to,\n time: this._time,\n });\n }\n\n private async onDateChange(event: CustomEvent<string \| DateChangeEvent>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: date } = event;\n this.dateChange.emit(date);\n\n const currentDateTime = await this.datePickerElement.getCurrentDate();\n this._from = currentDateTime.start;\n this._to = currentDateTime.end;\n }\n\n private async onTimeChange(event: CustomEvent<string>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: time } = event;\n this.timeChange.emit(time);\n\n const currentDateTime = await this.timePickerElement.getCurrentTime();\n this._time = currentDateTime;\n }\n\n componentDidLoad() {\n this._from = this.from;\n this._to = this.to;\n this._time = this.time;\n }\n\n render() {\n return (\n <Host>\n <div class=\"flex\">\n <div class=\"separator\"></div>\n <ix-date-picker\n ref={(ref) => (this.datePickerElement = ref)}\n corners=\"left\"\n individual={false}\n range={this.range}\n onDateChange={(event) => this.onDateChange(event)}\n from={this.from}\n to={this.to}\n format={this.dateFormat}\n minDate={this.minDate}\n maxDate={this.maxDate}\n eventDelimiter={this.eventDelimiter}\n ></ix-date-picker>\n\n <ix-time-picker\n ref={(ref) => (this.timePickerElement = ref)}\n corners=\"right\"\n individual={false}\n showHour={this.showHour}\n showMinutes={this.showMinutes}\n showSeconds={this.showSeconds}\n showTimeReference={this.showTimeReference}\n onTimeChange={(event) => this.onTimeChange(event)}\n time={this.time}\n format={this.timeFormat}\n timeReference={this.timeReference}\n ></ix-time-picker>\n <div class=\"separator\"></div>\n </div>\n\n <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n {this.textSelectDate}\n </ix-button>\n </Host>\n );\n }\n}\n"],"version":3}
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: 32.6875rem;\n\n .flex {\n display: flex;\n justify-content: center;\n }\n\n .btn-select-date {\n position: absolute;\n bottom: $default-space;\n right: $default-space;\n }\n\n .separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n margin-top: 72px;\n height: 1px;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\n\nexport type DateTimeSelectEvent = {\n from: string;\n to: string;\n time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n \| string\n \| Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n tag: 'ix-datetime-picker',\n styleUrl: 'datetime-picker.scss',\n shadow: true,\n})\nexport class DateTimePicker {\n /\n Set range size\n /\n @Prop() range = true;\n\n /\n Show hour input\n /\n @Prop() showHour = false;\n\n /\n Show minutes input\n /\n @Prop() showMinutes = false;\n\n /\n Show seconds input\n /\n @Prop() showSeconds = false;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n \n @since 1.1.0\n /\n @Prop() minDate: string;\n\n /\n The latest date that can be selected by the date picker.\n * If not set there will be no restriction.\n \n @since 1.1.0\n /\n @Prop() maxDate: string;\n\n /\n Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n /\n Time format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() timeFormat: string = 'TT';\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n \n Format is based on `format`\n \n @since 1.1.0\n /\n @Prop() from: string;\n\n /\n Picker date. If the picker is in range mode this property is the end date.\n * If the picker is not in range mode leave this value `null`\n \n Format is based on `format`\n \n @since 1.1.0\n /\n @Prop() to: string \| null = null;\n\n /\n Select time with format string\n \n @since 1.1.0\n /\n @Prop() time: string;\n\n /\n Show time reference input\n * Time reference is default aligned with @see {this.timeFormat}\n \n @since 1.1.0\n /\n @Prop() showTimeReference = undefined;\n\n /\n Default behavior of the done event is to join the two events (date and time) into one combined string output.\n * This combination can be configured over the delimiter\n \n @since 1.1.0\n /\n @Prop() eventDelimiter = ' - ';\n\n /\n Set time reference\n /\n @Prop() timeReference: 'AM' \| 'PM';\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectDate = 'Done';\n\n /\n Done event\n \n Set `doneEventDelimiter` to null or undefine to get the typed event\n /\n @Event() done: EventEmitter<string>;\n\n /\n Time change\n \n @since 1.1.0\n /\n @Event() timeChange: EventEmitter<string>;\n\n /\n Date change\n \n @since 1.1.0\n /\n @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n /\n Date selection event is fired after confirm button is pressend\n \n @since 1.1.0\n */\n @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n private datePickerElement: HTMLIxDatePickerElement;\n private timePickerElement: HTMLIxTimePickerElement;\n\n private _from: string;\n private _to: string;\n private _time: string;\n\n private onDone() {\n this.done.emit(\n [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n );\n\n this.dateSelect.emit({\n from: this._from,\n to: this._to,\n time: this._time,\n });\n }\n\n private async onDateChange(event: CustomEvent<string \| DateChangeEvent>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: date } = event;\n this.dateChange.emit(date);\n\n const currentDateTime = await this.datePickerElement.getCurrentDate();\n this._from = currentDateTime.start;\n this._to = currentDateTime.end;\n }\n\n private async onTimeChange(event: CustomEvent<string>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: time } = event;\n this.timeChange.emit(time);\n\n const currentDateTime = await this.timePickerElement.getCurrentTime();\n this._time = currentDateTime;\n }\n\n componentDidLoad() {\n this._from = this.from;\n this._to = this.to;\n this._time = this.time;\n }\n\n render() {\n return (\n <Host>\n <div class=\"flex\">\n <div class=\"separator\"></div>\n <ix-date-picker\n ref={(ref) => (this.datePickerElement = ref)}\n corners=\"left\"\n individual={false}\n range={this.range}\n onDateChange={(event) => this.onDateChange(event)}\n from={this.from}\n to={this.to}\n format={this.dateFormat}\n minDate={this.minDate}\n maxDate={this.maxDate}\n eventDelimiter={this.eventDelimiter}\n ></ix-date-picker>\n\n <ix-time-picker\n ref={(ref) => (this.timePickerElement = ref)}\n corners=\"right\"\n individual={false}\n showHour={this.showHour}\n showMinutes={this.showMinutes}\n showSeconds={this.showSeconds}\n showTimeReference={this.showTimeReference}\n onTimeChange={(event) => this.onTimeChange(event)}\n time={this.time}\n format={this.timeFormat}\n timeReference={this.timeReference}\n ></ix-time-picker>\n <div class=\"separator\"></div>\n </div>\n\n <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n {this.textSelectDate}\n </ix-button>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
 const dividerCss = ":host{display:block;position:relative;width:100%;border:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
 const anime_es = require('./anime.es-8822f296.js');
 const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .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}";
@@ -84,6 +84,9 @@ const Drawer = class {
       },
     });
   }
+  componentDidLoad() {
+    this.onShowChanged(this.show);
+  }
   render() {
     return (index.h(index.Host, { class: {
         'drawer-container': true,

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

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

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

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
-const dropdownButtonCss = ".sc-ix-dropdown-button-h{display:inline-block;position:relative;height:2rem;width:auto}.disabled.sc-ix-dropdown-button-h{pointer-events:none}.sc-ix-dropdown-button-h .hide.sc-ix-dropdown-button{display:none}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button{display:block;position:relative;width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button>ix-button.sc-ix-dropdown-button{width:100%;height:100%}.sc-ix-dropdown-button-h .dropdown-button.sc-ix-dropdown-button .button-label.sc-ix-dropdown-button{margin-right:auto}.sc-ix-dropdown-button-h .triangle.sc-ix-dropdown-button{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color)}.sc-ix-dropdown-button-h .triangle.primary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.primary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-primary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.outline.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color)}.sc-ix-dropdown-button-h .triangle.secondary.ghost.disabled.sc-ix-dropdown-button{color:var(--theme-btn-invisible-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.outline.disabled.sc-ix-dropdown-button{color:var(--theme-btn-outline-secondary--color--disabled)}.sc-ix-dropdown-button-h .triangle.secondary.disabled.sc-ix-dropdown-button{color:var(--theme-btn-secondary--color--disabled)}.sc-ix-dropdown-button-h .dropdown.sc-ix-dropdown-button{width:auto !important;inset:auto !important;transform:unset !important}";
+const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}: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}:host .triangle{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .dropdown{width:auto !important;inset:auto !important;transform:unset !important}:host(.disabled){pointer-events:none}";
 const DropdownButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.variant = 'Primary';
+    this.variant = 'primary';
     this.outline = false;
     this.ghost = false;
     this.active = false;
@@ -22,8 +22,8 @@ const DropdownButton = class {
     return (index.h("div", { class: {
         triangle: true,
         hide: this.label !== '',
-        primary: this.variant === 'Primary',
-        secondary: this.variant === 'Secondary',
+        primary: this.variant === 'primary',
+        secondary: this.variant === 'secondary',
         ghost: this.ghost,
         outline: this.outline,
         disabled: this.disabled,
@@ -34,8 +34,9 @@ const DropdownButton = class {
         disabled: this.disabled,
       } }, index.h("div", { class: "dropdown-button", ref: (ref) => {
         this.dropdownAnchor = ref;
-      } }, this.label ? (index.h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, index.h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), 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", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, index.h("slot", null))));
+      } }, this.label ? (index.h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }, index.h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), 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", { class: "dropdown", trigger: this.dropdownAnchor, positioningStrategy: 'fixed' }, index.h("slot", null))));
   }
+  get hostElement() { return index.getElement(this); }
 };
 DropdownButton.style = dropdownButtonCss;

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

	@@ -1 +1 @@
1	- {"file":"ix-dropdown-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~wyEAAwyE~~;;~~MCsBrzE~~,cAAc;;;~~mBAIgB~~,SAAS;mBAKhC,KAAK;iBAKP,KAAK;~~kBAKJ~~,KAAK;oBAKH,KAAK;;;;;EAchB,WAAW;IACjB,QACEA,iBACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEDD,iBACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,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,IAEvBA,qBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,GACnD,EACXA,iBAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9CA,qBAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CAC7C,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,yBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,~~SAAS,EAAC,QAAQ,EAClB,~~mBAAmB,EAAE,OAAO,~~EAC5B~~,~~mCAAmC,EAAE,IAAI,IAEzCA,~~qBAAa,CACD,CACT,EACP;GACH~~;;;;;;~~","names":["h","Host"],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=~~scoped~~","./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\n:host {\n display: inline-block;\n position: relative;\n height: $x-large-space;\n width: auto;\n\n ~~&.disabled {\n pointer-events: none;\n }\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 }\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 .dropdown {\n width: auto !important;\n inset: auto !important;\n transform: unset !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 { Component, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\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 ~~scoped~~: true,\n})\nexport class DropdownButton {\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 Active button\n /\n @Prop() active = 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 @State() dropdownAnchor!: HTMLElement;\n\n private getTriangle() {\n return (\n <div\n class={{\n triangle: true,\n hide: this.label !== '',\n primary: this.variant === '~~Primary~~',\n secondary: this.variant === '~~Secondary~~',\n ghost: this.ghost,\n outline: this.outline,\n disabled: this.disabled,\n }}\n ></div>\n );\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n >\n <div\n class=\"dropdown-button\"\n ref={(ref) => {\n this.dropdownAnchor = ref;\n }}\n >\n {this.label ? (\n <ix-button\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n >\n <ix-icon\n name={this.icon}\n size=\"24\"\n class={{ hide: this.icon === '' \|\| this.icon === undefined }}\n ></ix-icon>\n <div class={'button-label'}>{this.label}</div>\n <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\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=\"bottom\"\n~~ positioningStrategy={'fixed'}\n ~~adjustDropdownWidthToReferenceWidth={true}\n~~ >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-dropdown-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,qoDAAqoD;;MCsBlpD,cAAc;;;mBAMgB,SAAS;mBAKhC,KAAK;iBAKP,KAAK;kBAMJ,KAAK;oBAKH,KAAK;;;;;EAchB,WAAW;IACjB,QACEA,iBACE,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,GACI,EACP;GACH;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEDD,iBACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAC,GAAG;QACP,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;OAC3B,IAEA,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,IAEvBA,qBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,GACnD,EACXA,iBAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9CA,qBAAS,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAC,IAAI,GAAW,CAC7C,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,yBACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,mBAAmB,EAAE,OAAO,IAE5BA,qBAAa,CACD,CACT,EACP;GACH;;;;;;;","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 }\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 .dropdown {\n width: auto !important;\n inset: auto !important;\n transform: unset !important;\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';\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 Active button (has no effect)\n * @deprecated Will be removed in 3.0.0\n /\n @Prop() active = 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 @State() dropdownAnchor!: HTMLElement;\n\n private getTriangle() {\n return (\n <div\n class={{\n triangle: true,\n hide: this.label !== '',\n primary: this.variant === 'primary',\n secondary: this.variant === 'secondary',\n ghost: this.ghost,\n outline: this.outline,\n disabled: this.disabled,\n }}\n ></div>\n );\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n >\n <div\n class=\"dropdown-button\"\n ref={(ref) => {\n this.dropdownAnchor = ref;\n }}\n >\n {this.label ? (\n <ix-button\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n >\n <ix-icon\n name={this.icon}\n size=\"24\"\n class={{ hide: this.icon === '' \|\| this.icon === undefined }}\n ></ix-icon>\n <div class={'button-label'}>{this.label}</div>\n <ix-icon name=\"chevron-down-small\" size=\"24\"></ix-icon>\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 positioningStrategy={'fixed'}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1 @@

+ {"file":"ix-dropdown-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,uOAAuO;;MCmBpP,cAAc;;;;;EAMzB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,2BAAe,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,IAC5D,IAAI,CAAC,KAAK,CACG,CACX,EACP;GACH;;;;;;","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-quick-actions.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-e56a1d39.js');
 const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;-webkit-margin-start:1.5rem;margin-inline-start:1.5rem;-webkit-margin-end:1.5rem;margin-inline-end:1.5rem;-webkit-margin-after:0.25rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;-webkit-margin-end:0.625rem;margin-inline-end:0.625rem}";

package/dist/cjs/ix-dropdown_2.cjs.entry.js CHANGED Viewed

@@ -2,30 +2,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-01fe5abe.js');
+const index = require('./index-e56a1d39.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-b79b633f.js');
-const dropdownCss = ".dropup,.dropend,.dropdown,.dropstart,.dropup-center,.dropdown-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid;border-right:0.3em solid transparent;border-bottom:0;border-left:0.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:#212529;--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:0.375rem;--bs-dropdown-border-width:1px;--bs-dropdown-inner-border-radius:calc(0.375rem - 1px);--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-dropdown-link-color:#212529;--bs-dropdown-link-hover-color:#1e2125;--bs-dropdown-link-hover-bg:#e9ecef;--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width: 576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width: 1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0;border-right:0.3em solid transparent;border-bottom:0.3em solid;border-left:0.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0;border-bottom:0.3em solid transparent;border-left:0.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:0.255em;vertical-align:0.255em;content:\"\"}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:0.255em;vertical-align:0.255em;content:\"\";border-top:0.3em solid transparent;border-right:0.3em solid;border-bottom:0.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:0.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color 150ms;box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}:host{min-width:0px}:host(.overflow){max-height:50vh;overflow-y:auto}";
+const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";
+const dropdownDisposer = new Map();
+let sequenceId = 0;
 const Dropdown = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showChanged = index.createEvent(this, "showChanged", 7);
     this.autoUpdateCleanup = null;
+    this.localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;
+    this.suppressAutomaticPlacement = false;
     this.show = false;
     this.trigger = undefined;
     this.anchor = undefined;
     this.closeBehavior = 'both';
     this.placement = 'bottom-start';
     this.positioningStrategy = 'fixed';
-    this.adjustDropdownWidthToReferenceWith = false;
-    this.adjustDropdownWidthToReferenceWidth = false;
     this.header = undefined;
     this.offset = undefined;
     this.triggerEvent = 'click';
     this.overwriteDropdownStyle = undefined;
     this.toggleBind = this.toggle.bind(this);
     this.openBind = this.open.bind(this);
+    if (dropdownDisposer.has(this.localUId)) {
+      console.warn('Dropdown with duplicated id detected');
+    }
+    dropdownDisposer.set(this.localUId, this.close.bind(this));
   }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
@@ -120,6 +126,13 @@ const Dropdown = class {
         this.applyDropdownPosition();
       }
     }
+    if (newShow) {
+      dropdownDisposer.forEach((dispose, id) => {
+        if (id !== this.localUId && !this.isAnchorSubmenu()) {
+          dispose();
+        }
+      });
+    }
   }
   changedTrigger(newTriggerValue, oldTriggerValue) {
     if (newTriggerValue) {
@@ -141,20 +154,26 @@ const Dropdown = class {
     switch (this.closeBehavior) {
       case 'outside':
         if (!this.dropdownRef.contains(target)) {
-          this.close();
+          this.close(event);
         }
         break;
       case 'inside':
         if (this.dropdownRef.contains(target) && this.hostElement !== target) {
-          this.close();
+          this.close(event);
         }
         break;
       case 'both':
-        if (this.hostElement !== target)
-          this.close();
+        if (this.hostElement !== target) {
+          this.close(event);
+        }
         break;
       default:
-        this.close();
+        this.close(event);
+    }
+  }
+  keydown(event) {
+    if (this.show === true && event.code === 'Escape') {
+      this.close();
     }
   }
   isNestedDropdown(element) {
@@ -186,7 +205,12 @@ const Dropdown = class {
   }
   close(event) {
     if (event === null || event === void 0 ? void 0 : event.defaultPrevented) {
-      return;
+      const target = event.target;
+      if (target.contains(this.anchorElement) ||
+        target.contains(this.triggerElement) ||
+        target.shadowRoot.contains(this.anchorElement) ||
+        target.shadowRoot.contains(this.triggerElement))
+        return;
     }
     this.show = false;
     this.showChanged.emit(false);
@@ -203,16 +227,10 @@ const Dropdown = class {
       strategy: this.positioningStrategy,
       middleware: [],
     };
-    if (isSubmenu) {
-      positionConfig.placement = 'right-start';
-    }
-    if (this.placement.includes('auto') || isSubmenu) {
+    if (!this.suppressAutomaticPlacement) {
       positionConfig.middleware.push(floatingUi_dom_esm.flip({ fallbackStrategy: 'initialPlacement' }));
-      positionConfig.placement = 'bottom-start';
-    }
-    else {
-      positionConfig.placement = this.placement;
     }
+    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;
     positionConfig.middleware = [
       ...positionConfig.middleware,
       floatingUi_dom_esm.inline(),
@@ -247,16 +265,27 @@ const Dropdown = class {
   }
   async componentDidLoad() {
     if (this.trigger) {
-      this.registerListener(this.trigger);
+      this.changedTrigger(this.trigger, null);
     }
   }
   async componentDidRender() {
+    var _a;
     await this.applyDropdownPosition();
+    this.anchorElement = await (this.anchor
+      ? this.resolveElement(this.anchor)
+      : this.resolveElement(this.trigger));
+    if (this.isAnchorSubmenu() &&
+      ((_a = this.anchorElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'IX-DROPDOWN-ITEM') {
+      this.anchorElement.isSubMenu = true;
+    }
   }
   disconnectedCallback() {
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
     }
+    if (dropdownDisposer.has(this.localUId)) {
+      dropdownDisposer.delete(this.localUId);
+    }
   }
   /**
    * Update position of dropdown
@@ -273,7 +302,7 @@ const Dropdown = class {
         margin: '0',
         minWidth: '0px',
         position: this.positioningStrategy,
-      } }, index.h("div", { style: { display: 'contents' } }, this.header ? index.h("div", { class: "dropdown-header" }, this.header) : '', index.h("slot", null))));
+      }, role: "list" }, index.h("div", { style: { display: 'contents' } }, this.header ? index.h("div", { class: "dropdown-header" }, this.header) : '', index.h("slot", null))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
@@ -283,7 +312,10 @@ const Dropdown = class {
 };
 Dropdown.style = dropdownCss;
-const dropdownItemCss = ".sc-ix-dropdown-item-h{display:block}.icon-only.sc-ix-dropdown-item-h{min-width:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item>.glyph.sc-ix-dropdown-item{-webkit-margin-end:0;margin-inline-end:0}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item{padding:0.25rem 0.5rem}.icon-only.sc-ix-dropdown-item-h .dropdown-item.sc-ix-dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-dropdown-item-h .sc-ix-dropdown-item:focus{background-color:transparent;color:var(--theme-menu-item--color)}.sc-ix-dropdown-item-h .checkmark.sc-ix-dropdown-item{position:absolute;left:0.5rem}.checked.sc-ix-dropdown-item-h{background-color:var(--theme-select-list-item--background--selected)}.sc-ix-dropdown-item-h .label.sc-ix-dropdown-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.disabled.sc-ix-dropdown-item-h{pointer-events:none}.sc-ix-dropdown-item-s>ix-icon{-webkit-margin-start:auto;margin-inline-start:auto}";
+/* Siemens iX Icons (1.1.2) */
+const chevronRightSmall = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>chevron-right-small</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(187.520000, 134.186667)'><polygon id='arrowhead-right' points='30.2933333 243.626667 0 213.333333 91.7333333 121.813333 0 30.2933333 30.2933333 0 151.893333 121.813333'/></g></g></svg>";
+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 .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 - 0.125rem);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 - 0.125rem);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 - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);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) {
@@ -294,6 +326,8 @@ const DropdownItem = class {
     this.hover = false;
     this.disabled = false;
     this.checked = false;
+    this.isSubMenu = false;
+    this.suppressChecked = false;
   }
   /**
    * Internal usage only
@@ -301,21 +335,21 @@ const DropdownItem = class {
   async emitItemClick() {
     this.itemClick.emit(this.hostElement);
   }
+  isIconOnly() {
+    return (this.label === undefined &&
+      this.hostElement.innerText === '' &&
+      this.icon !== undefined);
+  }
   render() {
     return (index.h(index.Host, { class: {
-        checked: this.checked,
-        'icon-text': this.label !== undefined && this.icon !== undefined,
-        'icon-only': this.label === undefined && this.icon !== undefined,
-        disabled: this.disabled,
-      } }, index.h("button", { type: "button", class: {
-        'dropdown-item': true,
         hover: this.hover,
+        'icon-only': this.isIconOnly(),
         disabled: this.disabled,
-      }, onClick: () => this.emitItemClick(), tabindex: 0 }, this.checked ? (index.h("ix-icon", { class: "checkmark", name: "single-check", size: "16" })) : null, this.icon ? (index.h("span", { class: {
-        glyph: true,
-        [`glyph-${this.icon}`]: true,
-        disabled: this.disabled,
-      } })) : null, this.label ? index.h("span", { class: "label" }, this.label) : null, index.h("slot", null))));
+        submenu: this.isSubMenu,
+      }, role: "listitem" }, index.h("button", { 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", { class: "dropdown-item-text" }, this.label, index.h("slot", null)), this.isSubMenu ? (index.h("ix-icon", { name: chevronRightSmall, class: 'submenu-icon' })) : null)));
   }
   get hostElement() { return index.getElement(this); }
 };