@siemens/ix 1.5.0-beta.1 → 1.5.0-beta.3

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

@@ -1,8 +1,9 @@
 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 WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -15,48 +16,56 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   getSteps() {
     return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
   }
-  deselectAll() {
-    const steps = this.getSteps();
-    steps.forEach((element) => {
-      element.setAttribute('selected', 'false');
-    });
+  get stepsContent() {
+    return this.hostElement.querySelector('.steps');
   }
-  componentDidRender() {
-    const steps = this.getSteps();
+  updateSteps() {
+    let steps = this.getSteps();
     steps.forEach((element, index) => {
-      element.setAttribute('vertical', this.vertical === true ? 'true' : 'false');
-      element.setAttribute('clickable', this.clickable === true ? 'true' : 'false');
-      element.setAttribute('selected', this.selectedIndex === index ? 'true' : 'false');
-      if (index === 0)
-        element.setAttribute('position', 'first');
-      if (index === steps.length - 1)
-        element.setAttribute('position', 'last');
+      element.vertical = this.vertical;
+      element.clickable = this.clickable;
+      element.selected = this.selectedIndex === index;
+      if (steps.length === 1) {
+        element.position = 'single';
+        return;
+      }
+      if (index === 0) {
+        element.position = 'first';
+      }
+      else if (index === steps.length - 1) {
+        element.position = 'last';
+      }
+      else {
+        element.position = 'undefined';
+      }
     });
   }
-  componentWillRender() {
-    const steps = this.getSteps();
-    steps.forEach((element, index) => {
-      element.addEventListener('click', () => {
-        if (!this.clickable)
-          return;
-        const previousElement = steps[index - 1];
-        if (this.linear &&
-          previousElement &&
-          !['done', 'success'].includes(previousElement === null || previousElement === void 0 ? void 0 : previousElement.status)) {
-          return element.setAttribute('selected', 'false');
+  componentDidLoad() {
+    this.stepsContent.addEventListener('selectedChanged', (event) => {
+      const steps = this.getSteps();
+      steps.forEach((element) => {
+        if (element !== event.target) {
+          element.selected = false;
         }
-        this.deselectAll();
-        element.setAttribute('selected', 'true');
-        this.stepSelected.emit(index);
       });
-      // const isEnabled = element.getAttribute('first');
-      // if(isEnabled){
-      // }
-      // console.log(isEnabled)
-      // const isDisabled = element.getAttribute('disabled') !== null;
-      // if (!isDisabled) element.addEventListener('click', () => '');
-      //element.addEventListener('mousedown', event => this.clicked(element, index));
     });
+    const slotDiv = this.hostElement.querySelector('.steps');
+    this.observer = createMutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        if (mutation.type === 'childList') {
+          this.updateSteps();
+        }
+      }
+    });
+    this.observer.observe(slotDiv, { childList: true });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  componentDidRender() {
+    this.updateSteps();
   }
   render() {
     return (h(Host, null, h("div", { class: { steps: true, vertical: this.vertical } }, h("slot", null))));

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

@@ -1 +1 @@
-{"file":"ix-workflow-steps.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,8IAA8I;;MC4B1J,aAAa;;;;;oBAMI,KAAK;kBAKP,KAAK;qBAKF,KAAK;yBAKF,CAAC;;EAOzB,QAAQ;IACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;GAC1E;EAEO,WAAW;IACjB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO;MACpB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;KAC3C,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAE9B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MAC3B,OAAO,CAAC,YAAY,CAClB,UAAU,EACV,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,CAC1C,CAAC;MACF,OAAO,CAAC,YAAY,CAClB,WAAW,EACX,IAAI,CAAC,SAAS,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,CAC3C,CAAC;MACF,OAAO,CAAC,YAAY,CAClB,UAAU,EACV,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAChD,CAAC;MACF,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAC3D,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;KAC1E,CAAC,CAAC;GACJ;EAED,mBAAmB;IACjB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MAC3B,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAChC,IAAI,CAAC,IAAI,CAAC,SAAS;UAAE,OAAO;QAC5B,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACzC,IACE,IAAI,CAAC,MAAM;UACX,eAAe;UACf,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,CAAC,EACtD;UACA,OAAO,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;SAClD;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;OAC/B,CAAC,CAAC;;;;;;;;KASJ,CAAC,CAAC;GACJ;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/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\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\n/*\n * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\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   */\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  private deselectAll() {\n    const steps = this.getSteps();\n    steps.forEach((element) => {\n      element.setAttribute('selected', 'false');\n    });\n  }\n\n  componentDidRender() {\n    const steps = this.getSteps();\n\n    steps.forEach((element, index) => {\n      element.setAttribute(\n        'vertical',\n        this.vertical === true ? 'true' : 'false'\n      );\n      element.setAttribute(\n        'clickable',\n        this.clickable === true ? 'true' : 'false'\n      );\n      element.setAttribute(\n        'selected',\n        this.selectedIndex === index ? 'true' : 'false'\n      );\n      if (index === 0) element.setAttribute('position', 'first');\n      if (index === steps.length - 1) element.setAttribute('position', 'last');\n    });\n  }\n\n  componentWillRender() {\n    const steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.addEventListener('click', () => {\n        if (!this.clickable) return;\n        const previousElement = steps[index - 1];\n        if (\n          this.linear &&\n          previousElement &&\n          !['done', 'success'].includes(previousElement?.status)\n        ) {\n          return element.setAttribute('selected', 'false');\n        }\n        this.deselectAll();\n        element.setAttribute('selected', 'true');\n        this.stepSelected.emit(index);\n      });\n      // const isEnabled = element.getAttribute('first');\n      // if(isEnabled){\n\n      // }\n      // console.log(isEnabled)\n      // const isDisabled = element.getAttribute('disabled') !== null;\n      // if (!isDisabled) element.addEventListener('click', () => '');\n      //element.addEventListener('mousedown', event => this.clicked(element, index));\n    });\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}
+{"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}