npm - @siemens/ix - Versions diffs - 1.6.2 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.2 → 2.0.0-beta.0

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

Files changed (1110) hide show

package/dist/components/ix-validation-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-validation-tooltip.js","mappings":"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","names":[],"sources":["./src/components/dropdown/alignment.ts","./src/components/validation-tooltip/validation-tooltip.scss?tag=ix-validation-tooltip&encapsulation=scoped","./src/components/validation-tooltip/validation-tooltip.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 /\nimport { Placement } from './placement';\n\nexport function getAlignment(placement: Placement) {\n if (placement.includes('-end')) {\n return 'end';\n } else if (placement.includes('-start')) {\n return 'start';\n }\n\n return undefined;\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\n@import 'common-variables';\n@import 'fonts';\n\n:host {\n display: inline-block;\n position: relative;\n $padding: 5px;\n\n .validation-tooltip {\n background-color: var(--theme-tootlip--background);\n color: var(--theme-tooltip--color);\n padding: $padding 10px;\n border-radius: 4px;\n font-size: 13px;\n border: 1px solid var(--theme-tooltip--border-color);\n box-shadow: 0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1),\n 0 12px 18px 0 rgba(0, 0, 40, 0.1);\n\n #arrow,\n #arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n #arrow {\n visibility: hidden;\n }\n\n #arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n background-color: var(--theme-tootlip--background);\n }\n }\n\n .validation-tooltip > #arrow {\n bottom: -5px;\n\n &::before {\n border-right: 1px solid var(--theme-tooltip--border-color);\n border-bottom: 1px solid var(--theme-tooltip--border-color);\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 /\nimport {\n arrow,\n autoPlacement,\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { getAlignment } from '../dropdown/alignment';\nimport {\n BasePlacement,\n Placement,\n PlacementWithAlignment,\n} from '../dropdown/placement';\n\ntype Position = { x: number; y: number };\n\n/\n @slot tooltip-message - Custom tooltip message with html support\n /\n@Component({\n tag: 'ix-validation-tooltip',\n styleUrl: 'validation-tooltip.scss',\n scoped: true,\n})\nexport class ValidationTooltip {\n @Element() hostElement: HTMLIxValidationTooltipElement;\n\n /\n Message of the tooltip\n /\n @Prop() message: string;\n\n /\n Placement of the tooltip\n */\n @Prop() placement: Placement = 'top';\n\n @State() isInputValid = true;\n @State() tooltipPosition: Position;\n @State() arrowPosition: Position;\n\n private onSubmitBind = this.onSubmit.bind(this);\n private onInputFocusBind = this.onInputFocus.bind(this);\n private autoUpdateCleanup: () => void;\n private observer: MutationObserver;\n\n get arrow() {\n return this.hostElement.querySelector('#arrow') as HTMLElement;\n }\n\n get inputElement() {\n return this.hostElement.querySelector('input');\n }\n\n get formElement() {\n return this.inputElement.form;\n }\n\n get tooltipElement(): HTMLElement {\n return this.hostElement.querySelector('.validation-tooltip');\n }\n\n private destoryAutoUpdate() {\n this.tooltipElement.style.display = 'none';\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n private applyTooltipPosition() {\n this.tooltipElement.style.display = 'block';\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: 'fixed',\n middleware: [\n inline(),\n shift(),\n offset({\n mainAxis: 8,\n }),\n ],\n };\n\n if (this.placement.includes('auto')) {\n positionConfig.middleware.push(\n autoPlacement({\n alignment: getAlignment(this.placement),\n })\n );\n } else {\n positionConfig.placement = this.placement as\n \| BasePlacement\n \| PlacementWithAlignment;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.inputElement,\n this.tooltipElement,\n async () => {\n positionConfig.middleware = [\n ...positionConfig.middleware,\n arrow({\n element: this.arrow,\n }),\n ];\n const computeResponse = await computePosition(\n this.inputElement,\n this.tooltipElement,\n positionConfig\n );\n\n if (computeResponse.middlewareData.arrow) {\n const { x, y } = computeResponse.middlewareData.arrow;\n this.arrowPosition = {\n x,\n y,\n };\n Object.assign(this.arrow.style, {\n left: x != null ? `${x}px` : '',\n top: y != null ? `${y}px` : '',\n });\n }\n\n this.tooltipPosition = {\n x: computeResponse.x,\n y: computeResponse.y,\n };\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n componentDidLoad() {\n if (!this.inputElement) {\n throw Error(\n 'Validation tooltip is only working with an direct input child.'\n );\n }\n\n if (!this.formElement) {\n throw Error('Validation tooltip is only working with an form element.');\n }\n\n this.formElement.addEventListener('submit', this.onSubmitBind);\n this.inputElement.addEventListener('focus', this.onInputFocusBind);\n\n this.observer = new MutationObserver(() => {\n if (this.inputElement.classList.contains('is-invalid')) {\n this.isInputValid = false;\n this.validationChanged();\n }\n });\n\n this.observer.observe(this.inputElement, {\n childList: false,\n subtree: false,\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private onInputFocus() {\n this.isInputValid = true;\n }\n\n private onSubmit() {\n if (this.formElement.classList.contains('needs-validation')) {\n this.isInputValid = this.inputElement.validity.valid;\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destoryAutoUpdate();\n\n this.formElement.removeEventListener('submit', this.onSubmitBind);\n this.inputElement.removeEventListener('focus', this.onInputFocusBind);\n }\n\n @Watch('isInputValid')\n validationChanged() {\n if (!this.isInputValid) {\n this.applyTooltipPosition();\n } else {\n this.destoryAutoUpdate();\n }\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n <div\n role=\"tooltip\"\n style={{\n display: 'none',\n position: 'fixed',\n top: '0',\n left: '0',\n transform: `translate(${Math.round(\n this.tooltipPosition?.x \|\| 0\n )}px,${Math.round(this.tooltipPosition?.y \|\| 0)}px)`,\n }}\n class=\"validation-tooltip text-default\"\n >\n {this.message}\n <slot name=\"tooltip-message\"></slot>\n <div id=\"arrow\"></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-validation-tooltip.js","mappings":"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","names":[],"sources":["./src/components/validation-tooltip/validation-tooltip.scss?tag=ix-validation-tooltip&encapsulation=scoped","./src/components/validation-tooltip/validation-tooltip.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 'fonts';\n\n:host {\n display: inline-block;\n position: relative;\n $padding: 5px;\n\n .validation-tooltip {\n background-color: var(--theme-tootlip--background);\n color: var(--theme-tooltip--color);\n padding: $padding 10px;\n border-radius: 4px;\n font-size: 13px;\n border: 1px solid var(--theme-tooltip--border-color);\n box-shadow: 0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1),\n 0 12px 18px 0 rgba(0, 0, 40, 0.1);\n\n #arrow,\n #arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n #arrow {\n visibility: hidden;\n }\n\n #arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n background-color: var(--theme-tootlip--background);\n }\n }\n\n .validation-tooltip > #arrow {\n bottom: -5px;\n\n &::before {\n border-right: 1px solid var(--theme-tooltip--border-color);\n border-bottom: 1px solid var(--theme-tooltip--border-color);\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 /\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Side } from '../dropdown/placement';\n\ntype Position = { x: number; y: number };\n\n/\n @slot tooltip-message - Custom tooltip message with html support\n /\n@Component({\n tag: 'ix-validation-tooltip',\n styleUrl: 'validation-tooltip.scss',\n scoped: true,\n})\nexport class ValidationTooltip {\n @Element() hostElement: HTMLIxValidationTooltipElement;\n\n /\n Message of the tooltip\n /\n @Prop() message: string;\n\n /\n Placement of the tooltip\n /\n @Prop() placement: Side = 'top';\n\n /\n Suppress the automatic placement of the dropdown.\n \n @since 2.0.0\n */\n @Prop() suppressAutomaticPlacement = false;\n\n @State() isInputValid = true;\n @State() tooltipPosition: Position;\n @State() arrowPosition: Position;\n\n private onSubmitBind = this.onSubmit.bind(this);\n private onInputFocusBind = this.onInputFocus.bind(this);\n private autoUpdateCleanup: () => void;\n private observer: MutationObserver;\n\n get arrow() {\n return this.hostElement.querySelector('#arrow') as HTMLElement;\n }\n\n get inputElement() {\n return this.hostElement.querySelector('input');\n }\n\n get formElement() {\n return this.inputElement.form;\n }\n\n get tooltipElement(): HTMLElement {\n return this.hostElement.querySelector('.validation-tooltip');\n }\n\n private destoryAutoUpdate() {\n this.tooltipElement.style.display = 'none';\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n private applyTooltipPosition() {\n this.tooltipElement.style.display = 'block';\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: 'fixed',\n middleware: [\n inline(),\n shift(),\n offset({\n mainAxis: 8,\n }),\n ],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n positionConfig.placement = this.placement;\n\n this.autoUpdateCleanup = autoUpdate(\n this.inputElement,\n this.tooltipElement,\n async () => {\n positionConfig.middleware = [\n ...positionConfig.middleware,\n arrow({\n element: this.arrow,\n }),\n ];\n const computeResponse = await computePosition(\n this.inputElement,\n this.tooltipElement,\n positionConfig\n );\n\n if (computeResponse.middlewareData.arrow) {\n const { x, y } = computeResponse.middlewareData.arrow;\n this.arrowPosition = {\n x,\n y,\n };\n Object.assign(this.arrow.style, {\n left: x != null ? `${x}px` : '',\n top: y != null ? `${y}px` : '',\n });\n }\n\n this.tooltipPosition = {\n x: computeResponse.x,\n y: computeResponse.y,\n };\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n componentDidLoad() {\n if (!this.inputElement) {\n throw Error(\n 'Validation tooltip is only working with an direct input child.'\n );\n }\n\n if (!this.formElement) {\n throw Error('Validation tooltip is only working with an form element.');\n }\n\n this.formElement.addEventListener('submit', this.onSubmitBind);\n this.inputElement.addEventListener('focus', this.onInputFocusBind);\n\n this.observer = new MutationObserver(() => {\n if (this.inputElement.classList.contains('is-invalid')) {\n this.isInputValid = false;\n this.validationChanged();\n }\n });\n\n this.observer.observe(this.inputElement, {\n childList: false,\n subtree: false,\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private onInputFocus() {\n this.isInputValid = true;\n }\n\n private onSubmit() {\n if (this.formElement.classList.contains('needs-validation')) {\n this.isInputValid = this.inputElement.validity.valid;\n }\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destoryAutoUpdate();\n\n this.formElement.removeEventListener('submit', this.onSubmitBind);\n this.inputElement.removeEventListener('focus', this.onInputFocusBind);\n }\n\n @Watch('isInputValid')\n validationChanged() {\n if (!this.isInputValid) {\n this.applyTooltipPosition();\n } else {\n this.destoryAutoUpdate();\n }\n }\n\n render() {\n return (\n <Host>\n <slot></slot>\n <div\n role=\"tooltip\"\n style={{\n display: 'none',\n position: 'fixed',\n top: '0',\n left: '0',\n transform: `translate(${Math.round(\n this.tooltipPosition?.x \|\| 0\n )}px,${Math.round(this.tooltipPosition?.y \|\| 0)}px)`,\n }}\n class=\"validation-tooltip text-default\"\n >\n {this.message}\n <slot name=\"tooltip-message\"></slot>\n <div id=\"arrow\"></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-workflow-step.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.js';
-const workflowStepCss = ".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center;position:relative}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.single.sc-ix-workflow-step{width:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.single.sc-ix-workflow-step{width:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";
+const workflowStepCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:auto;padding:0 0.5rem}:host .step.vertical{flex-direction:row;padding:0}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:4rem}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin-top:0;margin-left:1rem;padding:0}:host .step:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
 const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.selectedChanged = createEvent(this, "selectedChanged", 7);
     this.vertical = false;
     this.disabled = false;
@@ -70,14 +71,14 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
     this.selectedHandler();
     this.customIconSlot = !!this.hostElement.querySelector('[slot="custom-icon"]');
   }
-  clickFunction() {
+  onStepClick() {
     if (!this.disabled && this.clickable) {
       this.selectedChanged.emit(this.hostElement);
     }
   }
   render() {
     const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : ('');
-    return (h(Host, null, h("div", { tabIndex: 0, onClick: () => this.select(), class: {
+    return (h(Host, { onClick: () => this.onStepClick() }, h("div", { tabIndex: 0, onClick: () => this.select(), class: {
         step: true,
         selected: this.selected,
         vertical: this.vertical,
@@ -95,7 +96,7 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
     "status": ["watchPropHandler"]
   }; }
   static get style() { return workflowStepCss; }
-}, [6, "ix-workflow-step", {
+}, [1, "ix-workflow-step", {
     "vertical": [4],
     "disabled": [4],
     "status": [1],
@@ -104,7 +105,7 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
     "position": [1],
     "iconName": [32],
     "iconColor": [32]
-  }, [[1, "click", "clickFunction"]]]);
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ix-workflow-step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-workflow-step.js","mappings":"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","names":[],"sources":["./src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=scoped","./src/components/workflow-step/workflow-step.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\n:host {\n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: var(--theme-workflow-step--background);\n border-radius: var(--theme-workflow--border-radius);\n width: auto;\n padding: 1.125rem 0 $small-space 0;\n height: 4rem;\n width: 12.75rem;\n\n .wrapper {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n position: relative;\n\n .line {\n width: 100%;\n height: 0.125rem;\n background-color: var(--theme-workflow-step-icon-default--color);\n\n &.first,\n &.last {\n width: 50%;\n margin: 0 0 0 auto;\n }\n\n &.last {\n margin: 0 auto 0 0;\n }\n\n &.single {\n width: 0;\n }\n\n &.selected {\n background-color: var(\n --theme-workflow-step-icon-default--color--selected\n );\n }\n\n &.done {\n background-color: var(--theme-workflow-step-icon-done--color);\n\n &.selected {\n background-color: var(\n --theme-workflow-step-icon-done--color--selected\n );\n }\n }\n\n &.warning {\n background-color: var(--theme-color-warning);\n }\n\n &.success {\n background-color: var(--theme-color-success);\n }\n\n &.error {\n background-color: var(--theme-color-alarm);\n }\n }\n\n .iconWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n\n .absolute {\n position: absolute;\n }\n }\n }\n\n .text {\n margin-top: $default-space;\n width: auto;\n padding: 0 $small-space;\n }\n\n &.vertical {\n flex-direction: row;\n padding: 0;\n\n .wrapper {\n width: auto;\n padding-left: 1.125rem;\n height: 4rem;\n\n .line {\n width: 0.125rem;\n height: 100%;\n\n &.first,\n &.last {\n height: 50%;\n margin: auto 0 0 0;\n }\n\n &.last {\n margin: 0 0 auto 0;\n }\n\n &.single {\n width: 0;\n }\n }\n }\n\n .text {\n margin-top: 0;\n margin-left: $default-space;\n padding: 0;\n }\n }\n\n &:hover {\n background-color: var(--theme-workflow-step--background--hover);\n }\n\n &:active {\n background-color: var(--theme-workflow-step--background--active);\n }\n\n &:focus-visible {\n outline: 1px solid var(--focus--border-color);\n border-radius: 0;\n }\n\n &.selected {\n background-color: var(--theme-workflow-step--background--selected);\n }\n\n &.disabled {\n background-color: var(--theme-workflow-step--background--disabled);\n\n .line {\n background-color: var(\n --theme-workflow-step-icon-default--color--disabled\n ) !important;\n }\n\n .text {\n color: var(--theme-workflow-step--color--disabled);\n }\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-workflow-step',\n styleUrl: 'workflow-step.scss',\n scoped: true,\n})\nexport class WorkflowStep {\n @Element() hostElement: HTMLIxWorkflowStepElement;\n\n /\n Select orientation\n /\n @Prop() vertical: boolean = false;\n\n /\n Set disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Set status\n /\n @Prop() status: 'open' \| 'success' \| 'done' \| 'warning' \| 'error' = 'open';\n\n /\n Activate navigation click\n /\n @Prop() clickable: boolean = false;\n\n /\n Set selected\n /\n @Prop({ mutable: true }) selected: boolean = false;\n\n /\n Activate navigation click\n \n @deprecated Will be changed to '@internal' in 2.0.0\n /\n @Prop() position: 'first' \| 'last' \| 'single' \| 'undefined' = 'undefined';\n\n @State() iconName: 'circle' \| 'circle-dot' \| 'success' \| 'warning' \| 'error' =\n 'circle';\n @State() iconColor: string = 'workflow-step-icon-default--color';\n\n /\n @internal\n */\n @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;\n\n private customIconSlot: boolean;\n\n private select() {\n if (!this.clickable) return;\n if (this.disabled) return;\n\n this.selected = true;\n this.selectedHandler();\n }\n\n @Watch('selected')\n selectedHandler() {\n const selectedStyle = this.selected ? '--selected' : '';\n\n if (this.status === 'open') {\n this.iconName = this.selected ? 'circle-dot' : 'circle';\n this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n }\n\n if (this.status === 'done' && !this.disabled) {\n this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n }\n }\n\n @Watch('status')\n watchPropHandler() {\n switch (this.status) {\n case 'open':\n this.iconName = 'circle';\n this.iconColor = 'workflow-step-icon-default--color';\n break;\n case 'success':\n this.iconName = 'success';\n this.iconColor = 'color-success';\n break;\n case 'done':\n this.iconName = 'success';\n this.iconColor = 'workflow-step-icon-done--color';\n break;\n case 'warning':\n this.iconName = 'warning';\n this.iconColor = 'color-warning';\n break;\n case 'error':\n this.iconName = 'error';\n this.iconColor = 'color-alarm';\n break;\n\n default:\n this.iconName = 'circle';\n break;\n }\n\n if (this.disabled) {\n this.iconColor = 'workflow-step-icon-success--color--disabled';\n }\n }\n\n componentDidLoad() {\n this.watchPropHandler();\n this.selectedHandler();\n\n this.customIconSlot = !!this.hostElement.querySelector(\n '[slot=\"custom-icon\"]'\n );\n }\n\n @Listen('click', { passive: true })\n clickFunction() {\n if (!this.disabled && this.clickable) {\n this.selectedChanged.emit(this.hostElement);\n }\n }\n\n render() {\n const icons = !this.customIconSlot ? (\n <Fragment>\n <ix-icon\n color=\"color-1\"\n name={\n this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n }\n class=\"absolute\"\n size=\"24\"\n ></ix-icon>\n <ix-icon\n color={this.iconColor}\n name={this.iconName}\n class=\"absolute\"\n size=\"24\"\n ></ix-icon>\n </Fragment>\n ) : (\n ''\n );\n\n return (\n <Host>\n <div\n tabIndex={0}\n onClick={() => this.select()}\n class={{\n step: true,\n selected: this.selected,\n vertical: this.vertical,\n disabled: this.disabled,\n }}\n >\n <div class=\"wrapper\">\n <div\n class={{\n line: true,\n selected: this.selected,\n [this.status]: true,\n [this.position]: true,\n }}\n ></div>\n <div class=\"iconWrapper\">\n {icons}\n <slot name=\"custom-icon\"></slot>\n </div>\n </div>\n <div class=\"text\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-workflow-step.js","mappings":"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","names":[],"sources":["./src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=shadow","./src/components/workflow-step/workflow-step.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .step {\n display: flex;\n flex-direction: column;\n align-items: center;\n background-color: var(--theme-workflow-step--background);\n border-radius: var(--theme-workflow--border-radius);\n width: auto;\n padding: 1.125rem 0 $small-space 0;\n height: 4rem;\n width: 12.75rem;\n\n .wrapper {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n position: relative;\n\n .line {\n width: 100%;\n height: 0.125rem;\n background-color: var(--theme-workflow-step-icon-default--color);\n\n &.first,\n &.last {\n width: 50%;\n margin: 0 0 0 auto;\n }\n\n &.last {\n margin: 0 auto 0 0;\n }\n\n &.single {\n width: 0;\n }\n\n &.selected {\n background-color: var(\n --theme-workflow-step-icon-default--color--selected\n );\n }\n\n &.done {\n background-color: var(--theme-workflow-step-icon-done--color);\n\n &.selected {\n background-color: var(\n --theme-workflow-step-icon-done--color--selected\n );\n }\n }\n\n &.warning {\n background-color: var(--theme-color-warning);\n }\n\n &.success {\n background-color: var(--theme-color-success);\n }\n\n &.error {\n background-color: var(--theme-color-alarm);\n }\n }\n\n .iconWrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n\n .absolute {\n position: absolute;\n }\n }\n }\n\n .text {\n margin-top: $default-space;\n width: auto;\n padding: 0 $small-space;\n }\n\n &.vertical {\n flex-direction: row;\n padding: 0;\n\n .wrapper {\n width: auto;\n padding-left: 1.125rem;\n height: 4rem;\n\n .line {\n width: 0.125rem;\n height: 100%;\n\n &.first,\n &.last {\n height: 50%;\n margin: auto 0 0 0;\n }\n\n &.last {\n margin: 0 0 auto 0;\n }\n\n &.single {\n width: 0;\n }\n }\n }\n\n .text {\n margin-top: 0;\n margin-left: $default-space;\n padding: 0;\n }\n }\n\n &:hover {\n background-color: var(--theme-workflow-step--background--hover);\n }\n\n &:active {\n background-color: var(--theme-workflow-step--background--active);\n }\n\n &:focus-visible {\n outline: 1px solid var(--focus--border-color);\n border-radius: 0;\n }\n\n &.selected {\n background-color: var(--theme-workflow-step--background--selected);\n }\n\n &.disabled {\n background-color: var(--theme-workflow-step--background--disabled);\n\n .line {\n background-color: var(\n --theme-workflow-step-icon-default--color--disabled\n ) !important;\n }\n\n .text {\n color: var(--theme-workflow-step--color--disabled);\n }\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-workflow-step',\n styleUrl: 'workflow-step.scss',\n shadow: true,\n})\nexport class WorkflowStep {\n @Element() hostElement: HTMLIxWorkflowStepElement;\n\n /\n Select orientation\n /\n @Prop() vertical: boolean = false;\n\n /\n Set disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Set status\n /\n @Prop() status: 'open' \| 'success' \| 'done' \| 'warning' \| 'error' = 'open';\n\n /\n Activate navigation click\n /\n @Prop() clickable: boolean = false;\n\n /\n Set selected\n /\n @Prop({ mutable: true }) selected: boolean = false;\n\n /\n Activate navigation click\n \n @deprecated Will be changed to '@internal' in 2.0.0\n /\n @Prop() position: 'first' \| 'last' \| 'single' \| 'undefined' = 'undefined';\n\n @State() iconName: 'circle' \| 'circle-dot' \| 'success' \| 'warning' \| 'error' =\n 'circle';\n @State() iconColor: string = 'workflow-step-icon-default--color';\n\n /\n @internal\n */\n @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;\n\n private customIconSlot: boolean;\n\n private select() {\n if (!this.clickable) return;\n if (this.disabled) return;\n\n this.selected = true;\n this.selectedHandler();\n }\n\n @Watch('selected')\n selectedHandler() {\n const selectedStyle = this.selected ? '--selected' : '';\n\n if (this.status === 'open') {\n this.iconName = this.selected ? 'circle-dot' : 'circle';\n this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n }\n\n if (this.status === 'done' && !this.disabled) {\n this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n }\n }\n\n @Watch('status')\n watchPropHandler() {\n switch (this.status) {\n case 'open':\n this.iconName = 'circle';\n this.iconColor = 'workflow-step-icon-default--color';\n break;\n case 'success':\n this.iconName = 'success';\n this.iconColor = 'color-success';\n break;\n case 'done':\n this.iconName = 'success';\n this.iconColor = 'workflow-step-icon-done--color';\n break;\n case 'warning':\n this.iconName = 'warning';\n this.iconColor = 'color-warning';\n break;\n case 'error':\n this.iconName = 'error';\n this.iconColor = 'color-alarm';\n break;\n\n default:\n this.iconName = 'circle';\n break;\n }\n\n if (this.disabled) {\n this.iconColor = 'workflow-step-icon-success--color--disabled';\n }\n }\n\n componentDidLoad() {\n this.watchPropHandler();\n this.selectedHandler();\n\n this.customIconSlot = !!this.hostElement.querySelector(\n '[slot=\"custom-icon\"]'\n );\n }\n\n onStepClick() {\n if (!this.disabled && this.clickable) {\n this.selectedChanged.emit(this.hostElement);\n }\n }\n\n render() {\n const icons = !this.customIconSlot ? (\n <Fragment>\n <ix-icon\n color=\"color-1\"\n name={\n this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n }\n class=\"absolute\"\n size=\"24\"\n ></ix-icon>\n <ix-icon\n color={this.iconColor}\n name={this.iconName}\n class=\"absolute\"\n size=\"24\"\n ></ix-icon>\n </Fragment>\n ) : (\n ''\n );\n\n return (\n <Host onClick={() => this.onStepClick()}>\n <div\n tabIndex={0}\n onClick={() => this.select()}\n class={{\n step: true,\n selected: this.selected,\n vertical: this.vertical,\n disabled: this.disabled,\n }}\n >\n <div class=\"wrapper\">\n <div\n class={{\n line: true,\n selected: this.selected,\n [this.status]: true,\n [this.position]: true,\n }}\n ></div>\n <div class=\"iconWrapper\">\n {icons}\n <slot name=\"custom-icon\"></slot>\n </div>\n </div>\n <div class=\"text\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ix-workflow-steps.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createMutationObserver } from './mutation-observer.js';
-const workflowStepsCss = ".sc-ix-workflow-steps-h .steps.sc-ix-workflow-steps{display:flex}.sc-ix-workflow-steps-h .steps.vertical.sc-ix-workflow-steps{display:block}";
+const workflowStepsCss = ":host *,:host *::after,:host *::before{box-sizing:border-box}:host .steps{display:flex}:host .steps.vertical{display:block}";
 const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.stepSelected = createEvent(this, "stepSelected", 7);
     this.vertical = false;
     this.linear = false;
@@ -16,9 +17,6 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
   getSteps() {
     return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
   }
-  get stepsContent() {
-    return this.hostElement.querySelector('.steps');
-  }
   updateSteps() {
     let steps = this.getSteps();
     steps.forEach((element, index) => {
@@ -40,16 +38,15 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
       }
     });
   }
-  componentDidLoad() {
-    this.stepsContent.addEventListener('selectedChanged', (event) => {
-      const steps = this.getSteps();
-      steps.forEach((element) => {
-        if (element !== event.target) {
-          element.selected = false;
-        }
-      });
+  onStepSelectionChanged(event) {
+    const steps = this.getSteps();
+    steps.forEach((element) => {
+      if (element !== event.target) {
+        element.selected = false;
+      }
     });
-    const slotDiv = this.hostElement.querySelector('.steps');
+  }
+  componentDidLoad() {
     this.observer = createMutationObserver((mutations) => {
       for (let mutation of mutations) {
         if (mutation.type === 'childList') {
@@ -57,7 +54,7 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
         }
       }
     });
-    this.observer.observe(slotDiv, { childList: true });
+    this.observer.observe(this.hostElement, { childList: true });
   }
   disconnectedCallback() {
     if (this.observer) {
@@ -72,12 +69,12 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
   }
   get hostElement() { return this; }
   static get style() { return workflowStepsCss; }
-}, [6, "ix-workflow-steps", {
+}, [1, "ix-workflow-steps", {
     "vertical": [4],
     "linear": [4],
     "clickable": [4],
     "selectedIndex": [2, "selected-index"]
-  }]);
+  }, [[0, "selectedChanged", "onStepSelectionChanged"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/ix-workflow-steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-workflow-steps.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,~~8IAA8I~~;;~~MCyB1J~~,aAAa~~;;;;;~~oBAMI,KAAK;kBAMP,KAAK;qBAKF,KAAK;yBAKF,CAAC;;EAOzB,QAAQ;IACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;GAC1E;EAED,~~IAAI,YAAY;IACd,OAAO,IAAI,CAAC,~~WAAW~~,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC~~;~~GACjD;EAED,WAAW;~~IACT,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MAC3B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;MACjC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MACnC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC;MAEhD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5B,OAAO;OACR;MAED,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC;OAC5B;WAAM,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACrC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;OAC3B;WAAM;QACL,OAAO,CAAC,QAAQ,GAAG,WAAW,CAAC;OAChC;KACF,CAAC,CAAC;GACJ;~~EAID~~,~~gBAAgB;IACd~~,~~IAAI,~~CAAC,~~YAAY,CAAC,gBAAgB,CAChC,iBAAiB,EACjB,CAAC,~~KAA6C;~~MAC5C~~,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;~~MAC9B~~,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO;~~QACpB~~,IAAI,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;~~UAC5B~~,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;~~SAC1B~~;~~OACF~~,CAAC,CAAC;~~KACJ,CACF,CAAC~~;~~IAEF~~,~~MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC~~;~~IAEzD~~,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,SAAS;MAC/C,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;QAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,~~OAAO~~,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;~~GACrD~~;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAClD,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=~~scoped~~","./src/components/workflow-steps/workflow-steps.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\n:host {\n .steps {\n display: flex;\n\n &.vertical {\n display: block;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-workflow-steps',\n styleUrl: 'workflow-steps.scss',\n ~~scoped~~: true,\n})\nexport class WorkflowSteps {\n @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n /\n Select orientation\n /\n @Prop() vertical: boolean = false;\n\n /\n Select linear mode\n * @deprecated Has no effect on component. Will get removed in 2.0.0\n /\n @Prop() linear: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() clickable: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() selectedIndex: number = 0;\n\n /\n On step selected event\n */\n @Event() stepSelected: EventEmitter<number>;\n\n private getSteps() {\n return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n }\n\n ~~get stepsContent() {\n return this.hostElement.querySelector('.steps');\n }\n\n~~ updateSteps() {\n let steps = this.getSteps();\n steps.forEach((element, index) => {\n element.vertical = this.vertical;\n element.clickable = this.clickable;\n element.selected = this.selectedIndex === index;\n\n if (steps.length === 1) {\n element.position = 'single';\n return;\n }\n\n if (index === 0) {\n element.position = 'first';\n } else if (index === steps.length - 1) {\n element.position = 'last';\n } else {\n element.position = 'undefined';\n }\n });\n }\n\n private observer: MutationObserver;\n\n ~~componentDidLoad~~(~~) {\n this.stepsContent.addEventListener(\n~~ 'selectedChanged',\n (event: CustomEvent<HTMLIxWorkflowStepElement>) => {\n const steps = this.getSteps();\n steps.forEach((element) => {\n if (element !== event.target) {\n element.selected = false;\n }\n });\n }\n ~~);\n~~\n ~~const slotDiv = this.hostElement.querySelector~~(~~'.steps'~~)~~;\n~~\n this.observer = createMutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.updateSteps();\n }\n }\n });\n\n this.observer.observe(~~slotDiv~~, { childList: true });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n componentDidRender() {\n this.updateSteps();\n }\n\n render() {\n return (\n <Host>\n <div class={{ steps: true, vertical: this.vertical }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-workflow-steps.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,6HAA6H;;MC0BzI,aAAa;;;;;;oBAMI,KAAK;kBAMP,KAAK;qBAKF,KAAK;yBAKF,CAAC;;EAOzB,QAAQ;IACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;GAC1E;EAED,WAAW;IACT,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MAC3B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;MACjC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;MACnC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC;MAEhD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5B,OAAO;OACR;MAED,IAAI,KAAK,KAAK,CAAC,EAAE;QACf,OAAO,CAAC,QAAQ,GAAG,OAAO,CAAC;OAC5B;WAAM,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QACrC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;OAC3B;WAAM;QACL,OAAO,CAAC,QAAQ,GAAG,WAAW,CAAC;OAChC;KACF,CAAC,CAAC;GACJ;EAKD,sBAAsB,CAAC,KAA6C;IAClE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO;MACpB,IAAI,OAAO,KAAK,KAAK,CAAC,MAAM,EAAE;QAC5B,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;OAC1B;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,SAAS;MAC/C,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;QAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;GAC9D;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAClD,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","./src/components/workflow-steps/workflow-steps.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n .steps {\n display: flex;\n\n &.vertical {\n display: block;\n }\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-workflow-steps',\n styleUrl: 'workflow-steps.scss',\n shadow: true,\n})\nexport class WorkflowSteps {\n @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n /\n Select orientation\n /\n @Prop() vertical: boolean = false;\n\n /\n Select linear mode\n * @deprecated Has no effect on component. Will get removed in 2.0.0\n /\n @Prop() linear: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() clickable: boolean = false;\n\n /\n Activate navigation click\n /\n @Prop() selectedIndex: number = 0;\n\n /\n On step selected event\n */\n @Event() stepSelected: EventEmitter<number>;\n\n private getSteps() {\n return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n }\n\n updateSteps() {\n let steps = this.getSteps();\n steps.forEach((element, index) => {\n element.vertical = this.vertical;\n element.clickable = this.clickable;\n element.selected = this.selectedIndex === index;\n\n if (steps.length === 1) {\n element.position = 'single';\n return;\n }\n\n if (index === 0) {\n element.position = 'first';\n } else if (index === steps.length - 1) {\n element.position = 'last';\n } else {\n element.position = 'undefined';\n }\n });\n }\n\n private observer: MutationObserver;\n\n @Listen('selectedChanged')\n onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n const steps = this.getSteps();\n steps.forEach((element) => {\n if (element !== event.target) {\n element.selected = false;\n }\n });\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.updateSteps();\n }\n }\n });\n\n this.observer.observe(this.hostElement, { childList: true });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n componentDidRender() {\n this.updateSteps();\n }\n\n render() {\n return (\n <Host>\n <div class={{ steps: true, vertical: this.vertical }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/map-navigation-overlay.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as anime } from './anime.es.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './spinner.js';
 const mapNavigationOverlayCss = ".text-xs.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-map-navigation-overlay{color:var(--theme-color-primary)}.sc-ix-map-navigation-overlay-h{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}.sc-ix-map-navigation-overlay-h .overlay-header.sc-ix-map-navigation-overlay{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay{display:flex;align-items:center;min-width:0}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay ix-icon.sc-ix-map-navigation-overlay{-webkit-margin-start:1rem;margin-inline-start:1rem;color:var(--theme-overlay-header--color)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay .overlay-header-title.sc-ix-map-navigation-overlay{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);-webkit-margin-start:1rem;margin-inline-start:1rem}.sc-ix-map-navigation-overlay-h .color-indicator.sc-ix-map-navigation-overlay{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}.sc-ix-map-navigation-overlay-h .overlay-close.sc-ix-map-navigation-overlay{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:1rem;margin-inline-end:1rem}";
@@ -63,7 +64,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-map-navigation-overlay", "ix-icon", "ix-icon-button"];
+  const components = ["ix-map-navigation-overlay", "ix-icon", "ix-icon-button", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-map-navigation-overlay":
       if (!customElements.get(tagName)) {
@@ -72,10 +73,15 @@ function defineCustomElement() {
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/map-navigation-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"map-navigation-overlay.js","mappings":"~~;;;;;~~AAAA,MAAM,uBAAuB,GAAG,qzJAAqzJ;;MCyBx0J,oBAAoB;;;;;;;;;EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE;QACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OAC7C;KACF,CAAC,CAAC;GACJ;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC1C;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;OACjE,EACD,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC1B,eAAe,IAAI,CAAC,KAAK,GAAG;YAC5B,EAAE;OACP,GACI,EACP,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAEN,eAAa,CACR,EACP;GACH;;;;;;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=scoped","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'common-variables';\n@import 'fonts';\n@import 'mixins/text-truncation';\n\n:host {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n scoped: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /\n Title of overlay\n /\n @Prop() name: string;\n\n /\n Icon of overlay\n /\n @Prop() icon: string;\n\n /\n Color of icon\n /\n @Prop() color: string;\n\n /\n Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' \|\| this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon=\"close\"\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"map-navigation-overlay.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,qzJAAqzJ;;MCyBx0J,oBAAoB;;;;;;;;;EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE;QACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OAC7C;KACF,CAAC,CAAC;GACJ;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC1C;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;OACjE,EACD,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC1B,eAAe,IAAI,CAAC,KAAK,GAAG;YAC5B,EAAE;OACP,GACI,EACP,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAEN,eAAa,CACR,EACP;GACH;;;;;;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=scoped","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'common-variables';\n@import 'fonts';\n@import 'mixins/text-truncation';\n\n:host {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n scoped: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /\n Title of overlay\n /\n @Prop() name: string;\n\n /\n Icon of overlay\n /\n @Prop() icon: string;\n\n /\n Color of icon\n /\n @Prop() color: string;\n\n /\n Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' \|\| this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon=\"close\"\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/menu-avatar-item.js CHANGED Viewed

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './dropdown-item.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const menuAvatarItemCss = ".sc-ix-menu-avatar-item-h{display:block}";
+const menuAvatarItemCss = ":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}";
 const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class MenuAvatarItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.itemClick = createEvent(this, "itemClick", 7);
     this.icon = undefined;
     this.label = undefined;
@@ -17,7 +18,7 @@ const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class MenuAvatarItem ext
   }
   get hostElement() { return this; }
   static get style() { return menuAvatarItemCss; }
-}, [2, "ix-menu-avatar-item", {
+}, [1, "ix-menu-avatar-item", {
     "icon": [1],
     "label": [1]
   }]);

package/dist/components/menu-avatar-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-avatar-item.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,~~0CAA0C~~;;~~MCuBvD~~,cAAc~~;;;;;;;;~~EAkBzB,MAAM;IACJ,QACE,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-avatar-item/menu-avatar-item.~~css~~?tag=ix-menu-avatar-item&encapsulation=~~scoped~~","./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:host {\n display: block;\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 Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.~~css~~',\n ~~scoped~~: true,\n})\nexport class MenuAvatarItem {\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 render() {\n return (\n <ix-dropdown-item\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":"menu-avatar-item.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,mFAAmF;;MCuBhG,cAAc;;;;;;;;;EAkBzB,MAAM;IACJ,QACE,wBACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./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@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\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 Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem {\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 render() {\n return (\n <ix-dropdown-item\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/components/menu-item.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as createMutationObserver } from './mutation-observer.js';
 import { d as defineCustomElement$1 } from './icon.js';
-const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:3rem;min-height:3rem;max-height:3rem}:host .tab{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:none}:host:focus-visible{outline:none}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.glyph{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.home-tab),:host([slot=home]){margin-bottom:1.5rem}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}";
+const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:none}:host:focus-visible{outline:none}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.glyph{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}";
 const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLElement {
   constructor() {
@@ -12,6 +12,7 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
     this.home = false;
     this.bottom = false;
     this.tabIcon = 'document';
+    this.icon = undefined;
     this.notifications = undefined;
     this.active = undefined;
     this.disabled = undefined;
@@ -36,12 +37,24 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
     }
   }
   render() {
-    return (h(Host, { class: {
+    var _a;
+    let extendedAttributes = {};
+    if (this.home) {
+      extendedAttributes = {
+        slot: 'home',
+      };
+    }
+    if (this.bottom) {
+      extendedAttributes = {
+        slot: 'bottom',
+      };
+    }
+    return (h(Host, Object.assign({ class: {
         disabled: this.disabled,
         'home-tab': this.home,
         'bottom-tab': this.bottom,
         active: this.active,
-      } }, h("li", { class: "tab", title: this.title }, h("ix-icon", { name: this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
+      } }, extendedAttributes), h("li", { class: "tab", title: this.title }, h("ix-icon", { name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
   }
   get hostElement() { return this; }
   static get style() { return menuItemCss; }
@@ -49,6 +62,7 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
     "home": [4],
     "bottom": [4],
     "tabIcon": [1, "tab-icon"],
+    "icon": [1],
     "notifications": [2],
     "active": [4],
     "disabled": [4],

package/dist/components/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"menu-item.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,~~43FAA43F~~;;~~MCiBn4F~~,QAAQ;;;;;gBAIJ,KAAK;~~kBASH~~,KAAK;~~mBAKJ~~,UAAU~~;;;;;;EAuB5B~~,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;MACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;KACzC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,~~IACH~~,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,~~IAED~~,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAC/B,eAAS,IAAI,EAAE,IAAI,CAAC,OAAO,GAAY,~~EACvC~~,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,EACN,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACJ,CACA,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","./src/components/menu-item/menu-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/hover';\n@import 'mixins/text-truncation';\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: ~~3rem~~;\n min-height: ~~3rem~~;\n max-height: ~~3rem~~;\n\n .tab {\n display: flex;\n position: relative;\n align-items: center;\n height: ~~3rem~~;\n z-index: 500;\n padding-left: 0.875rem;\n\n @include ghost-hover-pressed;\n }\n\n i.glyph {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n }\n\n .tab:focus-visible {\n outline: none;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n .tab:not(:last-child) {\n margin-bottom: $small-space;\n }\n\n .notification {\n display: inline-flex;\n position: absolute;\n top: 0.25rem;\n left: 1.75rem;\n\n .pill {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 0.5rem;\n min-width: 1rem;\n position: relative;\n border-radius: 6.25rem;\n background-color: var(--theme-color-primary);\n border-radius: 6.25rem;\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n font-family: Siemens Sans, Arial, sans-serif;\n color: var(--theme-color-primary--contrast);\n padding: $tiny-space;\n }\n }\n\n .tab-text {\n @include ellipsis;\n color: var(--theme-nav-item-primary--color);\n margin: 0 1.25rem;\n user-select: none;\n }\n}\n\n:host(.active),\n:host(.selected) {\n .tab {\n background-color: var(--theme-nav-item-primary--background--selected);\n }\n\n .tab::before {\n content: '';\n background-color: var(--theme-nav-item-primary--border-color--selected);\n height: ~~3rem~~;\n width: 0.25rem;\n left: 0;\n position: absolute;\n }\n\n .tab > .glyph {\n color: var(--theme-nav-item-primary-icon--color--selected);\n }\n}\n\n:host(.disabled) {\n color: var(--theme-color-weak-text);\n pointer-events: none;\n cursor: default;\n\n .tab > .glyph {\n color: var(--theme-color-weak-text);\n }\n\n .tab-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n:host(.~~home-tab),\n:host([slot='home']) {\n margin-~~bottom~~: 1.5rem;\n}\n\n:host(.bottom~~-tab),\n:host([slot='bottom']) {\n $bottom-height: 2.25rem;\n\n min-height: $bottom-height;\n height: $bottom-height;\n max-height: $bottom-height;\n\n .tab {\n height: $bottom-height;\n }\n\n .tab::before {\n height: $bottom-height;\n background-color: transparent;\n }\n\n &.active,\n &.selected {\n &:hover {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n\n &:active {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n .tab {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n \n @deprecated Will be removed in 2.0.0~~. Replaced by slot based implementation~~\n /\n @Prop() ~~bottom~~ = ~~false~~;\n\n /\n Icon name from @siemens/ix-icons\n /\n @Prop() ~~tabIcon~~ ~~= 'document'~~;\n\n /\n Show notification count on tab\n /\n @Prop() notifications: number;\n\n /\n State to display active\n /\n @Prop() active: boolean;\n\n /\n Disable tab and remove event handlers\n */\n @Prop() disabled: boolean;\n\n @Element() hostElement: HTMLIxMenuItemElement;\n\n @State() title: string;\n\n private observer: MutationObserver;\n\n componentWillRender() {\n this.title = this.hostElement.innerText;\n }\n\n connectedCallback() {\n this.observer = createMutationObserver(() => {\n this.title = this.hostElement.innerText;\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n }}\n >\n <li class=\"tab\" title={this.title}>\n <ix-icon name={this.tabIcon}></ix-icon>\n <div class=\"notification\">\n {this.notifications ? (\n <div class=\"pill\">{this.notifications}</div>\n ) : null}\n </div>\n <span class=\"tab-text text-default\">\n <slot></slot>\n </span>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"menu-item.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,09FAA09F;;MCoBj+F,QAAQ;;;;;gBAIJ,KAAK;kBAOH,KAAK;mBAOJ,UAAU;;;;;;;EA4B5B,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC;MACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;KACzC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;;IACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,kBAAkB,GAAG;QACnB,IAAI,EAAE,MAAM;OACb,CAAC;KACH;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,kBAAkB,GAAG;QACnB,IAAI,EAAE,QAAQ;OACf,CAAC;KACH;IACD,QACE,EAAC,IAAI,kBACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,IACG,kBAAkB,GAEtB,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAC/B,eAAS,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GAAY,EACpD,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,IAC1C,IAAI,CACJ,EACN,YAAM,KAAK,EAAC,uBAAuB,IACjC,eAAa,CACR,CACJ,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","./src/components/menu-item/menu-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/hover';\n@import 'mixins/text-truncation';\n$menuItemHeight: 3rem;\n\n:host {\n position: relative;\n display: block;\n cursor: pointer;\n\n height: var(--ix-menu-item-height, $menuItemHeight);\n min-height: var(--ix-menu-item-height, $menuItemHeight);\n max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n .tab {\n display: flex;\n position: relative;\n align-items: center;\n height: var(--ix-menu-item-height, $menuItemHeight);\n z-index: 500;\n padding-left: 0.875rem;\n\n @include ghost-hover-pressed;\n }\n\n i.glyph {\n color: var(--theme-nav-item-primary-icon--color);\n position: relative;\n }\n\n .tab:focus-visible {\n outline: none;\n }\n\n &:focus-visible {\n outline: none;\n }\n\n .tab:not(:last-child) {\n margin-bottom: $small-space;\n }\n\n .notification {\n display: inline-flex;\n position: absolute;\n top: 0.25rem;\n left: 1.75rem;\n\n .pill {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 0.5rem;\n min-width: 1rem;\n position: relative;\n border-radius: 6.25rem;\n background-color: var(--theme-color-primary);\n border-radius: 6.25rem;\n font-size: 0.75rem;\n font-weight: bold;\n line-height: 1;\n font-family: Siemens Sans, Arial, sans-serif;\n color: var(--theme-color-primary--contrast);\n padding: $tiny-space;\n }\n }\n\n .tab-text {\n @include ellipsis;\n color: var(--theme-nav-item-primary--color);\n margin: 0 1.25rem;\n user-select: none;\n width: 100%;\n }\n}\n\n:host(.active),\n:host(.selected) {\n .tab {\n background-color: var(--theme-nav-item-primary--background--selected);\n }\n\n .tab::before {\n content: '';\n background-color: var(--theme-nav-item-primary--border-color--selected);\n height: var(--ix-menu-item-height, $menuItemHeight);\n width: 0.25rem;\n left: 0;\n position: absolute;\n }\n\n .tab > .glyph {\n color: var(--theme-nav-item-primary-icon--color--selected);\n }\n}\n\n:host(.disabled) {\n color: var(--theme-color-weak-text);\n pointer-events: none;\n cursor: default;\n\n .tab > .glyph {\n color: var(--theme-color-weak-text);\n }\n\n .tab-text {\n color: var(--theme-color-weak-text);\n }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n $bottom-height: 2.25rem;\n\n min-height: $bottom-height;\n height: $bottom-height;\n max-height: $bottom-height;\n\n .tab {\n height: $bottom-height;\n }\n\n .tab::before {\n height: $bottom-height;\n background-color: transparent;\n }\n\n &.active,\n &.selected {\n &:hover {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n\n &:active {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n .tab {\n background-color: var(--theme-nav-item-secondary--background--selected);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/\n @slot menu-item-label Custom label\n /\n@Component({\n tag: 'ix-menu-item',\n styleUrl: 'menu-item.scss',\n shadow: true,\n})\nexport class MenuItem {\n /\n Move the Tab to a top position.\n /\n @Prop() home = false;\n\n /\n Caution: this is no longer working. Please use slot=\"bottom\" instead.\n \n Place tab on bottom\n /\n @Prop() bottom = false;\n\n /\n Icon name from @siemens/ix-icons\n \n @deprecated Use `icon` property. Will be removed in 3.0.0\n /\n @Prop() tabIcon = 'document';\n\n /\n Icon name from @siemens/ix-icons\n /\n @Prop() icon: string;\n\n /\n Show notification count on tab\n /\n @Prop() notifications: number;\n\n /\n State to display active\n /\n @Prop() active: boolean;\n\n /\n Disable tab and remove event handlers\n */\n @Prop() disabled: boolean;\n\n @Element() hostElement: HTMLIxMenuItemElement;\n\n @State() title: string;\n\n private observer: MutationObserver;\n\n componentWillRender() {\n this.title = this.hostElement.innerText;\n }\n\n connectedCallback() {\n this.observer = createMutationObserver(() => {\n this.title = this.hostElement.innerText;\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n characterData: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n let extendedAttributes = {};\n if (this.home) {\n extendedAttributes = {\n slot: 'home',\n };\n }\n\n if (this.bottom) {\n extendedAttributes = {\n slot: 'bottom',\n };\n }\n return (\n <Host\n class={{\n disabled: this.disabled,\n 'home-tab': this.home,\n 'bottom-tab': this.bottom,\n active: this.active,\n }}\n {...extendedAttributes}\n >\n <li class=\"tab\" title={this.title}>\n <ix-icon name={this.icon ?? this.tabIcon}></ix-icon>\n <div class=\"notification\">\n {this.notifications ? (\n <div class=\"pill\">{this.notifications}</div>\n ) : null}\n </div>\n <span class=\"tab-text text-default\">\n <slot></slot>\n </span>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/menu-service.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { T as TypedEvent } from './typed-event.js';
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MenuService_isPinned;
+class MenuService {
+  constructor() {
+    this.menuElement = null;
+    this.menuExpandChange = new TypedEvent();
+    _MenuService_isPinned.set(this, false);
+  }
+  register(menuElement) {
+    if (this.menuElement) {
+      console.warn('Menu already defined');
+      return;
+    }
+    this.menuElement = menuElement;
+    this.menuElement.addEventListener('expandChange', (event) => {
+      this.menuExpandChange.emit(event.detail);
+    });
+  }
+  setIsPinned(pinned) {
+    __classPrivateFieldSet(this, _MenuService_isPinned, pinned, "f");
+  }
+  async open() {
+    if (this.menuElement) {
+      this.menuElement.toggleMenu(true);
+      return true;
+    }
+    return false;
+  }
+  async close() {
+    if (this.menuElement) {
+      this.menuElement.toggleMenu(false);
+      return true;
+    }
+    return false;
+  }
+  async toggle() {
+    if (this.menuElement) {
+      this.menuElement.toggleMenu();
+      return true;
+    }
+    return false;
+  }
+  get nativeElement() {
+    return this.menuElement;
+  }
+  get expandChange() {
+    return this.menuExpandChange;
+  }
+  get isPinned() {
+    return __classPrivateFieldGet(this, _MenuService_isPinned, "f");
+  }
+}
+_MenuService_isPinned = new WeakMap();
+const menuController = new MenuService();
+export { menuController as m };
+//# sourceMappingURL=menu-service.js.map

package/dist/components/menu-service.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"menu-service.js","mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,WAAW;EAAjB;IACE,gBAAW,GAA6B,IAAI,CAAC;IAC7C,qBAAgB,GAAG,IAAI,UAAU,EAAW,CAAC;IAC7C,gCAAY,KAAK,EAAC;GA0DnB;EAxDC,QAAQ,CAAC,WAA8B;IACrC,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;MACrC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IAC/B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,cAAc,EACd,CAAC,KAA2B;MAC1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAC1C,CACF,CAAC;GACH;EAEM,WAAW,CAAC,MAAe;IAChC,uBAAA,IAAI,yBAAa,MAAM,MAAA,CAAC;GACzB;EAEM,MAAM,IAAI;IACf,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;MAClC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,KAAK;IAChB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;MACnC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAEM,MAAM,MAAM;IACjB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;MAC9B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,KAAK,CAAC;GACd;EAED,IAAI,aAAa;IACf,OAAO,IAAI,CAAC,WAAW,CAAC;GACzB;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC;GAC9B;EAED,IAAI,QAAQ;IACV,OAAO,uBAAA,IAAI,6BAAU,CAAC;GACvB;CACF;;MAEY,cAAc,GAAG,IAAI,WAAW;;;;","names":[],"sources":["./src/components/utils/menu-service/menu-service.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { TypedEvent } from '../typed-event';\n\nclass MenuService {\n menuElement: HTMLIxMenuElement | null = null;\n menuExpandChange = new TypedEvent<boolean>();\n #isPinned = false;\n\n register(menuElement: HTMLIxMenuElement) {\n if (this.menuElement) {\n console.warn('Menu already defined');\n return;\n }\n this.menuElement = menuElement;\n this.menuElement.addEventListener(\n 'expandChange',\n (event: CustomEvent<boolean>) => {\n this.menuExpandChange.emit(event.detail);\n }\n );\n }\n\n public setIsPinned(pinned: boolean) {\n this.#isPinned = pinned;\n }\n\n public async open() {\n if (this.menuElement) {\n this.menuElement.toggleMenu(true);\n return true;\n }\n\n return false;\n }\n\n public async close() {\n if (this.menuElement) {\n this.menuElement.toggleMenu(false);\n return true;\n }\n\n return false;\n }\n\n public async toggle() {\n if (this.menuElement) {\n this.menuElement.toggleMenu();\n return true;\n }\n\n return false;\n }\n\n get nativeElement() {\n return this.menuElement;\n }\n\n get expandChange() {\n return this.menuExpandChange;\n }\n\n get isPinned() {\n return this.#isPinned;\n }\n}\n\nexport const menuController = new MenuService();\n"],"version":3}