npm - @siemens/ix - Versions diffs - 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048 - Mend

@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

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

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

	@@ -1 +1 @@
1	- {"file":"ix-date-dropdown.entry.cjs.js","mappings":"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","names":["DateTime","h","Host","Fragment"],"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.entry.cjs.js","mappings":"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","names":["makeRef","DateTime","h","Host","Fragment"],"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/dist/cjs/ix-date-time-card.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const dateTimeCardCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1);border-radius:4px}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 0.75rem 0.75rem 0.75rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
 const IxDateTimeCardStyle0 = dateTimeCardCss;
@@ -26,7 +26,7 @@ const DateTimeCard = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'fa0c2f27c199b297d27b9731d63fdfb2aa7e61c9' }, index.h("div", { key: '4332722d538fc8d791a97d2803cfda2c1bf4c1cd', class: this.cardClasses() }, index.h("div", { key: 'e611c5e65a9074a12569be57b1f867885e38782d', class: "header" }, index.h("slot", { key: 'fd04904836f2130af3e6e3f28b8a83374b4b529f', name: "header" })), index.h("div", { key: 'a25f03d3c152c3e537ea694a665f7d7c2a900e0a', class: "separator" }), index.h("div", { key: '2b927b2f93d741d8e79adef986887f30507bcc27', class: "content" }, index.h("slot", { key: '7edd1e2f07fa885302f9a3859830a5dab9ccb7e1' })))));
+        return (index.h(index.Host, { key: '7cc34e0218f22893a5ff27e2c3c680026939fac6' }, index.h("div", { key: 'eb37559feb28a2e1cbb65e23798d15a86a9d42d5', class: this.cardClasses() }, index.h("div", { key: '6b563589d43855cb79adb7c1b49ee3cc89eaa4b1', class: "header" }, index.h("slot", { key: '504c4b9c5ffb76709e5316ac90fd7333f73c37ca', name: "header" })), index.h("div", { key: 'a2699f1741c8199858286c103cc486f1a79e6c3a', class: "separator" }), index.h("div", { key: 'ae764322e05cde48f95a97bd1a277e0469fb6108', class: "content" }, index.h("slot", { key: '0df494e57a0335bf250eff1c7f8ee2a64f79d563' })))));
     }
 };
 DateTimeCard.style = IxDateTimeCardStyle0;

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

	@@ -1 +1 @@
1	- {"file":"ix-date-time-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,y+CAAy+C,CAAC;AAClgD,6BAAe,eAAe;;MCoBjB,YAAY~~;;;;0BAOO~~,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;kBACnC,IAAI,CAAC,oBAAoB;kBACzB,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5BA,kEAAK,KAAK,EAAC,QAAQ,IACjBA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAENA,kEAAK,KAAK,EAAC,WAAW,GAAO,EAE7BA,kEAAK,KAAK,EAAC,SAAS,IAClBA,oEAAa,CACT,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .card {\n background-color: var(--theme-menu--background);\n width: 100%;\n box-shadow: none;\n border: none;\n border-radius: unset;\n display: flex;\n flex-direction: column;\n\n &.standaloneAppearance {\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n 0 12px 18px 0 rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n }\n\n &.rounded {\n border-radius: 4px;\n }\n\n &.left {\n border-radius: 4px 0 0 4px;\n height: 100%;\n }\n\n &.right {\n border-radius: 0 4px 4px 0;\n height: 100%;\n }\n\n .header {\n padding: $default-space;\n flex: 0 1 auto;\n }\n\n .separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n flex: 0 1 auto;\n }\n\n .content {\n padding: 0 $medium-space $medium-space $medium-space;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' \| 'left' \| 'right' \| 'straight';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-date-time-card',\n styleUrl: 'date-time-card.scss',\n shadow: true,\n})\nexport class DateTimeCard {\n /* @internal /\n @Prop() standaloneAppearance?: ~~boolean~~;\n\n /\n set styles\n /\n @Prop() individual: boolean = true;\n\n /\n Set corners style\n */\n @Prop() corners: DateTimeCardCorners = 'rounded';\n\n private cardClasses() {\n return {\n card: true,\n standaloneAppearance:\n this.standaloneAppearance !== undefined\n ? this.standaloneAppearance\n : this.individual,\n rounded: this.corners === 'rounded',\n left: this.corners === 'left',\n right: this.corners === 'right',\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClasses()}>\n <div class=\"header\">\n <slot name=\"header\"></slot>\n </div>\n\n <div class=\"separator\"></div>\n\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-date-time-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,y+CAAy+C,CAAC;AAClgD,6BAAe,eAAe;;MCoBjB,YAAY;;;oCAEQ,SAAS;0BAKV,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;kBACnC,IAAI,CAAC,oBAAoB;kBACzB,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5BA,kEAAK,KAAK,EAAC,QAAQ,IACjBA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAENA,kEAAK,KAAK,EAAC,WAAW,GAAO,EAE7BA,kEAAK,KAAK,EAAC,SAAS,IAClBA,oEAAa,CACT,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .card {\n background-color: var(--theme-menu--background);\n width: 100%;\n box-shadow: none;\n border: none;\n border-radius: unset;\n display: flex;\n flex-direction: column;\n\n &.standaloneAppearance {\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n 0 12px 18px 0 rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n }\n\n &.rounded {\n border-radius: 4px;\n }\n\n &.left {\n border-radius: 4px 0 0 4px;\n height: 100%;\n }\n\n &.right {\n border-radius: 0 4px 4px 0;\n height: 100%;\n }\n\n .header {\n padding: $default-space;\n flex: 0 1 auto;\n }\n\n .separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n flex: 0 1 auto;\n }\n\n .content {\n padding: 0 $medium-space $medium-space $medium-space;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' \| 'left' \| 'right' \| 'straight';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-date-time-card',\n styleUrl: 'date-time-card.scss',\n shadow: true,\n})\nexport class DateTimeCard {\n /* @internal /\n @Prop() standaloneAppearance = undefined;\n\n /\n set styles\n /\n @Prop() individual: boolean = true;\n\n /\n Set corners style\n */\n @Prop() corners: DateTimeCardCorners = 'rounded';\n\n private cardClasses() {\n return {\n card: true,\n standaloneAppearance:\n this.standaloneAppearance !== undefined\n ? this.standaloneAppearance\n : this.individual,\n rounded: this.corners === 'rounded',\n left: this.corners === 'left',\n right: this.corners === 'right',\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClasses()}>\n <div class=\"header\">\n <slot name=\"header\"></slot>\n </div>\n\n <div class=\"separator\"></div>\n\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const datetimePickerCss = ":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .min-width{width:-moz-min-content;width:min-content}:host .no-padding{padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date{left:unset !important}}:host .individual{box-shadow:none;border:none}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem;left:1rem}";
 const IxDatetimePickerStyle0 = datetimePickerCss;
@@ -57,7 +57,7 @@ const DatetimePicker = class {
         this.timeChange.emit(time);
     }
     render() {
-        return (index.h(index.Host, { key: '94d1ca87f91601415fe5a21075f84cd7da6acb28' }, index.h("ix-layout-grid", { key: '62717105d6b7d0891e5639c3077aa8a863b792ac', class: "no-padding" }, index.h("ix-row", { key: 'f689afd3bca916309313a5a84871279855af089d' }, index.h("ix-col", { key: '0f460e11dd5a31d6792b10375e3920030a84618a', class: "no-padding" }, index.h("ix-date-picker", { key: 'fa18dbf1eba23b4866b7546dfce20a8cb36a9bbb', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), index.h("ix-col", { key: '5abb9b2b267a76af3f12f64b45023f9ac2425544', class: "no-padding" }, index.h("ix-time-picker", { key: '7dfd2a2dbcf5cc8a5d579cacdc72b8ff8a4e4b80', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), index.h("ix-row", { key: '8431567e445a1971c6199a7acd82407ac4ac744d' }, index.h("ix-col", { key: 'f23276218e9e2b8f81b9b552cd415a3723c13f50' }, index.h("ix-button", { key: '879c7d43ab47c4345dc5fe11dabb9eb7fb6ebe4b', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (index.h(index.Host, { key: '9b01b8df6d5a2639b4a366edb54b74ecb83177fd' }, index.h("ix-layout-grid", { key: '909420ce17eeec9975cbc926c9d721b3ccb2af96', class: "no-padding" }, index.h("ix-row", { key: '29bd4647604c309e619238c5d5263280e83df6e4' }, index.h("ix-col", { key: 'f909e90d55276646b83c1366d629e7e13974a56f', class: "no-padding" }, index.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 })), index.h("ix-col", { key: '2eb19f415cd133e5ac300ce4609a3671c0e76d0a', class: "no-padding" }, index.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 }))), index.h("ix-row", { key: 'aa43460c810f84730455581102416e420ce38123' }, index.h("ix-col", { key: 'aa2068f0d7fc63a4677ac666b97b4c1bec82e29a' }, index.h("ix-button", { key: 'c2f8c11facdec2c40a3218f2faed1b423ff65347', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
 };
 DatetimePicker.style = IxDatetimePickerStyle0;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const dividerCss = ":host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";
 const IxDividerStyle0 = dividerCss;
@@ -12,7 +12,7 @@ const Divider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: '6e1de6d2dee4f1184fa5e7791dd3032a1ed93fa5' });
+        return index.h(index.Host, { key: '6f265f6b18de560468fcee37f850079a83098c15' });
     }
 };
 Divider.style = IxDividerStyle0;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const anime_es = require('./anime.es-e2814360.js');
 const drawerCss = ":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all var(--theme-medium-time) ease-out}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height:100%}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.toggle){visibility:visible}";
@@ -89,7 +89,7 @@ const Drawer = class {
         this.onShowChanged(this.show);
     }
     render() {
-        return (index.h(index.Host, { key: 'be37a222f4696bcd58f5e82bca62d885192c2678', class: {
+        return (index.h(index.Host, { key: 'c33f929791870aa05cd4d7bb80c0e85b0ddbca43', class: {
                 'drawer-container': true,
                 toggle: this.show,
                 'full-height': this.fullHeight,
@@ -98,7 +98,7 @@ const Drawer = class {
                 width: this.width === 'auto' ? this.width : `${this.width}rem`,
                 'min-width': `${this.minWidth}rem`,
                 'max-width': `${this.maxWidth}rem`,
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, index.h("div", { key: '6d390a6aac80cc0685cea9d168e73a7bf89e00f0', class: "header" }, index.h("div", { key: 'd2f34f7ba0e6f180bbdd025d667552f6d88cc2fa', class: "header-content" }, index.h("slot", { key: '492ed29a5a68c05576eba61a379462353c9bfcdb', name: "header" })), index.h("ix-icon-button", { key: '21d7593f713e459e29ad60ffcf23c9d6b8189a21', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), index.h("div", { key: '388aed555e98aafa96710e3e66e736ebb5e571e3', class: "content" }, index.h("slot", { key: '4d5a255950b41d2943f1978379fea38637807bc8' }))));
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, index.h("div", { key: 'c7b8195595ae8b6a316439f1c70ab4649feabd3a', class: "header" }, index.h("div", { key: '0d9e7fe3591cbb237c1f5f12cce45b438088b9ff', class: "header-content" }, index.h("slot", { key: '3b5d57e5406d3b581d27855a3219ba361065b84d', name: "header" })), index.h("ix-icon-button", { key: '84e9ecfd1ed9e73fce6c5814d8cbc8631e6e746d', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), index.h("div", { key: '91e39d7f77ae9a0357d73d76b71606810649d61c', class: "content" }, index.h("slot", { key: '4cee96836ef143d25ba7b69520bda47bc9dc768d' }))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]

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

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
+const makeRef = require('./make-ref-499e1e41.js');
 const dropdownButtonCss = ":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";
 const IxDropdownButtonStyle0 = dropdownButtonCss;
@@ -10,6 +11,7 @@ const IxDropdownButtonStyle0 = dropdownButtonCss;
 const DropdownButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.dropdownAnchor = makeRef.makeRef();
         this.variant = 'primary';
         this.outline = false;
         this.ghost = false;
@@ -18,7 +20,6 @@ const DropdownButton = class {
         this.icon = undefined;
         this.closeBehavior = 'both';
         this.placement = undefined;
-        this.dropdownAnchor = undefined;
     }
     getTriangle() {
         return (index.h("div", { class: {
@@ -32,11 +33,9 @@ const DropdownButton = class {
             } }));
     }
     render() {
-        return (index.h(index.Host, { key: '57997375c95a39fbd19f2bdedad501a7002b4d54', class: {
+        return (index.h(index.Host, { key: 'de22caabcde75df5653f3a44066a2510d5356b46', class: {
                 disabled: this.disabled,
-            }, ref: (ref) => {
-                this.dropdownAnchor = ref;
-            } }, index.h("div", { key: 'c9bcef0b1ad78e3aca7990082d96d6f1bab7c8da', class: "dropdown-button" }, this.label ? (index.h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, index.h("div", { class: 'content' }, this.icon ? (index.h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, index.h("div", { class: 'button-label' }, this.label), index.h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (index.h("div", null, index.h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), index.h("ix-dropdown", { key: 'fb120a4022f208d754e7948c31e19cf6e75f4fd3', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, index.h("slot", { key: '47b3cfc1217bf63676e9149e5138a358a118903a' }))));
+            }, ref: this.dropdownAnchor }, index.h("div", { key: 'b704fee9b1f8842fe6468c8f510d880e75117208', class: "dropdown-button" }, this.label ? (index.h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, index.h("div", { class: 'content' }, this.icon ? (index.h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, index.h("div", { class: 'button-label' }, this.label), index.h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (index.h("div", null, index.h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), index.h("ix-dropdown", { key: 'd902fac793dc815b6f2aa7259d7f7c3fb8923879', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior }, index.h("slot", { key: '173ee7c5e1ded4424fd5693ac802037800b278f9' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const dropdownHeaderCss = ":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const IxDropdownHeaderStyle0 = dropdownHeaderCss;
@@ -13,7 +13,7 @@ const DropdownHeader = class {
         this.label = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'fec58d9a47500e154e0327e8e69e196856ffc6fe' }, index.h("ix-typography", { key: '54e5ac8aa1c906b3f78db52afdfddd89f1273499', class: 'category-text', variant: 'default-title' }, this.label)));
+        return (index.h(index.Host, { key: 'e95561bef7bee2a7234361522dbfa22941b6c8aa' }, index.h("ix-typography", { key: '4df8b4825d4dbc7703644924e396823647fab603', class: 'category-text', format: 'h5' }, this.label)));
     }
 };
 DropdownHeader.style = IxDropdownHeaderStyle0;

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

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

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
-const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
+const dropdownItemCss = ":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.5rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.5rem;color:var(--theme-color-std-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";
 const IxDropdownItemStyle0 = dropdownItemCss;
 const DropdownItem = class {
@@ -35,15 +35,15 @@ const DropdownItem = class {
             this.icon !== undefined);
     }
     render() {
-        return (index.h(index.Host, { key: '790a3152ceedafea257e25206c9b1562408c451d', class: {
+        return (index.h(index.Host, { key: 'e84d815a34db2414b8cc1ef5f12e47eceed165b9', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, index.h("button", { key: 'f752c60f44e8e08d66d043cd21f637965a9ba192', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, index.h("button", { key: '8b15db8fe41afcee1875d0961c05c6e7ba472dc2', type: "button", tabIndex: 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (index.h("div", { class: "dropdown-item-checked" }, this.checked ? (index.h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (index.h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, index.h("div", { key: '1d6f83b7b1eaf7011d0534aa8524b100c2de2f20', class: "dropdown-item-text" }, this.label, index.h("slot", { key: '466b12dc7018429b77a82ba988816f3fd00dd317' })), this.isSubMenu ? (index.h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (index.h("div", { class: "dropdown-item-checked" }, this.checked ? (index.h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (index.h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, index.h("div", { key: '769a00a9dd6614f268c11b9cd029c7cbcd1db2e2', class: "dropdown-item-text" }, this.label, index.h("slot", { key: 'fdc7eb7816e1cb63669381b102bdf903c4516f6e' })), this.isSubMenu ? (index.h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
     }
     get hostElement() { return index.getElement(this); }
 };

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

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

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0f6297c8.js');
+const index = require('./index-529f21c1.js');
 const dropdownQuickActionsCss = ":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";
 const IxDropdownQuickActionsStyle0 = dropdownQuickActionsCss;
@@ -12,7 +12,7 @@ const DropdownQuickActions = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '340641a72961969a0718bd26bda9b4d2cfd269fb' }, index.h("slot", { key: '66489fa79ac1ce69e3aa59ce89bc08208aad20d9' })));
+        return (index.h(index.Host, { key: 'bdbbc2d4bbb21fcdf8704393d9687491044f30d2' }, index.h("slot", { key: 'fc0689d7f58c9359daa32bbad70fbef4527f9bb4' })));
     }
 };
 DropdownQuickActions.style = IxDropdownQuickActionsStyle0;