@ptcwebops/ptcw-design 0.5.6 → 0.5.8

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

@@ -1,140 +1,140 @@
-import { Component, Host, h, Element, Listen } from '@stencil/core';
-export class PtcTabList {
-  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) {
-        tab.style.display = 'none';
-        activateDropDown = true;
-        hiddenTabs.push({
-          value: tab.getAttribute('name'),
-          text: tab.textContent
-        });
-      }
-    }
-    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();
-  }
-  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("div", { class: "tabs-content" },
-        h("slot", { name: "content" })),
-      h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })));
-  }
-  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 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 { Component, Host, h, Element, Listen } from '@stencil/core';
+export class PtcTabList {
+  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) {
+        tab.style.display = 'none';
+        activateDropDown = true;
+        hiddenTabs.push({
+          value: tab.getAttribute('name'),
+          text: tab.textContent
+        });
+      }
+    }
+    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();
+  }
+  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("div", { class: "tabs-content" },
+        h("slot", { name: "content" })),
+      h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })));
+  }
+  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 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-title/ptc-title.css

@@ -3,7 +3,10 @@ div.center {
 }
 div.center.dotted h1::before,
 div.center.dotted h2::before,
-div.center.dotted h3::before {
+div.center.dotted h3::before,
+div.center.dotted h4::before,
+div.center.dotted h5::before,
+div.center.dotted h6::before {
   left: 50%;
   transform: translateX(-50%);
 }
@@ -12,7 +15,10 @@ div.left {
 }
 div.left.dotted h1::before,
 div.left.dotted h2::before,
-div.left.dotted h3::before {
+div.left.dotted h3::before,
+div.left.dotted h4::before,
+div.left.dotted h5::before,
+div.left.dotted h6::before {
   left: 0%;
 }
 div.right {
@@ -20,7 +26,10 @@ div.right {
 }
 div.right.dotted h1::before,
 div.right.dotted h2::before,
-div.right.dotted h3::before {
+div.right.dotted h3::before,
+div.right.dotted h4::before,
+div.right.dotted h5::before,
+div.right.dotted h6::before {
   right: 0%;
 }
 div.inherit {
@@ -28,7 +37,10 @@ div.inherit {
 }
 div.dotted h1::before,
 div.dotted h2::before,
-div.dotted h3::before {
+div.dotted h3::before,
+div.dotted h4::before,
+div.dotted h5::before,
+div.dotted h6::before {
   content: "";
   position: absolute;
   top: -6px;
@@ -38,7 +50,10 @@ div.dotted h3::before {
 }
 div.solid h1::before,
 div.solid h2::before,
-div.solid h3::before {
+div.solid h3::before,
+div.solid h4::before,
+div.solid h5::before,
+div.solid h6::before {
   content: "";
   position: absolute;
   width: 100%;
@@ -49,7 +64,10 @@ div.solid h3::before {
 }
 div.solid h1::after,
 div.solid h2::after,
-div.solid h3::after {
+div.solid h3::after,
+div.solid h4::after,
+div.solid h5::after,
+div.solid h6::after {
   content: "";
   position: absolute;
   width: 20%;
@@ -60,7 +78,10 @@ div.solid h3::after {
 }
 div.is-standard h1,
 div.is-standard h2,
-div.is-standard h3 {
+div.is-standard h3,
+div.is-standard h4,
+div.is-standard h5,
+div.is-standard h6 {
   display: inline-block;
   position: relative;
 }
@@ -79,7 +100,10 @@ div.is-standard h2 {
 }
 div.is-plm-hub h1,
 div.is-plm-hub h2,
-div.is-plm-hub h3 {
+div.is-plm-hub h3,
+div.is-plm-hub h4,
+div.is-plm-hub h5,
+div.is-plm-hub h6 {
   display: inline-block;
   position: relative;
   margin-block-start: 0em;
@@ -92,6 +116,10 @@ div.margin-flush {
   margin-top: 0;
   margin-bottom: 0;
 }
+div.margin-flush h1, div.margin-flush h2, div.margin-flush h3, div.margin-flush h4, div.margin-flush h5 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 div.margin-top-2 {
   margin-top: var(--ptc-element-spacing-02);
   margin-bottom: 0;
@@ -148,91 +176,95 @@ div.margin-5 {
   margin-top: var(--ptc-element-spacing-05);
   margin-bottom: var(--ptc-element-spacing-05);
 }
+div.margin-5 h4 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 div.margin-6 {
   margin-top: var(--ptc-element-spacing-06);
   margin-bottom: var(--ptc-element-spacing-06);
 }
-div.green h1, div.green h2, div.green h3 {
+div.green h1, div.green h2, div.green h3, div.green h4, div.green h5, div.green h6 {
   text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-green-07);
 }
-div.blue h1, div.blue h2, div.blue h3 {
+div.blue h1, div.blue h2, div.blue h3, div.blue h4, div.blue h5, div.blue h6 {
   text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-blue-07);
 }
-div.red h1, div.red h2, div.red h3 {
+div.red h1, div.red h2, div.red h3, div.red h4, div.red h5, div.red h6 {
   text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-red-07);
 }
-div.orange h1, div.orange h2, div.orange h3 {
+div.orange h1, div.orange h2, div.orange h3, div.orange h4, div.orange h5, div.orange h6 {
   text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-orange-07);
 }
-div.slate-grey h1, div.slate-grey h2, div.slate-grey h3 {
+div.slate-grey h1, div.slate-grey h2, div.slate-grey h3, div.slate-grey h4, div.slate-grey h5, div.slate-grey h6 {
   text-shadow: 0px 0px var(--ptc-element-spacing-03) var(--color-grey-07);
 }
-div.w-3 h1, div.w-3 h2, div.w-3 h3 {
+div.w-3 h1, div.w-3 h2, div.w-3 h3, div.w-3 h4, div.w-3 h5, div.w-3 h6 {
   font-weight: var(--ptc-font-weight-thin);
 }
-div.w-4 h1, div.w-4 h2, div.w-4 h3 {
+div.w-4 h1, div.w-4 h2, div.w-4 h3, div.w-4 h4, div.w-4 h5, div.w-4 h6 {
   font-weight: var(--ptc-font-weight-regular);
 }
-div.w-5 h1, div.w-5 h2, div.w-5 h3 {
+div.w-5 h1, div.w-5 h2, div.w-5 h3, div.w-5 h4, div.w-5 h5, div.w-5 h6 {
   font-weight: var(--ptc-font-weight-medium);
 }
-div.w-6 h1, div.w-6 h2, div.w-6 h3 {
+div.w-6 h1, div.w-6 h2, div.w-6 h3, div.w-6 h4, div.w-6 h5, div.w-6 h6 {
   font-weight: var(--ptc-font-weight-semibold);
 }
-div.w-7 h1, div.w-7 h2, div.w-7 h3 {
+div.w-7 h1, div.w-7 h2, div.w-7 h3, div.w-7 h4, div.w-7 h5, div.w-7 h6 {
   font-weight: var(--ptc-font-weight-bold);
 }
-div.w-8 h1, div.w-8 h2, div.w-8 h3 {
+div.w-8 h1, div.w-8 h2, div.w-8 h3, div.w-8 h4, div.w-8 h5, div.w-8 h6 {
   font-weight: var(--ptc-font-weight-extrabold);
 }
-div.w-9 h1, div.w-9 h2, div.w-9 h3 {
+div.w-9 h1, div.w-9 h2, div.w-9 h3, div.w-9 h4, div.w-9 h5, div.w-9 h6 {
   font-weight: var(--ptc-font-weight-black);
 }
-div.xx-small h1, div.xx-small h2, div.xx-small h3 {
+div.xx-small h1, div.xx-small h2, div.xx-small h3, div.xx-small h4, div.xx-small h5, div.xx-small h6 {
   font-size: var(--ptc-font-size-xx-small);
 }
-div.x-small h1, div.x-small h2, div.x-small h3 {
+div.x-small h1, div.x-small h2, div.x-small h3, div.x-small h4, div.x-small h5, div.x-small h6 {
   font-size: var(--ptc-font-size-x-small);
 }
-div.small h1, div.small h2, div.small h3 {
+div.small h1, div.small h2, div.small h3, div.small h4, div.small h5, div.small h6 {
   font-size: var(--ptc-font-size-small);
 }
-div.medium h1, div.medium h2, div.medium h3 {
+div.medium h1, div.medium h2, div.medium h3, div.medium h4, div.medium h5, div.medium h6 {
   font-size: var(--ptc-font-size-medium);
 }
-div.large h1, div.large h2, div.large h3 {
+div.large h1, div.large h2, div.large h3, div.large h4, div.large h5, div.large h6 {
   font-size: var(--ptc-font-size-large);
 }
-div.x-large h1, div.x-large h2, div.x-large h3 {
+div.x-large h1, div.x-large h2, div.x-large h3, div.x-large h4, div.x-large h5, div.x-large h6 {
   font-size: var(--ptc-font-size-x-large);
 }
 div.xx-large h1, div.xx-large h2, div.xx-large h3 {
   font-size: var(--ptc-font-size-xx-large);
 }
-div.xxx-large h1, div.xxx-large h2, div.xxx-large h3 {
+div.xxx-large h1, div.xxx-large h2, div.xxx-large h3, div.xxx-large h4, div.xxx-large h5, div.xxx-large h6 {
   font-size: var(--ptc-font-size-xxx-large);
 }
-div.xxxx-large h1, div.xxxx-large h2, div.xxxx-large h3 {
+div.xxxx-large h1, div.xxxx-large h2, div.xxxx-large h3, div.xxxx-large h4, div.xxxx-large h5, div.xxxx-large h6 {
   font-size: var(--ptc-font-size-xxxx-large);
 }
-div.densest h1, div.densest h2, div.densest h3 {
+div.densest h1, div.densest h2, div.densest h3, div.densest h4, div.densest h5, div.densest h6 {
   line-height: var(--ptc-line-height-densest);
 }
-div.denser h1, div.denser h2, div.denser h3 {
+div.denser h1, div.denser h2, div.denser h3, div.denser h4, div.denser h5, div.denser h6 {
   line-height: var(--ptc-line-height-denser);
 }
-div.dense h1, div.dense h2, div.dense h3 {
+div.dense h1, div.dense h2, div.dense h3, div.dense h4, div.dense h5, div.dense h6 {
   line-height: var(--ptc-line-height-dense);
 }
-div.normal h1, div.normal h2, div.normal h3 {
+div.normal h1, div.normal h2, div.normal h3, div.normal h4, div.normal h5, div.normal h6 {
   line-height: var(--ptc-line-height-normal);
 }
-div.loose h1, div.loose h2, div.loose h3 {
+div.loose h1, div.loose h2, div.loose h3, div.loose h4, div.loose h5, div.loose h6 {
   line-height: var(--ptc-line-height-loose);
 }
-div.looser h1, div.looser h2, div.looser h3 {
+div.looser h1, div.looser h2, div.looser h3, div.looser h4, div.looser h5, div.looser h6 {
   line-height: var(--ptc-line-height-looser);
 }
-div.paragraph h1, div.paragraph h2, div.paragraph h3 {
+div.paragraph h1, div.paragraph h2, div.paragraph h3, div.paragraph h4, div.paragraph h5, div.paragraph h6 {
   line-height: var(--ptc-line-height-paragraph);
 }