npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.1 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.1

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

Files changed (1549) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"validation-tooltip.js","sourceRoot":"","sources":["../../../src/components/validation-tooltip/validation-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n arrow,\n 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"]}
1	+ {"version":3,"file":"validation-tooltip.js","sourceRoot":"","sources":["../../../src/components/validation-tooltip/validation-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport {\n arrow,\n autoUpdate,\n computePosition,\n 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 shadow: 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.shadowRoot.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.shadowRoot.querySelector('.validation-tooltip');\n }\n\n private destroyAutoUpdate() {\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.destroyAutoUpdate();\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.destroyAutoUpdate();\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"]}

package/dist/collection/components/workflow-step/workflow-step.css CHANGED Viewed

@@ -18,6 +18,57 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .step {
   display: flex;
   flex-direction: column;
@@ -111,10 +162,10 @@
   margin-left: 1rem;
   padding: 0;
 }
-:host .step:hover {
+:host .step.clickable:hover {
   background-color: var(--theme-workflow-step--background--hover);
 }
-:host .step:active {
+:host .step.clickable:active {
   background-color: var(--theme-workflow-step--background--active);
 }
 :host .step:focus-visible {

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

@@ -18,14 +18,6 @@ export class WorkflowStep {
     this.iconName = 'circle';
     this.iconColor = 'workflow-step-icon-default--color';
   }
-  select() {
-    if (!this.clickable)
-      return;
-    if (this.disabled)
-      return;
-    this.selected = true;
-    this.selectedHandler();
-  }
   selectedHandler() {
     const selectedStyle = this.selected ? '--selected' : '';
     if (this.status === 'open') {
@@ -71,18 +63,19 @@ export class WorkflowStep {
     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: {
+    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" }))) : null;
+    return (h(Host, { onClick: () => this.onStepClick() }, h("div", { tabIndex: 0, class: {
         step: true,
         selected: this.selected,
         vertical: this.vertical,
         disabled: this.disabled,
+        clickable: this.clickable && !this.disabled,
       } }, h("div", { class: "wrapper" }, h("div", { class: {
         line: true,
         selected: this.selected,
@@ -91,7 +84,7 @@ export class WorkflowStep {
       } }), h("div", { class: "iconWrapper" }, icons, h("slot", { name: "custom-icon" }))), h("div", { class: "text" }, h("slot", null)))));
   }
   static get is() { return "ix-workflow-step"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["workflow-step.scss"]
@@ -178,7 +171,7 @@ export class WorkflowStep {
       },
       "selected": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -206,8 +199,8 @@ export class WorkflowStep {
         "optional": false,
         "docs": {
           "tags": [{
-              "name": "deprecated",
-              "text": "Will be changed to '@internal' in 2.0.0"
+              "name": "internal",
+              "text": undefined
             }],
           "text": "Activate navigation click"
         },
@@ -258,14 +251,5 @@ export class WorkflowStep {
         "methodName": "watchPropHandler"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "clickFunction",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
 }
 //# sourceMappingURL=workflow-step.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"workflow-step.js","sourceRoot":"","sources":["../../../src/components/workflow-step/workflow-step.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,~~MAAM,EACN,~~IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,YAAY;;oBAMK,KAAK;oBAKL,KAAK;kBAKmC,MAAM;qBAK7C,KAAK;~~oBAKW~~,KAAK;~~oBAOY~~,WAAW;oBAGvE,QAAQ;~~qBACmB~~,mCAAmC;;~~EASxD~~,~~MAAM;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS;MAAE,OAAO;IAC5B,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAE1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,~~eAAe~~,EAAE,CAAC~~;~~EACzB,CAAC;EAGD,eAAe;~~IACb,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAExD,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE;MAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC;MACxD,IAAI,CAAC,SAAS,GAAG,oCAAoC,aAAa,EAAE,CAAC;KACtE;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC5C,IAAI,CAAC,SAAS,GAAG,iCAAiC,aAAa,EAAE,CAAC;KACnE;EACH,CAAC;EAGD,gBAAgB;IACd,QAAQ,IAAI,CAAC,MAAM,EAAE;MACnB,KAAK,MAAM;QACT,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,mCAAmC,CAAC;QACrD,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACjC,MAAM;MACR,KAAK,MAAM;QACT,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,gCAAgC,CAAC;QAClD,MAAM;MACR,KAAK,SAAS;QACZ,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACjC,MAAM;MACR,KAAK,OAAO;QACV,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;QAC/B,MAAM;MAER;QACE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,MAAM;KACT;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,SAAS,GAAG,6CAA6C,CAAC;KAChE;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,eAAe,EAAE,CAAC;IAEvB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CACpD,sBAAsB,CACvB,CAAC;EACJ,CAAC;~~EAGD~~,~~aAAa~~;~~IACX~~,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE;MACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC7C;EACH,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACnC,EAAC,QAAQ;MACP,eACE,KAAK,EAAC,SAAS,EACf,IAAI,EACF,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,EAEnE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI,GACA;MACX,eACE,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI,GACA,CACF,CACZ,CAAC,CAAC,CAAC,~~CACF~~,~~EAAE,CACH,~~CAAC;~~IAEF~~,OAAO,CACL,EAAC,IAAI~~;MACH~~,~~WACE~~,~~QAAQ,EAAE,CAAC,EACX,~~OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,~~MAAM~~,EAAE,~~EAC5B~~,KAAK,EAAE;UACL,IAAI,EAAE,IAAI;UACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;~~SACxB~~;QAED,WAAK,KAAK,EAAC,SAAS;UAClB,WACE,KAAK,EAAE;cACL,IAAI,EAAE,IAAI;cACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;cACvB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI;cACnB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI;aACtB,GACI;UACP,WAAK,KAAK,EAAC,aAAa;YACrB,KAAK;YACN,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;QACN,WAAK,KAAK,EAAC,MAAM;UACf,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n 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"]}
1	+ {"version":3,"file":"workflow-step.js","sourceRoot":"","sources":["../../../src/components/workflow-step/workflow-step.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n 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() selected: boolean = false;\n\n /\n Activate navigation click\n \n @internal\n /\n @Prop() position: 'first' \| 'last' \| 'single' \| 'undefined' = 'undefined';\n\n @State() iconName: 'circle' \| 'circle-dot' \| 'success' \| 'warning' \| 'error' =\n 'circle';\n\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 @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 ) : null;\n\n return (\n <Host onClick={() => this.onStepClick()}>\n <div\n tabIndex={0}\n class={{\n step: true,\n selected: this.selected,\n vertical: this.vertical,\n disabled: this.disabled,\n clickable: this.clickable && !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"]}

package/dist/collection/components/workflow-steps/test/workflow-steps.ct.js ADDED Viewed

@@ -0,0 +1,74 @@
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-workflow-steps>
+      <ix-workflow-step>Test 1</ix-workflow-step>
+      <ix-workflow-step>Test 2</ix-workflow-step>
+      <ix-workflow-step>Test 3</ix-workflow-step>
+    </ix-workflow-steps>
+  `);
+  const workflowSteps = page.locator('ix-workflow-steps');
+  workflowSteps.evaluate((step) => (step.selectedIndex = 1));
+  const step = workflowSteps
+    .locator('ix-workflow-step')
+    .nth(1)
+    .locator('.step .selected');
+  await expect(workflowSteps).toHaveClass(/hydrated/);
+  await expect(step).toBeVisible();
+});
+test('should be clickable', async ({ mount, page }) => {
+  await mount(`
+    <ix-workflow-steps clickable>
+      <ix-workflow-step>Test 1</ix-workflow-step>
+      <ix-workflow-step>Test 2</ix-workflow-step>
+      <ix-workflow-step>Test 3</ix-workflow-step>
+    </ix-workflow-steps>
+  `);
+  const workflowSteps = page.locator('ix-workflow-steps');
+  const lastStep = workflowSteps.locator('ix-workflow-step').nth(2);
+  const selectedDiv = lastStep.locator('.step');
+  await lastStep.click();
+  await expect(workflowSteps).toHaveClass(/hydrated/);
+  await expect(selectedDiv).toHaveClass(/selected/);
+});
+test('should prevent click navigation', async ({ mount, page }) => {
+  await mount(`
+    <ix-workflow-steps clickable>
+      <ix-workflow-step>Test 1</ix-workflow-step>
+      <ix-workflow-step>Test 2</ix-workflow-step>
+      <ix-workflow-step>Test 3</ix-workflow-step>
+    </ix-workflow-steps>
+  `);
+  const workflowSteps = page.locator('ix-workflow-steps');
+  await workflowSteps.evaluate((steps) => {
+    steps.addEventListener('stepSelected', (event) => {
+      event.preventDefault();
+    });
+  });
+  const firstStep = workflowSteps.locator('ix-workflow-step').nth(0);
+  const lastStep = workflowSteps.locator('ix-workflow-step').nth(2);
+  const firstStepDiv = firstStep.locator('.step');
+  const lastStepDiv = lastStep.locator('.step');
+  await lastStep.click();
+  await expect(workflowSteps).toHaveClass(/hydrated/);
+  await expect(firstStepDiv).toHaveClass(/selected/);
+  await expect(lastStepDiv).not.toHaveClass(/selected/);
+});
+//# sourceMappingURL=workflow-steps.ct.js.map

package/dist/collection/components/workflow-steps/test/workflow-steps.ct.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"workflow-steps.ct.js","sourceRoot":"","sources":["../../../../src/components/workflow-steps/test/workflow-steps.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC;;;;;;GAMX,CAAC,CAAC;EACH,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;EACxD,aAAa,CAAC,QAAQ,CACpB,CAAC,IAAgC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAC/D,CAAC;EACF,MAAM,IAAI,GAAG,aAAa;KACvB,OAAO,CAAC,kBAAkB,CAAC;KAC3B,GAAG,CAAC,CAAC,CAAC;KACN,OAAO,CAAC,iBAAiB,CAAC,CAAC;EAC9B,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACpD,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;AACnC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,qBAAqB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACpD,MAAM,KAAK,CAAC;;;;;;GAMX,CAAC,CAAC;EACH,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;EACxD,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAClE,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAC9C,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;EAEvB,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACpD,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,iCAAiC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAChE,MAAM,KAAK,CAAC;;;;;;GAMX,CAAC,CAAC;EACH,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;EAExD,MAAM,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAiC,EAAE,EAAE;IACjE,KAAK,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;MAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,MAAM,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EACnE,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAClE,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAChD,MAAM,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;EAE9C,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;EAEvB,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACpD,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EACnD,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACxD,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`\n <ix-workflow-steps>\n <ix-workflow-step>Test 1</ix-workflow-step>\n <ix-workflow-step>Test 2</ix-workflow-step>\n <ix-workflow-step>Test 3</ix-workflow-step>\n </ix-workflow-steps>\n `);\n const workflowSteps = page.locator('ix-workflow-steps');\n workflowSteps.evaluate(\n (step: HTMLIxWorkflowStepsElement) => (step.selectedIndex = 1)\n );\n const step = workflowSteps\n .locator('ix-workflow-step')\n .nth(1)\n .locator('.step .selected');\n await expect(workflowSteps).toHaveClass(/hydrated/);\n await expect(step).toBeVisible();\n});\n\ntest('should be clickable', async ({ mount, page }) => {\n await mount(`\n <ix-workflow-steps clickable>\n <ix-workflow-step>Test 1</ix-workflow-step>\n <ix-workflow-step>Test 2</ix-workflow-step>\n <ix-workflow-step>Test 3</ix-workflow-step>\n </ix-workflow-steps>\n `);\n const workflowSteps = page.locator('ix-workflow-steps');\n const lastStep = workflowSteps.locator('ix-workflow-step').nth(2);\n const selectedDiv = lastStep.locator('.step');\n await lastStep.click();\n\n await expect(workflowSteps).toHaveClass(/hydrated/);\n await expect(selectedDiv).toHaveClass(/selected/);\n});\n\ntest('should prevent click navigation', async ({ mount, page }) => {\n await mount(`\n <ix-workflow-steps clickable>\n <ix-workflow-step>Test 1</ix-workflow-step>\n <ix-workflow-step>Test 2</ix-workflow-step>\n <ix-workflow-step>Test 3</ix-workflow-step>\n </ix-workflow-steps>\n `);\n const workflowSteps = page.locator('ix-workflow-steps');\n\n await workflowSteps.evaluate((steps: HTMLIxWorkflowStepsElement) => {\n steps.addEventListener('stepSelected', (event) => {\n event.preventDefault();\n });\n });\n\n const firstStep = workflowSteps.locator('ix-workflow-step').nth(0);\n const lastStep = workflowSteps.locator('ix-workflow-step').nth(2);\n const firstStepDiv = firstStep.locator('.step');\n const lastStepDiv = lastStep.locator('.step');\n\n await lastStep.click();\n\n await expect(workflowSteps).toHaveClass(/hydrated/);\n await expect(firstStepDiv).toHaveClass(/selected/);\n await expect(lastStepDiv).not.toHaveClass(/selected/);\n});\n"]}

package/dist/collection/components/workflow-steps/workflow-steps.css CHANGED Viewed

@@ -18,6 +18,57 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .steps {
   display: flex;
 }

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

@@ -11,16 +11,12 @@ import { createMutationObserver } from '../utils/mutation-observer';
 export class WorkflowSteps {
   constructor() {
     this.vertical = false;
-    this.linear = false;
     this.clickable = false;
     this.selectedIndex = 0;
   }
   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) => {
@@ -42,16 +38,19 @@ export class WorkflowSteps {
       }
     });
   }
-  componentDidLoad() {
-    this.stepsContent.addEventListener('selectedChanged', (event) => {
-      const steps = this.getSteps();
-      steps.forEach((element) => {
-        if (element !== event.target) {
-          element.selected = false;
-        }
-      });
+  onStepSelectionChanged(event) {
+    const eventTarget = event.detail;
+    const steps = this.getSteps();
+    const clickIndex = steps.findIndex((step) => step === eventTarget);
+    const clientEvent = this.stepSelected.emit(clickIndex);
+    if (clientEvent.defaultPrevented) {
+      return;
+    }
+    steps.forEach((step, index) => {
+      step.selected = index === clickIndex;
     });
-    const slotDiv = this.hostElement.querySelector('.steps');
+  }
+  componentDidLoad() {
     this.observer = createMutationObserver((mutations) => {
       for (let mutation of mutations) {
         if (mutation.type === 'childList') {
@@ -59,7 +58,7 @@ export class WorkflowSteps {
         }
       }
     });
-    this.observer.observe(slotDiv, { childList: true });
+    this.observer.observe(this.hostElement, { childList: true });
   }
   disconnectedCallback() {
     if (this.observer) {
@@ -73,7 +72,7 @@ export class WorkflowSteps {
     return (h(Host, null, h("div", { class: { steps: true, vertical: this.vertical } }, h("slot", null))));
   }
   static get is() { return "ix-workflow-steps"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["workflow-steps.scss"]
@@ -104,27 +103,6 @@ export class WorkflowSteps {
         "reflect": false,
         "defaultValue": "false"
       },
-      "linear": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Has no effect on component. Will get removed in 2.0.0"
-            }],
-          "text": "Select linear mode"
-        },
-        "attribute": "linear",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "clickable": {
         "type": "boolean",
         "mutable": false,
@@ -182,5 +160,14 @@ export class WorkflowSteps {
       }];
   }
   static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "selectedChanged",
+        "method": "onStepSelectionChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 //# sourceMappingURL=workflow-steps.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"workflow-steps.js","sourceRoot":"","sources":["../../../src/components/workflow-steps/workflow-steps.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAOpE,MAAM,OAAO,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;EAC3E,CAAC;EAED,~~IAAI,YAAY;IACd,OAAO,IAAI,CAAC,~~WAAW~~,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC~~;~~EAClD,CAAC;EAED,WAAW;~~IACT,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;MAC/B,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;IACH,CAAC,CAAC,CAAC;EACL,CAAC;~~EAID~~,~~gBAAgB;IACd~~,~~IAAI,~~CAAC,~~YAAY~~,~~CAAC~~,~~gBAAgB~~,~~CAChC~~,~~iBAAiB~~,~~EACjB,~~CAAC,~~KAA6C~~,~~EAAE,EAAE~~;~~MAChD~~,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;~~MAC9B~~,KAAK,CAAC,~~OAAO~~,CAAC,CAAC,~~OAAO~~,EAAE,EAAE~~;QACxB~~,IAAI,~~OAAO,~~KAAK,~~KAAK~~,CAAC,MAAM,~~EAAE;UAC5B~~,~~OAAO~~,CAAC,~~QAAQ~~,~~GAAG~~,~~KAAK~~,CAAC~~;SAC1B;MACH~~,~~CAAC~~,CAAC,CAAC;~~IACL~~,CAAC,~~CACF~~,~~CAAC~~;~~IAEF~~,~~MAAM~~,OAAO,~~GAAG~~,IAAI,~~CAAC~~,~~WAAW~~,~~CAAC~~,~~aAAa~~,CAAC,QAAQ,CAAC,CAAC;~~IAEzD~~,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,CAAC,SAAS,EAAE,EAAE;MACnD,KAAK,IAAI,QAAQ,IAAI,SAAS,EAAE;QAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,~~OAAO~~,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;~~EACtD~~,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;QAClD,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} 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"]}
1	+ {"version":3,"file":"workflow-steps.js","sourceRoot":"","sources":["../../../src/components/workflow-steps/workflow-steps.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} 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 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 eventTarget = event.detail;\n\n const steps = this.getSteps();\n const clickIndex = steps.findIndex((step) => step === eventTarget);\n const clientEvent = this.stepSelected.emit(clickIndex);\n\n if (clientEvent.defaultPrevented) {\n return;\n }\n\n steps.forEach((step, index) => {\n step.selected = index === clickIndex;\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"]}

package/dist/collection/index.js CHANGED Viewed

@@ -12,11 +12,12 @@ export * from './components/category-filter/filter-state';
 export * from './components/category-filter/input-state';
 export * from './components/category-filter/logical-filter-operator';
 export { FlipTileState } from './components/flip-tile/flip-tile-state';
-export * from './components/modal/modal-utils';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
 export * from './components/upload/upload-file-state';
+export * from './components/utils/delegate';
+export * from './components/utils/modal';
 export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
 export * from './components/utils/theme-switcher';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,mBAAmB,CAAC;AAK3B,cAAc,cAAc,CAAC;AAC7B,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,cAAc,gCAAgC,CAAC;AAC/C,cAAc,~~gCAAgC~~,CAAC;~~AAC/C~~,cAAc,~~0CAA0C~~,CAAC;~~AACzD~~,cAAc,~~8BAA8B~~,CAAC;~~AAC7C~~,cAAc,~~uCAAuC~~,CAAC;~~AAEtD~~,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,cAAc,mCAAmC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport '@siemens/ix-icons';\nimport type {\n Components as IxIconsComponents,\n JSX as IxIconsJSX,\n} from '@siemens/ix-icons';\nexport from './components';\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/~~modal/modal-utils';\nexport * from './components/~~toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport * from './components/upload/upload-file-state';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n convertToAbbreviationString,\n convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\n\ndeclare module './components' {\n export namespace Components {\n export type IxIcon = IxIconsComponents.IxIcon;\n }\n}\n\ndeclare module './components' {\n export namespace JSX {\n export type IxIcon = IxIconsJSX.IxIcon;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,mBAAmB,CAAC;AAK3B,cAAc,cAAc,CAAC;AAC7B,cAAc,2CAA2C,CAAC;AAC1D,cAAc,0CAA0C,CAAC;AACzD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AAEzC,OAAO,EACL,2BAA2B,EAC3B,kBAAkB,GACnB,MAAM,6BAA6B,CAAC;AACrC,cAAc,mCAAmC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\nimport '@siemens/ix-icons';\nimport type {\n Components as IxIconsComponents,\n JSX as IxIconsJSX,\n} from '@siemens/ix-icons';\nexport from './components';\nexport * from './components/category-filter/filter-state';\nexport * from './components/category-filter/input-state';\nexport * from './components/category-filter/logical-filter-operator';\nexport { FlipTileState } from './components/flip-tile/flip-tile-state';\nexport * from './components/toast/toast-utils';\nexport * from './components/tree-item/default-tree-item';\nexport * from './components/tree/tree-model';\nexport * from './components/upload/upload-file-state';\nexport * from './components/utils/delegate';\nexport * from './components/utils/modal';\nexport { NotificationColor } from './components/utils/notification-color';\nexport {\n convertToAbbreviationString,\n convertToRemString,\n} from './components/utils/rwd.util';\nexport * from './components/utils/theme-switcher';\n\ndeclare module './components' {\n export namespace Components {\n export type IxIcon = IxIconsComponents.IxIcon;\n }\n}\n\ndeclare module './components' {\n export namespace JSX {\n export type IxIcon = IxIconsJSX.IxIcon;\n }\n}\n"]}

package/dist/collection/tests/utils/test/page.js CHANGED Viewed

@@ -6,10 +6,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { test as base } from '@playwright/test';
+import { test as testBase, } from '@playwright/test';
 async function extendPageFixture(page, testInfo) {
+  var _a, _b;
   const originalGoto = page.goto.bind(page);
-  const theme = testInfo.project.metadata.theme;
+  const originalSceenshot = page.screenshot.bind(page);
+  const theme = (_b = (_a = testInfo.project.metadata) === null || _a === void 0 ? void 0 : _a.theme) !== null && _b !== void 0 ? _b : 'theme-classic-dark';
   testInfo.annotations.push({
     type: theme,
   });
@@ -18,15 +20,19 @@ async function extendPageFixture(page, testInfo) {
     await page.waitForTimeout(1000);
     return response;
   };
+  page.screenshot = async (options) => {
+    await page.waitForTimeout(150);
+    return originalSceenshot(options);
+  };
   return page;
 }
-export const regressionTest = base.extend({
+export const regressionTest = testBase.extend({
   page: async ({ page }, use, testInfo) => {
     page = await extendPageFixture(page, testInfo);
     await use(page);
   },
 });
-export const test = base.extend({
+export const test = testBase.extend({
   createElement: async ({ page }, use) => {
     use((selector, appendTo) => page.evaluateHandle(async ({ selector, appendTo }) => {
       const elm = document.createElement(selector);
@@ -40,7 +46,8 @@ export const test = base.extend({
     }));
   },
   mount: async ({ page }, use, testInfo) => {
-    const theme = testInfo.project.metadata.theme;
+    var _a, _b;
+    const theme = (_b = (_a = testInfo.project.metadata) === null || _a === void 0 ? void 0 : _a.theme) !== null && _b !== void 0 ? _b : 'theme-classic-dark';
     testInfo.annotations.push({
       type: theme,
     });

package/dist/collection/tests/utils/test/page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/tests/utils/test/page.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,~~EAAuB~~,IAAI,IAAI,~~IAAI~~,~~EAAY~~,MAAM,kBAAkB,CAAC;~~AAE/E~~,KAAK,UAAU,iBAAiB,CAAC,IAAU,EAAE,QAAkB;EAC7D,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,~~CAAC~~,KAAK,CAAC;~~EAC9C~~,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;IACxB,IAAI,EAAE,KAAK;GACZ,CAAC,CAAC;EACH,IAAI,CAAC,IAAI,GAAG,KAAK,EAAE,GAAW,EAAE,OAAO,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,YAAY,CACjC,mCAAmC,GAAG,UAAU,KAAK,EAAE,EACvD,OAAO,CACR,CAAC;IAEF,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAChC,OAAO,QAAQ,CAAC;EAClB,CAAC,CAAC;EAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,~~IAAI~~,CAAC,MAAM,CAAC;~~EACxC~~,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IACtC,IAAI,GAAG,MAAM,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC/C,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;EAClB,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,~~IAAI~~,CAAC,MAAM,~~CAM5B~~;EACD,aAAa,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,EAAE,CACzB,IAAI,CAAC,cAAc,CACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;MAC/B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAE7C,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;OAC3B;MAED,OAAO,GAAG,CAAC;IACb,CAAC,EACD;MACE,QAAQ;MACR,QAAQ;KACT,CACF,CACF,CAAC;EACJ,CAAC;EACD,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,~~CAAC~~,KAAK,CAAC;~~IAC9C~~,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;MACxB,IAAI,EAAE,KAAK;KACZ,CAAC,CAAC;IACH,MAAM,IAAI,CAAC,IAAI,CACb,6DAA6D,KAAK,EAAE,CACrE,CAAC;IACF,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MACf,OAAO,IAAI,CAAC,cAAc,CACxB,KAAK,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE;QAC9B,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;QACpC,OAAO,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAgB,CAAC;MAC/C,CAAC,EACD,EAAE,iBAAiB,EAAE,QAAQ,EAAE,CAChC,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;CACF,CAAC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { ElementHandle, Page, test as ~~base,~~ TestInfo } from '@playwright/test';\n\nasync function extendPageFixture(page: Page, testInfo: TestInfo) {\n const originalGoto = page.goto.bind(page);\n const theme = testInfo.project.metadata.theme;\n testInfo.annotations.push({\n type: theme,\n });\n page.goto = async (url: string, options) => {\n const response = await originalGoto(\n `http://127.0.0.1:8080/src/tests/${url}?theme=${theme}`,\n options\n );\n\n await page.waitForTimeout(1000);\n return response;\n };\n\n return page;\n}\n\nexport const regressionTest = ~~base~~.extend({\n page: async ({ page }, use, testInfo) => {\n page = await extendPageFixture(page, testInfo);\n await use(page);\n },\n});\n\nexport const test = ~~base~~.extend<{\n mount: (selector: string) => Promise<ElementHandle<HTMLElement>>;\n createElement: (\n selector: string,\n appendTo?: ElementHandle<Element>\n ) => Promise<ElementHandle<HTMLElement>>;\n}>({\n createElement: async ({ page }, use) => {\n use((selector, appendTo) =>\n page.evaluateHandle(\n async ({ selector, appendTo }) => {\n const elm = document.createElement(selector);\n\n if (appendTo) {\n appendTo.appendChild(elm);\n }\n\n return elm;\n },\n {\n selector,\n appendTo,\n }\n )\n );\n },\n mount: async ({ page }, use, testInfo) => {\n const theme = testInfo.project.metadata.theme;\n testInfo.annotations.push({\n type: theme,\n });\n await page.goto(\n `http://127.0.0.1:8080/src/tests/utils/ct/index.html?theme=${theme}`\n );\n use((selector) => {\n return page.evaluateHandle(\n async ({ componentSelector }) => {\n await window.customElements.whenDefined('ix-button');\n const mount = document.querySelector('#mount');\n mount.innerHTML = componentSelector;\n return mount.children.item(0) as HTMLElement;\n },\n { componentSelector: selector }\n );\n });\n },\n});\n"]}
1	+ {"version":3,"file":"page.js","sourceRoot":"","sources":["../../../../src/tests/utils/test/page.ts"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n ElementHandle,\n Page,\n PageScreenshotOptions,\n test as testBase,\n TestInfo,\n} from '@playwright/test';\n\nasync function extendPageFixture(page: Page, testInfo: TestInfo) {\n const originalGoto = page.goto.bind(page);\n const originalSceenshot = page.screenshot.bind(page);\n const theme = testInfo.project.metadata?.theme ?? 'theme-classic-dark';\n testInfo.annotations.push({\n type: theme,\n });\n page.goto = async (url: string, options) => {\n const response = await originalGoto(\n `http://127.0.0.1:8080/src/tests/${url}?theme=${theme}`,\n options\n );\n\n await page.waitForTimeout(1000);\n return response;\n };\n\n page.screenshot = async (options?: PageScreenshotOptions) => {\n await page.waitForTimeout(150);\n return originalSceenshot(options);\n };\n\n return page;\n}\n\nexport const regressionTest = testBase.extend({\n page: async ({ page }, use, testInfo) => {\n page = await extendPageFixture(page, testInfo);\n await use(page);\n },\n});\n\nexport const test = testBase.extend<{\n mount: (selector: string) => Promise<ElementHandle<HTMLElement>>;\n createElement: (\n selector: string,\n appendTo?: ElementHandle<Element>\n ) => Promise<ElementHandle<HTMLElement>>;\n}>({\n createElement: async ({ page }, use) => {\n use((selector, appendTo) =>\n page.evaluateHandle(\n async ({ selector, appendTo }) => {\n const elm = document.createElement(selector);\n\n if (appendTo) {\n appendTo.appendChild(elm);\n }\n\n return elm;\n },\n {\n selector,\n appendTo,\n }\n )\n );\n },\n mount: async ({ page }, use, testInfo) => {\n const theme = testInfo.project.metadata?.theme ?? 'theme-classic-dark';\n testInfo.annotations.push({\n type: theme,\n });\n await page.goto(\n `http://127.0.0.1:8080/src/tests/utils/ct/index.html?theme=${theme}`\n );\n use((selector) => {\n return page.evaluateHandle(\n async ({ componentSelector }) => {\n await window.customElements.whenDefined('ix-button');\n const mount = document.querySelector('#mount');\n mount.innerHTML = componentSelector;\n return mount.children.item(0) as HTMLElement;\n },\n { componentSelector: selector }\n );\n });\n },\n});\n"]}