npm - @siemens/ix - Versions diffs - 0.0.0-20240419081748 → 0.0.0-20240522073858 - Mend

@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240522073858

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 (838) 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';\n\nexport type SliderMarker = Array<number>;\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 @since 2.0.0\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;\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 get tooltip() {\n return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n }\n\n get pseudoThumb() {\n return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\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) {\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 = parseInt(this.slider.value);\n\n if (!isNaN(value)) {\n this.rangeInput = value;\n this.emitInputEvent();\n }\n }\n\n private emitInputEvent() {\n 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 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 }}\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 class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\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'} color=\"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 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';\n\nexport type SliderMarker = Array<number>;\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 @since 2.0.0\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;\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 get tooltip() {\n return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n }\n\n get pseudoThumb() {\n return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\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) {\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 = parseInt(this.slider.value);\n\n if (!isNaN(value)) {\n this.rangeInput = value;\n this.emitInputEvent();\n }\n }\n\n private emitInputEvent() {\n 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 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 }}\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 class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\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'} color=\"alarm\">\n {this.error}\n </ix-typography>\n ) : null}\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.ct.js","sourceRoot":"","sources":["~~../../../../../~~src/components/slider/test/slider.ct.ts"],"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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ page, mount }) => {\n await mount(`<ix-slider></ix-slider>`);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n});\n\ntest('should show tooltip by focus', async ({ page, mount }) => {\n await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n\n const input = slider.locator('input');\n\n const tooltip = slider.locator('ix-tooltip');\n await input.focus();\n await expect(tooltip).toBeVisible();\n const left = (await tooltip.boundingBox()).x;\n\n await input.press('ArrowRight');\n await input.press('ArrowRight');\n\n await page.waitForTimeout(500);\n await expect(tooltip).toBeVisible();\n const leftAfterKeyboardNavigation = (await tooltip.boundingBox()).x;\n\n expect(leftAfterKeyboardNavigation).toBeGreaterThan(left);\n\n await input.blur();\n await page.waitForTimeout(500);\n await expect(tooltip).not.toBeVisible();\n});\n\ntest('should show tooltip while mouse drags slider handle', async ({\n page,\n mount,\n}) => {\n await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n\n const tooltip = slider.locator('ix-tooltip');\n\n await expect(tooltip).not.toBeVisible();\n\n const box = await slider.boundingBox();\n await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);\n await page.mouse.down();\n await page.mouse.move(box.x + box.width / 3, box.y + box.height / 3);\n await expect(tooltip).toBeVisible();\n\n await page.mouse.up();\n await expect(tooltip).not.toBeVisible();\n});\n"]}
1	+ {"version":3,"file":"slider.ct.js","sourceRoot":"","sources":["../../../../src/components/slider/test/slider.ct.ts"],"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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ page, mount }) => {\n await mount(`<ix-slider></ix-slider>`);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n});\n\ntest('should show tooltip by focus', async ({ page, mount }) => {\n await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n\n const input = slider.locator('input');\n\n const tooltip = slider.locator('ix-tooltip');\n await input.focus();\n await expect(tooltip).toBeVisible();\n const left = (await tooltip.boundingBox()).x;\n\n await input.press('ArrowRight');\n await input.press('ArrowRight');\n\n await page.waitForTimeout(500);\n await expect(tooltip).toBeVisible();\n const leftAfterKeyboardNavigation = (await tooltip.boundingBox()).x;\n\n expect(leftAfterKeyboardNavigation).toBeGreaterThan(left);\n\n await input.blur();\n await page.waitForTimeout(500);\n await expect(tooltip).not.toBeVisible();\n});\n\ntest('should show tooltip while mouse drags slider handle', async ({\n page,\n mount,\n}) => {\n await mount(`<ix-slider value=\"20\"></ix-slider>`);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n\n const tooltip = slider.locator('ix-tooltip');\n\n await expect(tooltip).not.toBeVisible();\n\n const box = await slider.boundingBox();\n await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);\n await page.mouse.down();\n await page.mouse.move(box.x + box.width / 3, box.y + box.height / 3);\n await expect(tooltip).toBeVisible();\n\n await page.mouse.up();\n await expect(tooltip).not.toBeVisible();\n});\n"]}

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

@@ -14,7 +14,7 @@ export class Spinner {
         this.hideTrack = false;
     }
     render() {
-        return (h(Host, { key: 'ae03c01022d0144ced3c631a78d947934fdef0cf', class: {
+        return (h(Host, { key: '6ca735841b5d203cf8ef66f8675f73d2988d7518', class: {
                 primary: this.variant === 'primary',
                 'xx-small': this.size === 'xx-small',
                 'x-small': this.size === 'x-small',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.js","sourceRoot":"","sources":["~~../../../../~~src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,OAAO;;uBAMyB,WAAW;oBAMpD,QAAQ;yBAKU,KAAK;;IAEzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,GACK,CACT,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 { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,OAAO;;uBAMyB,WAAW;oBAMpD,QAAQ;yBAKU,KAAK;;IAEzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;gBACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,GACK,CACT,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 { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"]}

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

@@ -58,7 +58,7 @@ export class SplitButton {
                 "mutable": false,
                 "complexType": {
                     "original": "SplitButtonVariant",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
                     "references": {
                         "SplitButtonVariant": {
                             "location": "local",

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;AAWvB,MAAM,OAAO,WAAW;;uBAMgB,SAAS;uBAK7B,KAAK;qBAKP,KAAK;;oBAUN,EAAE;yBAKG,cAAc;wBAKf,KAAK;yBAKc,cAAc;sBAElC,KAAK;;IAUf,cAAc;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACrD,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;aACpC;SACF,CAAC;QACF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;gBAC3D,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,KAEvC,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,IACxB,CACnB;gBACD,uFACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd;YAEN,oEAAa,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;gBACjD,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 { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\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 Button outline variant\n /\n @Prop() outline = false;\n\n /\n Button invisible\n /\n @Prop() ghost = false;\n\n /\n Button label\n /\n @Prop() label: string;\n\n /\n Button icon\n /\n @Prop() icon = '';\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon = 'context-menu';\n\n /\n Disabled\n /\n @Prop() disabled = 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 triggerElement: HTMLElement;\n private dropdownElement: HTMLIxDropdownElement;\n\n private linkTriggerRef() {\n if (this.triggerElement && this.dropdownElement) {\n this.dropdownElement.trigger = this.triggerElement;\n }\n }\n\n componentDidLoad() {\n this.linkTriggerRef();\n }\n\n render() {\n const buttonAttributes = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n disabled: this.disabled,\n class: {\n 'left-button-border': !this.outline,\n },\n };\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\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 ></ix-icon-button>\n )}\n <ix-icon-button\n {...buttonAttributes}\n ref={(r) => (this.triggerElement = r)}\n class={'anchor'}\n icon={this.splitIcon}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\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":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAWvB,MAAM,OAAO,WAAW;;uBAMgB,SAAS;uBAK7B,KAAK;qBAKP,KAAK;;oBAUN,EAAE;yBAKG,cAAc;wBAKf,KAAK;yBAKc,cAAc;sBAElC,KAAK;;IAUf,cAAc;QACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACrD,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE;gBACL,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;aACpC;SACF,CAAC;QACF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;gBAC3D,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,KAEvC,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,IACxB,CACnB;gBACD,uFACM,gBAAgB,IACpB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,CAAC,SAAS,IACJ,CACd;YAEN,oEAAa,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;gBACjD,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 { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\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 Button outline variant\n /\n @Prop() outline = false;\n\n /\n Button invisible\n /\n @Prop() ghost = false;\n\n /\n Button label\n /\n @Prop() label: string;\n\n /\n Button icon\n /\n @Prop() icon = '';\n\n /\n Icon of the button on the right\n /\n @Prop() splitIcon = 'context-menu';\n\n /\n Disabled\n /\n @Prop() disabled = 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 triggerElement: HTMLElement;\n private dropdownElement: HTMLIxDropdownElement;\n\n private linkTriggerRef() {\n if (this.triggerElement && this.dropdownElement) {\n this.dropdownElement.trigger = this.triggerElement;\n }\n }\n\n componentDidLoad() {\n this.linkTriggerRef();\n }\n\n render() {\n const buttonAttributes = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n disabled: this.disabled,\n class: {\n 'left-button-border': !this.outline,\n },\n };\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n {this.label ? (\n <ix-button\n {...buttonAttributes}\n icon={this.icon}\n onClick={(e) => this.buttonClick.emit(e)}\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 ></ix-icon-button>\n )}\n <ix-icon-button\n {...buttonAttributes}\n ref={(r) => (this.triggerElement = r)}\n class={'anchor'}\n icon={this.splitIcon}\n ></ix-icon-button>\n </div>\n\n <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"]}

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

@@ -22,7 +22,7 @@ export class SplitButtonItem {
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (h(Host, { key: 'b7360859acb51da295ef29d514e8d4dbef347931' }, h("ix-dropdown-item", { key: '1c47e6937a8a686da1bb0b028daa0fef1b711f4e', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (h(Host, { key: 'ef07b2d6b51ae7356319d47e610517676651f2ae' }, h("ix-dropdown-item", { key: '83b4d7597071c2337aae657211c2c093fabe5eb1', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, onClick: (e) => this.itemClick.emit(e) })));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"split-button-item.js","sourceRoot":"","sources":["~~../../../../~~src/components/split-button-item/split-button-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,eAAe;;QAkBlB,eAAU,GAAG,OAAO,EAA6B,CAAC;;;;IAE1D,gBAAgB;IAEhB,KAAK,CAAC,sBAAsB;QAC1B,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,CACf,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 Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n/\n @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n /\n@Component({\n tag: 'ix-split-button-item',\n styleUrl: 'split-button-item.css',\n shadow: true,\n})\nexport class SplitButtonItem implements DropdownItemWrapper {\n @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n /\n Dropdown icon\n /\n @Prop() icon: string;\n\n /\n Dropdown label\n /\n @Prop() label: string;\n\n /\n Dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n private wrapperRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.wrapperRef.waitForCurrent();\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown-item\n ref={this.wrapperRef}\n suppressChecked\n icon={this.icon}\n label={this.label}\n onItemClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"split-button-item.js","sourceRoot":"","sources":["../../../src/components/split-button-item/split-button-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,eAAe;;QAkBlB,eAAU,GAAG,OAAO,EAA6B,CAAC;;;;IAE1D,gBAAgB;IAEhB,KAAK,CAAC,sBAAsB;QAC1B,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,eAAe,QACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACtB,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,CACf,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 Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n/\n @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n /\n@Component({\n tag: 'ix-split-button-item',\n styleUrl: 'split-button-item.css',\n shadow: true,\n})\nexport class SplitButtonItem implements DropdownItemWrapper {\n @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n /\n Dropdown icon\n /\n @Prop() icon: string;\n\n /\n Dropdown label\n /\n @Prop() label: string;\n\n /\n Dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n private wrapperRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.wrapperRef.waitForCurrent();\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown-item\n ref={this.wrapperRef}\n suppressChecked\n icon={this.icon}\n label={this.label}\n onItemClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-item.js","sourceRoot":"","sources":["~~../../../../~~src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAW9E,MAAM,OAAO,OAAO;;wBAIC,KAAK;wBAKL,KAAK;qBAKR,KAAK;oBAKN,KAAK;uBAKF,KAAK;;sBAUgB,MAAM;yBAKP,QAAQ;;IAStC,cAAc,CAAC,KAQtB;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;YACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;YACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;YACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACrC,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;gBAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE,CAAC;oBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,OAAO;oBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;oBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n nativeEvent: MouseEvent;\n};\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n On tab click\n \n @since 2.0.0\n */\n @Event() tabClick: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tab-item.js","sourceRoot":"","sources":["../../../src/components/tab-item/tab-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAW9E,MAAM,OAAO,OAAO;;wBAIC,KAAK;wBAKL,KAAK;qBAKR,KAAK;oBAKN,KAAK;uBAKF,KAAK;;sBAUgB,MAAM;yBAKP,QAAQ;;IAStC,cAAc,CAAC,KAQtB;QACC,OAAO;YACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,WAAW,EAAE,KAAK,CAAC,KAAK;YACxB,IAAI,EAAE,KAAK,CAAC,KAAK;YACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;YACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;YACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;YAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;SACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,MAAM,EAAE,IAAI,CAAC,OAAO;aACrB,CAAC,EACF,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACrC,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAC;gBAEH,IAAI,WAAW,CAAC,gBAAgB,EAAE,CAAC;oBACjC,KAAK,CAAC,eAAe,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC;YAED,4DACE,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,OAAO;oBACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;oBACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB;gBAED,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;oBACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;iBACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n nativeEvent: MouseEvent;\n};\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n /\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n /\n On tab click\n \n @since 2.0.0\n */\n @Event() tabClick: EventEmitter<TabClickDetail>;\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n onClick={(event: MouseEvent) => {\n const clientEvent = this.tabClick.emit({\n nativeEvent: event,\n });\n\n if (clientEvent.defaultPrevented) {\n event.stopPropagation();\n }\n }}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -197,13 +197,13 @@ export class Tabs {
         });
     }
     render() {
-        return (h(Host, { key: '134654adbcf4c3492c3a20162ad48c21f3ffa3dc' }, h("div", { key: 'eecd05941c8a8decc31f6647deb48ab2e279966b', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '45448aa96b97f0bce6d37fec9700a2ac2fd591ad', name: 'chevron-left-small' })), h("div", { key: '705552c2894e0a655c27d855cb55a46e75a1fcf7', class: {
+        return (h(Host, { key: 'd78a0e8848762853905f0a00ad0e29eb8010f058' }, h("div", { key: '81f8018608a4ead1b07a2c8dbc275f3e6b1a4f9f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '74ac11767dded217d438e58f3d9af659b5f7913c', name: 'chevron-left-small' })), h("div", { key: '22172b312ee82c63c590780030766262d5655be3', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showPreviousArrow(),
                 'shadow-right': this.showNextArrow(),
                 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, h("div", { key: '7f23535c4a4926e2162067024b0e37c13a8149f2', class: "items-content" }, h("slot", { key: 'e1e727370413ea4338f4eda6999eb6803228311c' }))), h("div", { key: '0cd120d1127015dcd779be2cee9292eef6ace6a6', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '5f9c9a088f2929b64f3eca33bb5800b7a32b7397', name: 'chevron-right-small' }))));
+            } }, h("div", { key: '31a8df74124a12d6abc6e3af8c45e2f59c9e8e7f', class: "items-content" }, h("slot", { key: '0a37dea0573b5123c6de66831c028401d1da86b4' }))), h("div", { key: 'cd946069a8dbb2708bc90923c2bb8a897eeaf3b5', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '3542fc3e7cba8477f2367492620dc16cdaecbad8', name: 'chevron-right-small' }))));
     }
     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":"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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 Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\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 `selected` property changed\n \n @since 2.0.0\n /\n @Event() selectedChange: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n\n @State() scrollActionAmount = 0;\n\n private windowStartSize = window.innerWidth;\n\n private get arrowLeftElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-left]'\n ) as HTMLElement;\n }\n\n private get arrowRightElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-right]'\n ) as HTMLElement;\n }\n\n private clickAction: {\n timeout: NodeJS.Timeout;\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 showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\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() && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private getArrowStyle(condition: boolean) {\n return {\n opacity: condition ? '1' : '0',\n zIndex: condition ? '1' : '-1',\n };\n }\n\n private move(amount: number, click = false) {\n const tabWrapper = this.getTabsWrapper();\n const maxScrollWidth =\n (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n amount = this.currentScrollAmount + amount;\n amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n private moveTabToView(tabIndex: number) {\n if (!this.showArrows()) return;\n\n const tab = this.getTab(tabIndex).getBoundingClientRect();\n const amount = tab.x * -1;\n this.move(amount, true);\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (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 this.moveTabToView(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\n window.addEventListener('mouseup', () => {\n window.removeEventListener('mousemove', move, false);\n this.dragStop();\n });\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 clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\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\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 requestAnimationFrameNoNgZone(() => {\n const showNextArrow = this.showNextArrow();\n const previousArrow = this.showPreviousArrow();\n\n Object.assign(\n this.arrowLeftElement.style,\n this.getArrowStyle(previousArrow)\n );\n Object.assign(\n this.arrowRightElement.style,\n this.getArrowStyle(showNextArrow)\n );\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 @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 <div\n class=\"arrow\"\n data-arrow-left\n onClick={() => this.move(this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-left-small'}></ix-icon>\n </div>\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showPreviousArrow(),\n 'shadow-right': this.showNextArrow(),\n 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n <div\n class=\"arrow right\"\n data-arrow-right\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-right-small'}></ix-icon>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.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 Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\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 `selected` property changed\n \n @since 2.0.0\n /\n @Event() selectedChange: EventEmitter<number>;\n\n @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n\n @State() scrollActionAmount = 0;\n\n private windowStartSize = window.innerWidth;\n\n private get arrowLeftElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-left]'\n ) as HTMLElement;\n }\n\n private get arrowRightElement() {\n return this.hostElement.shadowRoot.querySelector(\n '[data-arrow-right]'\n ) as HTMLElement;\n }\n\n private clickAction: {\n timeout: NodeJS.Timeout;\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 showArrows() {\n try {\n const tabWrapper = this.getTabsWrapper();\n return (\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() && this.scrollActionAmount < 0;\n } catch (error) {\n return false;\n }\n }\n\n private showNextArrow() {\n try {\n const tabWrapper = this.getTabsWrapper();\n const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n return (\n this.showArrows() &&\n this.scrollActionAmount >\n (tabWrapper.scrollWidth - tabWrapperRect.width) -1\n );\n } catch (error) {\n return false;\n }\n }\n\n private getArrowStyle(condition: boolean) {\n return {\n opacity: condition ? '1' : '0',\n zIndex: condition ? '1' : '-1',\n };\n }\n\n private move(amount: number, click = false) {\n const tabWrapper = this.getTabsWrapper();\n const maxScrollWidth =\n (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n amount = this.currentScrollAmount + amount;\n amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n const styles = [\n `transform: translateX(${amount}px);`,\n click ? 'transition: all ease-in-out 400ms;' : '',\n ].join('');\n\n tabWrapper.setAttribute('style', styles);\n\n if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n else this.scrollActionAmount = amount;\n }\n\n private moveTabToView(tabIndex: number) {\n if (!this.showArrows()) return;\n\n const tab = this.getTab(tabIndex).getBoundingClientRect();\n const amount = tab.x * -1;\n this.move(amount, true);\n }\n\n private setSelected(index: number) {\n this.selected = index;\n }\n\n private clickTab(index: number) {\n if (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 this.moveTabToView(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\n window.addEventListener('mouseup', () => {\n window.removeEventListener('mousemove', move, false);\n this.dragStop();\n });\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 clearTimeout(this.clickAction.timeout);\n this.clickAction.timeout = null;\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\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 requestAnimationFrameNoNgZone(() => {\n const showNextArrow = this.showNextArrow();\n const previousArrow = this.showPreviousArrow();\n\n Object.assign(\n this.arrowLeftElement.style,\n this.getArrowStyle(previousArrow)\n );\n Object.assign(\n this.arrowRightElement.style,\n this.getArrowStyle(showNextArrow)\n );\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 @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 <div\n class=\"arrow\"\n data-arrow-left\n onClick={() => this.move(this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-left-small'}></ix-icon>\n </div>\n <div\n class={{\n 'tab-items': true,\n 'overflow-shadow': true,\n 'shadow-left': this.showPreviousArrow(),\n 'shadow-right': this.showNextArrow(),\n 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n }}\n >\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n <div\n class=\"arrow right\"\n data-arrow-right\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <ix-icon name={'chevron-right-small'}></ix-icon>\n </div>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.ct.js","sourceRoot":"","sources":["~~../../../../../~~src/components/tabs/test/tabs.ct.ts"],"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/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const tab = page.locator('ix-tab-item').nth(0);\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should change tab', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const tab = page.locator('ix-tab-item').nth(2);\n\n await tab.click();\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should not change tab by tab click event', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const firstTab = page.locator('ix-tab-item').nth(0);\n const lastTab = page.locator('ix-tab-item').nth(2);\n\n lastTab.evaluate((tabElement) => {\n tabElement.addEventListener('tabClick', (event) => event.preventDefault());\n });\n\n await lastTab.click();\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(firstTab).toHaveClass(/selected/);\n await expect(lastTab).not.toHaveClass(/selected/);\n});\n\ntest('should not change tab by tabs event', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const firstTab = page.locator('ix-tab-item').nth(0);\n const lastTab = page.locator('ix-tab-item').nth(2);\n\n tabs.evaluate((tabElement) => {\n tabElement.addEventListener('selectedChange', (event) =>\n event.preventDefault()\n );\n });\n\n await lastTab.click();\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(firstTab).toHaveClass(/selected/);\n await expect(lastTab).not.toHaveClass(/selected/);\n});\n"]}
1	+ {"version":3,"file":"tabs.ct.js","sourceRoot":"","sources":["../../../../src/components/tabs/test/tabs.ct.ts"],"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/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const tab = page.locator('ix-tab-item').nth(0);\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should change tab', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const tab = page.locator('ix-tab-item').nth(2);\n\n await tab.click();\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(tab).toHaveClass(/selected/);\n});\n\ntest('should not change tab by tab click event', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const firstTab = page.locator('ix-tab-item').nth(0);\n const lastTab = page.locator('ix-tab-item').nth(2);\n\n lastTab.evaluate((tabElement) => {\n tabElement.addEventListener('tabClick', (event) => event.preventDefault());\n });\n\n await lastTab.click();\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(firstTab).toHaveClass(/selected/);\n await expect(lastTab).not.toHaveClass(/selected/);\n});\n\ntest('should not change tab by tabs event', async ({ mount, page }) => {\n await mount(`\n <ix-tabs>\n <ix-tab-item>Item 1</ix-tab-item>\n <ix-tab-item>Item 2</ix-tab-item>\n <ix-tab-item>Item 3</ix-tab-item>\n </ix-tabs>\n `);\n const tabs = page.locator('ix-tabs');\n const firstTab = page.locator('ix-tab-item').nth(0);\n const lastTab = page.locator('ix-tab-item').nth(2);\n\n tabs.evaluate((tabElement) => {\n tabElement.addEventListener('selectedChange', (event) =>\n event.preventDefault()\n );\n });\n\n await lastTab.click();\n\n await expect(tabs).toHaveClass(/hydrated/);\n await expect(firstTab).toHaveClass(/selected/);\n await expect(lastTab).not.toHaveClass(/selected/);\n});\n"]}

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

@@ -20,17 +20,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'c0d60ca326a0a16f2255ae8a755f03a86c4c2bdf', class: {
+        return (h(Host, { key: '16fa86cdf2448b3335401be00cba0284fd166959', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'b43e41051b62b8146749b884c9d611f79b6bf9c8', class: {
+            } }, h("div", { key: '0aaf6e763e1bd75f919d1067208af8a33be06937', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '3dc74cc4beb1b24023463d62daf862c28ba2177a', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '4935b7758861eab0fd305ceccba9d4d3a7cc90de', class: "tile-subheader" }, h("slot", { key: '31d66eb3e361c0b811ab3c0f89976c39f3576629', name: "subheader" })), h("div", { key: '083b54d5455f1015811c904826dda8fb2b35a243', class: "tile-content" }, h("slot", { key: '14c79b5d8365444f234c030c56b2592b7cb38dc8' })), h("div", { key: 'a12114c3593b8032aa4e5d841efc55723deb7b44', class: {
+            } }, h("slot", { key: '70178ba49417bf674cc8798f6824aa37864668f7', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '823a4907cbe143ef6586a5482f31c8729644bf76', class: "tile-subheader" }, h("slot", { key: '6e240f390b24fec6630bed00539479d11d89b096', name: "subheader" })), h("div", { key: '7d83cbe84804423f654e4f9dd0fe3f2ca261a3c4', class: "tile-content" }, h("slot", { key: '100276ea9333c7dd7d183dbd7fb2651475b397cf' })), h("div", { key: 'f73dcff2a9730339deed5c82c0978ff4122dd6a5', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'aa1f08fe633554658a5119cd7d61febb3928e8f4', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'a550b2cc798c1bc8a57adea6c6fcd4863ad9ac57', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tile.js","sourceRoot":"","sources":["~~../../../../~~src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,IAAI;;oBAM4B,QAAQ;6BAEjB,KAAK;6BACL,KAAK;;IAEvC,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAChC;YAED,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'ix-tile',\n styleUrl: 'tile.scss',\n shadow: true,\n})\nexport class Tile {\n @Element() hostElement: HTMLIxTileElement;\n\n /\n Size of the tile - one of 'small', 'medium' or 'large'\n */\n @Prop() size: 'small' \| 'medium' \| 'big' = 'medium';\n\n @State() hasHeaderSlot: boolean = false;\n @State() hasFooterSlot: boolean = false;\n\n handleHeaderSlotChange() {\n this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n }\n\n handleFooterSlotChange() {\n this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n }\n\n render() {\n return (\n <Host\n class={{\n 'tile-small': this.size === 'small',\n 'tile-medium': this.size === 'medium',\n 'tile-big': this.size === 'big',\n }}\n >\n <div\n class={{\n 'tile-header': true,\n 'has-content': this.hasHeaderSlot,\n }}\n >\n <slot\n name=\"header\"\n onSlotchange={() => this.handleHeaderSlotChange()}\n ></slot>\n </div>\n <div class=\"tile-subheader\">\n <slot name=\"subheader\"></slot>\n </div>\n <div class=\"tile-content\">\n <slot></slot>\n </div>\n <div\n class={{\n 'tile-footer': true,\n 'has-content': this.hasFooterSlot,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.handleFooterSlotChange()}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile/tile.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,IAAI;;oBAM4B,QAAQ;6BAEjB,KAAK;6BACL,KAAK;;IAEvC,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;aAChC;YAED,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,aAAa,EAAE,IAAI,CAAC,aAAa;iBAClC;gBAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAC3C,CACJ,CACD,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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'ix-tile',\n styleUrl: 'tile.scss',\n shadow: true,\n})\nexport class Tile {\n @Element() hostElement: HTMLIxTileElement;\n\n /\n Size of the tile - one of 'small', 'medium' or 'large'\n */\n @Prop() size: 'small' \| 'medium' \| 'big' = 'medium';\n\n @State() hasHeaderSlot: boolean = false;\n @State() hasFooterSlot: boolean = false;\n\n handleHeaderSlotChange() {\n this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n }\n\n handleFooterSlotChange() {\n this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n }\n\n render() {\n return (\n <Host\n class={{\n 'tile-small': this.size === 'small',\n 'tile-medium': this.size === 'medium',\n 'tile-big': this.size === 'big',\n }}\n >\n <div\n class={{\n 'tile-header': true,\n 'has-content': this.hasHeaderSlot,\n }}\n >\n <slot\n name=\"header\"\n onSlotchange={() => this.handleHeaderSlotChange()}\n ></slot>\n </div>\n <div class=\"tile-subheader\">\n <slot name=\"subheader\"></slot>\n </div>\n <div class=\"tile-content\">\n <slot></slot>\n </div>\n <div\n class={{\n 'tile-footer': true,\n 'has-content': this.hasFooterSlot,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.handleFooterSlotChange()}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/time-picker/test/time-picker.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-picker.ct.js","sourceRoot":"","sources":["~~../../../../../~~src/components/time-picker/test/time-picker.ct.ts"],"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 */\nimport { expect, Page } from '@playwright/test';\nimport { test } from '@utils/test';\n\nconst TIME_PICKER_SELECTOR = 'ix-time-picker';\nconst getTimeObjs = async (page: Page) => {\n return await page.$$eval(TIME_PICKER_SELECTOR, (elements) => {\n return Promise.all(elements.map((elem) => elem.getCurrentTime()));\n });\n};\n\ntest('renders', async ({ mount, page }) => {\n await mount(`<ix-time-picker></ix-time-picker>`);\n const datePicker = page.locator(TIME_PICKER_SELECTOR);\n await expect(datePicker).toHaveClass(/hydrated/);\n});\n\ntest.describe('time picker tests', () => {\n test.beforeEach(async ({ mount }) => {\n await mount(\n `<ix-time-picker\n time=\"09:10:11\"\n >\n </ix-time-picker>\n <ix-time-picker\n time=\"10:11:12 AM\"\n format=\"hh:mm:ss a\"\n >\n </ix-time-picker>`\n );\n });\n\n test('get time', async ({ page }) => {\n expect(await getTimeObjs(page)).toEqual(['09:10:11', '10:11:12 AM']);\n });\n\n test('increment time units', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n // Slice is necessary, because on element is on Shadow-DOM\n const incrementButtons = (\n await page.$$('ix-icon-button.arrows:first-child')\n ).slice(0, 3);\n\n for (const button of incrementButtons) {\n await button.click();\n }\n\n expect(await getTimeObjs(page)).toEqual(['10:11:12', '10:11:12 AM']);\n });\n\n test('decrement time units', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n const decrementButtons = (\n await page.$$('ix-icon-button.arrows:last-child')\n ).slice(0, 3);\n\n for (const button of decrementButtons) {\n await button.click();\n }\n\n expect(await getTimeObjs(page)).toEqual(['08:09:10', '10:11:12 AM']);\n });\n\n test('maximum / minimum time units', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n const inputFields = await page\n .locator('ix-date-time-card')\n .locator('input')\n .all();\n\n for (const field of inputFields) {\n await field.type('100');\n await field.press('Enter');\n }\n\n expect(await getTimeObjs(page)).toEqual(['23:59:59', '12:59:59 PM']);\n });\n\n test('change time reference', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n const dateTimeCard = await page.$$('ix-date-time-card');\n\n const decrementButtons = await dateTimeCard[1].$$(\n 'ix-icon-button.arrows:last-child'\n );\n await decrementButtons[3].click();\n\n expect(await getTimeObjs(page)).toEqual(['09:10:11', '10:11:12 PM']);\n });\n\n test('select different time fires timeChange event', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n const timeChangeEvent = page.evaluate(() => {\n return new Promise((f) => {\n document.addEventListener('timeChange', (data) => f(data));\n });\n });\n\n const incrementButtons = (\n await page.$$('ix-icon-button.arrows:first-child')\n ).slice(0, 3);\n await incrementButtons[2].click();\n\n expect(await timeChangeEvent).toBeTruthy();\n });\n\n test('change time from outside', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n await page.$eval(TIME_PICKER_SELECTOR, (el: HTMLIxTimePickerElement) => {\n el.time = '10:11:15';\n });\n\n await page.$eval(TIME_PICKER_SELECTOR, (el: HTMLIxTimePickerElement) => {\n el.time = '11:12:15';\n });\n\n expect(['11:12:15', '10:11:12 AM']).toEqual(await getTimeObjs(page));\n });\n});\n"]}
1	+ {"version":3,"file":"time-picker.ct.js","sourceRoot":"","sources":["../../../../src/components/time-picker/test/time-picker.ct.ts"],"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 */\nimport { expect, Page } from '@playwright/test';\nimport { test } from '@utils/test';\n\nconst TIME_PICKER_SELECTOR = 'ix-time-picker';\nconst getTimeObjs = async (page: Page) => {\n return await page.$$eval(TIME_PICKER_SELECTOR, (elements) => {\n return Promise.all(elements.map((elem) => elem.getCurrentTime()));\n });\n};\n\ntest('renders', async ({ mount, page }) => {\n await mount(`<ix-time-picker></ix-time-picker>`);\n const datePicker = page.locator(TIME_PICKER_SELECTOR);\n await expect(datePicker).toHaveClass(/hydrated/);\n});\n\ntest.describe('time picker tests', () => {\n test.beforeEach(async ({ mount }) => {\n await mount(\n `<ix-time-picker\n time=\"09:10:11\"\n >\n </ix-time-picker>\n <ix-time-picker\n time=\"10:11:12 AM\"\n format=\"hh:mm:ss a\"\n >\n </ix-time-picker>`\n );\n });\n\n test('get time', async ({ page }) => {\n expect(await getTimeObjs(page)).toEqual(['09:10:11', '10:11:12 AM']);\n });\n\n test('increment time units', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n // Slice is necessary, because on element is on Shadow-DOM\n const incrementButtons = (\n await page.$$('ix-icon-button.arrows:first-child')\n ).slice(0, 3);\n\n for (const button of incrementButtons) {\n await button.click();\n }\n\n expect(await getTimeObjs(page)).toEqual(['10:11:12', '10:11:12 AM']);\n });\n\n test('decrement time units', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n const decrementButtons = (\n await page.$$('ix-icon-button.arrows:last-child')\n ).slice(0, 3);\n\n for (const button of decrementButtons) {\n await button.click();\n }\n\n expect(await getTimeObjs(page)).toEqual(['08:09:10', '10:11:12 AM']);\n });\n\n test('maximum / minimum time units', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n const inputFields = await page\n .locator('ix-date-time-card')\n .locator('input')\n .all();\n\n for (const field of inputFields) {\n await field.type('100');\n await field.press('Enter');\n }\n\n expect(await getTimeObjs(page)).toEqual(['23:59:59', '12:59:59 PM']);\n });\n\n test('change time reference', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n const dateTimeCard = await page.$$('ix-date-time-card');\n\n const decrementButtons = await dateTimeCard[1].$$(\n 'ix-icon-button.arrows:last-child'\n );\n await decrementButtons[3].click();\n\n expect(await getTimeObjs(page)).toEqual(['09:10:11', '10:11:12 PM']);\n });\n\n test('select different time fires timeChange event', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n const timeChangeEvent = page.evaluate(() => {\n return new Promise((f) => {\n document.addEventListener('timeChange', (data) => f(data));\n });\n });\n\n const incrementButtons = (\n await page.$$('ix-icon-button.arrows:first-child')\n ).slice(0, 3);\n await incrementButtons[2].click();\n\n expect(await timeChangeEvent).toBeTruthy();\n });\n\n test('change time from outside', async ({ page }) => {\n await page.waitForSelector('ix-date-time-card');\n\n await page.$eval(TIME_PICKER_SELECTOR, (el: HTMLIxTimePickerElement) => {\n el.time = '10:11:15';\n });\n\n await page.$eval(TIME_PICKER_SELECTOR, (el: HTMLIxTimePickerElement) => {\n el.time = '11:12:15';\n });\n\n expect(['11:12:15', '10:11:12 AM']).toEqual(await getTimeObjs(page));\n });\n});\n"]}

package/dist/collection/components/time-picker/time-picker.css CHANGED Viewed

@@ -71,7 +71,7 @@ label.label-alignment-left {
   padding: 6px 0px;
 }
-input, input:-webkit-autofill {
+input {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -93,9 +93,18 @@ input, input:-webkit-autofill {
   box-shadow: var(--theme-input--box-shadow);
 }
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-  -webkit-text-fill-color: var(--theme-input--color) !important;
-  border-color: var(--theme-input--border-color) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+input:-webkit-autofill, input:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
 }
 input::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -104,13 +113,13 @@ input::placeholder {
   color: var(--theme-input-hint--color);
 }
 input.hover, input:hover {
-  border-color: var(--theme-input--border-color--hover);
+  border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
 input.focus, input:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus);
+  border-color: var(--theme-input--border-color--focus) !important;
 }
 input:-moz-read-only {
   box-shadow: none;
@@ -163,7 +172,7 @@ textarea {
   height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
-textarea, textarea:-webkit-autofill {
+textarea {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -185,9 +194,18 @@ textarea, textarea:-webkit-autofill {
   box-shadow: var(--theme-input--box-shadow);
 }
 textarea:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-  -webkit-text-fill-color: var(--theme-input--color) !important;
-  border-color: var(--theme-input--border-color) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+textarea:-webkit-autofill, textarea:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
 }
 textarea::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -196,13 +214,13 @@ textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
 textarea.hover, textarea:hover {
-  border-color: var(--theme-input--border-color--hover);
+  border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
 textarea.focus, textarea:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus);
+  border-color: var(--theme-input--border-color--focus) !important;
 }
 textarea:-moz-read-only {
   box-shadow: none;