npm - @siemens/ix - Versions diffs - 4.2.0 → 4.3.0 - Mend

@siemens/ix 4.2.0 → 4.3.0

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

Files changed (928) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\nimport { makeRef } from '../utils/make-ref';\nimport type { SliderMarker } from './slider.types';\n\nfunction between(min: number, value: number, max: number) {\n if (value < min) {\n return min;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n}\n\n/\n @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n /\n@Component({\n tag: 'ix-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class Slider {\n @Element() hostElement!: HTMLIxSliderElement;\n\n /\n Legal number intervals\n \n {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step}\n /\n @Prop() step: number = 1;\n\n /\n Minimum slider value\n /\n @Prop() min = 0;\n\n /\n Maximum slider value\n /\n @Prop() max = 100;\n\n /\n Current value of the slider\n /\n @Prop() value = 0;\n\n /\n Define tick marker on the slider. Marker has to be within slider min/max\n /\n @Prop() marker?: SliderMarker;\n\n /\n Show a trace line\n /\n @Prop() trace = false;\n\n /\n Define the start point of the trace line\n /\n @Prop() traceReference = 0;\n\n /\n Show control as disabled\n /\n @Prop() disabled = false;\n\n /\n Show error state and message\n /\n @Prop() error?: boolean \| string;\n\n /\n \n /\n @Event() valueChange!: EventEmitter<number>;\n\n @State() rangeInput = 0;\n @State() rangeMin = 0;\n @State() rangeMax = 100;\n @State() rangeTraceReference = 0;\n @State() showTooltip = false;\n\n private a11yAttributes?: A11yAttributes;\n\n private readonly thumbRef = makeRef<HTMLDivElement>();\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n get tooltip() {\n return this.tooltipRef.current;\n }\n\n get pseudoThumb() {\n return this.thumbRef.current;\n }\n\n get slider() {\n return this.hostElement.shadowRoot?.getElementById(\n 'slider'\n ) as HTMLInputElement;\n }\n\n @Watch('showTooltip')\n onShowTooltipChange() {\n if (this.showTooltip && this.pseudoThumb) {\n this.tooltip?.showTooltip(this.pseudoThumb);\n return;\n }\n\n this.tooltip?.hideTooltip();\n }\n\n componentWillLoad() {\n this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n 'role',\n 'aria-valuemin',\n 'aria-valuemax',\n 'aria-valuenow',\n ]);\n this.updateRangeVariables();\n }\n\n @Watch('value')\n @Watch('max')\n @Watch('min')\n @Watch('traceReference')\n private updateRangeVariables() {\n this.rangeInput = between(this.min, this.value, this.max);\n this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n this.rangeMin = Math.min(this.min, this.max);\n this.rangeMax = Math.max(this.min, this.max);\n }\n\n private onInput(event: InputEvent) {\n event.stopPropagation();\n const value = parseFloat(this.slider.value);\n\n if (!isNaN(value)) {\n const oldValue = this.rangeInput;\n this.rangeInput = value;\n\n const { defaultPrevented } = this.emitInputEvent();\n\n if (defaultPrevented) {\n this.rangeInput = oldValue;\n this.slider.value = oldValue.toString();\n }\n }\n }\n\n private emitInputEvent() {\n return this.valueChange.emit(this.rangeInput);\n }\n\n private isMarkerActive(markerValue: number) {\n const start = Math.min(this.traceReference, this.rangeInput);\n const end = Math.max(this.traceReference, this.rangeInput);\n const value = markerValue;\n\n return value >= start && value <= end;\n }\n\n // Listen globally on window because sometimes the event listener\n // of the DOM element input itself is not called if the release\n // click is not inside the element anymore\n @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n onPointerUp() {\n this.showTooltip = false;\n }\n\n render() {\n const range = this.rangeMax - this.rangeMin;\n\n let traceReferenceInPercentage =\n (this.rangeTraceReference - this.rangeMin) / range;\n\n let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n const distance = valueInPercentage - traceReferenceInPercentage;\n\n let traceStart = traceReferenceInPercentage;\n let traceEnd = valueInPercentage;\n\n if (distance <= 0) {\n traceStart = valueInPercentage;\n traceEnd = traceReferenceInPercentage;\n }\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n error: !!this.error,\n }}\n onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n >\n <div class=\"slider\">\n <div class=\"track\">\n <div\n ref={this.thumbRef}\n class=\"thumb\"\n style={{\n left: `calc(${valueInPercentage} 100% - 8px)`,\n }}\n ></div>\n <div class=\"ticks\">\n {this.marker\n ? this.marker.map((markerValue) => {\n if (markerValue > this.max \|\| markerValue < this.min) {\n return;\n }\n\n let left = (markerValue - this.rangeMin) / range;\n\n return (\n <div\n class={{\n tick: true,\n 'tick-active':\n this.isMarkerActive(markerValue) && this.trace,\n }}\n style={{\n '--tick-value': `${left}`,\n }}\n ></div>\n );\n })\n : null}\n </div>\n </div>\n\n <input\n id=\"slider\"\n type=\"range\"\n list={this.marker ? 'markers' : undefined}\n step={this.step}\n min={this.min}\n max={this.max}\n value={this.rangeInput}\n tabindex={this.disabled ? -1 : 0}\n onInput={(event) => this.onInput(event)}\n style={{\n '--value': `${valueInPercentage}`,\n '--trace-reference': `${traceReferenceInPercentage}`,\n '--trace-start': `${traceStart}`,\n '--trace-end': `${traceEnd}`,\n }}\n class={{\n trace:\n this.trace && traceReferenceInPercentage !== valueInPercentage,\n 'hide-trace-reference':\n this.trace &&\n (this.traceReference <= this.min \|\|\n this.traceReference >= this.max),\n }}\n onFocus={() => {\n this.showTooltip = true;\n }}\n onBlur={() => {\n this.showTooltip = false;\n }}\n role=\"slider\"\n aria-valuenow={this.rangeInput}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n {...this.a11yAttributes}\n />\n\n <ix-tooltip\n ref={this.tooltipRef}\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n for={this.thumbRef.waitForCurrent()}\n >\n {this.rangeInput}\n </ix-tooltip>\n </div>\n <div class=\"label\">\n <div class=\"label-start\">\n <slot name=\"label-start\"></slot>\n </div>\n <div class=\"label-end\">\n <slot name=\"label-end\"></slot>\n </div>\n </div>\n {this.error ? (\n <ix-typography class={'label-error'} textColor=\"alarm\">\n {this.error}\n </ix-typography>\n ) : null}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.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 {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\nimport { makeRef } from '../utils/make-ref';\nimport {\n ValidationResults,\n HookValidationLifecycle,\n FieldWrapperInterface,\n IxFormValidationState,\n} from '../utils/input';\nimport type { SliderMarker } from './slider.types';\n\nfunction between(min: number, value: number, max: number) {\n if (value < min) {\n return min;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n}\n\n/\n @form-ready\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n /\n@Component({\n tag: 'ix-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class Slider implements FieldWrapperInterface, IxFormValidationState {\n @AttachInternals() formInternals!: ElementInternals;\n @Element() hostElement!: HTMLIxSliderElement;\n\n /\n Show text below the field component\n * @since 4.3.0\n /\n @Prop() helperText?: string;\n\n /\n Label for the field component\n * @since 4.3.0\n /\n @Prop() label?: string;\n\n /\n Error text for the field component\n * @since 4.3.0\n /\n @Prop() invalidText?: string;\n\n /\n Info text for the field component\n * @since 4.3.0\n /\n @Prop() infoText?: string;\n\n /\n Warning text for the field component\n * @since 4.3.0\n /\n @Prop() warningText?: string;\n\n /\n Valid text for the field component\n * @since 4.3.0\n /\n @Prop() validText?: string;\n\n /\n Show helper, info, warning, error and valid text as tooltip\n * @since 4.3.0\n /\n @Prop() showTextAsTooltip: boolean = false;\n\n /\n Legal number intervals\n \n {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step}\n /\n @Prop() step: number = 1;\n\n /\n Minimum slider value\n /\n @Prop() min = 0;\n\n /\n Maximum slider value\n /\n @Prop() max = 100;\n\n /\n Current value of the slider\n /\n @Prop() value = 0;\n\n /\n Define tick marker on the slider. Marker has to be within slider min/max\n /\n @Prop() marker?: SliderMarker;\n\n /\n Show a trace line\n /\n @Prop() trace = false;\n\n /\n Define the start point of the trace line\n /\n @Prop() traceReference = 0;\n\n /\n Show control as disabled\n /\n @Prop() disabled = false;\n\n /\n Show error state and message\n \n @deprecated Will be removed in 5.0.0. Use invalid class instead.\n /\n @Prop() error?: boolean \| string;\n\n /\n Will emit the value when it changes\n /\n @Event() valueChange!: EventEmitter<number>;\n\n @State() rangeInput = 0;\n @State() rangeMin = 0;\n @State() rangeMax = 100;\n @State() rangeTraceReference = 0;\n @State() showTooltip = false;\n @State() isInvalid = false;\n @State() isValid = false;\n @State() isInfo = false;\n @State() isWarning = false;\n\n private a11yAttributes?: A11yAttributes;\n private lastFormValue?: string;\n private touched = false;\n private readonly controlRef = makeRef<HTMLElement>();\n private readonly thumbRef = makeRef<HTMLDivElement>();\n private readonly tooltipRef = makeRef<HTMLIxTooltipElement>();\n\n private get hasLabels() {\n return !!this.hostElement.querySelector(\n '[slot=\"label-start\"], [slot=\"label-end\"]'\n );\n }\n\n get tooltip() {\n return this.tooltipRef.current;\n }\n\n get pseudoThumb() {\n return this.thumbRef.current;\n }\n\n get slider() {\n return this.hostElement.shadowRoot?.getElementById(\n 'slider'\n ) as HTMLInputElement;\n }\n\n @Watch('showTooltip')\n onShowTooltipChange() {\n if (this.showTooltip && this.pseudoThumb) {\n this.tooltip?.showTooltip(this.pseudoThumb);\n return;\n }\n\n this.tooltip?.hideTooltip();\n }\n\n @HookValidationLifecycle()\n onClassField({\n isInvalid,\n isInfo,\n isValid,\n isWarning,\n isInvalidByRequired,\n }: ValidationResults) {\n this.isInvalid = isInvalid \|\| isInvalidByRequired;\n this.isInfo = isInfo;\n this.isValid = isValid;\n this.isWarning = isWarning;\n }\n\n componentWillLoad() {\n this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n 'role',\n 'aria-valuemin',\n 'aria-valuemax',\n 'aria-valuenow',\n ]);\n this.updateRangeVariables();\n this.setFormValueIfChanged(this.value);\n }\n\n @Watch('value')\n @Watch('max')\n @Watch('min')\n @Watch('traceReference')\n private updateRangeVariables() {\n this.rangeInput = between(this.min, this.value, this.max);\n this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n this.rangeMin = Math.min(this.min, this.max);\n this.rangeMax = Math.max(this.min, this.max);\n if (this.value !== undefined) {\n this.setFormValueIfChanged(this.value);\n }\n }\n\n private updateFormInternalValue(value: number) {\n this.setFormValueIfChanged(value);\n this.valueChange.emit(value);\n }\n\n private setFormValueIfChanged(value: number) {\n const valueStr = value.toString();\n if (this.lastFormValue !== valueStr) {\n this.formInternals.setFormValue(valueStr);\n this.lastFormValue = valueStr;\n }\n }\n\n private onInput(event: InputEvent) {\n event.stopPropagation();\n const value = parseFloat(this.slider.value);\n\n if (!isNaN(value)) {\n const oldValue = this.rangeInput;\n this.rangeInput = value;\n\n const { defaultPrevented } = this.emitInputEvent();\n\n if (defaultPrevented) {\n this.rangeInput = oldValue;\n this.slider.value = oldValue.toString();\n } else {\n this.updateFormInternalValue(value);\n }\n }\n }\n\n private emitInputEvent() {\n return this.valueChange.emit(this.rangeInput);\n }\n\n private isMarkerActive(markerValue: number) {\n const start = Math.min(this.traceReference, this.rangeInput);\n const end = Math.max(this.traceReference, this.rangeInput);\n const value = markerValue;\n\n return value >= start && value <= end;\n }\n\n // Listen globally on window because sometimes the event listener\n // of the DOM element input itself is not called if the release\n // click is not inside the element anymore\n @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n onPointerUp() {\n this.showTooltip = false;\n }\n\n /* @internal /\n @Method()\n hasValidValue(): Promise<boolean> {\n return Promise.resolve(true);\n }\n\n /* @internal /\n @Method()\n isTouched(): Promise<boolean> {\n return Promise.resolve(this.touched);\n }\n\n render() {\n const range = this.rangeMax - this.rangeMin;\n\n let traceReferenceInPercentage =\n (this.rangeTraceReference - this.rangeMin) / range;\n\n let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n const distance = valueInPercentage - traceReferenceInPercentage;\n\n let traceStart = traceReferenceInPercentage;\n let traceEnd = valueInPercentage;\n\n if (distance <= 0) {\n traceStart = valueInPercentage;\n traceEnd = traceReferenceInPercentage;\n }\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n error: !!this.error,\n invalid: this.isInvalid,\n info: this.isInfo,\n valid: this.isValid,\n warning: this.isWarning,\n }}\n onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n >\n <ix-field-wrapper\n label={this.label}\n helperText={this.helperText}\n invalidText={this.invalidText}\n infoText={this.infoText}\n warningText={this.warningText}\n validText={this.validText}\n showTextAsTooltip={this.showTextAsTooltip}\n isValid={this.isValid}\n isInfo={this.isInfo}\n isWarning={this.isWarning}\n isInvalid={this.isInvalid}\n controlRef={this.controlRef}\n >\n <div class=\"slider-container\">\n <div class=\"slider\">\n <div class=\"track\">\n <div\n ref={this.thumbRef}\n class=\"thumb\"\n style={{\n left: `calc(${valueInPercentage} (100% - 1rem))`,\n }}\n ></div>\n <svg class=\"ticks\" xmlns=\"http://www.w3.org/2000/svg\">\n {this.marker\n ?.filter(\n (markerValue) =>\n markerValue >= this.min && markerValue <= this.max\n )\n .map((markerValue) => {\n const markerPosition =\n (markerValue - this.rangeMin) / range;\n\n return (\n <circle\n class={{\n tick: true,\n 'tick-active':\n this.isMarkerActive(markerValue) && this.trace,\n 'tick-at-min': markerPosition === 0,\n 'tick-at-max': markerPosition === 1,\n }}\n cx=\"0\"\n cy=\"0\"\n style={{\n '--tick-value': `${markerPosition}`,\n }}\n ></circle>\n );\n })}\n </svg>\n </div>\n\n <input\n id=\"slider\"\n ref={this.controlRef}\n type=\"range\"\n list={this.marker ? 'markers' : undefined}\n step={this.step}\n min={this.min}\n max={this.max}\n value={this.rangeInput}\n tabindex={this.disabled ? -1 : 0}\n onInput={(event) => this.onInput(event)}\n onFocus={() => {\n this.showTooltip = true;\n this.touched = true;\n }}\n onBlur={() => {\n this.showTooltip = false;\n }}\n style={{\n '--value': `${valueInPercentage}`,\n '--trace-reference': `${traceReferenceInPercentage}`,\n '--trace-start': `${traceStart}`,\n '--trace-end': `${traceEnd}`,\n }}\n class={{\n trace:\n this.trace &&\n traceReferenceInPercentage !== valueInPercentage,\n 'hide-trace-reference':\n this.trace &&\n (this.traceReference <= this.min \|\|\n this.traceReference >= this.max),\n }}\n role=\"slider\"\n aria-valuenow={this.rangeInput}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n {...this.a11yAttributes}\n />\n\n <ix-tooltip\n ref={this.tooltipRef}\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n for={this.thumbRef.waitForCurrent()}\n >\n {this.rangeInput}\n </ix-tooltip>\n </div>\n {this.hasLabels && (\n <div class=\"label\">\n <div>\n <slot name=\"label-start\"></slot>\n </div>\n <div>\n <slot name=\"label-end\"></slot>\n </div>\n </div>\n )}\n {this.error ? (\n <ix-typography textColor=\"alarm\">{this.error}</ix-typography>\n ) : null}\n </div>\n </ix-field-wrapper>\n </Host>\n );\n }\n}\n"]}

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

@@ -23,7 +23,7 @@ export class Spinner {
         this.hideTrack = false;
     }
     render() {
-        return (h(Host, { key: '6f99a58994e1eb03a05b6af195b843094ebea59b' }, h("div", { key: '01ff7d8f23eb80440970086c8791471623cfe424', class: {
+        return (h(Host, { key: '8aa6edb9059ebaafe7f052083ca680c2bc5df2cc' }, h("div", { key: 'ef628ecd03a1a6b3cdd36d90fb60676fc03fc90d', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,

package/dist/collection/components/split-button/split-button.js CHANGED Viewed

@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from "@stencil/core";
 import { iconContextMenu } from "@siemens/ix-icons/icons";
+import { h, Host, } from "@stencil/core";
 import { makeRef } from "../utils/make-ref";
 export class SplitButton {
     constructor() {
@@ -39,6 +39,13 @@ export class SplitButton {
          * Placement of the dropdown
          */
         this.placement = 'bottom-start';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.toggle = false;
         this.triggerElementRef = makeRef();
     }
@@ -58,7 +65,7 @@ export class SplitButton {
                 'left-button-border': !hasOutline,
             } });
         const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
-        return (h(Host, { key: '18955e55bbab4f5899f27cf2b38892c60bece302' }, h("div", { key: '8cc32b2686c3e02ee1f2a43d4a5f310cd2930dad', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: 'ae7a2875314967f3100d1abcef3528a9822b0503' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'd81abc1f01f55f2bc85740898e7f59173e62e182', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent() }, h("slot", { key: '19c2623131a8ab3799e5a9bb75cc356bf500fffd' }))));
+        return (h(Host, { key: '034329433940b847951719d6df094e7e799c9b2b' }, h("div", { key: 'e08144dd52c338d0cb3a271a95442709a4bd10ba', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), h("ix-icon-button", Object.assign({ key: '4b7776b9328af463c873eb524e8808966b61fff1' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), h("ix-dropdown", { key: 'fbc53f2d73b27ed465a8dc4ae42357a61a6300c7', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, h("slot", { key: 'e776d44c8f78e89bed7f065edd55168563b0f23c' }))));
     }
     static get is() { return "ix-split-button"; }
     static get encapsulation() { return "shadow"; }
@@ -318,6 +325,32 @@ export class SplitButton {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'bottom-start'"
+            },
+            "enableTopLayer": {
+                "type": "boolean",
+                "attribute": "enable-top-layer",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "since",
+                            "text": "4.3.0"
+                        }],
+                    "text": "Enable Popover API rendering for dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/split-button/split-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../src/components/split-button/split-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;~~AAEvB~~,OAAO,EAAE,~~eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,~~OAAO,EAAE,~~OAAO,EAAE,~~MAAM,mBAAmB,CAAC;~~AAO5C~~,MAAM,OAAO,WAAW;IALxB;QAQE;;WAEG;QACK,YAAO,GAAuB,SAAS,CAAC;QAEhD;;WAEG;QACK,kBAAa,GAAkB,MAAM,CAAC;QA+B9C;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;;;WAIG;QACK,kBAAa,GAAG,KAAK,CAAC;QAE9B;;;;WAIG;QACK,0BAAqB,GAAG,KAAK,CAAC;QAEtC;;WAEG;QACK,cAAS,GAAqB,cAAc,CAAC;~~QAE5C~~,WAAM,GAAG,KAAK,CAAC;QAOP,sBAAiB,GAAG,OAAO,EAAe,CAAC;~~KAmE7D~~;~~IAjEC~~,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC;IAC7C,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,qBAAqB,CAAC;IACrD,CAAC;IAED,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC1E,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;QAEF,MAAM,gBAAgB,mCACjB,cAAc,KACjB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,UAAU;aAClC,GACF,CAAC;QAEF,MAAM,wBAAwB,mCACzB,cAAc,KACjB,QAAQ,EAAE,IAAI,CAAC,cAAc,GAC9B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,UAAU,EAAE;gBACzD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,iCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,gBAC5B,IAAI,CAAC,eAAe,KAE/B,IAAI,CAAC,KAAK,CACD,CACb,CAAC,CAAC,CAAC,CACF,sCACM,gBAAgB,IACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,gBAC5B,IAAI,CAAC,eAAe,IAChB,CACnB;gBACD,uFACM,wBAAwB,IAC5B,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,eAAe,gBAC3B,IAAI,CAAC,wBAAwB,IACzB,CACd;YAEN,oEACE,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE;~~gBAEhD~~,8DAAa,CACD,CACT,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { ~~AlignedPlacement~~ } from '../dropdown/~~placement~~';\nimport { ~~iconContextMenu~~ } from '~~@siemens~~/~~ix-icons/icons~~';\nimport { ~~CloseBehavior~~ } from '../~~dropdown~~/~~dropdown~~-~~controller~~';\nimport type { SplitButtonVariant } from './split-button.types';\~~nimport { makeRef } from '../utils/make-ref';\~~n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /\n Color variant of button\n /\n @Prop() variant: SplitButtonVariant = 'primary';\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 /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Button label\n /\n @Prop() label?: string;\n\n /\n ARIA label for the button (use if no label and icon button)\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\n /\n Button icon\n /\n @Prop() icon?: string;\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon?: string;\n\n /\n ARIA label for the split icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelSplitIconButton?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Disables only the main button while keeping the dropdown trigger enabled\n \n @since 4.1.0\n /\n @Prop() disableButton = false;\n\n /\n Disables only the dropdown trigger while keeping the main button enabled\n \n @since 4.1.0\n /\n @Prop() disableDropdownButton = false;\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n @State() toggle = false;\n\n /\n Button clicked\n */\n @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n private readonly triggerElementRef = makeRef<HTMLElement>();\n\n private get isDisabledButton() {\n return this.disabled \|\| this.disableButton;\n }\n\n private get isDisabledIcon() {\n return this.disabled \|\| this.disableDropdownButton;\n }\n\n render() {\n const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n const baseAttributes = {\n variant: this.variant,\n };\n\n const buttonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledButton,\n class: {\n 'left-button-border': !hasOutline,\n },\n };\n\n const dropdownButtonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledIcon,\n };\n\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n >\n {this.label}\n </ix-button>\n ) : (\n <ix-icon-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n ></ix-icon-button>\n )}\n <ix-icon-button\n {...dropdownButtonAttributes}\n ref={this.triggerElementRef}\n class={'anchor'}\n icon={this.splitIcon ?? iconContextMenu}\n aria-label={this.ariaLabelSplitIconButton}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown\n closeBehavior={this.closeBehavior}\n trigger={this.triggerElementRef.waitForCurrent()}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../../src/components/split-button/split-button.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 { iconContextMenu } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { makeRef } from '../utils/make-ref';\nimport type { SplitButtonVariant } from './split-button.types';\n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n shadow: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /\n Color variant of button\n /\n @Prop() variant: SplitButtonVariant = 'primary';\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 /\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /\n Button label\n /\n @Prop() label?: string;\n\n /\n ARIA label for the button (use if no label and icon button)\n \n @since 3.2.0\n /\n @Prop() ariaLabelButton?: string;\n\n /\n Button icon\n /\n @Prop() icon?: string;\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon?: string;\n\n /\n ARIA label for the split icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelSplitIconButton?: string;\n\n /\n Disabled\n /\n @Prop() disabled = false;\n\n /\n Disables only the main button while keeping the dropdown trigger enabled\n \n @since 4.1.0\n /\n @Prop() disableButton = false;\n\n /\n Disables only the dropdown trigger while keeping the main button enabled\n \n @since 4.1.0\n /\n @Prop() disableDropdownButton = false;\n\n /\n Placement of the dropdown\n /\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /\n Enable Popover API rendering for dropdown.\n \n @default false\n * @since 4.3.0\n /\n @Prop() enableTopLayer: boolean = false;\n\n @State() toggle = false;\n\n /\n Button clicked\n */\n @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n private readonly triggerElementRef = makeRef<HTMLElement>();\n\n private get isDisabledButton() {\n return this.disabled \|\| this.disableButton;\n }\n\n private get isDisabledIcon() {\n return this.disabled \|\| this.disableDropdownButton;\n }\n\n render() {\n const hasOutline = this.variant.toLocaleLowerCase().includes('secondary');\n const baseAttributes = {\n variant: this.variant,\n };\n\n const buttonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledButton,\n class: {\n 'left-button-border': !hasOutline,\n },\n };\n\n const dropdownButtonAttributes = {\n ...baseAttributes,\n disabled: this.isDisabledIcon,\n };\n\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !hasOutline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n >\n {this.label}\n </ix-button>\n ) : (\n <ix-icon-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\n aria-label={this.ariaLabelButton}\n ></ix-icon-button>\n )}\n <ix-icon-button\n {...dropdownButtonAttributes}\n ref={this.triggerElementRef}\n class={'anchor'}\n icon={this.splitIcon ?? iconContextMenu}\n aria-label={this.ariaLabelSplitIconButton}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown\n closeBehavior={this.closeBehavior}\n trigger={this.triggerElementRef.waitForCurrent()}\n enableTopLayer={this.enableTopLayer}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tab-item/tab-item.js CHANGED Viewed

@@ -51,7 +51,7 @@ export class TabItem {
         };
     }
     render() {
-        return (h(Host, { key: 'f703b9ed1db79ae154acd43425ac44993a13e99e', class: this.tabItemClasses({
+        return (h(Host, { key: 'f0e6c03c7624e9d8ae86223da810ca909e89ceb9', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -68,12 +68,12 @@ export class TabItem {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, h("div", { key: '5d9f5fa0c5a9c2f057ff8e3e960a5b15499ec84b', class: {
+            } }, h("div", { key: '21b8861c7547865527d9395b1c288b358ca816c3', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'd0c87e92e0ad1a4664024b7d79900e8bb36a6ba6' })), h("div", { key: '1812905c3f08a70565e1aea166fa372a07344a76', class: {
+            } }, h("slot", { key: '4e268ef6667abfd1e2b4ea85b7a34819a16c188a' })), h("div", { key: '86633194654d3ab97aaa0c37fdf22b9f2ea6dd7c', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),

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

@@ -9,6 +9,18 @@
 import { h, Host, } from "@stencil/core";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 import { iconChevronLeftSmall, iconChevronRightSmall, } from "@siemens/ix-icons/icons";
+const TAB_MANAGED_CLASSES = {
+    SELECTED: 'selected',
+    DISABLED: 'disabled',
+    SMALL_TAB: 'small-tab',
+    ICON: 'icon',
+    STRETCHED: 'stretched',
+    BOTTOM: 'bottom',
+    TOP: 'top',
+    CIRCLE: 'circle',
+    HYDRATED: 'hydrated',
+};
+const MANAGED_CLASSES_SET = new Set(Object.values(TAB_MANAGED_CLASSES));
 export class Tabs {
     constructor() {
         /**
@@ -38,6 +50,8 @@ export class Tabs {
         this.showArrowPrevious = false;
         this.showArrowNext = false;
         this.windowStartSize = window.innerWidth;
+        this.ARROW_WIDTH = 32;
+        this.updateScheduled = false;
         this.clickAction = {
             timeout: null,
             isClick: true,
@@ -61,6 +75,10 @@ export class Tabs {
         var _a;
         return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
     }
+    getTabsContainer() {
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-items');
+    }
     initResizeObserver() {
         const parentElement = this.hostElement.parentElement;
         if (!parentElement)
@@ -70,6 +88,100 @@ export class Tabs {
         });
         this.resizeObserver.observe(parentElement);
     }
+    observeSlotChanges() {
+        var _a;
+        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.classObserver = new MutationObserver(() => {
+            this.scheduleTabUpdate();
+        });
+        this.classObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    scheduleTabUpdate() {
+        if (this.updateScheduled)
+            return;
+        this.updateScheduled = true;
+        requestAnimationFrame(() => {
+            this.updateTabAttributes();
+            this.updateScheduled = false;
+        });
+    }
+    setTabAttributes(element, index) {
+        const isSelected = index === this.selected;
+        const isDisabled = element.disabled;
+        if (this.small)
+            element.setAttribute('small', 'true');
+        if (this.rounded)
+            element.setAttribute('rounded', 'true');
+        element.setAttribute('layout', this.layout);
+        element.setAttribute('selected', isSelected.toString());
+        element.setAttribute('placement', this.placement);
+        element.toggleAttribute('disabled', isDisabled);
+        this.applyRequiredClasses(element, isSelected, isDisabled);
+    }
+    applyRequiredClasses(element, isSelected, isDisabled) {
+        const requiredClasses = new Set(this.buildRequiredClasses(isSelected, isDisabled));
+        const { classList } = element;
+        for (const cls of requiredClasses) {
+            classList.add(cls);
+        }
+        for (const managedClass of MANAGED_CLASSES_SET) {
+            if (!requiredClasses.has(managedClass)) {
+                classList.remove(managedClass);
+            }
+        }
+    }
+    buildRequiredClasses(isSelected, isDisabled) {
+        const classConditions = {
+            [TAB_MANAGED_CLASSES.HYDRATED]: true,
+            [TAB_MANAGED_CLASSES.SELECTED]: isSelected,
+            [TAB_MANAGED_CLASSES.DISABLED]: isDisabled,
+            [TAB_MANAGED_CLASSES.SMALL_TAB]: this.small,
+            [TAB_MANAGED_CLASSES.STRETCHED]: this.layout === 'stretched',
+            [TAB_MANAGED_CLASSES.BOTTOM]: this.placement === 'bottom',
+            [TAB_MANAGED_CLASSES.TOP]: this.placement === 'top',
+            [TAB_MANAGED_CLASSES.CIRCLE]: this.rounded,
+        };
+        return Object.entries(classConditions)
+            .filter(([, condition]) => condition)
+            .map(([className]) => className);
+    }
+    ensureSelectedIndex() {
+        if (this.totalItems === 0) {
+            console.warn('ix-tabs: No tabs available for selection');
+            this.selected = -1;
+            return;
+        }
+        if (this.selected < this.totalItems) {
+            return;
+        }
+        const originalIndex = this.selected;
+        const previousIndex = originalIndex - 1;
+        if (previousIndex >= 0 && previousIndex < this.totalItems) {
+            this.updateSelected(previousIndex);
+            return;
+        }
+        if (this.totalItems > 0) {
+            this.updateSelected(0);
+        }
+    }
+    updateSelected(index) {
+        this.selected = index;
+        this.selectedChange.emit(index);
+    }
+    updateTabAttributes() {
+        const tabs = this.getTabs();
+        this.totalItems = tabs.length;
+        this.ensureSelectedIndex();
+        for (const [index, element] of tabs.entries()) {
+            this.setTabAttributes(element, index);
+        }
+        this.renderArrows();
+    }
     showArrows() {
         try {
             const tabWrapper = this.getTabsWrapper();
@@ -128,17 +240,21 @@ export class Tabs {
             this.scrollActionAmount = amount;
     }
     onSelectedChange(newValue) {
-        var _a;
         if (!this.showArrows())
             return;
-        const tabRect = this.getTab(newValue).getBoundingClientRect();
-        const wrapperWidth = (_a = this.getTabsWrapper()) === null || _a === void 0 ? void 0 : _a.clientWidth;
-        const arrowWidth = 32;
-        if (tabRect.left < arrowWidth) {
-            this.move(-tabRect.left + arrowWidth, true);
+        const tab = this.getTab(newValue);
+        const container = this.getTabsContainer();
+        if (!tab || !container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        const tabLeftRelative = tabRect.left - containerRect.left;
+        const tabRightRelative = tabLeftRelative + tabRect.width;
+        if (tabLeftRelative < this.ARROW_WIDTH) {
+            this.move(-tabLeftRelative + this.ARROW_WIDTH, true);
         }
-        else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {
-            this.move(wrapperWidth - tabRect.right - arrowWidth, true);
+        else if (tabRightRelative > containerRect.width - this.ARROW_WIDTH) {
+            this.move(containerRect.width - tabRightRelative - this.ARROW_WIDTH, true);
         }
     }
     setSelected(index) {
@@ -189,24 +305,10 @@ export class Tabs {
         return true;
     }
     componentWillLoad() {
-        const tabs = this.getTabs();
-        tabs.map((element, index) => {
-            if (this.small)
-                element.setAttribute('small', 'true');
-            if (this.rounded)
-                element.setAttribute('rounded', 'true');
-            element.setAttribute('layout', this.layout);
-            element.setAttribute('selected', index === this.selected ? 'true' : 'false');
-            element.setAttribute('placement', this.placement);
-        });
         this.initResizeObserver();
     }
     componentDidRender() {
-        const tabs = this.getTabs();
-        this.totalItems = tabs.length;
-        tabs.map((element, index) => {
-            element.setAttribute('selected', index === this.selected ? 'true' : 'false');
-        });
+        this.updateTabAttributes();
     }
     componentWillRender() {
         this.renderArrows();
@@ -222,10 +324,12 @@ export class Tabs {
         tabs.forEach((element) => {
             element.addEventListener('mousedown', (event) => this.dragStart(element, event));
         });
+        this.observeSlotChanges();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.classObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     onTabClick(event) {
         if (event.defaultPrevented) {
@@ -240,13 +344,13 @@ export class Tabs {
         });
     }
     render() {
-        return (h(Host, { key: 'd7fad8d23dafced6cf713108107c54d02f372b6b' }, this.showArrowPrevious && (h("button", { key: 'dde7a217502a5a157e32bb34327398dba8968d34', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: '08c3d49892d6955a7877bac4968fac25fe8c9742', name: iconChevronLeftSmall }))), h("div", { key: 'deb8492643ab4b49cb7848c9229805d26b0a4c99', class: {
+        return (h(Host, { key: 'db27e336ea0432630306faa2e51f2799f1340d2c' }, this.showArrowPrevious && (h("button", { key: 'c9edd1bab0a829dd853a8dc227b59f068ea8b24a', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, h("ix-icon", { key: '6271e2d4ccbc8d94793b0226c7117c8f1a24561a', name: iconChevronLeftSmall }))), h("div", { key: 'd1ff277b75c488f25821296fc5a7320f822f1bbd', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showArrowPrevious,
                 'shadow-right': this.showArrowNext,
                 'shadow-both': this.showArrowNext && this.showArrowPrevious,
-            } }, h("div", { key: '8b888d4ac1c0e957155028d8508e0cb5862c5cb4', class: "items-content" }, h("slot", { key: 'fd39c749b7aaeaec5c65ee72b0c466dbf7d8fa7b' }))), this.showArrowNext && (h("button", { key: '028b079e241b9fc3af1cba531ae2c055f1c47d32', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: '8047e16eadc4ec22f44d70004fe9a663f74c4e01', name: iconChevronRightSmall })))));
+            } }, h("div", { key: '9f929a8ba8f76c0efe8604218df1fe207eeff9ff', class: "items-content" }, h("slot", { key: 'a906661489fdee6484c871c7c7c46f0f1c5153fe' }))), this.showArrowNext && (h("button", { key: '632c5d16531fe4071368a94cdef569e43fd2ec71', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, h("ix-icon", { key: '7105649d79c2a5a6d2c8fd3e6e9a0db540a61767', name: iconChevronRightSmall })))));
     }
     static get is() { return "ix-tabs"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAOjC,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACsB,aAAQ,GAAG,CAAC,CAAC;QAEtC;;WAEG;QACK,WAAM,GAAyB,MAAM,CAAC;QAE9C;;WAEG;QACK,cAAS,GAAqB,QAAQ,CAAC;QAqBtC,eAAU,GAAG,CAAC,CAAC;QACf,wBAAmB,GAAG,CAAC,CAAC;QACxB,iBAAY,GAAG,GAAG,CAAC;QACnB,uBAAkB,GAAG,CAAC,CAAC;QACvB,sBAAiB,GAAG,KAAK,CAAC;QAC1B,kBAAa,GAAG,KAAK,CAAC;QAEvB,oBAAe,GAAG,MAAM,CAAC,UAAU,CAAC;QAGpC,gBAAW,GAGf;YACF,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,CAAC;KA6RH;IA1RC,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC;QAExC,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC;YAC5B,OAAO,CAAC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IAC3C,CAAC;IAEO,OAAO;QACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;IACtE,CAAC;IAEO,MAAM,CAAC,QAAgB;QAC7B,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAEO,cAAc;;QACpB,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtE,CAAC;IAEO,kBAAkB;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QACrD,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC7C,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC;YACH,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACzC,OAAO,CACL,UAAU;gBACV,UAAU,CAAC,WAAW;oBACpB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;gBACrD,IAAI,CAAC,MAAM,KAAK,MAAM,CACvB,CAAC;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QACnE,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC;YACH,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAEzC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,OAAO,KAAK,CAAC;YACf,CAAC;YAED,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;YAE1D,OAAO,CACL,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;gBAC1B,IAAI,CAAC,kBAAkB;oBACrB,CAAC,UAAU,CAAC,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CACvD,CAAC;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEO,IAAI,CAAC,MAAc,EAAE,KAAK,GAAG,KAAK;QACxC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,uBAAuB,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,mBAAmB;YACzB,uBAAuB;YACvB,WAAW,CAAC,WAAW,CAAC;QAE1B,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3D,MAAM,IAAI,IAAI,CAAC,mBAAmB,CAAC;QACnC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAE7B,MAAM,MAAM,GAAG;YACb,yBAAyB,MAAM,MAAM;YACrC,KAAK,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;SAClD,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEX,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAE1C,IAAI,KAAK;YAAE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;;YAClE,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;IACxC,CAAC;IAGD,gBAAgB,CAAC,QAAgB;;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAE/B,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,EAAE,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,cAAc,EAAE,0CAAE,WAAW,CAAC;QACxD,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC;aAAM,IAAI,YAAY,IAAI,OAAO,CAAC,KAAK,GAAG,YAAY,GAAG,UAAU,EAAE,CAAC;YACrE,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,KAAK,GAAG,UAAU,EAAE,IAAI,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEO,QAAQ,CAAC,KAAa;QAC5B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7D,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAEO,SAAS,CAAC,OAA6B,EAAE,KAAiB;QAChE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAC/B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAE7B,IAAI,CAAC,WAAW,CAAC,OAAO;YACtB,IAAI,CAAC,WAAW,CAAC,OAAO,KAAK,IAAI;gBAC/B,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC;gBAC3D,CAAC,CAAC,IAAI,CAAC;QAEX,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;QACvE,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC;QACzC,MAAM,IAAI,GAAG,CAAC,KAAiB,EAAE,EAAE,CACjC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAAC;QACzD,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;YACxD,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC9C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC;IAEO,QAAQ,CAAC,KAAiB,EAAE,IAAY,EAAE,UAAkB;QAClE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;IAC/C,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC7B,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YACvC,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAE3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAE5B,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YAC1B,IAAI,IAAI,CAAC,KAAK;gBAAE,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YAEtD,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;YAE1D,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC5C,OAAO,CAAC,YAAY,CAClB,UAAU,EACV,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAC3C,CAAC;YAEF,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,kBAAkB;QAChB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;QAE9B,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YAC1B,OAAO,CAAC,YAAY,CAClB,UAAU,EACV,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAC3C,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,6BAA6B,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACvB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAC9C,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAC/B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAGD,UAAU,CAAC,KAAkB;QAC3B,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAE5B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;gBACpC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,iBAAiB,IAAI,CACzB,+DACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,gBACrC,IAAI,CAAC,8BAA8B;gBAE/C,gEAAS,IAAI,EAAE,oBAAoB,GAAY,CACxC,CACV;YACD,4DACE,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI;oBACjB,iBAAiB,EAAE,IAAI;oBACvB,aAAa,EAAE,IAAI,CAAC,iBAAiB;oBACrC,cAAc,EAAE,IAAI,CAAC,aAAa;oBAClC,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,iBAAiB;iBAC5D;gBAED,4DAAK,KAAK,EAAC,eAAe;oBACxB,8DAAa,CACT,CACF;YACL,IAAI,CAAC,aAAa,IAAI,CACrB,+DACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,gBACtC,IAAI,CAAC,+BAA+B;gBAEhD,gEAAS,IAAI,EAAE,qBAAqB,GAAY,CACzC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tabRect = this.getTab(newValue).getBoundingClientRect();\n const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n const arrowWidth = 32;\n\n if (tabRect.left < arrowWidth) {\n this.move(-tabRect.left + arrowWidth, true);\n } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n const tabs = this.getTabs();\n\n tabs.map((element, index) => {\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n\n element.setAttribute('placement', this.placement);\n });\n\n this.initResizeObserver();\n }\n\n componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.map((element, index) => {\n element.setAttribute(\n 'selected',\n index === this.selected ? 'true' : 'false'\n );\n });\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAKjC,MAAM,mBAAmB,GAAG;IAC1B,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX,MAAM,mBAAmB,GAAG,IAAI,GAAG,CACjC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAmB,CACrD,CAAC;AAOF,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;WAEG;QACK,YAAO,GAAG,KAAK,CAAC;QAExB;;WAEG;QACsB,aAAQ,GAAG,CAAC,CAAC;QAEtC;;WAEG;QACK,WAAM,GAAyB,MAAM,CAAC;QAE9C;;WAEG;QACK,cAAS,GAAqB,QAAQ,CAAC;QAqBtC,eAAU,GAAG,CAAC,CAAC;QACf,wBAAmB,GAAG,CAAC,CAAC;QACxB,iBAAY,GAAG,GAAG,CAAC;QACnB,uBAAkB,GAAG,CAAC,CAAC;QACvB,sBAAiB,GAAG,KAAK,CAAC;QAC1B,kBAAa,GAAG,KAAK,CAAC;QAEvB,oBAAe,GAAG,MAAM,CAAC,UAAU,CAAC;QAE3B,gBAAW,GAAG,EAAE,CAAC;QAE1B,oBAAe,GAAG,KAAK,CAAC;QAExB,gBAAW,GAGf;YACF,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;SACd,CAAC;KAiZH;IA9YC,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC;QAExC,IAAI,IAAI,CAAC,eAAe,KAAK,CAAC;YAC5B,OAAO,CAAC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IAC3C,CAAC;IAEO,OAAO;QACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,CAAC;IACtE,CAAC;IAEO,MAAM,CAAC,QAAgB;QAC7B,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAEO,cAAc;;QACpB,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtE,CAAC;IAEO,gBAAgB;;QACtB,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAClE,CAAC;IAEO,kBAAkB;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QACrD,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC7C,CAAC;IAEO,kBAAkB;;QACxB,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,EAAE,CAAC;QAEjC,IAAI,CAAC,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC7C,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YAC3C,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,eAAe;YAAE,OAAO;QACjC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB,CAAC,OAA6B,EAAE,KAAa;QACnE,MAAM,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC;QAC3C,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC;QAEpC,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QAE1D,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;QACxD,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClD,OAAO,CAAC,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QAEhD,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAC7D,CAAC;IAEO,oBAAoB,CAC1B,OAA6B,EAC7B,UAAmB,EACnB,UAAmB;QAEnB,MAAM,eAAe,GAAG,IAAI,GAAG,CAC7B,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,UAAU,CAAC,CAClD,CAAC;QACF,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;QAE9B,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;YAClC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC;QAED,KAAK,MAAM,YAAY,IAAI,mBAAmB,EAAE,CAAC;YAC/C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;gBACvC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,oBAAoB,CAC1B,UAAmB,EACnB,UAAmB;QAEnB,MAAM,eAAe,GAAG;YACtB,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,IAAI;YACpC,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,UAAU;YAC1C,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,UAAU;YAC1C,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK;YAC3C,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YAC5D,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;YACzD,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;YACnD,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO;SAC3C,CAAC;QAEF,OAAO,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;aACnC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC;aACpC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAEO,mBAAmB;QACzB,IAAI,IAAI,CAAC,UAAU,KAAK,CAAC,EAAE,CAAC;YAC1B,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;YACzD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACnB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,MAAM,aAAa,GAAG,aAAa,GAAG,CAAC,CAAC;QAExC,IAAI,aAAa,IAAI,CAAC,IAAI,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1D,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAa;QAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAEO,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;QAE9B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE3B,KAAK,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YAC9C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC;YACH,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YACzC,OAAO,CACL,UAAU;gBACV,UAAU,CAAC,WAAW;oBACpB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;gBACrD,IAAI,CAAC,MAAM,KAAK,MAAM,CACvB,CAAC;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;QACnE,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC;YACH,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAEzC,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,OAAO,KAAK,CAAC;YACf,CAAC;YAED,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC;YAE1D,OAAO,CACL,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI;gBAC1B,IAAI,CAAC,kBAAkB;oBACrB,CAAC,UAAU,CAAC,WAAW,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CACvD,CAAC;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAEO,IAAI,CAAC,MAAc,EAAE,KAAK,GAAG,KAAK;QACxC,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,uBAAuB,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC1E,MAAM,cAAc,GAClB,CAAC,IAAI,CAAC,mBAAmB;YACzB,uBAAuB;YACvB,WAAW,CAAC,WAAW,CAAC;QAE1B,MAAM,GAAG,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3D,MAAM,IAAI,IAAI,CAAC,mBAAmB,CAAC;QACnC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAE7B,MAAM,MAAM,GAAG;YACb,yBAAyB,MAAM,MAAM;YACrC,KAAK,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;SAClD,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEX,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAE1C,IAAI,KAAK;YAAE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;;YAClE,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC;IACxC,CAAC;IAGD,gBAAgB,CAAC,QAAgB;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAE/B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAClC,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE1C,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS;YAAE,OAAO;QAE/B,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,OAAO,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;QAC1D,MAAM,gBAAgB,GAAG,eAAe,GAAG,OAAO,CAAC,KAAK,CAAC;QAEzD,IAAI,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACvC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACvD,CAAC;aAAM,IAAI,gBAAgB,GAAG,aAAa,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YACrE,IAAI,CAAC,IAAI,CACP,aAAa,CAAC,KAAK,GAAG,gBAAgB,GAAG,IAAI,CAAC,WAAW,EACzD,IAAI,CACL,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEO,QAAQ,CAAC,KAAa;QAC5B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QAED,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7D,IAAI,gBAAgB,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAEO,SAAS,CAAC,OAA6B,EAAE,KAAiB;QAChE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAAE,OAAO;QAC/B,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO;QAE7B,IAAI,CAAC,WAAW,CAAC,OAAO;YACtB,IAAI,CAAC,WAAW,CAAC,OAAO,KAAK,IAAI;gBAC/B,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE,GAAG,CAAC;gBAC3D,CAAC,CAAC,IAAI,CAAC;QAEX,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;QACvE,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC;QACzC,MAAM,IAAI,GAAG,CAAC,KAAiB,EAAE,EAAE,CACjC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAAC;QACzD,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;YACxD,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC9C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC;IAEO,QAAQ,CAAC,KAAiB,EAAE,IAAY,EAAE,UAAkB;QAClE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;IAC/C,CAAC;IAEO,QAAQ;QACd,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;YAC7B,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YACvC,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC;QAE3C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACnD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,6BAA6B,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC1C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACvB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAC9C,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAC/B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;QAClC,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,EAAE,CAAC;IACnC,CAAC;IAGD,UAAU,CAAC,KAAkB;QAC3B,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAE5B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;gBACpC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,iBAAiB,IAAI,CACzB,+DACE,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,gBACrC,IAAI,CAAC,8BAA8B;gBAE/C,gEAAS,IAAI,EAAE,oBAAoB,GAAY,CACxC,CACV;YACD,4DACE,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI;oBACjB,iBAAiB,EAAE,IAAI;oBACvB,aAAa,EAAE,IAAI,CAAC,iBAAiB;oBACrC,cAAc,EAAE,IAAI,CAAC,aAAa;oBAClC,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,iBAAiB;iBAC5D;gBAED,4DAAK,KAAK,EAAC,eAAe;oBACxB,8DAAa,CACT,CACF;YACL,IAAI,CAAC,aAAa,IAAI,CACrB,+DACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,gBACtC,IAAI,CAAC,+BAA+B;gBAEhD,gEAAS,IAAI,EAAE,qBAAqB,GAAY,CACzC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n iconChevronLeftSmall,\n iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\ntype ManagedClass =\n (typeof TAB_MANAGED_CLASSES)[keyof typeof TAB_MANAGED_CLASSES];\n\nconst TAB_MANAGED_CLASSES = {\n SELECTED: 'selected',\n DISABLED: 'disabled',\n SMALL_TAB: 'small-tab',\n ICON: 'icon',\n STRETCHED: 'stretched',\n BOTTOM: 'bottom',\n TOP: 'top',\n CIRCLE: 'circle',\n HYDRATED: 'hydrated',\n} as const;\n\nconst MANAGED_CLASSES_SET = new Set(\n Object.values(TAB_MANAGED_CLASSES) as ManagedClass[]\n);\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n shadow: true,\n})\nexport class Tabs {\n @Element() hostElement!: HTMLIxTabsElement;\n\n /\n Set tab items to small size\n /\n @Prop() small = false;\n\n /\n Set rounded tabs\n /\n @Prop() rounded = false;\n\n /\n Set default selected tab by index\n /\n @Prop({ mutable: true }) selected = 0;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set placement style\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n ARIA label for the chevron left icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronLeftIconButton?: string;\n\n /\n ARIA label for the chevron right icon button\n \n @since 3.2.0\n /\n @Prop() ariaLabelChevronRightIconButton?: string;\n\n /\n `selected` property changed\n /\n @Event() selectedChange!: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() scrollActionAmount = 0;\n @State() showArrowPrevious = false;\n @State() showArrowNext = false;\n\n private windowStartSize = window.innerWidth;\n private resizeObserver?: ResizeObserver;\n private readonly ARROW_WIDTH = 32;\n private classObserver?: MutationObserver;\n private updateScheduled = false;\n\n private clickAction: {\n timeout: NodeJS.Timeout \| null;\n isClick: boolean;\n } = {\n timeout: null,\n isClick: true,\n };\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.totalItems = 0;\n this.totalItems = this.getTabs().length;\n\n if (this.windowStartSize === 0)\n return (this.windowStartSize = window.innerWidth);\n this.move(this.windowStartSize - window.innerWidth);\n this.windowStartSize = window.innerWidth;\n }\n\n private getTabs() {\n return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n }\n\n private getTab(tabIndex: number) {\n return this.getTabs()[tabIndex];\n }\n\n private getTabsWrapper() {\n return this.hostElement.shadowRoot?.querySelector('.items-content');\n }\n\n private getTabsContainer() {\n return this.hostElement.shadowRoot?.querySelector('.tab-items');\n }\n\n private initResizeObserver() {\n const parentElement = this.hostElement.parentElement;\n if (!parentElement) return;\n this.resizeObserver = new ResizeObserver(() => {\n this.renderArrows();\n });\n this.resizeObserver.observe(parentElement);\n }\n\n private observeSlotChanges() {\n this.classObserver?.disconnect();\n\n this.classObserver = new MutationObserver(() => {\n this.scheduleTabUpdate();\n });\n\n this.classObserver.observe(this.hostElement, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private scheduleTabUpdate() {\n if (this.updateScheduled) return;\n this.updateScheduled = true;\n\n requestAnimationFrame(() => {\n this.updateTabAttributes();\n this.updateScheduled = false;\n });\n }\n\n private setTabAttributes(element: HTMLIxTabItemElement, index: number) {\n const isSelected = index === this.selected;\n const isDisabled = element.disabled;\n\n if (this.small) element.setAttribute('small', 'true');\n\n if (this.rounded) element.setAttribute('rounded', 'true');\n\n element.setAttribute('layout', this.layout);\n element.setAttribute('selected', isSelected.toString());\n element.setAttribute('placement', this.placement);\n element.toggleAttribute('disabled', isDisabled);\n\n this.applyRequiredClasses(element, isSelected, isDisabled);\n }\n\n private applyRequiredClasses(\n element: HTMLIxTabItemElement,\n isSelected: boolean,\n isDisabled: boolean\n ) {\n const requiredClasses = new Set(\n this.buildRequiredClasses(isSelected, isDisabled)\n );\n const { classList } = element;\n\n for (const cls of requiredClasses) {\n classList.add(cls);\n }\n\n for (const managedClass of MANAGED_CLASSES_SET) {\n if (!requiredClasses.has(managedClass)) {\n classList.remove(managedClass);\n }\n }\n }\n\n private buildRequiredClasses(\n isSelected: boolean,\n isDisabled: boolean\n ): string[] {\n const classConditions = {\n [TAB_MANAGED_CLASSES.HYDRATED]: true,\n [TAB_MANAGED_CLASSES.SELECTED]: isSelected,\n [TAB_MANAGED_CLASSES.DISABLED]: isDisabled,\n [TAB_MANAGED_CLASSES.SMALL_TAB]: this.small,\n [TAB_MANAGED_CLASSES.STRETCHED]: this.layout === 'stretched',\n [TAB_MANAGED_CLASSES.BOTTOM]: this.placement === 'bottom',\n [TAB_MANAGED_CLASSES.TOP]: this.placement === 'top',\n [TAB_MANAGED_CLASSES.CIRCLE]: this.rounded,\n };\n\n return Object.entries(classConditions)\n .filter(([, condition]) => condition)\n .map(([className]) => className);\n }\n\n private ensureSelectedIndex() {\n if (this.totalItems === 0) {\n console.warn('ix-tabs: No tabs available for selection');\n this.selected = -1;\n return;\n }\n\n if (this.selected < this.totalItems) {\n return;\n }\n\n const originalIndex = this.selected;\n const previousIndex = originalIndex - 1;\n\n if (previousIndex >= 0 && previousIndex < this.totalItems) {\n this.updateSelected(previousIndex);\n return;\n }\n\n if (this.totalItems > 0) {\n this.updateSelected(0);\n }\n }\n\n private updateSelected(index: number) {\n this.selected = index;\n this.selectedChange.emit(index);\n }\n\n private updateTabAttributes() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n this.ensureSelectedIndex();\n\n for (const [index, element] of tabs.entries()) {\n this.setTabAttributes(element, index);\n }\n\n this.renderArrows();\n }\n\n private showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\n tabWrapper &&\n tabWrapper.scrollWidth >\n Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n this.layout === 'auto'\n );\n } catch (error) {\n return false;\n }\n }\n\n private showPreviousArrow() {\n try {\n return this.showArrows() === true && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n\n if (!tabWrapper) {\n return false;\n }\n\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() === true &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private move(amount: number, click = false) {\n const tabsWrapper = this.getTabsWrapper();\n\n if (!tabsWrapper) {\n return;\n }\n\n const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n const maxScrollWidth =\n -this.currentScrollAmount +\n tabsWrapperVisibleWidth -\n tabsWrapper.scrollWidth;\n\n amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n amount += this.currentScrollAmount;\n amount = Math.min(amount, 0);\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabsWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n @Watch('selected')\n onSelectedChange(newValue: number) {\n if (!this.showArrows()) return;\n\n const tab = this.getTab(newValue);\n const container = this.getTabsContainer();\n\n if (!tab \|\| !container) return;\n\n const containerRect = container.getBoundingClientRect();\n const tabRect = tab.getBoundingClientRect();\n const tabLeftRelative = tabRect.left - containerRect.left;\n const tabRightRelative = tabLeftRelative + tabRect.width;\n\n if (tabLeftRelative < this.ARROW_WIDTH) {\n this.move(-tabLeftRelative + this.ARROW_WIDTH, true);\n } else if (tabRightRelative > containerRect.width - this.ARROW_WIDTH) {\n this.move(\n containerRect.width - tabRightRelative - this.ARROW_WIDTH,\n true\n );\n }\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (!this.clickAction.isClick \|\| this.dragStop()) {\n return;\n }\n\n const { defaultPrevented } = this.selectedChange.emit(index);\n if (defaultPrevented) {\n return;\n }\n\n this.setSelected(index);\n }\n\n private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n if (!this.showArrows()) return;\n if (event.button > 0) return;\n\n this.clickAction.timeout =\n this.clickAction.timeout === null\n ? setTimeout(() => (this.clickAction.isClick = false), 300)\n : null;\n\n const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n const mousedownPositionX = event.clientX;\n const move = (event: MouseEvent) =>\n this.dragMove(event, tabPositionX, mousedownPositionX);\n const windowClick = () => {\n window.removeEventListener('mousemove', move, false);\n window.removeEventListener('click', windowClick, false);\n this.dragStop();\n };\n window.addEventListener('click', windowClick);\n window.addEventListener('mousemove', move, false);\n }\n\n private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n this.move(event.clientX + tabX - mousedownX);\n }\n\n private dragStop() {\n if (this.clickAction.timeout) {\n clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\n }\n\n if (this.clickAction.isClick) return false;\n\n this.currentScrollAmount = this.scrollActionAmount;\n this.clickAction.isClick = true;\n\n return true;\n }\n\n componentWillLoad() {\n this.initResizeObserver();\n }\n\n componentDidRender() {\n this.updateTabAttributes();\n }\n\n componentWillRender() {\n this.renderArrows();\n }\n\n private renderArrows() {\n requestAnimationFrameNoNgZone(() => {\n this.showArrowNext = this.showNextArrow();\n this.showArrowPrevious = this.showPreviousArrow();\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element) => {\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n\n this.observeSlotChanges();\n }\n\n disconnectedCallback() {\n this.resizeObserver?.disconnect();\n this.classObserver?.disconnect();\n }\n\n @Listen('tabClick')\n onTabClick(event: CustomEvent) {\n if (event.defaultPrevented) {\n return;\n }\n\n const target = event.target;\n const tabs = this.getTabs();\n\n tabs.forEach((tab, index) => {\n if (!tab.disabled && tab === target) {\n this.clickTab(index);\n }\n });\n }\n\n render() {\n return (\n <Host>\n {this.showArrowPrevious && (\n <button\n class=\"arrow\"\n onClick={() => this.move(this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronLeftIconButton}\n >\n <ix-icon name={iconChevronLeftSmall}></ix-icon>\n </button>\n )}\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showArrowPrevious,\n 'shadow-right': this.showArrowNext,\n 'shadow-both': this.showArrowNext && this.showArrowPrevious,\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n {this.showArrowNext && (\n <button\n class=\"arrow right\"\n onClick={() => this.move(-this.scrollAmount, true)}\n aria-label={this.ariaLabelChevronRightIconButton}\n >\n <ix-icon name={iconChevronRightSmall}></ix-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -23,17 +23,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'f5c50da791dcbdfeb884d33071b6d557360c1a60', class: {
+        return (h(Host, { key: 'e1166a8b4e348942b7ed4258f88f8be64de05933', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: '651e393dbd8f7f7cd55373c3bdadc195dfc88cbd', class: {
+            } }, h("div", { key: 'a6bd9158342ed546d51c55685afe3d75c2bf31b8', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '1b94a241077664e5bcb535321f816b3b3faa9fad', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'd2ce3123c9ffa767e07edf25248567ee9406fc95', class: "tile-subheader" }, h("slot", { key: '025ac544a3750fbfb145d1350e7091e969c2e369', name: "subheader" })), h("div", { key: '6ce8df1e1b426df28b42f490db11dc1d951715e6', class: "tile-content" }, h("slot", { key: '7bb66b49df63f613c3b7be8ff0da64bc16dde6b9' })), h("div", { key: '55f6e978190c3c8581310559a7a46ec6c4cc0e2f', class: {
+            } }, h("slot", { key: 'c24c054f14e378dc126472b4086b4be4a245cbac', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '975744cdd6f42661636fc382a2f2e3c256ccdc9f', class: "tile-subheader" }, h("slot", { key: 'a867a5e2e3cb8958c819d5d936bf955cb51e808b', name: "subheader" })), h("div", { key: '8ab40a481b778384e6773a6318545e1d0001e669', class: "tile-content" }, h("slot", { key: 'c013dd68db8ce80c3b4cfac26acf9c690fcb2439' })), h("div", { key: '00b012d9f4bce4b623fc30b1f750f4319f4144f9', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'd63334865e6a32a6bb082939b44f3bf0b041b93a', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'fc565c7344dadeb70cf0002392a0ee98774843df', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }