npm - @siemens/ix - Versions diffs - 2.4.0 → 2.4.1 - Mend

@siemens/ix 2.4.0 → 2.4.1

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

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

@@ -97,7 +97,7 @@ export class Tooltip {
         }
     }
     async computeTooltipPosition(target) {
-        const computeResponse = await computePosition(target, this.hostElement, {
+        return computePosition(target, this.hostElement, {
             strategy: 'fixed',
             placement: this.placement,
             middleware: [
@@ -112,7 +112,6 @@ export class Tooltip {
                 }),
             ],
         });
-        return computeResponse;
     }
     applyTooltipArrowPosition(computeResponse) {
         const arrowPosition = this.computeArrowPosition(computeResponse);
@@ -123,6 +122,7 @@ export class Tooltip {
             return;
         }
         return new Promise((resolve) => {
+            this.destroyAutoUpdate();
             this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
                 setTimeout(async () => {
                     const computeResponse = await this.computeTooltipPosition(target);
@@ -243,9 +243,9 @@ export class Tooltip {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '990726c5c0bfdbdb0d5d1678ec54b5902d41d1cd', class: {
+        return (h(Host, { key: '5d57bd50e4b54e59eef7e0ec463cf9cadba6ddc4', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, h("div", { key: 'ecab668bf3f4010329c611b3d44a8103080d185e', class: 'tooltip-title' }, h("slot", { key: '016c833df9a38916cbd805756c48098d491f5846', name: "title-icon" }), h("ix-typography", { key: 'fe0a3fe4e2c9735207e22befc6006700859df2fc', variant: "default-title" }, this.titleContent, h("slot", { key: '6fcb3c9a2534922477aeb8b833f4e806d4010b84', name: "title-content" }))), h("div", { key: 'fcc689886a4d9651b0f7f23fb71e7d738558fde7', class: 'tooltip-content' }, h("slot", { key: '610c6bc179044892c550fbfa71313a1d27ee917a' })), h("div", { key: 'faf7c2a5d6b6347bd5c4ce9de377680c1ad4f06c', class: "arrow" })));
+            }, role: "tooltip" }, h("div", { key: '004a422b325b2c26639e479f3bc6a832277c38db', class: 'tooltip-title' }, h("slot", { key: 'dfb6ebe4022d3835b11d7237438358e8dd27191d', name: "title-icon" }), h("ix-typography", { key: 'e4230c3e9c28f53d217e8653fd972749af995dde', variant: "default-title" }, this.titleContent, h("slot", { key: 'bfd75a3ae808f03a552271a9f10c896de28072e2', name: "title-content" }))), h("div", { key: 'b8c20ae1bb16343dca997ecb2ef744d8b18b6ede', class: 'tooltip-content' }, h("slot", { key: 'cb15413ddd0b35a6ceb5dd95beebc855131fb998' })), h("div", { key: '91e9df64725d3ce40f280640374f0e95f89cf67b', class: "arrow" })));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -279,7 +279,7 @@ export class Tooltip {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`"
@@ -296,7 +296,7 @@ export class Tooltip {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Title of the tooltip"
@@ -417,16 +417,21 @@ export class Tooltip {
         return {
             "showTooltip": {
                 "complexType": {
-                    "signature": "(anchorElement: any) => Promise<void>",
+                    "signature": "(anchorElement: Element) => Promise<void>",
                     "parameters": [{
                             "name": "anchorElement",
-                            "type": "any",
+                            "type": "Element",
                             "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": ""
                         }
                     },
                     "return": "Promise<void>"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 /\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n top?: string;\n left?: string;\n right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/\n @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n \n @since 1.4.0\n /\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n /\n CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n /\n @Prop() for: string \| HTMLElement \| Promise<HTMLElement>;\n\n /\n Title of the tooltip\n /\n @Prop() titleContent: string;\n\n /\n Define if the user can access the tooltip via mouse.\n /\n @Prop() interactive = false;\n\n /\n Initial placement of the tooltip. If the placement don\"t have enough space,\n * the tooltip will placed on another location.\n \n @since 1.5.0\n /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /* @internal /\n @Prop() showDelay = 0;\n\n /* @internal /\n @Prop() hideDelay = 50;\n\n /* @internal /\n @Prop() animationFrame = false;\n\n @State() visible = false;\n\n @Element() hostElement: HTMLIxTooltipElement;\n\n private observer: MutationObserver;\n private hideTooltipTimeout: NodeJS.Timeout;\n private showTooltipTimeout: NodeJS.Timeout;\n private disposeAutoUpdate?: () => void;\n private disposeListener: () => void;\n\n private get arrowElement(): HTMLElement {\n return this.hostElement.shadowRoot.querySelector('.arrow');\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n /* @internal /\n @Method()\n async showTooltip(anchorElement: any) {\n clearTimeout(this.hideTooltipTimeout);\n await this.applyTooltipPosition(anchorElement);\n\n this.showTooltipTimeout = setTimeout(() => {\n tooltipController.present(this);\n // Need to compute and apply tooltip position after initial render,\n // because arrow has no valid bounding rect before that\n this.applyTooltipPosition(anchorElement);\n }, this.showDelay);\n }\n\n /* @internal */\n @Method()\n async hideTooltip() {\n clearTimeout(this.showTooltipTimeout);\n let hideDelay = 50;\n\n if (this.interactive && this.hideDelay === hideDelay) {\n hideDelay = 150;\n }\n\n this.hideTooltipTimeout = setTimeout(() => {\n tooltipController.dismiss(this);\n }, hideDelay);\n this.destroyAutoUpdate();\n }\n\n private computeArrowPosition({\n placement,\n middlewareData,\n }: ComputePositionReturn): ArrowPosition {\n let { x, y } = middlewareData.arrow;\n\n if (placement.startsWith('top')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('right')) {\n return {\n left: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('bottom')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(-6),\n };\n }\n\n if (placement.startsWith('left')) {\n return {\n right: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n }\n\n private async computeTooltipPosition(target: Element) {\n const computeResponse = await computePosition(target, this.hostElement, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n shift(),\n offset(12),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n padding: 10,\n }),\n ],\n });\n return computeResponse;\n }\n\n private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n const arrowPosition = this.computeArrowPosition(computeResponse);\n Object.assign(this.arrowElement.style, arrowPosition);\n }\n\n private async applyTooltipPosition(target: Element) {\n if (!target) {\n return;\n }\n\n return new Promise<ComputePositionReturn>((resolve) => {\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n setTimeout(async () => {\n const computeResponse = await this.computeTooltipPosition(target);\n\n if (computeResponse.middlewareData.arrow) {\n this.applyTooltipArrowPosition(computeResponse);\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n\n resolve(computeResponse);\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n animationFrame: this.animationFrame,\n }\n );\n });\n }\n\n private clearHideTimeout() {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n }\n\n private async queryAnchorElements(): Promise<Array<HTMLElement> \| undefined> {\n if (typeof this.for === 'string') {\n return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n }\n\n if (this.for instanceof HTMLElement) {\n return Promise.resolve([this.for]);\n }\n\n if (this.for instanceof Promise) {\n const element = await this.for;\n return [element];\n }\n }\n\n private async registerTriggerListener() {\n const triggerElementList = await this.queryAnchorElements();\n\n if (this.disposeListener) {\n this.disposeListener();\n }\n\n if (!triggerElementList) {\n return;\n }\n\n triggerElementList.forEach((element) => {\n const onMouseEnter = () => {\n this.showTooltip(element);\n };\n\n const onMouseLeave = () => {\n this.hideTooltip();\n };\n\n const onFocusIn = () => {\n if (this.showTooltipTimeout !== undefined) {\n clearTimeout(this.showTooltipTimeout);\n }\n\n onMouseEnter();\n };\n\n const onFocusOut = () => {\n this.hideTooltip();\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n element.addEventListener('focusin', onFocusIn);\n element.addEventListener('focusout', onFocusOut);\n\n this.disposeListener = () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n element.removeEventListener('focusin', onFocusIn);\n element.removeEventListener('focusout', onFocusOut);\n };\n });\n }\n\n private registerTooltipListener() {\n const { hostElement } = this;\n hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n hostElement.addEventListener('focusout', () => this.hideTooltip());\n }\n\n @OnListener<Tooltip>('keydown', (self) => self.visible)\n async onKeydown(event: KeyboardEvent) {\n if (event.code === 'Escape') {\n this.hideTooltip();\n }\n }\n\n componentWillLoad() {\n this.registerTriggerListener();\n }\n\n componentDidLoad() {\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTooltipListener();\n }\n\n connectedCallback() {\n tooltipController.connected(this);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destroyAutoUpdate();\n tooltipController.disconnected(this);\n }\n\n isPresent(): boolean {\n return this.visible;\n }\n\n present(): void {\n this.visible = true;\n }\n\n dismiss(): void {\n this.visible = false;\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n role=\"tooltip\"\n >\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography variant=\"default-title\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={'tooltip-content'}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.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 /\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n top?: string;\n left?: string;\n right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/\n @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n \n @since 1.4.0\n /\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n /\n CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n /\n @Prop() for?: string \| HTMLElement \| Promise<HTMLElement>;\n\n /\n Title of the tooltip\n /\n @Prop() titleContent?: string;\n\n /\n Define if the user can access the tooltip via mouse.\n /\n @Prop() interactive = false;\n\n /\n Initial placement of the tooltip. If the placement don\"t have enough space,\n * the tooltip will placed on another location.\n \n @since 1.5.0\n /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'top';\n\n /* @internal /\n @Prop() showDelay = 0;\n\n /* @internal /\n @Prop() hideDelay = 50;\n\n /* @internal /\n @Prop() animationFrame = false;\n\n @State() visible = false;\n\n @Element() hostElement!: HTMLIxTooltipElement;\n\n private observer?: MutationObserver;\n private hideTooltipTimeout?: NodeJS.Timeout;\n private showTooltipTimeout?: NodeJS.Timeout;\n private disposeAutoUpdate?: () => void;\n private disposeListener?: () => void;\n\n private get arrowElement(): HTMLElement {\n return this.hostElement.shadowRoot.querySelector('.arrow');\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n /* @internal /\n @Method()\n async showTooltip(anchorElement: Element) {\n clearTimeout(this.hideTooltipTimeout);\n await this.applyTooltipPosition(anchorElement);\n\n this.showTooltipTimeout = setTimeout(() => {\n tooltipController.present(this);\n // Need to compute and apply tooltip position after initial render,\n // because arrow has no valid bounding rect before that\n this.applyTooltipPosition(anchorElement);\n }, this.showDelay);\n }\n\n /* @internal */\n @Method()\n async hideTooltip() {\n clearTimeout(this.showTooltipTimeout);\n let hideDelay = 50;\n\n if (this.interactive && this.hideDelay === hideDelay) {\n hideDelay = 150;\n }\n\n this.hideTooltipTimeout = setTimeout(() => {\n tooltipController.dismiss(this);\n }, hideDelay);\n this.destroyAutoUpdate();\n }\n\n private computeArrowPosition({\n placement,\n middlewareData,\n }: ComputePositionReturn): ArrowPosition {\n let { x, y } = middlewareData.arrow;\n\n if (placement.startsWith('top')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('right')) {\n return {\n left: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('bottom')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(-6),\n };\n }\n\n if (placement.startsWith('left')) {\n return {\n right: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n }\n\n private async computeTooltipPosition(target: Element) {\n return computePosition(target, this.hostElement, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n shift(),\n offset(12),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n padding: 10,\n }),\n ],\n });\n }\n\n private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n const arrowPosition = this.computeArrowPosition(computeResponse);\n Object.assign(this.arrowElement.style, arrowPosition);\n }\n\n private async applyTooltipPosition(target: Element) {\n if (!target) {\n return;\n }\n\n return new Promise<ComputePositionReturn>((resolve) => {\n this.destroyAutoUpdate();\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n setTimeout(async () => {\n const computeResponse = await this.computeTooltipPosition(target);\n\n if (computeResponse.middlewareData.arrow) {\n this.applyTooltipArrowPosition(computeResponse);\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n\n resolve(computeResponse);\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n animationFrame: this.animationFrame,\n }\n );\n });\n }\n\n private clearHideTimeout() {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n }\n\n private async queryAnchorElements(): Promise<Array<HTMLElement> \| undefined> {\n if (typeof this.for === 'string') {\n return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n }\n\n if (this.for instanceof HTMLElement) {\n return Promise.resolve([this.for]);\n }\n\n if (this.for instanceof Promise) {\n const element = await this.for;\n return [element];\n }\n }\n\n private async registerTriggerListener() {\n const triggerElementList = await this.queryAnchorElements();\n\n if (this.disposeListener) {\n this.disposeListener();\n }\n\n if (!triggerElementList) {\n return;\n }\n\n triggerElementList.forEach((element) => {\n const onMouseEnter = () => {\n this.showTooltip(element);\n };\n\n const onMouseLeave = () => {\n this.hideTooltip();\n };\n\n const onFocusIn = () => {\n if (this.showTooltipTimeout !== undefined) {\n clearTimeout(this.showTooltipTimeout);\n }\n\n onMouseEnter();\n };\n\n const onFocusOut = () => {\n this.hideTooltip();\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n element.addEventListener('focusin', onFocusIn);\n element.addEventListener('focusout', onFocusOut);\n\n this.disposeListener = () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n element.removeEventListener('focusin', onFocusIn);\n element.removeEventListener('focusout', onFocusOut);\n };\n });\n }\n\n private registerTooltipListener() {\n const { hostElement } = this;\n hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n hostElement.addEventListener('focusout', () => this.hideTooltip());\n }\n\n @OnListener<Tooltip>('keydown', (self) => self.visible)\n async onKeydown(event: KeyboardEvent) {\n if (event.code === 'Escape') {\n this.hideTooltip();\n }\n }\n\n componentWillLoad() {\n this.registerTriggerListener();\n }\n\n componentDidLoad() {\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTooltipListener();\n }\n\n connectedCallback() {\n tooltipController.connected(this);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destroyAutoUpdate();\n tooltipController.disconnected(this);\n }\n\n isPresent(): boolean {\n return this.visible;\n }\n\n present(): void {\n this.visible = true;\n }\n\n dismiss(): void {\n this.visible = false;\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n role=\"tooltip\"\n >\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography variant=\"default-title\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={'tooltip-content'}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/utils/application-layout/service.js CHANGED Viewed

@@ -67,13 +67,13 @@ class ApplicationLayoutService {
                 breakPointIndex = matchBreakpoints.length - 1;
             }
             const [breakpoint, _] = matchBreakpoints[breakPointIndex];
-            __classPrivateFieldGet(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+            requestAnimationFrame(() => __classPrivateFieldGet(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint));
             __classPrivateFieldSet(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
             return;
         }
         for (const [breakpoint, match] of matchBreakpoints.reverse()) {
             if (match) {
-                __classPrivateFieldGet(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+                requestAnimationFrame(() => __classPrivateFieldGet(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint));
                 __classPrivateFieldSet(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
                 break;
             }

package/dist/collection/components/utils/application-layout/service.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"service.js","sourceRoot":"","sources":["../../../../src/components/utils/application-layout/service.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,EAAc,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,wBAAwB;IAS5B;QARA,4BAA4B;QAC5B,yDAAsC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAC;QACzD,6DAA4B,IAAI,UAAU,EAAc,EAAC;QACzD,+CAA0B,IAAI,EAAC;QAE/B,uDAAsB,IAAI,EAAC;QAC3B,sBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QAGzD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACrE,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,uBAAA,IAAI,4CAAY,CAAC;IAC1B,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,uBAAA,IAAI,0DAA0B,CAAC;IACxC,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,uBAAA,IAAI,oDAAoB,CAAC;IAClC,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,uBAAA,IAAI,oDAAoB,EAAE,CAAC;YAC9B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,uBAAA,IAAI,sDAAsB,EAAE,CAAC;YAChC,OAAO;QACT,CAAC;QACD,MAAM,gBAAgB,GAA4B,EAAE,CAAC;QAErD,MAAM,WAAW,GAAG,uBAAA,IAAI,sDAAsB,CAAC;QAE/C,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;YACjC,MAAM,KAAK,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;YAC1C,gBAAgB,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC;YAC5D,IAAI,eAAe,GAAG,CAAC,CAAC;YACxB,IAAI,CAAC,uBAAA,IAAI,sDAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC/C,eAAe,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC;YAChD,CAAC;YAED,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAC1D,uBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;~~YAChD~~,uBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,KAAK,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,gBAAgB,CAAC,OAAO,EAAE,EAAE,CAAC;YAC7D,IAAI,KAAK,EAAE,CAAC;gBACV,uBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;~~gBAChD~~,uBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;gBAC9B,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAEM,0BAA0B;QAC/B,uBAAA,IAAI,gDAAuB,KAAK,MAAA,CAAC;IACnC,CAAC;IAEM,yBAAyB;QAC9B,uBAAA,IAAI,gDAAuB,IAAI,MAAA,CAAC;IAClC,CAAC;IAEM,aAAa,CAAC,UAAsB;QACzC,uBAAA,IAAI,wCAAe,UAAU,MAAA,CAAC;QAC9B,uBAAA,IAAI,0DAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClD,CAAC;IAEM,cAAc,CAAC,WAAyB;QAC7C,uBAAA,IAAI,kDAAyB,WAAW,MAAA,CAAC;QACzC,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;CACF;;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,IAAI,wBAAwB,EAAE,CAAC","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 { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { debounce } from '../debounce';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n // Keep order of breakpoints\n #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n #breakpointChangeListener = new TypedEvent<Breakpoint>();\n #breakpoint: Breakpoint = 'lg';\n\n #isDetectionEnabled = true;\n debouncedOnResize = debounce(this.onResize.bind(this), 50);\n\n constructor() {\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', this.debouncedOnResize.bind(this));\n this.debouncedOnResize();\n }\n }\n\n get breakpoint() {\n return this.#breakpoint;\n }\n\n get onChange() {\n return this.#breakpointChangeListener;\n }\n\n get isDetectionEnabled() {\n return this.#isDetectionEnabled;\n }\n\n private onResize() {\n if (!this.#isDetectionEnabled) {\n return;\n }\n if (!this.#supportedBreakpoints) {\n return;\n }\n const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n const breakpoints = this.#supportedBreakpoints;\n\n breakpoints.forEach((breakpoint) => {\n const match = matchBreakpoint(breakpoint);\n matchBreakpoints.push([breakpoint, match]);\n });\n\n if (matchBreakpoints.every(([_, match]) => match === false)) {\n let breakPointIndex = 0;\n if (!this.#supportedBreakpoints.includes('lg')) {\n breakPointIndex = matchBreakpoints.length - 1;\n }\n\n const [breakpoint, _] = matchBreakpoints[breakPointIndex];\n this.#breakpointChangeListener.emit(breakpoint);\n this.#breakpoint = breakpoint;\n return;\n }\n\n for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n if (match) {\n this.#breakpointChangeListener.emit(breakpoint);\n this.#breakpoint = breakpoint;\n break;\n }\n }\n }\n\n public disableBreakpointDetection() {\n this.#isDetectionEnabled = false;\n }\n\n public enableBreakpointDetection() {\n this.#isDetectionEnabled = true;\n }\n\n public setBreakpoint(breakpoint: Breakpoint) {\n this.#breakpoint = breakpoint;\n this.#breakpointChangeListener.emit(breakpoint);\n }\n\n public setBreakpoints(breakpoints: Breakpoint[]) {\n this.#supportedBreakpoints = breakpoints;\n this.onResize();\n }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\n"]}
1	+ {"version":3,"file":"service.js","sourceRoot":"","sources":["../../../../src/components/utils/application-layout/service.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 { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { debounce } from '../debounce';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n // Keep order of breakpoints\n #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n #breakpointChangeListener = new TypedEvent<Breakpoint>();\n #breakpoint: Breakpoint = 'lg';\n\n #isDetectionEnabled = true;\n debouncedOnResize = debounce(this.onResize.bind(this), 50);\n\n constructor() {\n if (typeof window !== 'undefined') {\n window.addEventListener('resize', this.debouncedOnResize.bind(this));\n this.debouncedOnResize();\n }\n }\n\n get breakpoint() {\n return this.#breakpoint;\n }\n\n get onChange() {\n return this.#breakpointChangeListener;\n }\n\n get isDetectionEnabled() {\n return this.#isDetectionEnabled;\n }\n\n private onResize() {\n if (!this.#isDetectionEnabled) {\n return;\n }\n if (!this.#supportedBreakpoints) {\n return;\n }\n const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n const breakpoints = this.#supportedBreakpoints;\n\n breakpoints.forEach((breakpoint) => {\n const match = matchBreakpoint(breakpoint);\n matchBreakpoints.push([breakpoint, match]);\n });\n\n if (matchBreakpoints.every(([_, match]) => match === false)) {\n let breakPointIndex = 0;\n if (!this.#supportedBreakpoints.includes('lg')) {\n breakPointIndex = matchBreakpoints.length - 1;\n }\n\n const [breakpoint, _] = matchBreakpoints[breakPointIndex];\n requestAnimationFrame(() =>\n this.#breakpointChangeListener.emit(breakpoint)\n );\n this.#breakpoint = breakpoint;\n return;\n }\n\n for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n if (match) {\n requestAnimationFrame(() =>\n this.#breakpointChangeListener.emit(breakpoint)\n );\n this.#breakpoint = breakpoint;\n break;\n }\n }\n }\n\n public disableBreakpointDetection() {\n this.#isDetectionEnabled = false;\n }\n\n public enableBreakpointDetection() {\n this.#isDetectionEnabled = true;\n }\n\n public setBreakpoint(breakpoint: Breakpoint) {\n this.#breakpoint = breakpoint;\n this.#breakpointChangeListener.emit(breakpoint);\n }\n\n public setBreakpoints(breakpoints: Breakpoint[]) {\n this.#supportedBreakpoints = breakpoints;\n this.onResize();\n }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\n"]}

package/dist/collection/tests/avatar/avatar.e2e.js CHANGED Viewed

@@ -27,5 +27,11 @@ regressionTest.describe('avatar', () => {
         await avatar.click();
         await expect(page).toHaveScreenshot({ fullPage: true });
     });
+    regressionTest('scrollbar', async ({ page }) => {
+        await page.goto('avatar/scrollbar');
+        await page.locator('ix-avatar').click();
+        await page.locator('ix-dropdown-item').last().hover();
+        await expect(page).toHaveScreenshot({ fullPage: true });
+    });
 });
 //# sourceMappingURL=avatar.e2e.js.map

package/dist/collection/tests/avatar/avatar.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.e2e.js","sourceRoot":"","sources":["../../../src/tests/avatar/avatar.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACrC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5C,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEpC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QAErB,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest.describe('avatar', () => {\n regressionTest('basic', async ({ page }) => {\n await page.goto('avatar/basic');\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('image', async ({ page }) => {\n await page.goto('avatar/image');\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('initials', async ({ page }) => {\n await page.goto('avatar/initials');\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('user-info', async ({ page }) => {\n await page.goto('avatar/user-info');\n\n const avatar = page.locator('ix-avatar');\n\n await avatar.click();\n\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n});\n"]}
1	+ {"version":3,"file":"avatar.e2e.js","sourceRoot":"","sources":["../../../src/tests/avatar/avatar.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACrC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5C,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnC,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEpC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAEzC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QAErB,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEpC,MAAM,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;QACxC,MAAM,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;QAEtD,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest.describe('avatar', () => {\n regressionTest('basic', async ({ page }) => {\n await page.goto('avatar/basic');\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('image', async ({ page }) => {\n await page.goto('avatar/image');\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('initials', async ({ page }) => {\n await page.goto('avatar/initials');\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('user-info', async ({ page }) => {\n await page.goto('avatar/user-info');\n\n const avatar = page.locator('ix-avatar');\n\n await avatar.click();\n\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n\n regressionTest('scrollbar', async ({ page }) => {\n await page.goto('avatar/scrollbar');\n\n await page.locator('ix-avatar').click();\n await page.locator('ix-dropdown-item').last().hover();\n\n await expect(page).toHaveScreenshot({ fullPage: true });\n });\n});\n"]}

package/dist/collection/tests/slider/slider.e2e.js CHANGED Viewed

@@ -38,6 +38,20 @@ test('should show reference value', async ({ page, mount }) => {
         trace
         trace-reference="75"
       ></ix-slider>
+      <ix-slider
+        style="width: 20rem"
+        trace
+        value="50"
+      ></ix-slider>
+      <ix-slider
+        style="width: 20rem"
+        trace
+        trace-reference="100"
+        value="50"
+      ></ix-slider>
     </div>
   `);
     const slider = page.locator('ix-slider').nth(0);

package/dist/collection/tests/slider/slider.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.e2e.js","sourceRoot":"","sources":["../../../src/tests/slider/slider.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,6BAA6B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,MAAM,KAAK,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BX~~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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('should show reference value', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n <ix-slider\n style=\"width: 20rem\"\n value=\"100\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n value=\"100\"\n step=\"25\"\n trace\n trace-reference=\"25\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n value=\"100\"\n step=\"25\"\n trace\n trace-reference=\"50\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n value=\"0\"\n trace\n trace-reference=\"75\"\n ></ix-slider>\n </div>\n `);\n\n const slider = page.locator('ix-slider').nth(0);\n await expect(slider).toHaveClass(/hydrated/);\n await expect(slider).toBeVisible();\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n\ntest('should render marker', async ({ page, mount }) => {\n await mount(`\n <ix-slider\n style=\"width: 20rem\"\n value=\"40\"\n max=\"250\"\n min=\"25\"\n ></ix-slider>\n `);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n\n await slider.evaluate(\n (elm: HTMLIxSliderElement) => (elm.marker = [10, 20, 70, 80, 100])\n );\n\n expect(await page.locator('ix-slider').screenshot()).toMatchSnapshot();\n});\n\ntest('should render with min-max changes', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n\n <ix-slider\n min=\"500\"\n max=\"1000\"\n value=\"777\"\n trace\n traceReference=\"498\"\n ></ix-slider>\n\n <ix-slider\n min=\"-100\"\n max=\"50\"\n value=\"25\"\n trace\n traceReference=\"-40\"\n ></ix-slider>\n\n </div>\n `);\n\n const slider1 = page.locator('ix-slider').nth(0);\n const slider2 = page.locator('ix-slider').nth(1);\n\n await expect(slider1).toHaveClass(/hydrated/);\n await expect(slider2).toHaveClass(/hydrated/);\n\n await slider1.evaluate((elm: HTMLIxSliderElement) => {\n elm.marker = [700, 800, 900];\n });\n\n await slider2.evaluate((elm: HTMLIxSliderElement) => {\n elm.marker = [-50, 25];\n });\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n\ntest('should render with label', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n\n <ix-slider\n min=\"500\"\n max=\"1000\"\n value=\"777\"\n trace\n traceReference=\"2000\"\n >\n <span slot=\"label-start\">500</span>\n <span slot=\"label-end\">1000</span>\n </ix-slider>\n\n <ix-slider>\n <ix-icon name=\"rocket\" slot=\"label-start\">500</ix-icon>\n <ix-icon name=\"rocket\" slot=\"label-end\">1000</ix-icon>\n </ix-slider>\n\n </div>\n `);\n\n const slider1 = page.locator('ix-slider').nth(0);\n const slider2 = page.locator('ix-slider').nth(1);\n\n await expect(slider1).toHaveClass(/hydrated/);\n await expect(slider2).toHaveClass(/hydrated/);\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n\ntest('should render with error', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n\n <ix-slider error=\"Some error message\">\n </ix-slider>\n\n <ix-slider error=\"Some error message\">\n <span slot=\"label-start\">500</span>\n <span slot=\"label-end\">1000</span>\n </ix-slider>\n\n </div>\n `);\n\n const slider1 = page.locator('ix-slider').nth(0);\n const slider2 = page.locator('ix-slider').nth(1);\n\n await expect(slider1).toHaveClass(/hydrated/);\n await expect(slider2).toHaveClass(/hydrated/);\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n"]}
1	+ {"version":3,"file":"slider.e2e.js","sourceRoot":"","sources":["../../../src/tests/slider/slider.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('should show reference value', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n <ix-slider\n style=\"width: 20rem\"\n value=\"100\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n value=\"100\"\n step=\"25\"\n trace\n trace-reference=\"25\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n value=\"100\"\n step=\"25\"\n trace\n trace-reference=\"50\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n value=\"0\"\n trace\n trace-reference=\"75\"\n ></ix-slider>\n\n <ix-slider\n style=\"width: 20rem\"\n trace\n value=\"50\"\n ></ix-slider>\n\n\n <ix-slider\n style=\"width: 20rem\"\n trace\n trace-reference=\"100\"\n value=\"50\"\n ></ix-slider>\n </div>\n `);\n\n const slider = page.locator('ix-slider').nth(0);\n await expect(slider).toHaveClass(/hydrated/);\n await expect(slider).toBeVisible();\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n\ntest('should render marker', async ({ page, mount }) => {\n await mount(`\n <ix-slider\n style=\"width: 20rem\"\n value=\"40\"\n max=\"250\"\n min=\"25\"\n ></ix-slider>\n `);\n\n const slider = page.locator('ix-slider');\n await expect(slider).toHaveClass(/hydrated/);\n\n await slider.evaluate(\n (elm: HTMLIxSliderElement) => (elm.marker = [10, 20, 70, 80, 100])\n );\n\n expect(await page.locator('ix-slider').screenshot()).toMatchSnapshot();\n});\n\ntest('should render with min-max changes', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n\n <ix-slider\n min=\"500\"\n max=\"1000\"\n value=\"777\"\n trace\n traceReference=\"498\"\n ></ix-slider>\n\n <ix-slider\n min=\"-100\"\n max=\"50\"\n value=\"25\"\n trace\n traceReference=\"-40\"\n ></ix-slider>\n\n </div>\n `);\n\n const slider1 = page.locator('ix-slider').nth(0);\n const slider2 = page.locator('ix-slider').nth(1);\n\n await expect(slider1).toHaveClass(/hydrated/);\n await expect(slider2).toHaveClass(/hydrated/);\n\n await slider1.evaluate((elm: HTMLIxSliderElement) => {\n elm.marker = [700, 800, 900];\n });\n\n await slider2.evaluate((elm: HTMLIxSliderElement) => {\n elm.marker = [-50, 25];\n });\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n\ntest('should render with label', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n\n <ix-slider\n min=\"500\"\n max=\"1000\"\n value=\"777\"\n trace\n traceReference=\"2000\"\n >\n <span slot=\"label-start\">500</span>\n <span slot=\"label-end\">1000</span>\n </ix-slider>\n\n <ix-slider>\n <ix-icon name=\"rocket\" slot=\"label-start\">500</ix-icon>\n <ix-icon name=\"rocket\" slot=\"label-end\">1000</ix-icon>\n </ix-slider>\n\n </div>\n `);\n\n const slider1 = page.locator('ix-slider').nth(0);\n const slider2 = page.locator('ix-slider').nth(1);\n\n await expect(slider1).toHaveClass(/hydrated/);\n await expect(slider2).toHaveClass(/hydrated/);\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n\ntest('should render with error', async ({ page, mount }) => {\n await mount(`\n <div id='slider-container'>\n\n <ix-slider error=\"Some error message\">\n </ix-slider>\n\n <ix-slider error=\"Some error message\">\n <span slot=\"label-start\">500</span>\n <span slot=\"label-end\">1000</span>\n </ix-slider>\n\n </div>\n `);\n\n const slider1 = page.locator('ix-slider').nth(0);\n const slider2 = page.locator('ix-slider').nth(1);\n\n await expect(slider1).toHaveClass(/hydrated/);\n await expect(slider2).toHaveClass(/hydrated/);\n\n expect(\n await page.locator('#slider-container').screenshot()\n ).toMatchSnapshot();\n});\n"]}

package/dist/collection/tests/tabs/tabs.e2e.js CHANGED Viewed

@@ -23,7 +23,7 @@ regressionTest.describe('tabs', () => {
     });
     regressionTest('overflow', async ({ page }) => {
         await page.goto('tabs/overflow');
-        const selectItem = await page.waitForSelector("[data-tab-id='7']");
+        const selectItem = await page.waitForSelector("[data-tab-id='5']");
         await selectItem.click();
         await page.waitForTimeout(500);
         expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();

package/dist/collection/tests/tabs/tabs.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.e2e.js","sourceRoot":"","sources":["../../../src/tests/tabs/tabs.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACnC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9B,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC3C,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5C,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAEjC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC;QACnE,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;QAEzB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAE/B,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest.describe('tabs', () => {\n regressionTest('basic', async ({ page }) => {\n await page.goto('tabs/basic');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('rounded', async ({ page }) => {\n await page.goto('tabs/rounded');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('stretched', async ({ page }) => {\n await page.goto('tabs/stretched');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('overflow', async ({ page }) => {\n await page.goto('tabs/overflow');\n\n const selectItem = await page.waitForSelector(\"[data-tab-id='7']\");\n await selectItem.click();\n\n await page.waitForTimeout(500);\n\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n});\n"]}
1	+ {"version":3,"file":"tabs.e2e.js","sourceRoot":"","sources":["../../../src/tests/tabs/tabs.e2e.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACnC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9B,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC3C,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC7C,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAClC,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5C,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAEjC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC;QACnE,MAAM,UAAU,CAAC,KAAK,EAAE,CAAC;QAEzB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAE/B,MAAM,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest.describe('tabs', () => {\n regressionTest('basic', async ({ page }) => {\n await page.goto('tabs/basic');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('rounded', async ({ page }) => {\n await page.goto('tabs/rounded');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('stretched', async ({ page }) => {\n await page.goto('tabs/stretched');\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n\n regressionTest('overflow', async ({ page }) => {\n await page.goto('tabs/overflow');\n\n const selectItem = await page.waitForSelector(\"[data-tab-id='5']\");\n await selectItem.click();\n\n await page.waitForTimeout(500);\n\n expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();\n });\n});\n"]}

package/dist/esm/ix-application-header.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, a as readTask, h, F as Fragment, H as Host, g as getElement } from './index-5429f20b.js';
 import { s as showAppSwitch } from './index-76b9c8de.js';
-import { a as applicationLayoutService } from './service-02cc9011.js';
+import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { a as useContextConsumer, A as ApplicationLayoutContext } from './context-c9078420.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import { h as hasSlottedElements } from './shadow-dom-60e9243d.js';
@@ -100,12 +100,12 @@ const ApplicationHeader = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '58565e3136e17a2d3cae46a4add8f2ba245b59bc', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-menu-expand-icon", { key: 'da63965f1ced1898c799a48212eb7a4afdf35ffd', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        return (h(Host, { key: 'daa15d8fe5e43669a666ff21fa8ec64bfbbf9f74', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-menu-expand-icon", { key: 'd933cf1ad8cac41c0633cff21029caf9bbcdfd2c', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (h("ix-icon-button", { key: 'fce7acda771398cd8f8f79dcb05254354e9524c8', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '20d47359153147df9636a2170e4987113871e701', class: "logo" }, h("slot", { key: '3889ece809965cd8c5a256e6551b1d4961774977', name: "logo" })), h("div", { key: '4e9c07f44beb7c476d61657bb303764c74ee174e', class: "name" }, this.name), h("div", { key: '099a3a4842da94cd54f789ee29380ab057957550', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            this.suppressResponsive === false && (h("ix-icon-button", { key: 'e229c4af7e86153052d5bd30306c833433ccff8f', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '2abd4e6983d4102448c8636952cec2acb869dd12', class: "logo" }, h("slot", { key: 'a927c764166256416a9d5d6a64310b54f6aa4ed5', name: "logo" })), h("ix-typography", { key: '6443801e36e42c2ae6c48a0efd7b0252d40c1a9e', format: "body-lg", class: "name" }, this.name), h("div", { key: '2f1f3681f79bc2a330d8d95deaecc65f855f1434', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'ba4c1d46798c9cb325b933905df7bb17a4aedfc6', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: '260364bf65695be4bf64e80c09d76c96fce192ed', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-application-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-application-header.entry.js","mappings":"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","names":[],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n @import 'mixins/shadow-dom/component';\n @import 'mixins/break-points';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n height: 2.75rem;\n min-height: 2.75rem;\n padding: 0 1rem 0 0.625rem;\n\n color: var(--theme-app-header--color);\n background-color: var(--theme-app-header--background);\n\n border-bottom: var(--theme-app-header--border-width) solid\n var(--theme-app-header--border-color);\n\n z-index: var(--theme-z-index-fixed);\n\n .app-switch {\n margin-right: 1rem;\n }\n\n .name {\n overflow: hidden;\n overflow-wrap: anywhere;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n max-width: 50%;\n margin-left: 1.5rem;\n margin-right: 2.5rem;\n color: var(--theme-app-header--color);\n }\n\n .logo {\n display: inline-flex;\n align-items: center;\n position: relative;\n height: 32px;\n overflow: hidden;\n line-height: 0rem;\n color: var(--theme-app-header-logo--color);\n margin-left: 0.375rem;\n }\n\n .content {\n display: flex;\n position: relative;\n flex-direction: row;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .dropdown {\n overflow: visible;\n }\n\n .dropdown-content {\n padding: 1rem;\n }\n\n .context-menu {\n display: none;\n }\n\n .context-menu.context-menu-visible {\n display: block;\n }\n\n @include media-breakpoint-match('sm') {\n .logo {\n display: none;\n }\n }\n\n ::slotted(ix-avatar) {\n margin-left: 1rem;\n }\n}\n\n:host(.breakpoint-sm) {\n padding-left: 0.625rem;\n\n .logo {\n margin-left: 0.5rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @slot logo - Location of the logo\n /\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n /\n Application name\n */\n @Prop() name: string;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() menuExpanded = false;\n @State() suppressResponsive = false;\n\n @State() hasSlottedElements = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n private callbackUpdateAppSwitchModal?: (\n config: AppSwitchConfiguration\n ) => void;\n\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n\n get contentBackground() {\n return this.hostElement.shadowRoot.querySelector('.dropdown-content');\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n if (ctx?.host === 'map-navigation') {\n this.suppressResponsive = true;\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = applicationLayoutService.breakpoint;\n this.applicationLayoutContext = ctx;\n\n this.tryUpdateAppSwitch();\n },\n true\n );\n\n this.menuDisposable = menuController.expandChange.on((show) => {\n this.menuExpanded = show;\n });\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n if (this.suppressResponsive) {\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = mode;\n });\n\n this.updateIsSlottedContent();\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n private isLogoSlotted() {\n const slotElement = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"logo\"]'\n ) as HTMLSlotElement;\n const nodes = slotElement.assignedNodes({\n flatten: true,\n });\n\n return nodes.length !== 0;\n }\n\n private async attachSiemensLogoIfLoaded() {\n await window.customElements.whenDefined('ix-siemens-logo');\n const logoElement = document.createElement('ix-siemens-logo');\n if (!this.isLogoSlotted()) {\n this.hostElement.shadowRoot\n .querySelector('.logo')\n .appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n menuController.toggle();\n }\n\n private resolveContextMenuButton() {\n return new Promise<HTMLElement>((resolve) =>\n readTask(() =>\n resolve(\n this.hostElement.shadowRoot.querySelector(\n '[data-context-menu]'\n ) as HTMLElement\n )\n )\n );\n }\n\n private tryUpdateAppSwitch() {\n if (!this.callbackUpdateAppSwitchModal) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private async showAppSwitch() {\n this.callbackUpdateAppSwitchModal = await showAppSwitch(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private updateIsSlottedContent() {\n const slotElement =\n this.hostElement.shadowRoot.querySelector('.content slot');\n\n this.hasSlottedElements = hasSlottedElements(slotElement);\n }\n\n private onContentBgClick(e: MouseEvent) {\n if (e.target === this.contentBackground) {\n e.preventDefault();\n }\n }\n\n render() {\n return (\n <Host\n class={{ [`breakpoint-${this.breakpoint}`]: true }}\n slot=\"application-header\"\n >\n {this.breakpoint === 'sm' && this.suppressResponsive === false && (\n <ix-menu-expand-icon\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-menu-expand-icon>\n )}\n {this.applicationLayoutContext?.appSwitchConfig &&\n this.breakpoint !== 'sm' &&\n this.suppressResponsive === false && (\n <ix-icon-button\n onClick={() => this.showAppSwitch()}\n icon=\"apps\"\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"name\">{this.name}</div>\n <div class=\"content\">\n {this.breakpoint === 'sm' ? (\n <Fragment>\n <ix-icon-button\n class={{\n ['context-menu']: true,\n ['context-menu-visible']: this.hasSlottedElements,\n }}\n data-context-menu\n icon=\"more-menu\"\n ghost\n ></ix-icon-button>\n <ix-dropdown\n data-overflow-dropdown\n class=\"dropdown\"\n discoverAllSubmenus\n trigger={this.resolveContextMenuButton()}\n >\n <div\n class=\"dropdown-content\"\n onClick={(e) => this.onContentBgClick(e)}\n >\n <slot\n onSlotchange={() => this.updateIsSlottedContent()}\n ></slot>\n </div>\n </ix-dropdown>\n </Fragment>\n ) : (\n <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n )}\n <slot name=\"ix-application-header-avatar\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-application-header.entry.js","mappings":"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","names":[],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n @import 'mixins/shadow-dom/component';\n @import 'mixins/break-points';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n height: 2.75rem;\n min-height: 2.75rem;\n padding: 0 1rem 0 0.625rem;\n\n color: var(--theme-app-header--color);\n background-color: var(--theme-app-header--background);\n\n border-bottom: var(--theme-app-header--border-width) solid\n var(--theme-app-header--border-color);\n\n z-index: var(--theme-z-index-fixed);\n\n .app-switch {\n margin-right: 1rem;\n }\n\n .name {\n overflow: hidden;\n overflow-wrap: anywhere;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n max-width: 50%;\n margin-left: 1.5rem;\n margin-right: 2.5rem;\n color: var(--theme-app-header--color);\n }\n\n .logo {\n display: inline-flex;\n align-items: center;\n position: relative;\n height: 32px;\n overflow: hidden;\n line-height: 0rem;\n color: var(--theme-app-header-logo--color);\n margin-left: 0.375rem;\n }\n\n .content {\n display: flex;\n position: relative;\n flex-direction: row;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .dropdown {\n overflow: visible;\n }\n\n .dropdown-content {\n padding: 1rem;\n }\n\n .context-menu {\n display: none;\n }\n\n .context-menu.context-menu-visible {\n display: block;\n }\n\n @include media-breakpoint-match('sm') {\n .logo {\n display: none;\n }\n }\n\n ::slotted(ix-avatar) {\n margin-left: 1rem;\n }\n}\n\n:host(.breakpoint-sm) {\n padding-left: 0.625rem;\n\n .logo {\n margin-left: 0.5rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @slot logo - Location of the logo\n /\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n /\n Application name\n */\n @Prop() name?: string;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() menuExpanded = false;\n @State() suppressResponsive = false;\n\n @State() hasSlottedElements = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n private callbackUpdateAppSwitchModal?: (\n config: AppSwitchConfiguration\n ) => void;\n\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n\n get contentBackground() {\n return this.hostElement.shadowRoot.querySelector('.dropdown-content');\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n if (ctx?.host === 'map-navigation') {\n this.suppressResponsive = true;\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = applicationLayoutService.breakpoint;\n this.applicationLayoutContext = ctx;\n\n this.tryUpdateAppSwitch();\n },\n true\n );\n\n this.menuDisposable = menuController.expandChange.on((show) => {\n this.menuExpanded = show;\n });\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n if (this.suppressResponsive) {\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = mode;\n });\n\n this.updateIsSlottedContent();\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n private isLogoSlotted() {\n const slotElement = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"logo\"]'\n ) as HTMLSlotElement;\n const nodes = slotElement.assignedNodes({\n flatten: true,\n });\n\n return nodes.length !== 0;\n }\n\n private async attachSiemensLogoIfLoaded() {\n await window.customElements.whenDefined('ix-siemens-logo');\n const logoElement = document.createElement('ix-siemens-logo');\n if (!this.isLogoSlotted()) {\n this.hostElement.shadowRoot\n .querySelector('.logo')\n .appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n menuController.toggle();\n }\n\n private resolveContextMenuButton() {\n return new Promise<HTMLElement>((resolve) =>\n readTask(() =>\n resolve(\n this.hostElement.shadowRoot.querySelector(\n '[data-context-menu]'\n ) as HTMLElement\n )\n )\n );\n }\n\n private tryUpdateAppSwitch() {\n if (!this.callbackUpdateAppSwitchModal) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private async showAppSwitch() {\n this.callbackUpdateAppSwitchModal = await showAppSwitch(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private updateIsSlottedContent() {\n const slotElement =\n this.hostElement.shadowRoot.querySelector('.content slot');\n\n this.hasSlottedElements = hasSlottedElements(slotElement);\n }\n\n private onContentBgClick(e: MouseEvent) {\n if (e.target === this.contentBackground) {\n e.preventDefault();\n }\n }\n\n render() {\n return (\n <Host\n class={{ [`breakpoint-${this.breakpoint}`]: true }}\n slot=\"application-header\"\n >\n {this.breakpoint === 'sm' && this.suppressResponsive === false && (\n <ix-menu-expand-icon\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-menu-expand-icon>\n )}\n {this.applicationLayoutContext?.appSwitchConfig &&\n this.breakpoint !== 'sm' &&\n this.suppressResponsive === false && (\n <ix-icon-button\n onClick={() => this.showAppSwitch()}\n icon=\"apps\"\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n <ix-typography format=\"body-lg\" class=\"name\">\n {this.name}\n </ix-typography>\n <div class=\"content\">\n {this.breakpoint === 'sm' ? (\n <Fragment>\n <ix-icon-button\n class={{\n ['context-menu']: true,\n ['context-menu-visible']: this.hasSlottedElements,\n }}\n data-context-menu\n icon=\"more-menu\"\n ghost\n ></ix-icon-button>\n <ix-dropdown\n data-overflow-dropdown\n class=\"dropdown\"\n discoverAllSubmenus\n trigger={this.resolveContextMenuButton()}\n >\n <div\n class=\"dropdown-content\"\n onClick={(e) => this.onContentBgClick(e)}\n >\n <slot\n onSlotchange={() => this.updateIsSlottedContent()}\n ></slot>\n </div>\n </ix-dropdown>\n </Fragment>\n ) : (\n <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n )}\n <slot name=\"ix-application-header-avatar\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-application.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-c9078420.js';
-import { a as applicationLayoutService } from './service-02cc9011.js';
+import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import { h as hasSlottedElements } from './shadow-dom-60e9243d.js';
 import { t as themeSwitcher } from './theme-switcher-b10fb4da.js';

package/dist/esm/ix-avatar_2.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { B as BaseButton } from './base-button-1b40b11d.js';
 import { c as closestElement, h as hasSlottedElements } from './shadow-dom-60e9243d.js';
 import { m as makeRef } from './make-ref-c80046bf.js';
-const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
 const IxAvatarStyle0 = avatarCss;
 function DefaultAvatar(props) {

package/dist/esm/ix-avatar_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-avatar.ix-menu-avatar-item.entry.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n private dropdownElement: HTMLIxDropdownElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\n }\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n ref={(ref: HTMLIxDropdownElement) => (this.dropdownElement = ref)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-avatar.ix-menu-avatar-item.entry.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n@import 'mixins/scrollbar';\n\n:host {\n @include scrollbar();\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n private dropdownElement: HTMLIxDropdownElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\n }\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n ref={(ref: HTMLIxDropdownElement) => (this.dropdownElement = ref)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-basic-navigation.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-c9078420.js';
-import { a as applicationLayoutService } from './service-02cc9011.js';
+import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import './typed-event-ad6484c5.js';
 import './breakpoints-d5c2f627.js';

package/dist/esm/ix-dropdown.entry.js CHANGED Viewed

@@ -340,6 +340,7 @@ const Dropdown = class {
             this.registerKeyListener();
         }
         else {
+            this.destroyAutoUpdate();
             (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
             this.itemObserver.disconnect();
             (_b = this.disposeKeyListener) === null || _b === void 0 ? void 0 : _b.call(this);
@@ -348,6 +349,12 @@ const Dropdown = class {
     changedTrigger(newTriggerValue) {
         this.registerListener(newTriggerValue);
     }
+    destroyAutoUpdate() {
+        if (this.autoUpdateCleanup) {
+            this.autoUpdateCleanup();
+            this.autoUpdateCleanup = null;
+        }
+    }
     isAnchorSubmenu() {
         var _a;
         if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {
@@ -384,10 +391,7 @@ const Dropdown = class {
         if (this.offset) {
             positionConfig.middleware.push(offset(this.offset));
         }
-        if (this.autoUpdateCleanup) {
-            this.autoUpdateCleanup();
-            this.autoUpdateCleanup = null;
-        }
+        this.destroyAutoUpdate();
         this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.dropdownRef, async () => {
             const computeResponse = await computePosition(this.anchorElement, this.dropdownRef, positionConfig);
             Object.assign(this.dropdownRef.style, {
@@ -454,7 +458,7 @@ const Dropdown = class {
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: '4f50f3c00bce087ae0c36c463f49c29adfe20f78', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: '1b165268d8ee5fa5f18bca276b0541da36bd3130', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -462,7 +466,7 @@ const Dropdown = class {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'be529e836ffcf39ed344416cb41d1cc45a0d9abb', style: { display: 'contents' } }, this.header && h("div", { key: 'af768a37fd188144b84836abc87b3fd06f0b4808', class: "dropdown-header" }, this.header), h("slot", { key: '2b4e76a579c4cadb18e3ce7baa1f83c942e2d28f' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'cdecec289e6c242a31b6160e93cb63b80bf5e535', style: { display: 'contents' } }, this.header && h("div", { key: '27b86587be67c8086480ecec8059f8d6ae8aa5b7', class: "dropdown-header" }, this.header), this.show && h("slot", { key: '32d6960a187e91492e24fa7ee0d9407df1209829' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {