@ptcwebops/ptcw-design 0.9.7 → 0.9.8

package/dist/collection/components/ptc-previous-url/ptc-previous-url.js

@@ -1,60 +1,60 @@
-import { Host, h } from '@stencil/core';
-export class PtcPreviousUrl {
-  constructor() {
-    this.href = undefined;
-    this.text = undefined;
-  }
-  render() {
-    return (h(Host, null, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)), h("slot", null)));
-  }
-  static get is() { return "ptc-previous-url"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-previous-url.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-previous-url.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text",
-        "reflect": false
-      }
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcPreviousUrl {
+  constructor() {
+    this.href = undefined;
+    this.text = undefined;
+  }
+  render() {
+    return (h(Host, null, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)), h("slot", null)));
+  }
+  static get is() { return "ptc-previous-url"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-previous-url.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-previous-url.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -1,70 +1,70 @@
-import { h, Host } from '@stencil/core';
-export class PtcPricingBlock {
-  constructor() {
-    this.active = undefined;
-    this.optionClicked = undefined;
-  }
-  onContentChange(content) {
-    console.log(content);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.active ? "is-active" : "" }, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "left-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active
-    };
-  }
-  static get is() { return "ptc-pricing-block"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-pricing-block.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-pricing-block.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active",
-        "reflect": false
-      },
-      "optionClicked": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "option-clicked",
-        "reflect": true
-      }
-    };
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcPricingBlock {
+  constructor() {
+    this.active = undefined;
+    this.optionClicked = undefined;
+  }
+  onContentChange(content) {
+    console.log(content);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: this.active ? "is-active" : "" }, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "left-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-pricing-block']: true,
+      ['active']: this.active
+    };
+  }
+  static get is() { return "ptc-pricing-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-pricing-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-pricing-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false
+      },
+      "optionClicked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "option-clicked",
+        "reflect": true
+      }
+    };
+  }
+}

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

@@ -772,4 +772,15 @@ ptc-pricing-block {
 }
 ptc-pricing-block.is-active {
   cursor: inherit;
+}
+
+.tabs {
+  position: relative;
+}
+
+.attached {
+  position: absolute;
+  top: 0.25rem;
+  right: 0;
+  z-index: 150;
 }

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

@@ -1,148 +1,217 @@
-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.tabItems = undefined;
-    this.isMobileViewPort = undefined;
-  }
-  componentWillLoad() {
-    this.setIsMobileViewPort();
-    this.loadTabData();
-  }
-  loadTabData() {
-    let dom = MapDOM(this.el);
-    this.tabItems = new Array();
-    if (dom.pricingTab) {
-      dom.pricingTab.map((item) => {
-        if (item) {
-          let tab = new TabItem();
-          tab.id = generateUUID();
-          tab.header = item.header;
-          tab.tag = item.productTag;
-          tab.content = item.html;
-          tab.active = item.active == "true";
-          this.tabItems.push(tab);
-        }
-      });
-    }
-  }
-  renderTabs() {
-    return (h("div", { class: "tabs" }, h("ptc-para", { "font-size": "small", "font-weight": "w-5" }, "Pricing Options:"), this.tabItems &&
-      this.tabItems.map((tab, index) => h("ptc-pricing-block", { "data-id": tab.id, active: tab.active, onClick: () => this.handleTabClick(tab, index) }, h("span", { slot: "left-text" }, tab.header), h("span", { slot: "right-text" }, tab.tag)))));
-  }
-  setIsMobileViewPort() {
-    this.isMobileViewPort = window.innerWidth < 768;
-  }
-  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
-    });
-  }
-  render() {
-    return (h(Host, null, h("div", { 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("ptc-title", { class: "product-name", type: 'h1', "text-align": 'left', "title-height": "densest", upperline: "no-upperline", "title-size": "xxxx-large", "title-margin": "margin-flush" }, this.header), !this.isMobileViewPort && this.renderTabs()), h("div", { class: "is-col-6-md is-col-12 content-section" }, this.tabItems &&
-      this.tabItems.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
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabItems": {},
-      "isMobileViewPort": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabChanged",
-        "name": "tabChanged",
-        "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.tabItems = undefined;
+    this.isMobileViewPort = undefined;
+  }
+  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);
+    this.tabItems = new Array();
+    if (dom.pricingTab) {
+      dom.pricingTab.map((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);
+        }
+      });
+    }
+  }
+  setIsMobileViewPort() {
+    this.isMobileViewPort = window.innerWidth < 768;
+  }
+  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", { "font-size": "small", "font-weight": "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" }, tab.header), h("span", { slot: "right-text" }, tab.label)))));
+  }
+  render() {
+    let tabs = this.getCurrentTabs();
+    return (h(Host, null, h("div", { 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("ptc-title", { class: "product-name", type: 'h1', "text-align": 'left', "title-height": "densest", upperline: "no-upperline", "title-size": "xxxx-large", "title-margin": "margin-flush" }, this.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
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabItems": {},
+      "isMobileViewPort": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabChanged",
+        "name": "tabChanged",
+        "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
+      }];
+  }
+}