@ptcwebops/ptcw-design 0.4.6 → 0.4.8

package/dist/collection/components/ptc-mobile-select/ptc-mobile-select.js

@@ -1,220 +1,221 @@
-import { Component, h, Prop } from '@stencil/core';
-import MobileSelect from 'mobile-select';
-export class PtcMobileSelect {
-  constructor() {
-    /**
-     * Selected Id
-     * - initialize the id(string) of default wheel
-     */
-    this.selectedId = '';
-    /**
-     * Confirm Text
-     * - translation goes here
-     */
-    this.ensureBtnText = 'Confirm';
-    /**
-     * Cancel Text
-     * - translation goes here
-     */
-    this.cancelBtnText = 'Cancel';
-    /**
-     * Mobile select list title (Optional)
-     */
-    this.listTitle = undefined;
-    /**
-     * link url
-     */
-    this.linkUrl = undefined;
-  }
-  render() {
-    return (h("div", { class: "mobile-select-wrapper" },
-      h("div", { id: this.triggerName }, this.selectedText),
-      h("icon-asset", { type: "ptc", size: "x-small", name: "chevron-down", color: "white" })));
-  }
-  componentDidRender() {
-    let currentId = this.selectedId; //input current lang
-    let storeIndex = 0;
-    new MobileSelect({
-      trigger: `#${this.triggerName}`,
-      title: `${this.listTitle ? this.listTitle : ''}`,
-      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
-      position: [0],
-      ensureBtnText: this.ensureBtnText,
-      cancelBtnText: this.cancelBtnText,
-      ensureBtnColor: 'var(--color-gray-12)',
-      cancelBtnColor: 'var(--color-gray-12)',
-      titleColor: 'var(--color-gray-12)',
-      onShow: function (e) {
-        if (currentId) {
-          let liEle = document.querySelectorAll('.selectContainer li');
-          liEle.forEach((currentValue, currentIndex) => {
-            if (currentValue.getAttribute('data-id') == currentId) {
-              storeIndex = currentIndex;
-              return;
-            }
-          });
-          e.locatePosition(0, storeIndex);
-        }
-        else {
-          return;
-        }
-      },
-      callback: function (indexArr, data) {
-        if (this.linkUrl !== undefined) {
-          window.location.href = this.linkUrl + '/' + data[0].id;
-        }
-        else {
-          console.log('index: ' + indexArr + ', id: ' + data[0].id + '; No link url founded!');
-        }
-      }.bind(this),
-    });
-  }
-  static get is() { return "ptc-mobile-select"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-mobile-select.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-mobile-select.css"]
-  }; }
-  static get properties() { return {
-    "triggerName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Trigger Name (Mandatory)"
-      },
-      "attribute": "trigger-name",
-      "reflect": false
-    },
-    "selectedText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selected Text (Mandatory)"
-      },
-      "attribute": "selected-text",
-      "reflect": false
-    },
-    "wheelData": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wheel Data (Mandatory)\neg: data: [{ id: \"1\", value: \"\u9644\u8FD1\" }],"
-      }
-    },
-    "selectedId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selected Id\n- initialize the id(string) of default wheel"
-      },
-      "attribute": "selected-id",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "ensureBtnText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Confirm Text\n- translation goes here"
-      },
-      "attribute": "ensure-btn-text",
-      "reflect": false,
-      "defaultValue": "'Confirm'"
-    },
-    "cancelBtnText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Cancel Text\n- translation goes here"
-      },
-      "attribute": "cancel-btn-text",
-      "reflect": false,
-      "defaultValue": "'Cancel'"
-    },
-    "listTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Mobile select list title (Optional)"
-      },
-      "attribute": "list-title",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "linkUrl": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "link url"
-      },
-      "attribute": "link-url",
-      "reflect": false,
-      "defaultValue": "undefined"
-    }
-  }; }
-}
+import { Component, h, Prop } from '@stencil/core';
+import MobileSelect from 'mobile-select';
+export class PtcMobileSelect {
+  constructor() {
+    /**
+     * Selected Id
+     * - initialize the id(string) of default wheel
+     */
+    this.selectedId = '';
+    /**
+     * Confirm Text
+     * - translation goes here
+     */
+    this.ensureBtnText = 'Confirm';
+    /**
+     * Cancel Text
+     * - translation goes here
+     */
+    this.cancelBtnText = 'Cancel';
+    /**
+     * Mobile select list title (Optional)
+     */
+    this.listTitle = undefined;
+    /**
+     * link url
+     */
+    this.linkUrl = undefined;
+  }
+  render() {
+    return (h("div", { class: "mobile-select-wrapper" },
+      h("div", { id: this.triggerName },
+        this.selectedText,
+        h("icon-asset", { "injected-style": "svg.sc-icon-asset{transform:translateX(10px);}", type: "ptc", size: "x-small", name: "chevron-down", color: "white" }))));
+  }
+  componentDidRender() {
+    let currentId = this.selectedId; //input current lang
+    let storeIndex = 0;
+    new MobileSelect({
+      trigger: `#${this.triggerName}`,
+      title: `${this.listTitle ? this.listTitle : ''}`,
+      wheels: this.wheelData ? [{ data: this.wheelData }] : [{ data: ['test1', 'test2'] }],
+      position: [0],
+      ensureBtnText: this.ensureBtnText,
+      cancelBtnText: this.cancelBtnText,
+      ensureBtnColor: 'var(--color-gray-12)',
+      cancelBtnColor: 'var(--color-gray-12)',
+      titleColor: 'var(--color-gray-12)',
+      onShow: function (e) {
+        if (currentId) {
+          let liEle = document.querySelectorAll('.selectContainer li');
+          liEle.forEach((currentValue, currentIndex) => {
+            if (currentValue.getAttribute('data-id') == currentId) {
+              storeIndex = currentIndex;
+              return;
+            }
+          });
+          e.locatePosition(0, storeIndex);
+        }
+        else {
+          return;
+        }
+      },
+      callback: function (indexArr, data) {
+        if (this.linkUrl !== undefined) {
+          window.location.href = this.linkUrl + '/' + data[0].id;
+        }
+        else {
+          console.log('index: ' + indexArr + ', id: ' + data[0].id + '; No link url founded!');
+        }
+      }.bind(this),
+    });
+  }
+  static get is() { return "ptc-mobile-select"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-mobile-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-mobile-select.css"]
+  }; }
+  static get properties() { return {
+    "triggerName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Trigger Name (Mandatory)"
+      },
+      "attribute": "trigger-name",
+      "reflect": false
+    },
+    "selectedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected Text (Mandatory)"
+      },
+      "attribute": "selected-text",
+      "reflect": false
+    },
+    "wheelData": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wheel Data (Mandatory)\r\neg: data: [{ id: \"1\", value: \"\u9644\u8FD1\" }],"
+      }
+    },
+    "selectedId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected Id\r\n- initialize the id(string) of default wheel"
+      },
+      "attribute": "selected-id",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ensureBtnText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Confirm Text\r\n- translation goes here"
+      },
+      "attribute": "ensure-btn-text",
+      "reflect": false,
+      "defaultValue": "'Confirm'"
+    },
+    "cancelBtnText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Cancel Text\r\n- translation goes here"
+      },
+      "attribute": "cancel-btn-text",
+      "reflect": false,
+      "defaultValue": "'Cancel'"
+    },
+    "listTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Mobile select list title (Optional)"
+      },
+      "attribute": "list-title",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "linkUrl": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "link url"
+      },
+      "attribute": "link-url",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+}