@ptcwebops/ptcw-design 1.3.0 → 1.3.2

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.js

@@ -1,272 +1,272 @@
-import { Host, h } from '@stencil/core';
-import { MapDOM, generateUUID } from '../../utils/utils';
-class TabItem {
-}
-export class PtcPricingTabs {
-  constructor() {
-    this.productTag = undefined;
-    this.header = undefined;
-    this.tabLabel = undefined;
-    this.filterTag = undefined;
-    this.styles = undefined;
-    this.tabItems = undefined;
-    this.isMobileViewPort = undefined;
-    this.isDesktopViewPort = undefined;
-  }
-  componentDidLoad() {
-    this.fireUpdateComponent();
-  }
-  componentDidUpdate() {
-    this.fireUpdateComponent();
-  }
-  componentWillLoad() {
-    this.setIsMobileViewPort();
-    this.loadTabData();
-  }
-  componentWillRender() {
-    if (this.filterTag) {
-      this.resetActive();
-    }
-  }
-  resetActive() {
-    var activeItem = this.tabItems.filter((z) => {
-      return z.tag == this.filterTag && z.active;
-    });
-    if (activeItem.length == 0) {
-      let reset = false;
-      this.tabItems.map((z) => {
-        if (z.tag == this.filterTag && !reset) {
-          z.active = true;
-          reset = true;
-        }
-        else {
-          z.active = false;
-        }
-      });
-    }
-  }
-  loadTabData() {
-    let dom = MapDOM(this.el);
-    const appendElem = (item) => {
-      if (item) {
-        let tab = new TabItem();
-        tab.id = generateUUID();
-        tab.header = item.header;
-        tab.label = item.productLabel;
-        tab.tag = item.tag;
-        tab.content = item.html;
-        tab.active = item.active == "true";
-        this.tabItems.push(tab);
-      }
-    };
-    this.tabItems = new Array();
-    if (dom.pricingTab) {
-      if (Array.isArray(dom.pricingTab)) {
-        dom.pricingTab.map(appendElem);
-      }
-      else {
-        appendElem(dom.pricingTab);
-      }
-    }
-  }
-  fireUpdateComponent() {
-    let element = this.el.shadowRoot.querySelector('#tab-container');
-    this.update.emit({
-      sender: this,
-      element: element
-    });
-  }
-  setIsMobileViewPort() {
-    this.isMobileViewPort = window.innerWidth < 768;
-    this.isDesktopViewPort = window.innerWidth > 1439;
-  }
-  getTabContentClassList(tab) {
-    return {
-      ['tab-content']: true,
-      ['active']: tab.active
-    };
-  }
-  handleTabClick(tab, index) {
-    if (tab && !tab.active) {
-      this.tabItems = this.tabItems.map((tabItem) => {
-        tabItem.active = tabItem.id == tab.id;
-        return tabItem;
-      });
-    }
-    this.tabChanged.emit({
-      sender: this,
-      selectedTab: tab,
-      selectedIndex: index,
-      tabItems: this.tabItems
-    });
-  }
-  getCurrentTabs() {
-    if (this.filterTag) {
-      return this.tabItems.filter((item) => {
-        return item.tag == this.filterTag;
-      });
-    }
-    else {
-      return this.tabItems;
-    }
-  }
-  renderTabs() {
-    let tabs = this.getCurrentTabs();
-    return (h("div", { class: "tabs" }, h("ptc-para", { styles: "p.primary-grey { margin: 1.5rem 0 .75rem 0; color: var(--color-gray-12); }", "font-size": this.isDesktopViewPort ? "x-small" : "small", "font-weight": this.isDesktopViewPort ? "w-4" : "w-5" }, this.tabLabel), h("div", { class: "attached" }, h("slot", { name: "attached" })), tabs && tabs.map((tab, index) => h("ptc-pricing-block", { "data-id": tab.id, active: tab.active, onClick: () => this.handleTabClick(tab, index) }, h("span", { slot: "left-text", innerHTML: tab.header }), h("span", { slot: "right-text", innerHTML: tab.label })))));
-  }
-  render() {
-    let tabs = this.getCurrentTabs();
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: "tab-container", class: "is-grid has-col-12 grid-large-col-gap-sm grid-large-col-gap-xs-0 p-8" }, h("div", { class: "is-col-6-md is-col-12" }, h("span", { class: "tag" }, this.productTag), h("span", { class: "product-name" }, h("slot", { name: "header" })), !this.isMobileViewPort && this.renderTabs()), h("div", { class: "is-col-6-md is-col-12 content-section" }, tabs && tabs.map((tab) => h("div", { "data-id": tab.id, class: this.getTabContentClassList(tab), innerHTML: tab.content }))), this.isMobileViewPort && (h("div", { class: "is-col-12" }, this.renderTabs())))));
-  }
-  static get is() { return "ptc-pricing-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-pricing-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-pricing-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "productTag": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sub title tag the shows in top left corner"
-        },
-        "attribute": "product-tag",
-        "reflect": false
-      },
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header of the pricing block"
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "tabLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "the label above the tab selectors"
-        },
-        "attribute": "tab-label",
-        "reflect": false
-      },
-      "filterTag": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "filter tag to filter out options"
-        },
-        "attribute": "filter-tag",
-        "reflect": false
-      },
-      "styles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Injected CSS styles"
-        },
-        "attribute": "styles",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabItems": {},
-      "isMobileViewPort": {},
-      "isDesktopViewPort": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabChanged",
-        "name": "tabChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "update",
-        "name": "update",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "setIsMobileViewPort",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+import { MapDOM, generateUUID } from '../../utils/utils';
+class TabItem {
+}
+export class PtcPricingTabs {
+  constructor() {
+    this.productTag = undefined;
+    this.header = undefined;
+    this.tabLabel = undefined;
+    this.filterTag = undefined;
+    this.styles = undefined;
+    this.tabItems = undefined;
+    this.isMobileViewPort = undefined;
+    this.isDesktopViewPort = undefined;
+  }
+  componentDidLoad() {
+    this.fireUpdateComponent();
+  }
+  componentDidUpdate() {
+    this.fireUpdateComponent();
+  }
+  componentWillLoad() {
+    this.setIsMobileViewPort();
+    this.loadTabData();
+  }
+  componentWillRender() {
+    if (this.filterTag) {
+      this.resetActive();
+    }
+  }
+  resetActive() {
+    var activeItem = this.tabItems.filter((z) => {
+      return z.tag == this.filterTag && z.active;
+    });
+    if (activeItem.length == 0) {
+      let reset = false;
+      this.tabItems.map((z) => {
+        if (z.tag == this.filterTag && !reset) {
+          z.active = true;
+          reset = true;
+        }
+        else {
+          z.active = false;
+        }
+      });
+    }
+  }
+  loadTabData() {
+    let dom = MapDOM(this.el);
+    const appendElem = (item) => {
+      if (item) {
+        let tab = new TabItem();
+        tab.id = generateUUID();
+        tab.header = item.header;
+        tab.label = item.productLabel;
+        tab.tag = item.tag;
+        tab.content = item.html;
+        tab.active = item.active == "true";
+        this.tabItems.push(tab);
+      }
+    };
+    this.tabItems = new Array();
+    if (dom.pricingTab) {
+      if (Array.isArray(dom.pricingTab)) {
+        dom.pricingTab.map(appendElem);
+      }
+      else {
+        appendElem(dom.pricingTab);
+      }
+    }
+  }
+  fireUpdateComponent() {
+    let element = this.el.shadowRoot.querySelector('#tab-container');
+    this.update.emit({
+      sender: this,
+      element: element
+    });
+  }
+  setIsMobileViewPort() {
+    this.isMobileViewPort = window.innerWidth < 768;
+    this.isDesktopViewPort = window.innerWidth > 1439;
+  }
+  getTabContentClassList(tab) {
+    return {
+      ['tab-content']: true,
+      ['active']: tab.active
+    };
+  }
+  handleTabClick(tab, index) {
+    if (tab && !tab.active) {
+      this.tabItems = this.tabItems.map((tabItem) => {
+        tabItem.active = tabItem.id == tab.id;
+        return tabItem;
+      });
+    }
+    this.tabChanged.emit({
+      sender: this,
+      selectedTab: tab,
+      selectedIndex: index,
+      tabItems: this.tabItems
+    });
+  }
+  getCurrentTabs() {
+    if (this.filterTag) {
+      return this.tabItems.filter((item) => {
+        return item.tag == this.filterTag;
+      });
+    }
+    else {
+      return this.tabItems;
+    }
+  }
+  renderTabs() {
+    let tabs = this.getCurrentTabs();
+    return (h("div", { class: "tabs" }, h("ptc-para", { styles: "p.primary-grey { margin: 1.5rem 0 .75rem 0; color: var(--color-gray-12); }", "font-size": this.isDesktopViewPort ? "x-small" : "small", "font-weight": this.isDesktopViewPort ? "w-4" : "w-5" }, this.tabLabel), h("div", { class: "attached" }, h("slot", { name: "attached" })), tabs && tabs.map((tab, index) => h("ptc-pricing-block", { "data-id": tab.id, active: tab.active, onClick: () => this.handleTabClick(tab, index) }, h("span", { slot: "left-text", innerHTML: tab.header }), h("span", { slot: "right-text", innerHTML: tab.label })))));
+  }
+  render() {
+    let tabs = this.getCurrentTabs();
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: "tab-container", class: "is-grid has-col-12 grid-large-col-gap-sm grid-large-col-gap-xs-0 p-8" }, h("div", { class: "is-col-6-md is-col-12" }, h("span", { class: "tag" }, this.productTag), h("span", { class: "product-name" }, h("slot", { name: "header" })), !this.isMobileViewPort && this.renderTabs()), h("div", { class: "is-col-6-md is-col-12 content-section" }, tabs && tabs.map((tab) => h("div", { "data-id": tab.id, class: this.getTabContentClassList(tab), innerHTML: tab.content }))), this.isMobileViewPort && (h("div", { class: "is-col-12" }, this.renderTabs())))));
+  }
+  static get is() { return "ptc-pricing-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-pricing-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-pricing-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "productTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sub title tag the shows in top left corner"
+        },
+        "attribute": "product-tag",
+        "reflect": false
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header of the pricing block"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "tabLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "the label above the tab selectors"
+        },
+        "attribute": "tab-label",
+        "reflect": false
+      },
+      "filterTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "filter tag to filter out options"
+        },
+        "attribute": "filter-tag",
+        "reflect": false
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabItems": {},
+      "isMobileViewPort": {},
+      "isDesktopViewPort": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabChanged",
+        "name": "tabChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "update",
+        "name": "update",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "setIsMobileViewPort",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}