@ptcwebops/ptcw-design 0.7.4 → 0.7.6

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

@@ -1,149 +1,149 @@
-import { Component, Host, h, Element, Listen, State } 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) {
-        let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
-        if (!isSelectedTab) {
-          tab.style.display = 'none';
-          activateDropDown = true;
-          hiddenTabs.push({
-            value: tab.getAttribute('name'),
-            text: tab.textContent,
-            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 { Component, Host, h, Element, Listen, State } 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) {
+        let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+        if (!isSelectedTab) {
+          tab.style.display = 'none';
+          activateDropDown = true;
+          hiddenTabs.push({
+            value: tab.getAttribute('name'),
+            text: tab.textContent,
+            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
+    }]; }
+}

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -1,129 +1,129 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcTextCopyWithBackground {
-  constructor() {
-    /**
-    * Type
-    * Specify  Type, default is text-copy-with-background
-    */
-    this.type = 'text-copy-with-background';
-    /**
-    * (optional) isBackgroundBlur: If true,it will add background blur image effect
-    */
-    this.isBackgroundBlur = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } },
-        h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })),
-      h("div", { class: "" },
-        h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }),
-        this.isBackgroundBlur &&
-          h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })),
-      h("div", { class: "copy-bg-overlay-layer" }),
-      h("div", { class: "content-wrap" },
-        h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.type]: true
-    };
-  }
-  static get is() { return "ptc-text-copy-with-background"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-text-copy-with-background.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-text-copy-with-background.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background'",
-        "resolved": "\"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Type\nSpecify  Type, default is text-copy-with-background"
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'text-copy-with-background'"
-    },
-    "backgroundImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Background image"
-      },
-      "attribute": "background-image",
-      "reflect": false
-    },
-    "ImageAltText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Image alt text"
-      },
-      "attribute": "image-alt-text",
-      "reflect": false
-    },
-    "topSlitBackgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body."
-      },
-      "attribute": "top-slit-background-color",
-      "reflect": false
-    },
-    "isBackgroundBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) isBackgroundBlur: If true,it will add background blur image effect"
-      },
-      "attribute": "is-background-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcTextCopyWithBackground {
+  constructor() {
+    /**
+    * Type
+    * Specify  Type, default is text-copy-with-background
+    */
+    this.type = 'text-copy-with-background';
+    /**
+    * (optional) isBackgroundBlur: If true,it will add background blur image effect
+    */
+    this.isBackgroundBlur = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } },
+        h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })),
+      h("div", { class: "" },
+        h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }),
+        this.isBackgroundBlur &&
+          h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })),
+      h("div", { class: "copy-bg-overlay-layer" }),
+      h("div", { class: "content-wrap" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.type]: true
+    };
+  }
+  static get is() { return "ptc-text-copy-with-background"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-text-copy-with-background.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-text-copy-with-background.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background'",
+        "resolved": "\"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Type\r\nSpecify  Type, default is text-copy-with-background"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'text-copy-with-background'"
+    },
+    "backgroundImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Background image"
+      },
+      "attribute": "background-image",
+      "reflect": false
+    },
+    "ImageAltText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Image alt text"
+      },
+      "attribute": "image-alt-text",
+      "reflect": false
+    },
+    "topSlitBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body."
+      },
+      "attribute": "top-slit-background-color",
+      "reflect": false
+    },
+    "isBackgroundBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) isBackgroundBlur: If true,it will add background blur image effect"
+      },
+      "attribute": "is-background-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -110,7 +110,7 @@ div.is-plm-hub h6 {
   margin-block-end: 0em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
-  color: var(--color-white);
+  color: var(--color-white) !important;
 }
 div.margin-flush {
   margin-top: 0;