@ptcwebops/ptcw-design 0.8.8 → 0.8.9

package/dist/collection/components/ptc-tab-list/ptc-tab-list.js

@@ -1,155 +1,177 @@
-import { Host, h } from '@stencil/core';
-export class PtcTabList {
-  constructor() {
-    this.selectedValue = undefined;
-  }
-  componentDidLoad() {
-    this.createGroup();
-    this.calculateHeaderTabsRendering();
-    /*const [group] = this.tabGroup;
-    this.selectGroup(group);*/
-  }
-  onSelectedTab(event) {
-    let self = this;
-    this.tabGroup.forEach(group => {
-      event.detail.then(res => {
-        if (group.header.name === res.name) {
-          self.selectGroup(group);
-        }
-      });
-    });
-  }
-  calculateHeaderTabsRendering() {
-    let header = this.host.querySelector('.tabs-header');
-    let dropdown = this.host.querySelector('.ellipsis-btn');
-    let tabs = header.children;
-    let activateDropDown = false;
-    let hiddenTabs = [];
-    header.classList.remove('active');
-    for (let index = 0; index < tabs.length; index++) {
-      tabs[index].style.removeProperty('display');
-    }
-    for (let index = tabs.length - 1; index >= 0; index--) {
-      let tab = tabs[index];
-      if (header.scrollWidth > header.clientWidth) {
-        let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
-        if (!isSelectedTab) {
-          tab.style.display = 'none';
-          let text = tab.querySelector('.header-content').textContent;
-          activateDropDown = true;
-          hiddenTabs.push({
-            value: tab.getAttribute('name'),
-            text: text,
-            isSelected: isSelectedTab
-          });
-        }
-      }
-    }
-    header.classList.add('active');
-    if (activateDropDown) {
-      dropdown.classList.add('active');
-      dropdown.dataItems = hiddenTabs.reverse();
-    }
-    else {
-      dropdown.classList.remove('active');
-      dropdown.dataItems = [];
-    }
-  }
-  createGroup() {
-    let self = this;
-    let headerComplete = false;
-    let contentComplete = false;
-    let headerCount = 0;
-    let contentCount = 0;
-    let headerData = [];
-    let contentData = [];
-    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
-    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
-      headerCount++;
-      if (headerCount === tabsHeaderEl.length) {
-        headerComplete = true;
-      }
-      headerData.push(res);
-    }));
-    this.tabsHeader = headerData;
-    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
-    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
-      contentCount++;
-      if (contentCount === tabsContentEl.length) {
-        contentComplete = true;
-      }
-      contentData.push(res);
-    }));
-    this.tabsContent = contentData;
-    let myInterval = setInterval(() => {
-      if (headerComplete && contentComplete) {
-        clearInterval(myInterval);
-        self.tabGroup = self.tabsHeader.map(header => {
-          const content = self.tabsContent.find(content => content.name === header.name);
-          return {
-            header: header,
-            content: content
-          };
-        });
-        const group = self.tabGroup[0];
-        self.selectGroup(group);
-      }
-    }, 100);
-  }
-  selectGroup(group) {
-    let self = this;
-    self.tabGroup.forEach(_ => {
-      _.header.unselect();
-      _.content.unselect();
-    });
-    group.header.select();
-    group.content.select();
-    self.selectedValue = group.header.name;
-    this.calculateHeaderTabsRendering();
-  }
-  onDropdownItemSelected(selectedItem) {
-    if (selectedItem) {
-      let selectedTabGroub = this.tabGroup.find((group) => {
-        return group.header.name == selectedItem.value;
-      });
-      if (selectedTabGroub) {
-        this.selectGroup(selectedTabGroub);
-      }
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
-  }
-  static get is() { return "ptc-tab-list"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-tab-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-tab-list.css"]
-    };
-  }
-  static get states() {
-    return {
-      "selectedValue": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "tabClicked",
-        "method": "onSelectedTab",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "calculateHeaderTabsRendering",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcTabList {
+  constructor() {
+    this.type = undefined;
+    this.selectedValue = undefined;
+  }
+  componentDidLoad() {
+    this.createGroup();
+    this.calculateHeaderTabsRendering();
+    /*const [group] = this.tabGroup;
+    this.selectGroup(group);*/
+  }
+  onSelectedTab(event) {
+    let self = this;
+    this.tabGroup.forEach(group => {
+      event.detail.then(res => {
+        if (group.header.name === res.name) {
+          self.selectGroup(group);
+        }
+      });
+    });
+  }
+  calculateHeaderTabsRendering() {
+    let header = this.host.querySelector('.tabs-header');
+    let dropdown = this.host.querySelector('.ellipsis-btn');
+    let tabs = header.children;
+    let activateDropDown = false;
+    let hiddenTabs = [];
+    header.classList.remove('active');
+    for (let index = 0; index < tabs.length; index++) {
+      tabs[index].style.removeProperty('display');
+    }
+    for (let index = tabs.length - 1; index >= 0; index--) {
+      let tab = tabs[index];
+      if (header.scrollWidth > header.clientWidth) {
+        let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+        if (!isSelectedTab) {
+          tab.style.display = 'none';
+          let text = tab.querySelector('.header-content').textContent;
+          activateDropDown = true;
+          hiddenTabs.push({
+            value: tab.getAttribute('name'),
+            text: text,
+            isSelected: isSelectedTab
+          });
+        }
+      }
+    }
+    header.classList.add('active');
+    if (activateDropDown) {
+      dropdown.classList.add('active');
+      dropdown.dataItems = hiddenTabs.reverse();
+    }
+    else {
+      dropdown.classList.remove('active');
+      dropdown.dataItems = [];
+    }
+  }
+  createGroup() {
+    let self = this;
+    let headerComplete = false;
+    let contentComplete = false;
+    let headerCount = 0;
+    let contentCount = 0;
+    let headerData = [];
+    let contentData = [];
+    const tabsHeaderEl = Array.from(this.host.querySelectorAll('tab-header'));
+    this.tabsHeader = tabsHeaderEl.map(el => el.getChild().then(res => {
+      headerCount++;
+      if (headerCount === tabsHeaderEl.length) {
+        headerComplete = true;
+      }
+      headerData.push(res);
+    }));
+    this.tabsHeader = headerData;
+    const tabsContentEl = Array.from(this.host.querySelectorAll('tab-content'));
+    this.tabsContent = tabsContentEl.map(el => el.getChild().then(res => {
+      contentCount++;
+      if (contentCount === tabsContentEl.length) {
+        contentComplete = true;
+      }
+      contentData.push(res);
+    }));
+    this.tabsContent = contentData;
+    let myInterval = setInterval(() => {
+      if (headerComplete && contentComplete) {
+        clearInterval(myInterval);
+        self.tabGroup = self.tabsHeader.map(header => {
+          const content = self.tabsContent.find(content => content.name === header.name);
+          return {
+            header: header,
+            content: content
+          };
+        });
+        const group = self.tabGroup[0];
+        self.selectGroup(group);
+      }
+    }, 100);
+  }
+  selectGroup(group) {
+    let self = this;
+    self.tabGroup.forEach(_ => {
+      _.header.unselect();
+      _.content.unselect();
+    });
+    group.header.select();
+    group.content.select();
+    self.selectedValue = group.header.name;
+    this.calculateHeaderTabsRendering();
+  }
+  onDropdownItemSelected(selectedItem) {
+    if (selectedItem) {
+      let selectedTabGroub = this.tabGroup.find((group) => {
+        return group.header.name == selectedItem.value;
+      });
+      if (selectedTabGroub) {
+        this.selectGroup(selectedTabGroub);
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+  }
+  static get is() { return "ptc-tab-list"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-tab-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-tab-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'tab-with-banner'",
+          "resolved": "\"default\" | \"tab-with-banner\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tab Type"
+        },
+        "attribute": "type",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selectedValue": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "tabClicked",
+        "method": "onSelectedTab",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "calculateHeaderTabsRendering",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

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

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

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  margin-top: var(--ptc-element-spacing-03);
+  box-sizing: border-box;
+}
+:host .ptc-pricing-block {
+  width: 100%;
+  background-color: var(--color-gray-02);
+  border-radius: var(--ptc-border-radius-standard);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-dense);
+  display: block;
+  transition: background-color var(--ptc-ease-inout) var(--ptc-transition-medium);
+}
+:host .ptc-pricing-block.active {
+  background-color: var(--color-gray-12);
+  color: var(--color-white);
+}
+:host .ptc-pricing-block:hover:not(.active) {
+  background-color: var(--color-gray-03);
+}
+:host .right-text {
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-extrabold);
+  line-height: var(--ptc-line-height-dense);
+  text-align: right;
+  float: right;
+  margin: 15px 20px 15px 15px;
+  display: block;
+}
+:host .left-text {
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-medium);
+  line-height: var(--ptc-line-height-dense);
+  text-align: left;
+  margin: 15px 15px 15px 20px;
+  display: inline-block;
+}
+
+.tabs-list {
+  border-bottom: 1px solid #dddddd;
+  padding: 0 5px;
+}
+
+.tab-button {
+  border: 0;
+  font-size: 14px;
+  padding: 8px;
+  outline: none;
+  cursor: pointer;
+}
+.tab-button:hover:not(:disabled):not(.active) {
+  border-bottom: 3px solid grey;
+}
+.tab-button:disabled {
+  opacity: 0.4;
+}
+.tab-button.active {
+  border-bottom: 3px solid blue;
+  font-weight: 600;
+}

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

@@ -0,0 +1,104 @@
+import { h } from '@stencil/core';
+export class Tabs {
+  constructor() {
+    this.tabs = [];
+  }
+  componentWillLoad() {
+    // Grab tabs from this component
+    this.tabs = Array.from(this.el.querySelectorAll('ptc-tab'));
+    if (this.tabs.length === 0) {
+      throw new Error('[ptc-tabs] Must have at least one tab');
+    }
+  }
+  async openTab(index) {
+    //Loops through tabs
+    if (index >= this.tabs.length) {
+      throw new Error(`[ptc-tabs] Index ${index} is out of bounds of tabs length`);
+    }
+    if (!this.tabs[index].disabled) {
+      this.tabs = this.tabs.map((tab, i) => {
+        tab.active = i === index;
+        return tab;
+      });
+      // How they react to change
+      this.tabChange.emit({ tabId: index });
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h("div", { class: classMap }, this.tabs.map((tab, index) => {
+      const tabClassMap = {
+        'tab-button': true,
+        active: tab.active
+      };
+      return [
+        // assigned properties
+        h("div", { role: "tab", class: tabClassMap, onClick: () => this.openTab(index) }, tab.label, tab.price, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "right-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" }))))
+      ];
+    })));
+  }
+  getCssClassMap() {
+    return {
+      'tabs-list': true
+    };
+  }
+  static get is() { return "ptc-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-tabs.css"]
+    };
+  }
+  static get states() {
+    return {
+      "tabs": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabChange",
+        "name": "tabChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "openTab": {
+        "complexType": {
+          "signature": "(index: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}