npm - @siemens/ix - Versions diffs - 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2212-20251017115125 - Mend

@siemens/ix 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2212-20251017115125

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

package/dist/collection/components/datetime-picker/datetime-picker.js CHANGED Viewed

@@ -10,9 +10,27 @@ import { h, Host } from "@stencil/core";
 export class DatetimePicker {
     constructor() {
         /**
-         * If true disables date range selection (from/to).
+         * If true a date-range can be selected (from/to).
          */
-        this.singleSelection = false;
+        this.range = true;
+        /**
+         * Show hour input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showHour = true;
+        /**
+         * Show minutes input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showMinutes = true;
+        /**
+         * Show seconds input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showSeconds = true;
         /**
          * Date format string.
          * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
@@ -73,7 +91,7 @@ export class DatetimePicker {
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: '91fb1dbd40b48c37c207de3f173e19ed72f3b6c3' }, h("ix-layout-grid", { key: '0a9fc8ae63d59ba14185a12d3eb126351f4f67c4', class: "no-padding" }, h("ix-row", { key: '31e56d9e8a7ca4a6afd5754f0caf28eb494d68cd' }, h("ix-col", { key: '1df4729e7703d4f48d19233774a8fead11b74553' }, h("ix-date-picker", { key: '80923eee970fc1c163a94986c109e13f09d3a606', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), h("ix-col", { key: 'd081455e2f00a9917e11902a70cb882a84e23615' }, h("ix-time-picker", { key: '4602c3ca1b899ec283aa9469ce5fcdf4ba4a70fc', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }), h("div", { key: '1329ef1e1af1b22de5f4754ee02452a4d1aabb6b', class: "btn-select-date-container" }, h("ix-button", { key: '01efc3c5d4f72bd74a670a267a28e864c3e643fe', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+        return (h(Host, { key: '92375c17933eb17041b078bbf8622552ded46226' }, h("ix-layout-grid", { key: '012e77c15f250b7290926ef0cc9ea65ddfdc556f', class: "no-padding" }, h("ix-row", { key: 'f495ce2c17a5ae0614be00b56a8be1214848e1cb' }, h("ix-col", { key: 'd2863b9d3b90ed0e5d301ae595aec677f01a835f' }, h("ix-date-picker", { key: '6586694bc13fc752d2fb29f2728ceb37ca31c336', 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, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), h("ix-col", { key: 'e8ea30ea905b964be809634e21f17a57d664c62d' }, h("ix-time-picker", { key: '106449dfab4cc641f179aea35068f36e95f50140', class: "min-width", ref: (ref) => (this.timePickerElement = ref), standaloneAppearance: false, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, textTime: this.i18nTime, time: this.time, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds }), h("div", { key: 'f4c41e1e9e9513a6a37b7f0111d64ef9e6be1adf', class: "btn-select-date-container" }, h("ix-button", { key: '9fc8c6549c17e40a062e8e8a387e564822de4842', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -89,9 +107,9 @@ export class DatetimePicker {
     }
     static get properties() {
         return {
-            "singleSelection": {
+            "range": {
                 "type": "boolean",
-                "attribute": "single-selection",
+                "attribute": "range",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -102,12 +120,81 @@ export class DatetimePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true disables date range selection (from/to)."
+                    "text": "If true a date-range can be selected (from/to)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
+            },
+            "showHour": {
+                "type": "boolean",
+                "attribute": "show-hour",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This is now determined by the format that is used. Will be removed in 4.0.0"
+                        }],
+                    "text": "Show hour input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showMinutes": {
+                "type": "boolean",
+                "attribute": "show-minutes",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This is now determined by the format that is used. Will be removed in 4.0.0"
+                        }],
+                    "text": "Show minutes input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showSeconds": {
+                "type": "boolean",
+                "attribute": "show-seconds",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This is now determined by the format that is used. Will be removed in 4.0.0"
+                        }],
+                    "text": "Show seconds input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
             },
             "minDate": {
                 "type": "string",

package/dist/collection/components/datetime-picker/datetime-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datetime-picker.js","sourceRoot":"","sources":["../../../src/components/datetime-picker/datetime-picker.tsx"],"names":[],"mappings":"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","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\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker.events';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport type {\n DateTimeDateChangeEvent,\n DateTimeSelectEvent,\n} from './datetime-picker.types';\n\n@Component({\n tag: 'ix-datetime-picker',\n styleUrl: 'datetime-picker.scss',\n shadow: true,\n})\nexport class DatetimePicker\n implements Omit<IxDatePickerComponent, 'corners' \| 'format'>\n{\n /\n If true disables date range selection (from/to).\n /\n @Prop() singleSelection = false;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @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 Date format string.\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n /\n Time format string.\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() timeFormat: string = 'HH:mm:ss';\n\n /\n The selected starting date. If the picker is not in range mode this is the selected date.\n * Format has to match the `format` property.\n /\n @Prop() from?: string;\n\n /\n The selected end date. If the the picker is not in range mode this property has no impact.\n * Format has to match the `format` property.\n /\n @Prop() to?: string;\n\n /\n Select time with format string\n /\n @Prop() time?: string;\n\n /\n Show time reference input\n * Time reference is default aligned with @see {this.timeFormat}\n /\n @Prop() showTimeReference: boolean = false;\n\n /\n Set time reference\n /\n @Prop() timeReference?: 'AM' \| 'PM';\n\n /\n Text of date select button\n /\n @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n /\n Top label of time picker\n \n @since 3.0.0\n /\n @Prop({ attribute: 'i18n-time' }) i18nTime: string = 'Time';\n\n /\n ARIA label for the previous month icon button\n * Will be set as aria-label on the nested HTML button element\n /\n @Prop() ariaLabelPreviousMonthButton?: string;\n\n /\n ARIA label for the next month icon button\n * Will be set as aria-label on the nested HTML button element\n /\n @Prop() ariaLabelNextMonthButton?: string;\n\n /\n The index of which day to start the week on, based on the Locale#weekdays array.\n * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n /\n @Prop() weekStartIndex = 0;\n\n /\n Format of time string\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() locale?: string;\n\n /\n Shows week numbers displayed on the left side of the date picker\n \n @since 3.0.0\n /\n @Prop() showWeekNumbers = false;\n\n /\n Time change\n /\n @Event() timeChange!: EventEmitter<string>;\n\n /\n Date change\n /\n @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n /\n Datetime selection event is fired after confirm button is pressed\n */\n @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n private datePickerElement?: HTMLIxDatePickerElement;\n private timePickerElement?: HTMLIxTimePickerElement;\n\n private async onDone() {\n const date = await this.datePickerElement?.getCurrentDate();\n const time = await this.timePickerElement?.getCurrentTime();\n\n this.dateSelect.emit({\n from: date?.from ?? '',\n to: date?.to ?? '',\n time: time ?? '',\n });\n }\n\n private async onDateChange(event: CustomEvent<string \| DateChangeEvent>) {\n event.preventDefault();\n event.stopPropagation();\n\n const { detail: date } = event;\n this.dateChange.emit(date);\n }\n\n private async onTimeChange(event: CustomEvent<string>) {\n event.preventDefault();\n event.stopPropagation();\n\n const { detail: time } = event;\n this.timeChange.emit(time);\n }\n\n render() {\n return (\n <Host>\n <ix-layout-grid class=\"no-padding\">\n <ix-row>\n <ix-col>\n <ix-date-picker\n ref={(ref) => (this.datePickerElement = ref)}\n corners=\"left\"\n singleSelection={this.singleSelection}\n onDateChange={(event) => this.onDateChange(event)}\n from={this.from}\n to={this.to}\n format={this.dateFormat}\n minDate={this.minDate}\n maxDate={this.maxDate}\n weekStartIndex={this.weekStartIndex}\n embedded\n locale={this.locale}\n showWeekNumbers={this.showWeekNumbers}\n ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}\n ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}\n ></ix-date-picker>\n </ix-col>\n\n <ix-col>\n <ix-time-picker\n class=\"min-width\"\n ref={(ref) => (this.timePickerElement = ref)}\n embedded\n dateTimePickerAppearance={true}\n onTimeChange={(event) => this.onTimeChange(event)}\n format={this.timeFormat}\n time={this.time}\n ></ix-time-picker>\n <div class=\"btn-select-date-container\">\n <ix-button\n class=\"btn-select-date\"\n onClick={() => this.onDone()}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"datetime-picker.js","sourceRoot":"","sources":["../../../src/components/datetime-picker/datetime-picker.tsx"],"names":[],"mappings":"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","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\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker.events';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\nimport type {\n DateTimeDateChangeEvent,\n DateTimeSelectEvent,\n} from './datetime-picker.types';\n\n@Component({\n tag: 'ix-datetime-picker',\n styleUrl: 'datetime-picker.scss',\n shadow: true,\n})\nexport class DatetimePicker\n implements Omit<IxDatePickerComponent, 'corners' \| 'format'>\n{\n /\n If true a date-range can be selected (from/to).\n /\n @Prop() range = true;\n\n /\n Show hour input\n \n @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n /\n @Prop() showHour = true;\n\n /\n Show minutes input\n \n @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n /\n @Prop() showMinutes = true;\n\n /\n Show seconds input\n \n @deprecated This is now determined by the format that is used. Will be removed in 4.0.0\n /\n @Prop() showSeconds = true;\n\n /\n The earliest date that can be selected by the date picker.\n * If not set there will be no restriction.\n /\n @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 Date format string.\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n /\n Time format string.\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() timeFormat: string = 'HH:mm:ss';\n\n /\n The selected starting date. If the picker is not in range mode this is the selected date.\n * Format has to match the `format` property.\n /\n @Prop() from?: string;\n\n /\n The selected end date. If the the picker is not in range mode this property has no impact.\n * Format has to match the `format` property.\n /\n @Prop() to?: string;\n\n /\n Select time with format string\n /\n @Prop() time?: string;\n\n /\n Show time reference input\n * Time reference is default aligned with @see {this.timeFormat}\n /\n @Prop() showTimeReference: boolean = false;\n\n /\n Set time reference\n /\n @Prop() timeReference?: 'AM' \| 'PM';\n\n /\n Text of date select button\n /\n @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n /\n Top label of time picker\n \n @since 3.0.0\n /\n @Prop({ attribute: 'i18n-time' }) i18nTime: string = 'Time';\n\n /\n ARIA label for the previous month icon button\n * Will be set as aria-label on the nested HTML button element\n /\n @Prop() ariaLabelPreviousMonthButton?: string;\n\n /\n ARIA label for the next month icon button\n * Will be set as aria-label on the nested HTML button element\n /\n @Prop() ariaLabelNextMonthButton?: string;\n\n /\n The index of which day to start the week on, based on the Locale#weekdays array.\n * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n /\n @Prop() weekStartIndex = 0;\n\n /\n Format of time string\n * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.\n /\n @Prop() locale?: string;\n\n /\n Shows week numbers displayed on the left side of the date picker\n \n @since 3.0.0\n /\n @Prop() showWeekNumbers = false;\n\n /\n Time change\n /\n @Event() timeChange!: EventEmitter<string>;\n\n /\n Date change\n /\n @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n /\n Datetime selection event is fired after confirm button is pressed\n */\n @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n private datePickerElement?: HTMLIxDatePickerElement;\n private timePickerElement?: HTMLIxTimePickerElement;\n\n private async onDone() {\n const date = await this.datePickerElement?.getCurrentDate();\n const time = await this.timePickerElement?.getCurrentTime();\n\n this.dateSelect.emit({\n from: date?.from ?? '',\n to: date?.to ?? '',\n time: time ?? '',\n });\n }\n\n private async onDateChange(event: CustomEvent<string \| DateChangeEvent>) {\n event.preventDefault();\n event.stopPropagation();\n\n const { detail: date } = event;\n this.dateChange.emit(date);\n }\n\n private async onTimeChange(event: CustomEvent<string>) {\n event.preventDefault();\n event.stopPropagation();\n\n const { detail: time } = event;\n this.timeChange.emit(time);\n }\n\n render() {\n return (\n <Host>\n <ix-layout-grid class=\"no-padding\">\n <ix-row>\n <ix-col>\n <ix-date-picker\n ref={(ref) => (this.datePickerElement = ref)}\n corners=\"left\"\n range={this.range}\n onDateChange={(event) => this.onDateChange(event)}\n from={this.from}\n to={this.to}\n format={this.dateFormat}\n minDate={this.minDate}\n maxDate={this.maxDate}\n weekStartIndex={this.weekStartIndex}\n standaloneAppearance={false}\n locale={this.locale}\n showWeekNumbers={this.showWeekNumbers}\n ariaLabelPreviousMonthButton={this.ariaLabelPreviousMonthButton}\n ariaLabelNextMonthButton={this.ariaLabelNextMonthButton}\n ></ix-date-picker>\n </ix-col>\n\n <ix-col>\n <ix-time-picker\n class=\"min-width\"\n ref={(ref) => (this.timePickerElement = ref)}\n standaloneAppearance={false}\n dateTimePickerAppearance={true}\n onTimeChange={(event) => this.onTimeChange(event)}\n format={this.timeFormat}\n textTime={this.i18nTime}\n time={this.time}\n showHour={this.showHour}\n showMinutes={this.showMinutes}\n showSeconds={this.showSeconds}\n ></ix-time-picker>\n <div class=\"btn-select-date-container\">\n <ix-button\n class=\"btn-select-date\"\n onClick={() => this.onDone()}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/drawer/drawer.js CHANGED Viewed

@@ -22,7 +22,6 @@ export class Drawer {
         /**
          * Fired in case of an outside click during drawer showed state
          */
-        // eslint-disable-next-line @stencil-community/ban-default-true
         this.closeOnClickOutside = true;
         /**
          * Render the drawer with maximum height
@@ -133,7 +132,7 @@ export class Drawer {
         this.toggleDrawer(this.show);
     }
     render() {
-        return (h(Host, { key: '16521422bdb7a66912901a8d1d156772c31c588a', class: {
+        return (h(Host, { key: '7be961a99e8e7ada4525260428b8cb05e9699813', class: {
                 'drawer-container': true,
                 'display-none': true,
             }, style: {
@@ -141,15 +140,15 @@ export class Drawer {
                 'max-width': `${this.maxWidth}rem`,
                 height: this.fullHeight ? '100%' : 'auto',
                 overflow: 'hidden',
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '8f1c103f6bb03c362a492031e2ad92bcf25d89cc', style: {
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: '5c2b3998afbfb0d0f01b2a2634c6e6d28077af27', style: {
                 width: this.width === 'auto'
                     ? 'auto'
                     : `${this.getConstrainedWidth(this.width)}rem`,
-            } }, h("div", { key: '7ff4e51b1f93fb7f686db4915ee838f32f61ae86', class: "header" }, h("div", { key: '7c748e9f1e9c2b5468fd524844dfc761069572f2', class: "header-content" }, h("slot", { key: 'ea0ef18347626104852b149f3944165932f9d661', name: "header" })), h("ix-icon-button", { key: 'a446d3e8cb7648d320cd4ea31899d2b289afbabe', class: "close-button", style: {
+            } }, h("div", { key: 'b82cde6e8125ea023a8d553434ec399f681038a9', class: "header" }, h("div", { key: '5aa258a2f3cdcb742993993ea0ed9bca152c2db3', class: "header-content" }, h("slot", { key: 'ef89dbef6fbc0cad872effee17836f82be5dc219', name: "header" })), h("ix-icon-button", { key: '461b4ece5fb4933b84174f51ee25d7de19de3843', class: "close-button", style: {
                 display: this.showContent ? 'block' : 'none',
-            }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), h("div", { key: '87f799aa707aceefa145a0b547761f587593d8e2', class: "content", style: {
+            }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), h("div", { key: 'f1d1735e2ae9d8ee33771bd3d11459bb3ac84d65', class: "content", style: {
                 display: this.showContent ? 'block' : 'none',
-            } }, h("slot", { key: 'aea1e984256bb60bcb6c6a6721988b86decdfca0' })))));
+            } }, h("slot", { key: 'c1506217b6b73a685df75906356c3c1f29470d46' })))));
     }
     static get is() { return "ix-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","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\nimport { iconClose } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport Animation from '../utils/animation';\n\n/\n @deprecated Will be removed with 5.0.0, use ix-pane as successor\n /\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n ARIA label for the close icon button\n * Will be set as aria-label on the nested HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelCloseButton?: string;\n\n /\n Fire event after drawer is open\n /\n @Event() open!: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose!: EventEmitter;\n\n toggle = false;\n\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @State() showContent = true;\n\n @Watch('show')\n onShowChanged(newValue: boolean, oldValue?: boolean) {\n if (newValue === oldValue) {\n return;\n }\n\n this.toggleDrawer(newValue);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n show = show ?? !this.show;\n\n if (show) {\n const { defaultPrevented } = this.open.emit();\n\n if (defaultPrevented) {\n return;\n }\n\n this.show = true;\n if (!this.toggle && this.divElement) {\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, Animation.mediumTime);\n }\n } else {\n const { defaultPrevented } = this.drawerClose.emit();\n\n if (defaultPrevented) {\n return;\n }\n\n this.show = false;\n\n if (this.toggle && this.divElement) {\n this.slideOutRight(this.divElement);\n }\n\n window.removeEventListener('mousedown', this.callback);\n }\n\n this.toggle = this.show;\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.toggleDrawer(false);\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private getConstrainedWidth(width: number) {\n return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n }\n\n private slideOutRight(el: HTMLElement) {\n const initialWidth = `${this.getConstrainedWidth(\n this.width === 'auto' ? this.minWidth : this.width\n )}rem`;\n\n animate(el, {\n duration: Animation.mediumTime,\n width: [initialWidth, 0],\n opacity: [1, 0],\n easing: 'easeInSine',\n onComplete: () => {\n el.classList.add('display-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n const targetWidth = `${this.getConstrainedWidth(\n this.width === 'auto' ? this.minWidth : this.width\n )}rem`;\n\n animate(el, {\n duration: Animation.mediumTime,\n width: [0, targetWidth],\n opacity: [0, 1],\n easing: 'easeOutSine',\n onBegin: () => {\n el.classList.remove('display-none');\n },\n onComplete: () => {\n this.showContent = true;\n },\n });\n }\n\n componentDidLoad() {\n this.toggleDrawer(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n 'display-none': true,\n }}\n style={{\n width: '0',\n 'max-width': `${this.maxWidth}rem`,\n height: this.fullHeight ? '100%' : 'auto',\n overflow: 'hidden',\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div\n style={{\n width:\n this.width === 'auto'\n ? 'auto'\n : `${this.getConstrainedWidth(this.width)}rem`,\n }}\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n style={{\n display: this.showContent ? 'block' : 'none',\n }}\n icon={iconClose}\n iconColor=\"color-soft-text\"\n size=\"24\"\n variant=\"tertiary\"\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n aria-label={this.ariaLabelCloseButton}\n ></ix-icon-button>\n </div>\n <div\n class=\"content\"\n style={{\n display: this.showContent ? 'block' : 'none',\n }}\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","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\nimport { iconClose } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport Animation from '../utils/animation';\n\n/\n @deprecated Will be removed with 5.0.0, use ix-pane as successor\n /\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n ARIA label for the close icon button\n * Will be set as aria-label on the nested HTML button element\n \n @since 3.2.0\n /\n @Prop() ariaLabelCloseButton?: string;\n\n /\n Fire event after drawer is open\n /\n @Event() open!: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose!: EventEmitter;\n\n toggle = false;\n\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @State() showContent = true;\n\n @Watch('show')\n onShowChanged(newValue: boolean, oldValue?: boolean) {\n if (newValue === oldValue) {\n return;\n }\n\n this.toggleDrawer(newValue);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n show = show ?? !this.show;\n\n if (show) {\n const { defaultPrevented } = this.open.emit();\n\n if (defaultPrevented) {\n return;\n }\n\n this.show = true;\n if (!this.toggle && this.divElement) {\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, Animation.mediumTime);\n }\n } else {\n const { defaultPrevented } = this.drawerClose.emit();\n\n if (defaultPrevented) {\n return;\n }\n\n this.show = false;\n\n if (this.toggle && this.divElement) {\n this.slideOutRight(this.divElement);\n }\n\n window.removeEventListener('mousedown', this.callback);\n }\n\n this.toggle = this.show;\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.toggleDrawer(false);\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private getConstrainedWidth(width: number) {\n return Math.min(Math.max(width, this.minWidth), this.maxWidth);\n }\n\n private slideOutRight(el: HTMLElement) {\n const initialWidth = `${this.getConstrainedWidth(\n this.width === 'auto' ? this.minWidth : this.width\n )}rem`;\n\n animate(el, {\n duration: Animation.mediumTime,\n width: [initialWidth, 0],\n opacity: [1, 0],\n easing: 'easeInSine',\n onComplete: () => {\n el.classList.add('display-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n const targetWidth = `${this.getConstrainedWidth(\n this.width === 'auto' ? this.minWidth : this.width\n )}rem`;\n\n animate(el, {\n duration: Animation.mediumTime,\n width: [0, targetWidth],\n opacity: [0, 1],\n easing: 'easeOutSine',\n onBegin: () => {\n el.classList.remove('display-none');\n },\n onComplete: () => {\n this.showContent = true;\n },\n });\n }\n\n componentDidLoad() {\n this.toggleDrawer(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n 'display-none': true,\n }}\n style={{\n width: '0',\n 'max-width': `${this.maxWidth}rem`,\n height: this.fullHeight ? '100%' : 'auto',\n overflow: 'hidden',\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div\n style={{\n width:\n this.width === 'auto'\n ? 'auto'\n : `${this.getConstrainedWidth(this.width)}rem`,\n }}\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n style={{\n display: this.showContent ? 'block' : 'none',\n }}\n icon={iconClose}\n iconColor=\"color-soft-text\"\n size=\"24\"\n variant=\"tertiary\"\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n aria-label={this.ariaLabelCloseButton}\n ></ix-icon-button>\n </div>\n <div\n class=\"content\"\n style={{\n display: this.showContent ? 'block' : 'none',\n }}\n >\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/event-list/event-list.js CHANGED Viewed

@@ -25,9 +25,9 @@ export class EventList {
          */
         this.compact = false;
         /**
-         * Animate state change transitions. Defaults to 'false'.
+         * Animate state change transitions. Defaults to 'true'.
          */
-        this.animated = false;
+        this.animated = true;
         /**
          * Display a chevron icon in list items. Defaults to 'false'
          */
@@ -128,11 +128,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: '700b662ebfba2754f0c4c0d3bf09e95c5277760d', class: {
+        return (h(Host, { key: '754948a81d85157177bfff7afeee4f4851540c4d', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: 'ebfed96ff53b21d49c9b9464978c79faa22210e0', role: "list" }, h("slot", { key: '4df468a4c4cc9643dae0b13f7b88df3402e3beaf' }))));
+            } }, h("div", { key: '27c68dcf3eeddc91e31bd1bb3abd3f933aa3cbdf', role: "list" }, h("slot", { key: '828bb7c4b9b39cfb6aff66f0cbe35b0705ae6419' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }
@@ -201,12 +201,12 @@ export class EventList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Animate state change transitions. Defaults to 'false'."
+                    "text": "Animate state change transitions. Defaults to 'true'."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "chevron": {
                 "type": "boolean",

package/dist/collection/components/event-list/event-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"event-list.js","sourceRoot":"","sources":["../../../src/components/event-list/event-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAOlC,MAAM,OAAO,SAAS;IALtB;QAMmB,qBAAgB,GAAG,sBAAsB,CACxD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAC3B,CAAC;QAOF;;;;;WAKG;QACK,eAAU,GAAuB,GAAG,CAAC;QAE7C;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACK,aAAQ,GAAG,~~KAAK~~,CAAC;~~QAEzB~~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","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\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { animate } from 'animejs';\n\n@Component({\n tag: 'ix-event-list',\n styleUrl: 'event-list.scss',\n shadow: true,\n})\nexport class EventList {\n private readonly mutationObserver = createMutationObserver(\n this.onMutation.bind(this)\n );\n\n private static readonly fadeOutDuration = 50;\n private static readonly fadeInDuration = 150;\n\n @Element() hostElement!: HTMLIxEventListElement;\n\n /\n Determines the height of list items.\n * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n * In case a number is supplied it will get converted to rem internally.\n * Defaults to 'S'.\n /\n @Prop() itemHeight: 'S' \| 'L' \| number = 'S';\n\n /\n Make event-list items more compact\n /\n @Prop() compact = false;\n\n /\n Animate state change transitions. Defaults to '~~false~~'.\n /\n @Prop() animated = ~~false~~;\n\n /\n Display a chevron icon in list items. Defaults to 'false'\n /\n @Prop() chevron = false;\n\n @Watch('chevron')\n watchChevron(chevron: boolean \| undefined) {\n this.handleChevron(chevron);\n }\n\n componentDidLoad() {\n if (this.animated) {\n this.triggerFadeIn();\n }\n\n if (!Number.isNaN(Number(this.itemHeight))) {\n const height = convertToRemString(this.itemHeight as number);\n this.hostElement\n .querySelectorAll('ix-event-list-item')\n .forEach((item) => {\n this.setCustomHeight(item as HTMLElement, height);\n });\n }\n\n this.handleChevron(this.chevron);\n\n this.mutationObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n });\n }\n\n private onMutation(mutationRecords: Array<MutationRecord>) {\n this.triggerFadeOut().then(() => {\n if (!Number.isNaN(Number(this.itemHeight))) {\n const height = convertToRemString(this.itemHeight as number);\n const eventListItems = this.findEventListItems(mutationRecords);\n eventListItems.forEach((item) => this.setCustomHeight(item, height));\n }\n\n this.handleChevron(this.chevron);\n this.triggerFadeIn();\n });\n }\n\n private findEventListItems(mutationRecords: MutationRecord[]): HTMLElement[] {\n const eventListItems: HTMLElement[] = [];\n\n mutationRecords.forEach((mutation) => {\n if (mutation.type !== 'childList') {\n return;\n }\n\n mutation.addedNodes.forEach((node) => {\n const element = node as HTMLElement;\n\n if (element.tagName === 'IX-EVENT-LIST-ITEM') {\n eventListItems.push(element);\n }\n });\n });\n\n return eventListItems;\n }\n\n private setCustomHeight(item: HTMLElement, height: string) {\n item.style.setProperty('--event-list-item-height', height);\n }\n\n private triggerFadeOut(): Promise<void> {\n return new Promise((resolve) => {\n if (!this.animated) {\n resolve();\n }\n\n const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n animate(listElement!, {\n opacity: [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }],\n duration: EventList.fadeOutDuration,\n onComplete: () => {\n resolve();\n },\n });\n });\n }\n\n private triggerFadeIn() {\n if (!this.animated) {\n return;\n }\n\n const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n listItems.forEach((e, i) => {\n const delay = i 80;\n const offset = delay / (delay + EventList.fadeInDuration);\n animate(e, {\n offset: offset,\n duration: EventList.fadeInDuration + delay,\n opacity: [0, 1],\n easing: 'easeInOutSine',\n delay: delay,\n autoplay: true,\n });\n });\n }\n\n private handleChevron(chevron: boolean \| undefined): void {\n const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n listItems.forEach((e) => {\n if (chevron) {\n e.setAttribute('chevron', 'true');\n } else if (chevron !== undefined) {\n e.removeAttribute('chevron');\n }\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'item-size-s': this.itemHeight === 'S',\n 'item-size-l': this.itemHeight === 'L',\n compact: this.compact,\n }}\n >\n <div role=\"list\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"event-list.js","sourceRoot":"","sources":["../../../src/components/event-list/event-list.tsx"],"names":[],"mappings":"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","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\nimport { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { animate } from 'animejs';\n\n@Component({\n tag: 'ix-event-list',\n styleUrl: 'event-list.scss',\n shadow: true,\n})\nexport class EventList {\n private readonly mutationObserver = createMutationObserver(\n this.onMutation.bind(this)\n );\n\n private static readonly fadeOutDuration = 50;\n private static readonly fadeInDuration = 150;\n\n @Element() hostElement!: HTMLIxEventListElement;\n\n /\n Determines the height of list items.\n * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n * In case a number is supplied it will get converted to rem internally.\n * Defaults to 'S'.\n /\n @Prop() itemHeight: 'S' \| 'L' \| number = 'S';\n\n /\n Make event-list items more compact\n /\n @Prop() compact = false;\n\n /\n Animate state change transitions. Defaults to 'true'.\n /\n @Prop() animated = true;\n\n /\n Display a chevron icon in list items. Defaults to 'false'\n /\n @Prop() chevron = false;\n\n @Watch('chevron')\n watchChevron(chevron: boolean \| undefined) {\n this.handleChevron(chevron);\n }\n\n componentDidLoad() {\n if (this.animated) {\n this.triggerFadeIn();\n }\n\n if (!Number.isNaN(Number(this.itemHeight))) {\n const height = convertToRemString(this.itemHeight as number);\n this.hostElement\n .querySelectorAll('ix-event-list-item')\n .forEach((item) => {\n this.setCustomHeight(item as HTMLElement, height);\n });\n }\n\n this.handleChevron(this.chevron);\n\n this.mutationObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n });\n }\n\n private onMutation(mutationRecords: Array<MutationRecord>) {\n this.triggerFadeOut().then(() => {\n if (!Number.isNaN(Number(this.itemHeight))) {\n const height = convertToRemString(this.itemHeight as number);\n const eventListItems = this.findEventListItems(mutationRecords);\n eventListItems.forEach((item) => this.setCustomHeight(item, height));\n }\n\n this.handleChevron(this.chevron);\n this.triggerFadeIn();\n });\n }\n\n private findEventListItems(mutationRecords: MutationRecord[]): HTMLElement[] {\n const eventListItems: HTMLElement[] = [];\n\n mutationRecords.forEach((mutation) => {\n if (mutation.type !== 'childList') {\n return;\n }\n\n mutation.addedNodes.forEach((node) => {\n const element = node as HTMLElement;\n\n if (element.tagName === 'IX-EVENT-LIST-ITEM') {\n eventListItems.push(element);\n }\n });\n });\n\n return eventListItems;\n }\n\n private setCustomHeight(item: HTMLElement, height: string) {\n item.style.setProperty('--event-list-item-height', height);\n }\n\n private triggerFadeOut(): Promise<void> {\n return new Promise((resolve) => {\n if (!this.animated) {\n resolve();\n }\n\n const listElement = this.hostElement.shadowRoot!.querySelector('ul');\n\n animate(listElement!, {\n opacity: [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }],\n duration: EventList.fadeOutDuration,\n onComplete: () => {\n resolve();\n },\n });\n });\n }\n\n private triggerFadeIn() {\n if (!this.animated) {\n return;\n }\n\n const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n listItems.forEach((e, i) => {\n const delay = i 80;\n const offset = delay / (delay + EventList.fadeInDuration);\n animate(e, {\n offset: offset,\n duration: EventList.fadeInDuration + delay,\n opacity: [0, 1],\n easing: 'easeInOutSine',\n delay: delay,\n autoplay: true,\n });\n });\n }\n\n private handleChevron(chevron: boolean \| undefined): void {\n const listItems = this.hostElement.querySelectorAll('ix-event-list-item');\n\n listItems.forEach((e) => {\n if (chevron) {\n e.setAttribute('chevron', 'true');\n } else if (chevron !== undefined) {\n e.removeAttribute('chevron');\n }\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'item-size-s': this.itemHeight === 'S',\n 'item-size-l': this.itemHeight === 'L',\n compact: this.compact,\n }}\n >\n <div role=\"list\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/filter-chip/filter-chip.css CHANGED Viewed

@@ -111,6 +111,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 1.5rem;
 }
 :host .slot-container :host-context(.disabled) {
   background-color: var(--theme-color-ghost);

package/dist/collection/components/group/group.css CHANGED Viewed

@@ -89,22 +89,10 @@
   background-color: var(--theme-group-item--background--selected);
 }
 :host .group-header:not(.disabled):not(:disabled):focus-visible {
-  height: calc(4rem - 2px);
-  min-height: calc(4rem - 2px);
   border: 1px solid var(--theme-color-focus-bdr);
   border-radius: var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;
   outline: none;
 }
-:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-selection-indicator {
-  width: calc(0.25rem - 1px);
-}
-:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-content {
-  padding: calc(0.5rem - 1px) calc(0.5rem - 1px) calc(0.5rem - 1px) 0;
-}
-:host .group-header:not(.disabled):not(:disabled):focus-visible .btn-expand-header {
-  margin-top: calc(0.5rem - 1px);
-  margin-bottom: calc(0.5rem - 1px);
-}
 :host .group-header.selected {
   background-color: var(--theme-group-item--background--selected);
 }

package/dist/collection/components/group/group.js CHANGED Viewed

@@ -17,9 +17,9 @@ export class Group {
          */
         this.suppressHeaderSelection = false;
         /**
-         * Whether the group is expanded or collapsed. Defaults to false.
+         * Whether the group is collapsed or expanded. Defaults to true.
          */
-        this.expanded = false;
+        this.collapsed = true;
         /**
          * Whether the group is selected.
          */
@@ -51,12 +51,12 @@ export class Group {
         return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
     }
     onExpandClick(event) {
-        const oldExpanded = this.expanded;
-        this.expanded = !this.expanded;
-        const { defaultPrevented } = this.expandedChanged.emit(this.expanded);
+        const oldCollapsed = this.collapsed;
+        this.collapsed = !this.collapsed;
+        const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);
         event.stopPropagation();
         if (defaultPrevented) {
-            this.expanded = oldExpanded;
+            this.collapsed = oldCollapsed;
         }
     }
     onHeaderClick(event) {
@@ -137,27 +137,27 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '3f0490f98871cd258f1a7735587c5c994787b5f3' }, h("div", { key: '85a820e8677768ac5952862d6860bf67ddddd06b', class: {
+        return (h(Host, { key: '58701d250c8e595737fa95f9981e788298e26c2a' }, h("div", { key: '0f754f0be1fe8278e882447cd95f84384b82c467', class: {
                 'group-header': true,
-                expand: this.expanded,
+                expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'eb02896f695cf74d19a0c17e732886ba2791cae8', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '6c361a6e2bb2b9e9614f726c72d943bb540c6e6f', class: {
+            }, tabindex: "0" }, h("div", { key: 'b15eddf0aa21c1f392c49974624c4d66f7ca441f', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '5987826be949fabd86fe4ab2d5da9f6ee92becde', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '957fddd2512cb0004889bb8627dca06a24172678', class: "btn-expand-header" }, h("ix-icon", { key: '5e6d9f54bd16530b6ee35be0ae2429075574f7af', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: 'fb364b83a2dff3fcacbd661e6093ce8b975e3930', class: "btn-expand-header" }, h("ix-icon", { key: 'd308f69c7d8e12d34d3442ce9a318a91b67c2033', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: '7afbcddcae71944c3d89f4671c52faec405072da', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '434daedde0c193250cc55ecef24a648427d93521', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '4c3e93b8fe830a7d3e40c9560b5821a44e82a076' }, h("slot", { key: '509f13fadad10aa375da8d823692c869031e51c5', name: "dropdown" })))), h("div", { key: '1fbc03459ee2ce55b44f2393898ced6fd8d767ca', class: {
+            }, name: this.collapsed ? iconChevronDownSmall : iconChevronUpSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'c5bad9a9cb3d025b5ea2bf1b85f471687959c69b', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '2b7b1d241e9a33609d5b28653aaeeb4a51bb64af', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: 'eb3c896e413299db1b9ce93173b9d926d938e3e1' }, h("slot", { key: '35670588a1f87409787c75fc32d34bfa9355d160', name: "dropdown" })))), h("div", { key: '11254313bc4e541b69f38071c027cdfd0ef735f5', class: {
                 'group-content': true,
-            } }, h("div", { key: 'e5c7ab27d286eb9a3e56d906cff40009fcd9c317', style: {
-                display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: '270b3877b50ad67ad95ef1bf6ac28aa7a6bfc1ae', onSlotchange: () => {
+            } }, h("div", { key: '0c24d4903f217ded9c6330b349de13abc77b464b', style: {
+                display: this.collapsed ? 'none' : 'contents',
+            } }, h("slot", { key: '45e1064fa54bb32ad27ac9f502cb4ec9a38963bf', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '1a44451e3855c4e7fa22d1aefa4df34692dc3453', class: {
+            } }), h("ix-group-item", { key: '81b3018f3cbafbcaf8c7ec0bad46b538944423b0', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '221292d8be0d15548275e6a24e4f3fcbccd3d2dc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, h("slot", { key: 'e39c3a323325c7b6b1a2bc02c3c3fa47ad421a5d', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }
@@ -231,9 +231,9 @@ export class Group {
                 "setter": false,
                 "reflect": false
             },
-            "expanded": {
+            "collapsed": {
                 "type": "boolean",
-                "attribute": "expanded",
+                "attribute": "collapsed",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -244,12 +244,12 @@ export class Group {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the group is expanded or collapsed. Defaults to false."
+                    "text": "Whether the group is collapsed or expanded. Defaults to true."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "selected": {
                 "type": "boolean",
@@ -353,14 +353,14 @@ export class Group {
                     "references": {}
                 }
             }, {
-                "method": "expandedChanged",
-                "name": "expandedChanged",
+                "method": "collapsedChanged",
+                "name": "collapsedChanged",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Group expanded"
+                    "text": "Group collapsed"
                 },
                 "complexType": {
                     "original": "boolean",

package/dist/collection/components/group/group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 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 Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport {\n iconChevronDownSmall,\n iconChevronUpSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-group',\n styleUrl: 'group.scss',\n shadow: true,\n})\nexport class Group {\n @Element() hostElement!: HTMLIxGroupElement;\n\n /\n Prevent header from being selectable\n /\n @Prop() suppressHeaderSelection = false;\n\n /\n Group header\n /\n @Prop() header?: string;\n\n /\n Group header subtitle\n /\n @Prop() subHeader?: string;\n\n /\n Whether the group is expanded or collapsed. Defaults to false.\n /\n @Prop({ mutable: true, reflect: true }) expanded = false;\n\n /\n Whether the group is selected.\n /\n @Prop({ mutable: true, reflect: true }) selected = false;\n\n /\n The index of the selected group entry.\n * If undefined no group item is selected.\n /\n @Prop({ mutable: true, reflect: true }) index?: number;\n\n /\n Expand the group if the header is clicked\n /\n @Prop() expandOnHeaderClick = false;\n\n /\n Emits when whole group gets selected.\n /\n @Event() selectGroup!: EventEmitter<boolean>;\n\n /\n Emits when group item gets selected.\n /\n @Event() selectItem!: EventEmitter<number>;\n\n /\n Group expanded\n */\n @Event() expandedChanged!: EventEmitter<boolean>;\n\n @State() itemSelected = false;\n @State() slotSize = this.groupItems.length;\n @State() footerVisible = false;\n\n @State() showExpandCollapsedIcon = false;\n\n @State() hasDropdown = false;\n\n private observer: MutationObserver = null!;\n\n @Watch('selected')\n selectedChanged(newSelected: boolean) {\n if (newSelected === false) {\n this.changeItemIndex();\n }\n }\n\n get dropdownItems() {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-dropdown-item')\n );\n }\n\n get groupItems(): Array<HTMLIxGroupItemElement> {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n );\n }\n\n get groupContent() {\n return this.hostElement.shadowRoot?.querySelector('.group-content');\n }\n\n private onExpandClick(event: Event) {\n const oldExpanded = this.expanded;\n this.expanded = !this.expanded;\n const { defaultPrevented } = this.expandedChanged.emit(this.expanded);\n event.stopPropagation();\n\n if (defaultPrevented) {\n this.expanded = oldExpanded;\n }\n }\n\n private onHeaderClick(event: Event) {\n if (this.suppressHeaderSelection) {\n this.onExpandClick(event);\n return;\n }\n\n this.changeHeaderSelection(!this.selected);\n this.changeItemIndex();\n }\n\n private changeHeaderSelection(newSelection: boolean) {\n const oldIsHeaderSelected = this.selected;\n const newIsHeaderSelected = newSelection;\n this.selected = newIsHeaderSelected;\n const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n if (defaultPrevented) {\n this.selected = oldIsHeaderSelected;\n return;\n }\n }\n\n private changeItemIndex(index?: number) {\n const oldIndex = this.index;\n const newIndex = index === this.index ? undefined : index;\n\n if (this.index === newIndex) {\n return;\n }\n\n this.index = newIndex;\n const { defaultPrevented } = this.selectItem.emit(newIndex);\n if (defaultPrevented) {\n this.index = oldIndex;\n return;\n }\n\n const items = this.groupItems;\n items.forEach((item, i) => {\n item.selected = i === this.index;\n });\n\n this.itemSelected = items.some((item) => item.selected);\n }\n\n private onSlotChange() {\n const slot = this.hostElement.shadowRoot?.querySelector(\n 'slot[name=\"footer\"]'\n );\n\n if (slot) {\n this.footerVisible = hasSlottedElements(slot);\n }\n }\n\n private checkDropdownSlot() {\n this.hasDropdown = !!this.hostElement.querySelector('[slot=\"dropdown\"]');\n }\n\n componentWillRender() {\n this.groupItems.forEach((item, index) => {\n item.selected = index === this.index;\n item.index = index;\n });\n this.checkDropdownSlot();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => {\n this.slotSize = this.groupItems.length;\n });\n if (!this.groupContent) {\n return;\n }\n this.observer.observe(this.groupContent, {\n childList: true,\n });\n this.checkDropdownSlot();\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n @Listen('selectedChanged')\n onItemClicked(event: CustomEvent) {\n if (event.target instanceof HTMLElement) {\n const item = event.target as HTMLIxGroupItemElement;\n const index = this.groupItems.indexOf(item);\n this.changeItemIndex(index);\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'group-header': true,\n expand: this.expanded,\n selected: this.selected,\n }}\n tabindex=\"0\"\n >\n <div\n class=\"group-header-clickable\"\n onClick={(e) => this.onHeaderClick(e)}\n >\n <div\n class={{\n 'group-header-selection-indicator': true,\n 'group-header-selection-indicator-item-selected':\n this.itemSelected,\n }}\n ></div>\n <div class=\"btn-expand-header\">\n <ix-icon\n data-testid=\"expand-collapsed-icon\"\n class={{\n hidden: !this.showExpandCollapsedIcon,\n }}\n name={this.expanded ? iconChevronUpSmall : iconChevronDownSmall}\n onClick={(event: Event) => this.onExpandClick(event)}\n ></ix-icon>\n </div>\n\n <div class=\"group-header-content\">\n {this.header ? (\n <div class=\"group-header-props-container\">\n <div class=\"group-header-title\">\n <span title={this.header}>{this.header}</span>\n </div>\n <div class=\"group-subheader\" title={this.subHeader}>\n {this.subHeader}\n </div>\n </div>\n ) : null}\n <slot name=\"header\"></slot>\n </div>\n </div>\n {this.hasDropdown && (\n <ix-group-context-menu>\n <slot name=\"dropdown\"></slot>\n </ix-group-context-menu>\n )}\n </div>\n <div\n class={{\n 'group-content': true,\n }}\n >\n <div\n style={{\n display: this.expanded ? 'contents' : 'none',\n }}\n >\n <slot\n onSlotchange={() => {\n const slot =\n this.hostElement.shadowRoot?.querySelector(\n 'slot:not([name])'\n );\n this.showExpandCollapsedIcon = hasSlottedElements(slot);\n }}\n ></slot>\n <ix-group-item\n class={{\n footer: true,\n 'footer-visible': this.footerVisible,\n }}\n groupFooter\n suppressSelection\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.onSlotChange()}\n ></slot>\n </ix-group-item>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/components/group/group.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 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 Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport {\n iconChevronDownSmall,\n iconChevronUpSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-group',\n styleUrl: 'group.scss',\n shadow: true,\n})\nexport class Group {\n @Element() hostElement!: HTMLIxGroupElement;\n\n /\n Prevent header from being selectable\n /\n @Prop() suppressHeaderSelection = false;\n\n /\n Group header\n /\n @Prop() header?: string;\n\n /\n Group header subtitle\n /\n @Prop() subHeader?: string;\n\n /\n Whether the group is collapsed or expanded. Defaults to true.\n /\n @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n /\n Whether the group is selected.\n /\n @Prop({ mutable: true, reflect: true }) selected = false;\n\n /\n The index of the selected group entry.\n * If undefined no group item is selected.\n /\n @Prop({ mutable: true, reflect: true }) index?: number;\n\n /\n Expand the group if the header is clicked\n /\n @Prop() expandOnHeaderClick = false;\n\n /\n Emits when whole group gets selected.\n /\n @Event() selectGroup!: EventEmitter<boolean>;\n\n /\n Emits when group item gets selected.\n /\n @Event() selectItem!: EventEmitter<number>;\n\n /\n Group collapsed\n */\n @Event() collapsedChanged!: EventEmitter<boolean>;\n\n @State() itemSelected = false;\n @State() slotSize = this.groupItems.length;\n @State() footerVisible = false;\n\n @State() showExpandCollapsedIcon = false;\n\n @State() hasDropdown = false;\n\n private observer: MutationObserver = null!;\n\n @Watch('selected')\n selectedChanged(newSelected: boolean) {\n if (newSelected === false) {\n this.changeItemIndex();\n }\n }\n\n get dropdownItems() {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-dropdown-item')\n );\n }\n\n get groupItems(): Array<HTMLIxGroupItemElement> {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n );\n }\n\n get groupContent() {\n return this.hostElement.shadowRoot?.querySelector('.group-content');\n }\n\n private onExpandClick(event: Event) {\n const oldCollapsed = this.collapsed;\n this.collapsed = !this.collapsed;\n const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);\n event.stopPropagation();\n\n if (defaultPrevented) {\n this.collapsed = oldCollapsed;\n }\n }\n\n private onHeaderClick(event: Event) {\n if (this.suppressHeaderSelection) {\n this.onExpandClick(event);\n return;\n }\n\n this.changeHeaderSelection(!this.selected);\n this.changeItemIndex();\n }\n\n private changeHeaderSelection(newSelection: boolean) {\n const oldIsHeaderSelected = this.selected;\n const newIsHeaderSelected = newSelection;\n this.selected = newIsHeaderSelected;\n const { defaultPrevented } = this.selectGroup.emit(newIsHeaderSelected);\n\n if (defaultPrevented) {\n this.selected = oldIsHeaderSelected;\n return;\n }\n }\n\n private changeItemIndex(index?: number) {\n const oldIndex = this.index;\n const newIndex = index === this.index ? undefined : index;\n\n if (this.index === newIndex) {\n return;\n }\n\n this.index = newIndex;\n const { defaultPrevented } = this.selectItem.emit(newIndex);\n if (defaultPrevented) {\n this.index = oldIndex;\n return;\n }\n\n const items = this.groupItems;\n items.forEach((item, i) => {\n item.selected = i === this.index;\n });\n\n this.itemSelected = items.some((item) => item.selected);\n }\n\n private onSlotChange() {\n const slot = this.hostElement.shadowRoot?.querySelector(\n 'slot[name=\"footer\"]'\n );\n\n if (slot) {\n this.footerVisible = hasSlottedElements(slot);\n }\n }\n\n private checkDropdownSlot() {\n this.hasDropdown = !!this.hostElement.querySelector('[slot=\"dropdown\"]');\n }\n\n componentWillRender() {\n this.groupItems.forEach((item, index) => {\n item.selected = index === this.index;\n item.index = index;\n });\n this.checkDropdownSlot();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => {\n this.slotSize = this.groupItems.length;\n });\n if (!this.groupContent) {\n return;\n }\n this.observer.observe(this.groupContent, {\n childList: true,\n });\n this.checkDropdownSlot();\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n @Listen('selectedChanged')\n onItemClicked(event: CustomEvent) {\n if (event.target instanceof HTMLElement) {\n const item = event.target as HTMLIxGroupItemElement;\n const index = this.groupItems.indexOf(item);\n this.changeItemIndex(index);\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'group-header': true,\n expand: !this.collapsed,\n selected: this.selected,\n }}\n tabindex=\"0\"\n >\n <div\n class=\"group-header-clickable\"\n onClick={(e) => this.onHeaderClick(e)}\n >\n <div\n class={{\n 'group-header-selection-indicator': true,\n 'group-header-selection-indicator-item-selected':\n this.itemSelected,\n }}\n ></div>\n <div class=\"btn-expand-header\">\n <ix-icon\n data-testid=\"expand-collapsed-icon\"\n class={{\n hidden: !this.showExpandCollapsedIcon,\n }}\n name={\n this.collapsed ? iconChevronDownSmall : iconChevronUpSmall\n }\n onClick={(event: Event) => this.onExpandClick(event)}\n ></ix-icon>\n </div>\n\n <div class=\"group-header-content\">\n {this.header ? (\n <div class=\"group-header-props-container\">\n <div class=\"group-header-title\">\n <span title={this.header}>{this.header}</span>\n </div>\n <div class=\"group-subheader\" title={this.subHeader}>\n {this.subHeader}\n </div>\n </div>\n ) : null}\n <slot name=\"header\"></slot>\n </div>\n </div>\n {this.hasDropdown && (\n <ix-group-context-menu>\n <slot name=\"dropdown\"></slot>\n </ix-group-context-menu>\n )}\n </div>\n <div\n class={{\n 'group-content': true,\n }}\n >\n <div\n style={{\n display: this.collapsed ? 'none' : 'contents',\n }}\n >\n <slot\n onSlotchange={() => {\n const slot =\n this.hostElement.shadowRoot?.querySelector(\n 'slot:not([name])'\n );\n this.showExpandCollapsedIcon = hasSlottedElements(slot);\n }}\n ></slot>\n <ix-group-item\n suppressSelection={true}\n focusable={false}\n class={{\n footer: true,\n 'footer-visible': this.footerVisible,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.onSlotChange()}\n ></slot>\n </ix-group-item>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}