npm - @siemens/ix - Versions diffs - 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832 - Mend

@siemens/ix 0.0.0-pr-1373-20240705054533 → 0.0.0-pr-1522-20241022123832

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 (1191) hide show

package/components/ix-date-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-date-dropdown.js","mappings":"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","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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 display: inline-block;\n position: relative;\n\n @media (max-width: 48em) {\n .min-width {\n width: min-content;\n }\n }\n\n @media (min-width: 48em) {\n .border-right {\n border-right: var(--theme-x-weak-bdr-2);\n }\n }\n\n ix-button {\n width: 100%;\n }\n\n .max-height {\n max-height: max-content;\n }\n\n .no-margin {\n margin: 0;\n padding: 0;\n }\n\n .pull-right {\n float: right;\n padding: $tiny-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 {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n id: string;\n label: string;\n from: string;\n to: string;\n};\n\nexport type DateRangeChangeEvent = {\n id: string;\n from: string;\n to: string;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-date-dropdown',\n styleUrl: 'date-dropdown.scss',\n shadow: true,\n})\nexport class DateDropdown {\n @Element() hostElement: HTMLIxDateDropdownElement;\n\n /\n Disable the button that opens the dropdown containing the date picker.\n \n @since 2.3.0\n /\n @Prop() disabled = false;\n\n /\n Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n /\n @Prop() format = 'yyyy/LL/dd';\n\n /\n If true a range of dates can be selected.\n /\n @Prop() range = true;\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n * If set to `null` no default start date will be pre-selected.\n \n Format is based on `format`\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 @Prop() to: string;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() minDate: string;\n\n /\n The latest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() maxDate: string;\n\n /\n Used to set the initial select date range as well as the button name,\n * if not set or no according date range label is found, nothing will be selected\n /\n @Prop() dateRangeId = 'custom';\n @Watch('dateRangeId')\n @Watch('to')\n @Watch('from')\n onDateRangeIdChange() {\n this.onRangeListSelect(this.dateRangeId);\n this.updateCurrentDate();\n this.setDateRangeSelection(this.dateRangeId);\n\n this.onDateSelect({\n from: this.currentRangeValue.from,\n to: this.currentRangeValue.to,\n id: this.currentRangeValue.id,\n });\n }\n\n /\n Controls whether the user is allowed to pick custom date ranges in the component.\n * When set to 'true', the user can select a custom date range using the date picker.\n * When set to 'false', only predefined time date ranges are available for selection.\n /\n @Prop() customRangeAllowed = true;\n\n /\n An array of predefined date range options for the date picker.\n * Each option is an object with a label describing the range and a function\n * that returns the start and end dates of the range as a DateRangeOption object.\n \n Example format:\n * {\n * id: 'some unique id',\n * label: 'Name of the range',\n * from: undefined, to: '2023/03/29'\n * },\n * // ... other predefined date range options ...\n /\n @Prop() dateRangeOptions: DateDropdownOption[] = [];\n @Watch('dateRangeOptions')\n onDateRangeOptionsChange() {\n this.initialize();\n this.onDateRangeIdChange();\n }\n\n /\n Text for custom dropdown item. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n /* @internal /\n @Prop() today = DateTime.now().toISO();\n\n /\n EventEmitter for date range change events.\n \n This event is emitted when the date range changes within the component.\n * The event payload contains information about the selected date range.\n /\n @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n @State() private selectedDateRangeId: 'custom' \| (string & {});\n @State() private currentRangeValue: {\n from: string;\n to: string;\n id: string;\n };\n @State() private triggerRef: HTMLElement;\n\n @Watch('disabled')\n onDisabledChange() {\n if (this.disabled) {\n this.closeDropdown();\n }\n }\n private datePickerTouched = false;\n\n componentWillLoad() {\n this.initialize();\n this.setDateRangeSelection(this.dateRangeId);\n }\n\n /\n Retrieves the currently selected date range from the component.\n * This method returns the selected date range as a `DateChangeEvent` object.\n */\n @Method()\n public async getDateRange(): Promise<DateRangeChangeEvent> {\n return this.currentRangeValue;\n }\n\n private initialize() {\n const isCustomRange =\n this.dateRangeId === 'custom' \|\|\n (!this.dateRangeId && !!this.from && !!this.to);\n\n if (isCustomRange && this.customRangeAllowed) {\n this.selectedDateRangeId = 'custom';\n this.updateCurrentDate();\n\n return;\n }\n const isValidConfiguration = !isCustomRange && !this.from;\n if (!isValidConfiguration) {\n console.warn(\n '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n );\n\n this.selectedDateRangeId = 'custom';\n this.updateCurrentDate();\n\n return;\n }\n }\n\n private updateCurrentDate() {\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n }\n\n private onDateSelect(\n rangeValue: { from: string; to: string; id: string },\n preserveDropdown = true\n ) {\n this.dateRangeChange.emit(rangeValue);\n\n if (preserveDropdown) {\n this.closeDropdown();\n }\n\n this.datePickerTouched = false;\n }\n\n private onRangeListSelect(id: string) {\n if (this.setDateRangeSelection(id)) {\n this.onDateSelect(this.currentRangeValue);\n }\n }\n\n private setDateRangeSelection(id: string) {\n this.selectedDateRangeId = id;\n const option = this.dateRangeOptions.find((range) => range.id === id);\n\n if (option) {\n this.currentRangeValue = option;\n }\n\n return option;\n }\n\n private closeDropdown() {\n this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n }\n\n private getButtonLabel() {\n if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n let range = this.currentRangeValue.from;\n\n if (this.currentRangeValue.to) {\n range += ` - ${this.currentRangeValue.to}`;\n }\n\n return range;\n }\n\n if (!this.selectedDateRangeId) {\n return this.i18nNoRange;\n }\n\n if (!this.dateRangeOptions \|\| this.dateRangeOptions?.length === 0) {\n return this.i18nNoRange;\n }\n\n const option = this.dateRangeOptions.find(\n (option) => option.id === this.selectedDateRangeId\n );\n\n if (!option) {\n console.error(\n `Cannot find range option with id ${this.selectedDateRangeId}`\n );\n return this.i18nNoRange;\n }\n\n return option.label;\n }\n\n render() {\n return (\n <Host>\n <ix-button\n data-testid=\"date-dropdown-trigger\"\n data-date-dropdown-trigger\n variant=\"primary\"\n icon=\"history\"\n ref={(ref) => (this.triggerRef = ref)}\n disabled={this.disabled}\n >\n {this.getButtonLabel()}\n </ix-button>\n <ix-dropdown\n data-testid=\"date-dropdown\"\n data-date-dropdown\n class=\"min-width max-height\"\n trigger={this.triggerRef}\n closeBehavior=\"outside\"\n placement=\"bottom-start\"\n onShowChanged={({ detail: show }) => {\n if (\n !show &&\n this.selectedDateRangeId === 'custom' &&\n this.datePickerTouched\n ) {\n this.onDateSelect(this.currentRangeValue);\n }\n }}\n >\n <ix-layout-grid no-margin=\"true\">\n <ix-row>\n {this.dateRangeOptions?.length > 1 && (\n <ix-col\n class={{\n 'no-margin': true,\n 'border-right': this.selectedDateRangeId === 'custom',\n }}\n >\n {this.dateRangeOptions.map((dateRangeOption) => (\n <ix-dropdown-item\n label={dateRangeOption.label}\n onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n checked={this.selectedDateRangeId === dateRangeOption.id}\n ></ix-dropdown-item>\n ))}\n <div hidden={!this.customRangeAllowed}>\n <ix-dropdown-item\n label={this.i18nCustomItem}\n checked={this.selectedDateRangeId === 'custom'}\n onClick={() => this.onRangeListSelect('custom')}\n ></ix-dropdown-item>\n </div>\n </ix-col>\n )}\n <ix-col class=\"no-margin\">\n {this.selectedDateRangeId === 'custom' && (\n <Fragment>\n <ix-date-picker\n standaloneAppearance={false}\n onDateChange={(e) => {\n e.stopPropagation();\n this.currentRangeValue = {\n ...e.detail,\n id: 'custom',\n };\n this.datePickerTouched = true;\n }}\n onDateRangeChange={(e) => e.stopPropagation()}\n format={this.format}\n range={this.range}\n from={this.from \|\| this.currentRangeValue?.from}\n to={this.to \|\| this.currentRangeValue?.to}\n minDate={this.minDate}\n maxDate={this.maxDate}\n today={this.today}\n ></ix-date-picker>\n <div class=\"pull-right\">\n <ix-button\n onClick={() => {\n this.onDateSelect(this.currentRangeValue);\n }}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </Fragment>\n )}\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-date-dropdown.js","mappings":"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","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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 display: inline-block;\n position: relative;\n\n @media (max-width: 48em) {\n .min-width {\n width: min-content;\n }\n }\n\n @media (min-width: 48em) {\n .border-right {\n border-right: var(--theme-x-weak-bdr-2);\n }\n }\n\n ix-button {\n width: 100%;\n }\n\n .max-height {\n max-height: max-content;\n }\n\n .no-margin {\n margin: 0;\n padding: 0;\n }\n\n .pull-right {\n float: right;\n padding: $tiny-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 {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DateDropdownOption = {\n id: string;\n label: string;\n from: string;\n to: string;\n};\n\nexport type DateRangeChangeEvent = {\n id: string;\n from: string;\n to: string;\n};\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-date-dropdown',\n styleUrl: 'date-dropdown.scss',\n shadow: true,\n})\nexport class DateDropdown {\n @Element() hostElement!: HTMLIxDateDropdownElement;\n\n /\n Disable the button that opens the dropdown containing the date picker.\n \n @since 2.3.0\n /\n @Prop() disabled = false;\n\n /\n Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n /\n @Prop() format = 'yyyy/LL/dd';\n\n /\n If true a range of dates can be selected.\n /\n @Prop() range = true;\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n * If set to `null` no default start date will be pre-selected.\n \n Format is based on `format`\n /\n @Prop() from = '';\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 @Prop() to = '';\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() minDate = '';\n\n /\n The latest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @Prop() maxDate = '';\n\n /\n Used to set the initial select date range as well as the button name,\n * if not set or no according date range label is found, nothing will be selected\n /\n @Prop() dateRangeId = 'custom';\n @Watch('dateRangeId')\n @Watch('to')\n @Watch('from')\n onDateRangeIdChange() {\n this.onRangeListSelect(this.dateRangeId);\n this.updateCurrentDate();\n this.setDateRangeSelection(this.dateRangeId);\n\n if (!this.currentRangeValue) {\n return;\n }\n\n this.onDateSelect({\n from: this.currentRangeValue.from,\n to: this.currentRangeValue.to,\n id: this.currentRangeValue.id,\n });\n }\n\n /\n Controls whether the user is allowed to pick custom date ranges in the component.\n * When set to 'true', the user can select a custom date range using the date picker.\n * When set to 'false', only predefined time date ranges are available for selection.\n /\n @Prop() customRangeAllowed = true;\n\n /\n An array of predefined date range options for the date picker.\n * Each option is an object with a label describing the range and a function\n * that returns the start and end dates of the range as a DateRangeOption object.\n \n Example format:\n * {\n * id: 'some unique id',\n * label: 'Name of the range',\n * from: undefined, to: '2023/03/29'\n * },\n * // ... other predefined date range options ...\n /\n @Prop() dateRangeOptions: DateDropdownOption[] = [];\n @Watch('dateRangeOptions')\n onDateRangeOptionsChange() {\n this.initialize();\n this.onDateRangeIdChange();\n }\n\n /\n Text for custom dropdown item. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n /\n Text for the done button. Will be used for translation.\n /\n @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n /* @internal /\n @Prop() today = DateTime.now().toISO();\n\n /\n EventEmitter for date range change events.\n \n This event is emitted when the date range changes within the component.\n * The event payload contains information about the selected date range.\n /\n @Event()\n private readonly dateRangeChange!: EventEmitter<DateRangeChangeEvent>;\n\n @State() private selectedDateRangeId: string = 'custom';\n @State() private currentRangeValue?: {\n from: string;\n to: string;\n id: string;\n };\n private readonly triggerRef = makeRef<HTMLElement>();\n\n @Watch('disabled')\n onDisabledChange() {\n if (this.disabled) {\n this.closeDropdown();\n }\n }\n private datePickerTouched = false;\n\n componentWillLoad() {\n this.initialize();\n this.setDateRangeSelection(this.dateRangeId);\n }\n\n /\n Retrieves the currently selected date range from the component.\n * This method returns the selected date range as a `DateChangeEvent` object.\n */\n @Method()\n public async getDateRange(): Promise<DateRangeChangeEvent> {\n return this.currentRangeValue \|\| { id: '', from: '', to: '' };\n }\n\n private initialize() {\n const isCustomRange =\n this.dateRangeId === 'custom' \|\|\n (!this.dateRangeId && !!this.from && !!this.to);\n\n if (isCustomRange && this.customRangeAllowed) {\n this.selectedDateRangeId = 'custom';\n this.updateCurrentDate();\n\n return;\n }\n const isValidConfiguration = !isCustomRange && !this.from;\n if (!isValidConfiguration) {\n console.warn(\n '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n );\n\n this.selectedDateRangeId = 'custom';\n this.updateCurrentDate();\n\n return;\n }\n }\n\n private updateCurrentDate() {\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n }\n\n private onDateSelect(\n rangeValue: { from: string; to: string; id: string },\n preserveDropdown = true\n ) {\n this.dateRangeChange.emit(rangeValue);\n\n if (preserveDropdown) {\n this.closeDropdown();\n }\n\n this.datePickerTouched = false;\n }\n\n private onRangeListSelect(id: string) {\n if (this.setDateRangeSelection(id) && this.currentRangeValue) {\n this.onDateSelect(this.currentRangeValue);\n }\n }\n\n private setDateRangeSelection(id: string) {\n this.selectedDateRangeId = id;\n const option = this.dateRangeOptions.find((range) => range.id === id);\n\n if (option) {\n this.currentRangeValue = option;\n }\n\n return option;\n }\n\n private closeDropdown() {\n const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n\n if (dropdown) {\n dropdown.show = false;\n }\n }\n\n private getButtonLabel() {\n if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n let range = this.currentRangeValue.from;\n\n if (this.currentRangeValue.to) {\n range += ` - ${this.currentRangeValue.to}`;\n }\n\n return range;\n }\n\n if (!this.selectedDateRangeId) {\n return this.i18nNoRange;\n }\n\n if (!this.dateRangeOptions \|\| this.dateRangeOptions?.length === 0) {\n return this.i18nNoRange;\n }\n\n const option = this.dateRangeOptions.find(\n (option) => option.id === this.selectedDateRangeId\n );\n\n if (!option) {\n console.error(\n `Cannot find range option with id ${this.selectedDateRangeId}`\n );\n return this.i18nNoRange;\n }\n\n return option.label;\n }\n\n render() {\n return (\n <Host>\n <ix-button\n data-testid=\"date-dropdown-trigger\"\n data-date-dropdown-trigger\n variant=\"primary\"\n icon=\"history\"\n ref={this.triggerRef}\n disabled={this.disabled}\n >\n {this.getButtonLabel()}\n </ix-button>\n <ix-dropdown\n data-testid=\"date-dropdown\"\n data-date-dropdown\n class=\"min-width max-height\"\n trigger={this.triggerRef.waitForCurrent()}\n closeBehavior=\"outside\"\n placement=\"bottom-start\"\n onShowChanged={({ detail: show }) => {\n if (\n !show &&\n this.selectedDateRangeId === 'custom' &&\n this.datePickerTouched &&\n this.currentRangeValue\n ) {\n this.onDateSelect(this.currentRangeValue);\n }\n }}\n >\n <ix-layout-grid no-margin=\"true\">\n <ix-row>\n {this.dateRangeOptions?.length > 1 && (\n <ix-col\n class={{\n 'no-margin': true,\n 'border-right': this.selectedDateRangeId === 'custom',\n }}\n >\n {this.dateRangeOptions.map((dateRangeOption) => (\n <ix-dropdown-item\n label={dateRangeOption.label}\n onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n checked={this.selectedDateRangeId === dateRangeOption.id}\n ></ix-dropdown-item>\n ))}\n <div hidden={!this.customRangeAllowed}>\n <ix-dropdown-item\n label={this.i18nCustomItem}\n checked={this.selectedDateRangeId === 'custom'}\n onClick={() => this.onRangeListSelect('custom')}\n ></ix-dropdown-item>\n </div>\n </ix-col>\n )}\n <ix-col class=\"no-margin\">\n {this.selectedDateRangeId === 'custom' && (\n <Fragment>\n <ix-date-picker\n standaloneAppearance={false}\n onDateChange={(e) => {\n e.stopPropagation();\n this.currentRangeValue = {\n ...e.detail,\n id: 'custom',\n };\n this.datePickerTouched = true;\n }}\n onDateRangeChange={(e) => e.stopPropagation()}\n format={this.format}\n range={this.range}\n from={this.from \|\| this.currentRangeValue?.from}\n to={this.to \|\| this.currentRangeValue?.to}\n minDate={this.minDate}\n maxDate={this.maxDate}\n today={this.today}\n ></ix-date-picker>\n <div class=\"pull-right\">\n <ix-button\n onClick={() => {\n if (this.currentRangeValue) {\n this.onDateSelect(this.currentRangeValue);\n }\n }}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </Fragment>\n )}\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-datetime-picker.js CHANGED Viewed

@@ -66,7 +66,7 @@ const DatetimePicker = /*@__PURE__*/ proxyCustomElement(class DatetimePicker ext
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: '245fa3202c8983bc8eff53d4078c2a6a8daa0810' }, h("ix-layout-grid", { key: '1bc34611a653f3dea08ee0be6a336766da38b914', class: "no-padding" }, h("ix-row", { key: '26eef283266f46fb5a19fcaf1d78f985119cec3a' }, h("ix-col", { key: 'd4ac83db8977067d5c178fb48eac1acc1adca898', class: "no-padding" }, h("ix-date-picker", { key: '967af43189787bc677ff273de023b43d9e3b0019', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '53bbc9d021687f71f211b6d4091e421b7374ae56', class: "no-padding" }, h("ix-time-picker", { key: 'da5a855b94d37b1424de7f10804e707e9d082139', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'aa564cb9741fda50e046a508cb9e2ad985ed11d7' }, h("ix-col", { key: 'a13d931565a1165e262070e6e3d637fce6da38c6' }, h("ix-button", { key: '6769327a6e405d2b2705c3a64b4b2031e8f80de4', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (h(Host, { key: '9b01b8df6d5a2639b4a366edb54b74ecb83177fd' }, h("ix-layout-grid", { key: '909420ce17eeec9975cbc926c9d721b3ccb2af96', class: "no-padding" }, h("ix-row", { key: '29bd4647604c309e619238c5d5263280e83df6e4' }, h("ix-col", { key: 'f909e90d55276646b83c1366d629e7e13974a56f', class: "no-padding" }, h("ix-date-picker", { key: '3956832c2249fb43dc71096e73a98e7b8b8a0445', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '2eb19f415cd133e5ac300ce4609a3671c0e76d0a', class: "no-padding" }, h("ix-time-picker", { key: '2ecb2aa268d4c239c69f52d8fba8d4904bb608d8', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'aa43460c810f84730455581102416e420ce38123' }, h("ix-col", { key: 'aa2068f0d7fc63a4677ac666b97b4c1bec82e29a' }, h("ix-button", { key: 'c2f8c11facdec2c40a3218f2faed1b423ff65347', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
     static get style() { return IxDatetimePickerStyle0; }
 }, [1, "ix-datetime-picker", {

package/components/ix-drawer.js CHANGED Viewed

@@ -89,7 +89,7 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement
         this.onShowChanged(this.show);
     }
     render() {
-        return (h(Host, { key: '4cb0a06786c80cd977ebfbbfef6c23d6e7926d86', class: {
+        return (h(Host, { key: 'c33f929791870aa05cd4d7bb80c0e85b0ddbca43', class: {
                 'drawer-container': true,
                 toggle: this.show,
                 'full-height': this.fullHeight,
@@ -98,7 +98,7 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends HTMLElement
                 width: this.width === 'auto' ? this.width : `${this.width}rem`,
                 'min-width': `${this.minWidth}rem`,
                 'max-width': `${this.maxWidth}rem`,
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '63c8952c342a1d412237ab82f96ac063c0a30158', class: "header" }, h("div", { key: '4a8525053f3954b3b83dac4f8b012f005e9725b7', class: "header-content" }, h("slot", { key: '55b887208a3bdc445950c2e5f153cfaa1ba89068', name: "header" })), h("ix-icon-button", { key: '84b5b11f21d4d768c0118450147bf74d6e0a1400', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '00079cfb6504ed6fa44c23209787add116e72591', class: "content" }, h("slot", { key: '3de3610ac265b9eda7d69eedf28494b47861c7e3' }))));
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: 'c7b8195595ae8b6a316439f1c70ab4649feabd3a', class: "header" }, h("div", { key: '0d9e7fe3591cbb237c1f5f12cce45b438088b9ff', class: "header-content" }, h("slot", { key: '3b5d57e5406d3b581d27855a3219ba361065b84d', name: "header" })), h("ix-icon-button", { key: '84e9ecfd1ed9e73fce6c5814d8cbc8631e6e746d', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '91e39d7f77ae9a0357d73d76b71606810649d61c', class: "content" }, h("slot", { key: '4cee96836ef143d25ba7b69520bda47bc9dc768d' }))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]

package/components/ix-dropdown-button.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { m as makeRef } from './make-ref.js';
 import { d as defineCustomElement$5 } from './button.js';
 import { d as defineCustomElement$4 } from './dropdown.js';
 import { d as defineCustomElement$3 } from './icon-button.js';
@@ -12,6 +13,7 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.dropdownAnchor = makeRef();
         this.variant = 'primary';
         this.outline = false;
         this.ghost = false;
@@ -20,7 +22,6 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton ext
         this.icon = undefined;
         this.closeBehavior = 'both';
         this.placement = undefined;
-        this.dropdownAnchor = undefined;
     }
     getTriangle() {
         return (h("div", { class: {
@@ -34,11 +35,9 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton ext
             } }));
     }
     render() {
-        return (h(Host, { key: '8669f7d302b6009aa9ab9cadb3c86e4bbcc6330f', class: {
+        return (h(Host, { key: 'de22caabcde75df5653f3a44066a2510d5356b46', class: {
                 disabled: this.disabled,
-            }, ref: (ref) => {
-                this.dropdownAnchor = ref;
-            } }, h("div", { key: '5561196cfa6584097b0395ca1d4bf61db522b5a8', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '4b738dfff8c84360e1d561560c3b29ba21684de6', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: 'ad15df81aad664b12a3183b45e443b110d2b4393' }))));
+            }, ref: this.dropdownAnchor }, h("div", { key: 'b704fee9b1f8842fe6468c8f510d880e75117208', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: 'd902fac793dc815b6f2aa7259d7f7c3fb8923879', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '173ee7c5e1ded4424fd5693ac802037800b278f9' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxDropdownButtonStyle0; }
@@ -50,8 +49,7 @@ const DropdownButton = /*@__PURE__*/ proxyCustomElement(class DropdownButton ext
         "label": [1],
         "icon": [1],
         "closeBehavior": [8, "close-behavior"],
-        "placement": [1],
-        "dropdownAnchor": [32]
+        "placement": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"ix-dropdown-button.js","mappings":"~~;;;;;;~~AAAA,MAAM,iBAAiB,GAAG,21EAA21E,CAAC;AACt3E,+BAAe,iBAAiB;;~~MCsBnB~~,cAAc;;;;;~~uBAMgB~~,SAAS;uBAKhC,KAAK;qBAKP,KAAK;wBAKF,KAAK;;;6BAgByC,MAAM~~;;;;~~IAW/D,WAAW;QACjB,QACE,WACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,GACI,EACP;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,GAAG,EAAE,~~CAAC,GAAG;gBACP,~~IAAI,CAAC,cAAc,~~GAAG~~,~~GAAG,CAAC;aAC3B,IAED,~~4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,OAAO,IAEjB,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IACR,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,eAAe,GACb,IACT,IAAI,EACR,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAC,IAAI,GAAW,CACrD,CACI,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,oEACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,~~EAC5B~~,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,8DAAa,CACD,CACT,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: inline-block;\n position: relative;\n height: $x-large-space;\n width: auto;\n\n .hide {\n display: none;\n }\n\n .dropdown-button {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .dropdown-button > ix-button {\n width: 100%;\n height: 100%;\n }\n\n .dropdown-button .button-label {\n margin-right: auto;\n min-width: 0px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .dropdown-button .dropdown-icon {\n margin-right: 0.25rem;\n }\n\n .triangle {\n position: absolute;\n margin-inline-start: 1.5625rem;\n margin-block-start: -0.4375rem;\n border-right: 0 solid transparent;\n border-left: 4px solid transparent;\n border-top: 0 solid transparent;\n border-bottom: 4px solid;\n color: var(--theme-btn-primary--color);\n }\n\n .triangle.primary {\n &.ghost {\n color: var(--theme-btn-invisible-primary--color);\n }\n\n &.outline {\n color: var(--theme-btn-outline-primary--color);\n }\n\n &.ghost.disabled {\n color: var(--theme-btn-invisible-primary--color--disabled);\n }\n\n &.outline.disabled {\n color: var(--theme-btn-outline-primary--color--disabled);\n }\n\n &.disabled {\n color: var(--theme-btn-primary--color--disabled);\n }\n }\n\n .triangle.secondary {\n &.ghost {\n color: var(--theme-btn-invisible-secondary--color);\n }\n\n &.outline {\n color: var(--theme-btn-outline-secondary--color);\n }\n\n &.ghost.disabled {\n color: var(--theme-btn-invisible-secondary--color--disabled);\n }\n\n &.outline.disabled {\n color: var(--theme-btn-outline-secondary--color--disabled);\n }\n\n &.disabled {\n color: var(--theme-btn-secondary--color--disabled);\n }\n }\n\n .content {\n display: flex;\n align-items: center;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, ~~State~~ } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/\n @since 1.3.0\n /\n@Component({\n tag: 'ix-dropdown-button',\n styleUrl: 'dropdown-button.scss',\n shadow: true,\n})\nexport class DropdownButton {\n @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n /\n Button variant\n /\n @Prop() variant: DropdownButtonVariant = 'primary';\n\n /\n Outline button\n /\n @Prop() outline = false;\n\n /\n Button with no background or outline\n /\n @Prop() ghost = false;\n\n /\n Disable button\n /\n @Prop() disabled = false;\n\n /\n Set label\n /\n @Prop() label: string;\n\n /\n Button icon\n /\n @Prop() icon: string;\n\n /\n Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n * @since 2.1.0\n /\n @Prop() closeBehavior: 'inside' \| 'outside' \| 'both' \| boolean = 'both';\n\n /\n Placement of the dropdown\n \n @since 2.0.0\n */\n @Prop() placement: AlignedPlacement;\n\n ~~@State()~~ dropdownAnchor!: HTMLElement;\n\n private getTriangle() {\n return (\n <div\n class={{\n triangle: true,\n hide: this.label !== '',\n primary: this.variant === 'primary',\n secondary: this.variant === 'secondary',\n ghost: this.ghost,\n outline: this.outline,\n disabled: this.disabled,\n }}\n ></div>\n );\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n ref={~~(ref) => {\n~~ this.dropdownAnchor ~~= ref;\n~~ }}\n >\n <div class=\"dropdown-button\">\n {this.label ? (\n <ix-button\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n alignment=\"start\"\n >\n <div class={'content'}>\n {this.icon ? (\n <ix-icon\n name={this.icon}\n size=\"24\"\n class={'dropdown-icon'}\n ></ix-icon>\n ) : null}\n <div class={'button-label'}>{this.label}</div>\n <ix-icon name={'chevron-down-small'} size=\"24\"></ix-icon>\n </div>\n </ix-button>\n ) : (\n <div>\n <ix-icon-button\n icon={this.icon}\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n ></ix-icon-button>\n {this.getTriangle()}\n </div>\n )}\n </div>\n\n <ix-dropdown\n class=\"dropdown\"\n trigger={this.dropdownAnchor}\n placement={this.placement}\n closeBehavior={this.closeBehavior}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-dropdown-button.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,21EAA21E,CAAC;AACt3E,+BAAe,iBAAiB;;MCuBnB,cAAc;;;;;QA8CR,mBAAc,GAAG,OAAO,EAAe,CAAC;uBAxChB,SAAS;uBAKhC,KAAK;qBAKP,KAAK;wBAKF,KAAK;;;6BAgByC,MAAM;;;IAW/D,WAAW;QACjB,QACE,WACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACvC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,GACI,EACP;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,GAAG,EAAE,IAAI,CAAC,cAAc,IAExB,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,KAAK,IACT,iBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAC,OAAO,IAEjB,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IACR,eACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,eAAe,GACb,IACT,IAAI,EACR,WAAK,KAAK,EAAE,cAAc,IAAG,IAAI,CAAC,KAAK,CAAO,EAC9C,eAAS,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAC,IAAI,GAAW,CACrD,CACI,KAEZ,eACE,sBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACP,EACjB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CACG,EAEN,oEACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,EAC7C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,8DAAa,CACD,CACT,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: inline-block;\n position: relative;\n height: $x-large-space;\n width: auto;\n\n .hide {\n display: none;\n }\n\n .dropdown-button {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .dropdown-button > ix-button {\n width: 100%;\n height: 100%;\n }\n\n .dropdown-button .button-label {\n margin-right: auto;\n min-width: 0px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .dropdown-button .dropdown-icon {\n margin-right: 0.25rem;\n }\n\n .triangle {\n position: absolute;\n margin-inline-start: 1.5625rem;\n margin-block-start: -0.4375rem;\n border-right: 0 solid transparent;\n border-left: 4px solid transparent;\n border-top: 0 solid transparent;\n border-bottom: 4px solid;\n color: var(--theme-btn-primary--color);\n }\n\n .triangle.primary {\n &.ghost {\n color: var(--theme-btn-invisible-primary--color);\n }\n\n &.outline {\n color: var(--theme-btn-outline-primary--color);\n }\n\n &.ghost.disabled {\n color: var(--theme-btn-invisible-primary--color--disabled);\n }\n\n &.outline.disabled {\n color: var(--theme-btn-outline-primary--color--disabled);\n }\n\n &.disabled {\n color: var(--theme-btn-primary--color--disabled);\n }\n }\n\n .triangle.secondary {\n &.ghost {\n color: var(--theme-btn-invisible-secondary--color);\n }\n\n &.outline {\n color: var(--theme-btn-outline-secondary--color);\n }\n\n &.ghost.disabled {\n color: var(--theme-btn-invisible-secondary--color--disabled);\n }\n\n &.outline.disabled {\n color: var(--theme-btn-outline-secondary--color--disabled);\n }\n\n &.disabled {\n color: var(--theme-btn-secondary--color--disabled);\n }\n }\n\n .content {\n display: flex;\n align-items: center;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\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={'chevron-down-small'} size=\"24\"></ix-icon>\n </div>\n </ix-button>\n ) : (\n <div>\n <ix-icon-button\n icon={this.icon}\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n ></ix-icon-button>\n {this.getTriangle()}\n </div>\n )}\n </div>\n\n <ix-dropdown\n class=\"dropdown\"\n trigger={this.dropdownAnchor.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/components/ix-dropdown-header.js CHANGED Viewed

@@ -12,7 +12,7 @@ const DropdownHeader = /*@__PURE__*/ proxyCustomElement(class DropdownHeader ext
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '987d6e23477350b4ea2c129802bcf1887970ef08' }, h("ix-typography", { key: '98aa123660b40148119a914d5edd0eb12b161823', class: 'category-text', variant: 'default-title' }, this.label)));
+        return (h(Host, { key: 'e95561bef7bee2a7234361522dbfa22941b6c8aa' }, h("ix-typography", { key: '4df8b4825d4dbc7703644924e396823647fab603', class: 'category-text', format: 'h5' }, this.label)));
     }
     static get style() { return IxDropdownHeaderStyle0; }
 }, [1, "ix-dropdown-header", {

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

	@@ -1 +1 @@
1	- {"file":"ix-dropdown-header.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,k6BAAk6B,CAAC;AAC77B,+BAAe,iBAAiB;;MCkBnB,cAAc;;;;;;;IAMzB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,sEAAe,KAAK,EAAE,eAAe,EAAE,~~OAAO~~,EAAE,~~eAAe~~,~~IAC5D~~,IAAI,CAAC,KAAK,CACG,CACX,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n position: relative;\n height: 2.5rem;\n width: auto;\n\n padding: 0.25rem 1rem;\n\n overflow: hidden;\n cursor: default;\n\n color: var(--theme-color-soft-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-dropdown-header',\n styleUrl: 'dropdown-header.scss',\n shadow: true,\n})\nexport class DropdownHeader {\n /\n Display name of the header\n */\n @Prop() label: string;\n\n render() {\n return (\n <Host>\n <ix-typography class={'category-text'} ~~variant~~={'~~default-title~~'}>\n {this.label}\n </ix-typography>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-dropdown-header.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,k6BAAk6B,CAAC;AAC77B,+BAAe,iBAAiB;;MCkBnB,cAAc;;;;;;;IAMzB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,sEAAe,KAAK,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,IAChD,IAAI,CAAC,KAAK,CACG,CACX,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n position: relative;\n height: 2.5rem;\n width: auto;\n\n padding: 0.25rem 1rem;\n\n overflow: hidden;\n cursor: default;\n\n color: var(--theme-color-soft-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-dropdown-header',\n styleUrl: 'dropdown-header.scss',\n shadow: true,\n})\nexport class DropdownHeader {\n /\n Display name of the header\n */\n @Prop() label: string;\n\n render() {\n return (\n <Host>\n <ix-typography class={'category-text'} format={'h5'}>\n {this.label}\n </ix-typography>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-dropdown-quick-actions.js CHANGED Viewed

@@ -10,7 +10,7 @@ const DropdownQuickActions = /*@__PURE__*/ proxyCustomElement(class DropdownQuic
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'cf0b790f201df5ca5cd904de492140d79f49d29a' }, h("slot", { key: 'f2003c2b93ba50b6acb966ab05b036ce6516d829' })));
+        return (h(Host, { key: 'bdbbc2d4bbb21fcdf8704393d9687491044f30d2' }, h("slot", { key: 'fc0689d7f58c9359daa32bbad70fbef4527f9bb4' })));
     }
     static get style() { return IxDropdownQuickActionsStyle0; }
 }, [1, "ix-dropdown-quick-actions"]);

package/components/ix-empty-state.js CHANGED Viewed

@@ -19,7 +19,7 @@ const EmptyState = /*@__PURE__*/ proxyCustomElement(class EmptyState extends HTM
         this.action = undefined;
     }
     render() {
-        return (h(Host, { key: '6a35699c05f5c71ac06952275054124e827f11d1', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: 'd5461a77a1e97b201bc93735b9984071f5bbb8eb', class: "emptyState__icon" }, h("ix-icon", { key: '540eb6f4f0413685dc4b5dec247e79b1ab7c984f', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: '30d14aa2ca5f1b6597ee1e7aefa930f6592f1b7b', class: "emptyState__content" }, h("div", { key: 'c3f75186476392f25251701003bba78d23f7a2bb', class: "content__label" }, h("ix-typography", { key: '357899084359203cc8b06f508658462ed04f9241', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (h("div", { key: 'a0ce178dc2ab263ec5e1a6627aeb740fce0539fd', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'ce163e65fb307b5c5b32fd63e1750caa7456ff41', class: "content__action" }, h("ix-button", { key: '3e32f02186912b49a2b7e9e314531e2a26b79a3b', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: '5014d3a63674f129788ed89432e32be6e9170f22', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '6f8bb51723e0737cc1a9b6584196271eac292f0a', class: "emptyState__icon" }, h("ix-icon", { key: '41dd56f4b855ccba7ef31feffa7cb975248d367c', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: '2c9a5360aa0e9490b19fedea273edef6e7053049', class: "emptyState__content" }, h("div", { key: 'cd84a5019558ed72f772499c68f5eeec5ed38102', class: "content__label" }, h("ix-typography", { key: 'f81914e44aa72f872f570c36d18464f678c78c24', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: '0784c6900080bdace8603b7eabc5a0306833f738', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: '5db66133f73860424c8d4146ca92a6f066012373', class: "content__action" }, h("ix-button", { key: '73b8faa30fbaa486257a5f841c42e5a9872a449f', onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get style() { return IxEmptyStateStyle0; }
 }, [1, "ix-empty-state", {

package/components/ix-empty-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-empty-state.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,yzEAAyzE,CAAC;AACh1E,2BAAe,aAAa;;MCoBf,UAAU;;;;;;sBAIc,OAAO;;;;;;IA2B1C,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,kBAAkB,IAE3B,gEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAED,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,~~sEACE~~,~~OAAO~~,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,~~eAAe~~,GAAG,~~SAAS~~,~~IAE7D~~,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,kEAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .label__subHeader {\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.emptyState.emptyState--large) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n width: 3.5rem;\n height: 3.5rem;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ix-icon {\n transform: scale(1.75);\n }\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $large-space;\n\n .content__label {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $small-space;\n }\n }\n\n .label__subHeader,\n ix-typography {\n text-align: center;\n }\n}\n\n:host(.emptyState.emptyState--compact) {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: $small-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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' \| 'compact' \| 'compactBreak';\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-empty-state',\n styleUrl: 'empty-state.scss',\n shadow: true,\n})\nexport class EmptyState {\n /\n Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n /\n @Prop() layout: EmptyStateLayout = 'large';\n\n /\n Optional empty state icon\n /\n @Prop() icon: string;\n\n /\n Empty state header\n /\n @Prop() header!: string;\n\n /\n Optional empty state sub header\n /\n @Prop() subHeader: string;\n\n /\n Optional empty state action\n /\n @Prop() action: string;\n\n /\n Empty state action click event\n /\n @Event() actionClick: EventEmitter<void>;\n\n render() {\n return (\n <Host class={`emptyState emptyState--${this.layout}`}>\n {this.icon && (\n <div class=\"emptyState__icon\">\n {/ TODO: replace size for large layout with '56' if available */}\n <ix-icon\n name={this.icon}\n size={this.layout === 'large' ? '32' : '32'}\n color=\"color-soft-text\"\n />\n </div>\n )}\n\n <div class=\"emptyState__content\">\n <div class=\"content__label\">\n <ix-typography~~\n variant~~={this.layout === 'large' ? '~~display-large~~' : '~~default~~'}\n >\n {this.header}\n </ix-typography>\n\n {this.subHeader && (\n <div class=\"label__subHeader\">{this.subHeader}</div>\n )}\n </div>\n\n {this.action && (\n <div class=\"content__action\">\n <ix-button onClick={() => this.actionClick.emit()}>\n {this.action}\n </ix-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-empty-state.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,yzEAAyzE,CAAC;AACh1E,2BAAe,aAAa;;MCoBf,UAAU;;;;;;sBAIc,OAAO;;;;;;IA2B1C,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,0BAA0B,IAAI,CAAC,MAAM,EAAE,IACjD,IAAI,CAAC,IAAI,KACR,4DAAK,KAAK,EAAC,kBAAkB,IAE3B,gEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,EAC3C,KAAK,EAAC,iBAAiB,GACvB,CACE,CACP,EAED,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,sEAAe,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,GAAG,IAAI,GAAG,MAAM,IAC3D,IAAI,CAAC,MAAM,CACE,EAEf,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,CACG,EAEL,IAAI,CAAC,MAAM,KACV,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,kEAAW,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,IAC9C,IAAI,CAAC,MAAM,CACF,CACR,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/empty-state/empty-state.scss?tag=ix-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .label__subHeader {\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.emptyState.emptyState--large) {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n width: 3.5rem;\n height: 3.5rem;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ix-icon {\n transform: scale(1.75);\n }\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $large-space;\n\n .content__label {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: $small-space;\n }\n }\n\n .label__subHeader,\n ix-typography {\n text-align: center;\n }\n}\n\n:host(.emptyState.emptyState--compact) {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: $default-space;\n }\n}\n\n:host(.emptyState.emptyState--compactBreak) {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: $default-space;\n\n .emptyState__icon {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: $large-control-height;\n }\n\n .emptyState__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: $small-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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type EmptyStateLayout = 'large' \| 'compact' \| 'compactBreak';\n\n/\n @since 1.6.0\n /\n@Component({\n tag: 'ix-empty-state',\n styleUrl: 'empty-state.scss',\n shadow: true,\n})\nexport class EmptyState {\n /\n Optional empty state layout - one of 'large', 'compact' or 'compactBreak'\n /\n @Prop() layout: EmptyStateLayout = 'large';\n\n /\n Optional empty state icon\n /\n @Prop() icon: string;\n\n /\n Empty state header\n /\n @Prop() header!: string;\n\n /\n Optional empty state sub header\n /\n @Prop() subHeader: string;\n\n /\n Optional empty state action\n /\n @Prop() action: string;\n\n /\n Empty state action click event\n /\n @Event() actionClick: EventEmitter<void>;\n\n render() {\n return (\n <Host class={`emptyState emptyState--${this.layout}`}>\n {this.icon && (\n <div class=\"emptyState__icon\">\n {/ TODO: replace size for large layout with '56' if available */}\n <ix-icon\n name={this.icon}\n size={this.layout === 'large' ? '32' : '32'}\n color=\"color-soft-text\"\n />\n </div>\n )}\n\n <div class=\"emptyState__content\">\n <div class=\"content__label\">\n <ix-typography format={this.layout === 'large' ? 'h3' : 'body'}>\n {this.header}\n </ix-typography>\n\n {this.subHeader && (\n <div class=\"label__subHeader\">{this.subHeader}</div>\n )}\n </div>\n\n {this.action && (\n <div class=\"content__action\">\n <ix-button onClick={() => this.actionClick.emit()}>\n {this.action}\n </ix-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-event-list-item.js CHANGED Viewed

@@ -29,16 +29,16 @@ const EventListItem = /*@__PURE__*/ proxyCustomElement(class EventListItem exten
                 ? `var(${this.color})`
                 : `var(--theme-${this.color})`;
         }
-        return (h(Host, { key: 'f4867d7f68254b7f4929ce6746172eb03aa5caea', class: {
+        return (h(Host, { key: '80fa62996f534bff69cd54962a6398a193035e5b', class: {
                 disabled: this.disabled,
-            } }, h("li", { key: '325588cc80c9b8988b37aaeb72a8d9c7affc088e', "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("li", { key: '1cc2e921d1491edfb01508402b1ad290563f8524', "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: '24ef52d3c26ccb528934fa0366c9ebdce05ca38d', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: '0f4c3dd471e65faf2ec7b107b6b22ee999ca5ebb', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
                 'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '74fac568b74471bcd6051f25d13bbac6d3aaadb4', class: "event-list-item-container" }, h("div", { key: '47d69475c3d448ca417b1892b30f22e7de77b19f', class: "event-content" }, h("slot", { key: 'c87d4fc509bdbc2041122e274caa2860a2530843' })), this.chevron && (h("ix-icon", { key: '8626b6e5ff1f23163d4a75d5c3a114adc3942c2c', name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+            } }), h("div", { key: 'be264003ee050f8cb24cbfde8161ac017e8d269c', class: "event-list-item-container" }, h("div", { key: 'd38d3b3b0b04028eafcfd2f363fb7473d33dbac1', class: "event-content" }, h("slot", { key: '37063b798436bf52a78cca6c738c30d85a33fcc1' })), this.chevron && (h("ix-icon", { key: '85abb863d6db2fb7898054603c8e550f24bfac43', name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
     }
     static get style() { return IxEventListItemStyle0; }
 }, [1, "ix-event-list-item", {

package/components/ix-event-list.js CHANGED Viewed

@@ -104,11 +104,11 @@ const EventList = /*@__PURE__*/ proxyCustomElement(class EventList extends HTMLE
         });
     }
     render() {
-        return (h(Host, { key: '5d7a0f6f6d24eb87a5ea1a777d4deb578d4d4d53', class: {
+        return (h(Host, { key: 'fa13ba5a87d097ce7edc2ecc0713c303bf555888', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("ul", { key: 'ed377a8c738270044e9a903360105a9ce3a30fa2' }, h("slot", { key: 'cd3f02ca5eb2ce9b6086b249678839cba7b9f7b0' }))));
+            } }, h("ul", { key: '76184617f53221c9a8c71b267fbdcb50a7bea4a1' }, h("slot", { key: '2bc36317ba99a9b4e428b2b4ecc209ee3bc2bf83' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-expanding-search.js CHANGED Viewed

@@ -54,20 +54,20 @@ const ExpandingSearch = /*@__PURE__*/ proxyCustomElement(class ExpandingSearch e
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: 'ce6a0b2941966880a2a47a20ddf39820d8110836', class: {
+        return (h(Host, { key: 'd289390fddfab1d5c066487efc9ea757f9f86957', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: 'e773bc67a18476c86d530e14a0b062f1b10caae7', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: 'd8f230fb82e0a6012a2b3b2d98ed13d05a45ca8b', size: this.expanded ? '16' : '24', icon: this.icon, ghost: true, variant: "primary", "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            } }), h("div", { key: 'ab6b7f77f88713c1b0230a83a3c2eb50df35f340', class: {
+            } }), h("div", { key: '7c1cbb723fee8dd2c2b92d55938362bb01fb2750', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'fb3f5e5c926a5eed3d2a0bac878ef806684f9d8d', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: '0ea65313e1e6d06c8ff19b715577687f468d2c7a', class: {
                 'form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/components/ix-flip-tile-content.js CHANGED Viewed

@@ -11,7 +11,7 @@ const FlipTileContent = /*@__PURE__*/ proxyCustomElement(class FlipTileContent e
         this.contentVisible = false;
     }
     render() {
-        return h(Host, { key: '5168ef23e528f9bb5a8408a6df292bd2bbadd1fc' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: 'ae499b00da903e80a7cf53e15185d2a5bf9b3819' }, this.contentVisible ? h("slot", null) : null);
     }
     static get style() { return IxFlipTileContentStyle0; }
 }, [1, "ix-flip-tile-content", {

package/components/ix-flip-tile.js CHANGED Viewed

@@ -60,26 +60,26 @@ const FlipTile = /*@__PURE__*/ proxyCustomElement(class FlipTile extends HTMLEle
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (h(Host, { key: '6325a67810cec0daa810626fd07fdee585dff321', style: {
+        return (h(Host, { key: 'c44eacce698e277122c1e3b75bbab1835f73306f', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: 'b32de5296d6f9eaa2a47d7fca8fc37ccc3038ca8', class: {
+            } }, h("div", { key: '7254d3d674a507618f3117483d4234f95291af6c', class: {
                 'flip-tile-container': true,
                 info: this.state === FlipTileState.Info,
                 warning: this.state === FlipTileState.Warning,
                 alarm: this.state === FlipTileState.Alarm,
                 primary: this.state === FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, h("div", { key: '547fd0065516281539327d61b7ba4806973b230e', class: "flip-tile-header" }, h("div", { key: '6f6105b466f35d94e7d5c51e6a8d0cd9190fda90', class: "header-slot-container text-l-title" }, h("slot", { key: 'e0d28500f1b867e120308d8ae08d19f8e2ed62ef', name: "header" })), h("ix-icon-button", { key: '9b1115eedef1cd2b5c20322e7126d69a7ddd5367', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '208e84bf8a58d0f0d664e6afa61f4c0134c170a1', class: "content-container" }, h("slot", { key: 'e58477ccc1f34df0f10d34b76ebfeb8740e6a2b7' })), h("div", { key: '1d2775674ae6ccf49d45349bb092e62a4edb6839', class: {
+            } }, h("div", { key: 'ef320aa5deaae3f929161d9bef49c13937a2b79e', class: "flip-tile-header" }, h("div", { key: 'fc774295411c48eef5928f94bf2666bde2e9c791', class: "header-slot-container text-l-title" }, h("slot", { key: '6b62e0904765a57ad354d7fbdfca26c33e849838', name: "header" })), h("ix-icon-button", { key: 'dbdd62123fadaca9bfc537905ad39d43f6733098', icon: 'eye', variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), h("div", { key: '7fb62619756c6d863c4b0da57cad597c6dd408bb', class: "content-container" }, h("slot", { key: '42fc5ea33ac57421acf2a499a2e11687558a6afc' })), h("div", { key: 'd247bde7e75932358b7f34a840009f0820b45cf8', class: {
                 footer: true,
                 'contrast-light': this.state === FlipTileState.Warning,
                 'contrast-dark': this.state === FlipTileState.Info ||
                     this.state === FlipTileState.Alarm,
-            } }, h("slot", { key: '0876aa784c23b91f289b9feec114d94c5860bf29', name: "footer" })))));
+            } }, h("slot", { key: '633c69d54f7763c8e136aa4093df55b2a028205a', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return IxFlipTileStyle0; }

package/components/ix-form-field.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const formFieldCss = "label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg 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'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:contents}";
+const formFieldCss = "label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.read-only,.disabled,[readonly],[disabled]),input:hover:not(.read-only,.disabled,[readonly],[disabled]){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.read-only,.disabled,[readonly],[disabled]),input:focus:not(.read-only,.disabled,[readonly],[disabled]){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.read-only,.disabled,[readonly],[disabled]),textarea:hover:not(.read-only,.disabled,[readonly],[disabled]){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.read-only,.disabled,[readonly],[disabled]),textarea:focus:not(.read-only,.disabled,[readonly],[disabled]){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg 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'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:contents}";
 const IxFormFieldStyle0 = formFieldCss;
 const FormField = /*@__PURE__*/ proxyCustomElement(class FormField extends HTMLElement {
@@ -15,7 +15,7 @@ const FormField = /*@__PURE__*/ proxyCustomElement(class FormField extends HTMLE
     }
     componentWillLoad() { }
     render() {
-        return (h(Host, { key: '34305cf7e6ee023ae323d2c1b13248bb08f50001' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: '7d9937b61fd5f5aa4711a7551c0665a1f048bb47' })));
+        return (h(Host, { key: '36cd104dc9663c917aa715627c49627af54806cb' }, this.label ? (h("label", { htmlFor: this.inputElement.id }, this.label)) : null, h("slot", { key: 'ae5c276915ba75e0e7a8e13ef583d40fef2be1d2' })));
     }
     get hostElement() { return this; }
     static get style() { return IxFormFieldStyle0; }

package/components/ix-form-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-form-field.js","mappings":";;AAAA,MAAM,YAAY,GAAG,~~usSAAusS~~,CAAC;~~AAC7tS~~,0BAAe,YAAY;;MCcd,SAAS;;;;;;;IAQpB,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KAChD;IAED,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,IACT,aAAO,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,IACxD,IAAI,EACR,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field/form-field.scss?tag=ix-form-field&encapsulation=shadow","src/components/form-field/form-field.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 'components/form/input';\n\n:host {\n display: contents;\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, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField {\n @Element() hostElement!: HTMLIxFormFieldElement;\n\n /\n Label\n */\n @Prop() label: string;\n\n private get inputElement() {\n return this.hostElement.querySelector('input');\n }\n\n componentWillLoad() {}\n\n render() {\n return (\n <Host>\n {this.label ? (\n <label htmlFor={this.inputElement.id}>{this.label}</label>\n ) : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-form-field.js","mappings":";;AAAA,MAAM,YAAY,GAAG,wuTAAwuT,CAAC;AAC9vT,0BAAe,YAAY;;MCcd,SAAS;;;;;;;IAQpB,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KAChD;IAED,iBAAiB,MAAK;IAEtB,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,IACT,aAAO,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,IACxD,IAAI,EACR,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field/form-field.scss?tag=ix-form-field&encapsulation=shadow","src/components/form-field/form-field.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 'components/form/input';\n\n:host {\n display: contents;\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, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField {\n @Element() hostElement!: HTMLIxFormFieldElement;\n\n /\n Label\n */\n @Prop() label: string;\n\n private get inputElement() {\n return this.hostElement.querySelector('input');\n }\n\n componentWillLoad() {}\n\n render() {\n return (\n <Host>\n {this.label ? (\n <label htmlFor={this.inputElement.id}>{this.label}</label>\n ) : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}