@yoobic/yobi 8.5.0-3 → 8.5.0-8

package/dist/collection/components/form/form-progress-indicator/form-progress-indicator.js

@@ -1,5 +1,5 @@
 import { translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooFormProgressIndicatorComponent {
   constructor() {
@@ -83,13 +83,7 @@ export class YooFormProgressIndicatorComponent {
     return index === this.steps.length - 1;
   }
   renderCompletedIndicator() {
-    return this.visibleSteps.map((step, index) => (h("div", { class: "step-container" },
-      h("div", { class: "step-title" },
-        h("span", null, step)),
-      h("div", { class: "step-circle completed", onClick: (event) => this.selectStep(event, index) },
-        h("span", { class: "completed-icon" },
-          h("yoo-icon", { name: "check" }))),
-      index < this.visibleSteps.length - 1 ? h("div", { class: "progress-line" }) : null)));
+    return this.visibleSteps.map((step, index) => (h("div", { class: "step-container" }, h("div", { class: "step-title" }, h("span", null, step)), h("div", { class: "step-circle completed", onClick: (event) => this.selectStep(event, index) }, h("span", { class: "completed-icon" }, h("yoo-icon", { name: "check" }))), index < this.visibleSteps.length - 1 ? h("div", { class: "progress-line" }) : null)));
   }
   renderStepContainer(step, index, lastIndex) {
     const displayIndex = index + 1;
@@ -97,21 +91,17 @@ export class YooFormProgressIndicatorComponent {
         'step-container ': true,
         last: this.isLastStep(index),
         active: this.isCurrentStep(index)
-      } },
-      h("div", { class: { 'step-circle-outer': true, active: this.isCurrentStep(index) } },
-        h("div", { class: {
-            'step-circle ': true,
-            current: this.isCurrentStep(index),
-            completed: this.isValidStep(index) && !this.lockIndex[index],
-            invalid: this.isInvalidStep(index) && !this.lockIndex[index],
-            locked: this.lockIndex[index]
-          }, ref: (el) => {
-            if (this.isCurrentStep(index)) {
-              this.currentCircle = el;
-            }
-          }, onClick: (event) => this.selectStep(event, index) }, this.displayMode === 'icon' ? this.renderIcon(index) : this.renderNumber(index))),
-      index !== lastIndex && this.renderProgresLine(index, lastIndex),
-      this.isCurrentStep(index) ? (h("div", { class: "step-title", style: { width: `${this.stepTitleWidth}px` } }, displayIndex + '. ' + translateMulti(step))) : null));
+      } }, h("div", { class: { 'step-circle-outer': true, active: this.isCurrentStep(index) } }, h("div", { class: {
+        'step-circle ': true,
+        current: this.isCurrentStep(index),
+        completed: this.isValidStep(index) && !this.lockIndex[index],
+        invalid: this.isInvalidStep(index) && !this.lockIndex[index],
+        locked: this.lockIndex[index]
+      }, ref: (el) => {
+        if (this.isCurrentStep(index)) {
+          this.currentCircle = el;
+        }
+      }, onClick: (event) => this.selectStep(event, index) }, this.displayMode === 'icon' ? this.renderIcon(index) : this.renderNumber(index))), index !== lastIndex && this.renderProgresLine(index, lastIndex), this.isCurrentStep(index) ? (h("div", { class: "step-title", style: { width: `${this.stepTitleWidth}px` } }, displayIndex + '. ' + translateMulti(step))) : null));
   }
   renderNumber(index) {
     if (this.lockIndex[index]) {
@@ -166,199 +156,210 @@ export class YooFormProgressIndicatorComponent {
     return (h(Host, { class: {
         ...getAppContext(this.host),
         [this.size]: true
-      } }, this.size === 'small' ? (this.renderContent()) : (h("div", { class: "scroll-container", ref: (el) => (this.scrollContainer = el) },
-      h("yoo-ion-scroll", { class: "horizontal no-scrollbar", ref: (el) => (this.scroll = el) }, this.renderContent())))));
+      } }, this.size === 'small' ? (this.renderContent()) : (h("div", { class: "scroll-container", ref: (el) => (this.scrollContainer = el) }, h("yoo-ion-scroll", { class: "horizontal no-scrollbar", ref: (el) => (this.scroll = el) }, this.renderContent())))));
   }
   static get is() { return "yoo-form-progress-indicator"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["form-progress-indicator.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["form-progress-indicator.css"]
-  }; }
-  static get properties() { return {
-    "steps": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IProgressIndicator[]",
-        "resolved": "IProgressIndicator[]",
-        "references": {
-          "IProgressIndicator": {
-            "location": "import",
-            "path": "./types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["form-progress-indicator.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["form-progress-indicator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "steps": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IProgressIndicator[]",
+          "resolved": "IProgressIndicator[]",
+          "references": {
+            "IProgressIndicator": {
+              "location": "import",
+              "path": "./types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "isCompleted": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-completed",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "lockIndex": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean[]",
-        "resolved": "boolean[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "displayMode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'number' | 'icon'",
-        "resolved": "\"icon\" | \"number\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       },
-      "attribute": "display-mode",
-      "reflect": false,
-      "defaultValue": "'number'"
-    },
-    "alignLeft": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "isCompleted": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-completed",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "align-left",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "forceMobile": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "force-mobile",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'medium' | 'small'",
-        "resolved": "\"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "lockIndex": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean[]",
+          "resolved": "boolean[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "currentStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "displayMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'number' | 'icon'",
+          "resolved": "\"icon\" | \"number\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display-mode",
+        "reflect": false,
+        "defaultValue": "'number'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "alignLeft": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "align-left",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "current-step",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "stepTitleWidth": {}
-  }; }
-  static get events() { return [{
-      "method": "stepSelected",
-      "name": "stepSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "forceMobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "force-mobile",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }, {
-      "method": "titleLinesChanged",
-      "name": "titleLinesChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'medium' | 'small'",
+          "resolved": "\"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
       },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "currentStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "current-step",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "stepTitleWidth": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stepSelected",
+        "name": "stepSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }, {
+        "method": "titleLinesChanged",
+        "name": "titleLinesChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "currentStep",
-      "methodName": "onCurrentStepChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "currentStep",
+        "methodName": "onCurrentStepChange"
+      }];
+  }
 }