@ptcwebops/ptcw-design 1.6.9 → 1.7.1

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

@@ -20,7 +20,7 @@ export class PtcReadmore {
       p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
     });
   }
-  // Created this function to initialize the truncate function on specific elements like tabs 
+  // Created this function to initialize the truncate function on specific elements like tabs
   enableAddTruncatedClass(element) {
     const allTabHeaders = document.querySelectorAll(element);
     for (const element of Array.from(allTabHeaders)) {
@@ -52,7 +52,7 @@ export class PtcReadmore {
     this.checked = event.target.checked;
     // Getting cta element
     const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
-    // Updating the cta text 
+    // Updating the cta text
     this.checked
       ? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
       : cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;

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

@@ -4,7 +4,7 @@ ptc-tab-list {
   color: var(--color-gray-12);
 }
 ptc-tab-list.tab-with-banner {
-  background-color: #fff;
+  background-color: var(--color-white);
   padding: 20px 10px;
 }
 @media only screen and (min-width: 480px) {
@@ -42,11 +42,15 @@ ptc-tab-list.tab-with-banner .tabs-content p, ptc-tab-list.tab-with-banner .tabs
 }
 
 .ellipsis-btn {
-  position: absolute;
-  top: var(--ptc-element-spacing-01);
-  right: 1rem;
   display: none;
 }
+@media only screen and (min-width: 768px) {
+  .ellipsis-btn {
+    position: absolute;
+    top: var(--ptc-element-spacing-01);
+    right: 1rem;
+  }
+}
 .ellipsis-btn.active {
   display: block;
 }

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

@@ -1,9 +1,14 @@
 import { Host, h } from '@stencil/core';
+//import { forEach } from 'lodash';
 export class PtcTabList {
   constructor() {
     this.type = undefined;
+    this.isMobile = undefined;
     this.selectedValue = undefined;
   }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 768;
+  }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
@@ -26,15 +31,27 @@ export class PtcTabList {
     let tabs = header.children;
     let activateDropDown = false;
     let hiddenTabs = [];
+    this.isMobile = window.innerWidth < 768;
     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) {
+      let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+      if (this.isMobile) {
+        let text = tab.querySelector('.text-cont').textContent;
+        header.style.display = 'none';
+        activateDropDown = true;
+        hiddenTabs.push({
+          value: tab.getAttribute('name'),
+          text: text,
+          isSelected: isSelectedTab
+        });
+      }
+      else {
+        header.style.display = 'flex';
+        if (header.scrollWidth > header.clientWidth) {
           tab.style.display = 'none';
           let text = tab.querySelector('.text-cont').textContent;
           activateDropDown = true;
@@ -155,6 +172,7 @@ export class PtcTabList {
   }
   static get states() {
     return {
+      "isMobile": {},
       "selectedValue": {}
     };
   }

package/dist/collection/stories/ReadMore.stories.js

@@ -0,0 +1,100 @@
+
+import { html } from 'lit';
+export default {
+  title: 'Atoms/ptc-readmore',
+  tags: ['autodocs'],
+  component: Readmore,
+  argTypes: {
+    content: {
+      name: 'Read more content',
+      description: "Set content in the follwing textarea"
+    },
+    moreText : {
+      name: 'Read More *',
+      description: "Set read more label",
+      defaultValue: { summary: 'read more' }
+    },
+    lessText : {
+      name: 'Read Less',
+      description: "Set read less label. If read less label is not set then the it will be removed from component"
+    },
+
+    readMorePosition: {
+      name: 'Read more position',
+      description: 'Set the location of the "Read more label" below the text',
+      control: { type: 'select' },
+      options: ['left', 'right', 'center'],
+      defaultValue: { summary: 'right' }
+    },
+    visibleLines: {
+      name: 'Visible lines',
+      description: "Set the visible line from follwing options",
+      control: { type: 'select' },
+      options: ['line1','line2','line3','line4','line5' ,'line10'],
+      defaultValue: { summary: 'line2' }
+    },
+    visibleLinesCustom: {
+      name: 'Visible lines Custom',
+      description: "Set the visible line number",
+      control: { type: 'number'}
+    },
+    size: {
+      name: 'Size of the read more/less text',
+      description: "Set the size of the read more/less text",
+      control: {type: 'select'},
+      options: ['small','medium','large'],
+      defaultValue: { summary: 'small' }
+    },
+    color: {
+      name: 'Color: Read more text',
+      description: "Set the color of the read more/less text",
+      control: {type: 'select'},
+      options: ['blue','gray','green','initial'],
+      defaultValue: { summary: 'blue' }
+    },
+    isIcon: {
+      name: 'Arrow Icon',
+      description: "Set the arrow besides read more text",
+      control: {type: 'boolean'},
+      defaultValue: { summary: false }
+    },
+    display: {
+      name: 'Text Display css property',
+      description: "Set display propety inline ",
+      control: { type: 'select' },
+      options: ['inline', 'block'],
+      defaultValue: { summary: 'inline' },
+    }
+  },
+};
+
+ const Template = args => { return html `<ptc-readmore
+ more-text="${args.moreText}"
+ less-text="${args.lessText}"
+ size="${args.size}"
+ read-more-position="${args.readMorePosition}"
+ visible-lines="${args.visibleLines}"
+ visible-lines-custom="${args.visibleLinesCustom}"
+ color="${args.color}"
+ is-icon="${args.isIcon}"
+ display=${args.display}>
+  ${args.content}
+</ptc-readmore>`};
+
+export const Readmore = Template.bind({});
+Readmore.args={
+  moreText : 'Read more',
+  lessText : 'Read less',
+  readMorePosition: 'right',
+  visibleLines: 'line2',
+  visibleLinesCustom: 2,
+  size: 'small',
+  color: 'blue',
+  isIcon: false,
+  display: 'inline',
+  content: 'tes Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra.Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra.'
+}
+
+
+
+

package/dist/collection/stories/Tooltip.stories.js

@@ -0,0 +1,112 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-tooltip',
+  tags: ['autodocs'],
+  argTypes: {
+    textLines: {
+      name: 'Maximum lines',
+      description: "Set maximum length in lines of content",
+
+    },
+    maxLength: {
+      name: 'Maximum chars',
+      description: "Set maximum length in chars of content",
+      defaultValue: { summary: 45 }
+    },
+    position: {
+      name: 'Position',
+      description: "Set position of the the tooltip box",
+      control: { type: 'select' },
+      options: ['left', 'right', 'bottom', 'bottom-right', 'top'],
+      defaultValue: { summary: 'bottom' }
+    },
+    width: {
+      name: 'width',
+      description: "Fill-width will make the tooltip box full-width relative to its parent",
+      control: { type: 'select' },
+      options: ['full-width', 'default'],
+      defaultValue: { summary: 'default' }
+
+    },
+    theme: {
+      name: 'Theme',
+      description: "Set the theme",
+      control: { type: 'select' },
+      options: ['standard', 'danger'],
+      defaultValue: { summary: 'standard' },
+    },
+    zIndex: {
+      name: 'zIndex',
+      description: "Set the zIndex of tooltip box",
+      control: { type: 'select' },
+      options: ['z-auto', 'z-1', 'z-2', 'z-3', 'z-999'],
+      defaultValue: { summary: 'z-auto' },
+    },
+    hideOnMobile: {
+      name: 'Hide tooltip box on mobile',
+      description: "Set true to hide the tooltip on mobile",
+      control: { type: 'boolean' },
+      defaultValue: { summary: false },
+    },
+    textDisplay: {
+      name: 'Text Display css property',
+      description: "Set textDisplay propety inline or block for tooltip text",
+      control: { type: 'select' },
+      options: ['inline', 'block'],
+      defaultValue: { summary: 'inline' },
+    },
+    description: {
+      name: 'Tooltip content',
+      description: "Set content in the follwing textarea",
+      defaultValue: { summary: 'This is a tooltip text placeholder' },
+    },
+
+  }
+};
+
+const Template = args => {
+  return html  `<ptc-tooltip
+  text-display="${args.textDisplay}"
+  text-lines="${args.textLines}"
+  max-length="${args.maxLength}"
+  description="${args.description}"
+  position="${args.position}"
+  width="${args.width}"
+  zIndex="${args.zIndex}"
+  theme="${args.theme}"
+  hide-on-mobile="${args.hideOnMobile}"
+  ></ptc-tooltip>`
+};
+
+
+export const TooltipWithLinesLimit = Template.bind({});
+TooltipWithLinesLimit.args = {
+  textLines: 2,
+  position: 'bottom',
+  width: "default",
+  theme: "standard",
+  hideOnMobile: false,
+  zIndex: "z-auto",
+  textDisplay: "inline",
+  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum aliquet eleifend. Etiam condimentum suscipit vulputate. In tempus ante at eros elementum volutpat. Ut aliquam mattis velit, sed malesuada lorem. Donec eu posuere nisl, eget scelerisque lectus. Donec id nibh quis lectus euismod semper eget in sem. Ut vulputate cursus libero ut pharetra. Aliquam convallis vulputate dignissim. Mauris vel elit sit amet nibh porta cursus eu id urna.",
+
+}
+
+
+export const TooltipWithCharLimit = Template.bind({});
+TooltipWithCharLimit.args = {
+  maxLength: 45,
+  position: 'bottom',
+  width: "default",
+  theme: "standard",
+  hideOnMobile: false,
+  zIndex: "z-auto",
+  textDisplay: "inline",
+  description: "Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac, tincidunt massa. Cras dictum ",
+
+}
+
+
+
+

package/dist/custom-elements/index.js

@@ -23889,7 +23889,7 @@ const PtcDynamicCard$1 = class extends HTMLElement$1 {
   static get style() { return ptcDynamicCardCss; }
 };
 
-const ptcEllipsisDropdownCss = ".ellipsis-icon{border:1px solid #6E717C;border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ptc-ellipsis-dropdown{position:relative;display:inline-block;padding:0 7px 7px;cursor:pointer}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:0;left:auto;min-width:max-content;width:100%}.show .dropdown-container{display:inline-block}";
+const ptcEllipsisDropdownCss = ".ellipsis-icon{border:1px solid #6E717C;border-radius:2px;vertical-align:middle;height:18px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.ellipsis-icon:hover{background-color:var(--color-gray-04);border-color:var(--color-gray-04)}.ellipsis-icon icon-asset{display:inline-block}.ellipsis-icon icon-asset svg{margin:0 auto;display:block}.ellipsis-icon.active{background-color:var(--color-green-07);border-color:var(--color-green-07)}.ellipsis-icon.active::after{content:\"\";width:32px;height:2px;display:inline-block;background-color:var(--color-green-07);position:absolute;bottom:-9.6px}.ptc-ellipsis-dropdown{position:relative;display:inline-block;cursor:pointer;padding:0 0 14px 0;border-bottom:2px solid var(--color-green-07);margin:0 1rem -1px 1rem;box-sizing:border-box}@media only screen and (min-width: 768px){.ptc-ellipsis-dropdown{padding:0 7px 7px;border-bottom:none;margin:0}}.ptc-ellipsis-dropdown .mob-drop{color:var(--color-gray-10);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-p);font-family:\"Raleway\";font-style:normal;display:flex;align-items:center}.ptc-ellipsis-dropdown .mob-drop svg{display:inline-block;vertical-align:middle;margin:4px 0px 0px 8px;min-width:12px}.dropdown-container{display:none;margin-top:16px;box-shadow:0 6px 16px rgba(0, 0, 0, 0.24);border-radius:4px;position:absolute;z-index:1010;background:var(--color-white);padding:0.8rem 0;right:auto;left:0;min-width:max-content;width:100%}@media only screen and (min-width: 768px){.dropdown-container{right:0;left:auto}}.dropdown-container .selected-drop .dropdown-item span{position:relative;font-weight:var(--ptc-font-weight-bold)}.dropdown-container .selected-drop .dropdown-item span::before{content:\"\";width:2px;height:60%;background:var(--color-green-07);display:block;left:16px;position:absolute;top:20%}.show .dropdown-container{display:inline-block}";
 
 const PtcEllipsisDropdown$1 = class extends HTMLElement$1 {
   constructor() {
@@ -23900,6 +23900,7 @@ const PtcEllipsisDropdown$1 = class extends HTMLElement$1 {
     this.dataItems = [];
     this.selectedTab = undefined;
     this.isDropdownOpen = false;
+    this.isMobile = undefined;
   }
   dropdownToggle(e) {
     e.currentTarget.classList.toggle("show");
@@ -23915,15 +23916,22 @@ const PtcEllipsisDropdown$1 = class extends HTMLElement$1 {
       this.isDropdownOpen = false;
     }
   }
+  handleResize() {
+    this.isMobile = window.innerWidth < 768;
+  }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 768;
+  }
   render() {
-    let activeTab = this.dataItems.find(z => z.value == this.selectedTab);
+    let activeTab = this.dataItems.find(z => z.isSelected == true);
     let isActive = false;
     if (activeTab) {
       isActive = true;
     }
-    return (h$1("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, h$1("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h$1("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' })), h$1("div", { class: "dropdown-container" }, h$1("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
+    return (h$1("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) }, this.isMobile ? (h$1("div", { class: 'mob-drop' }, h$1("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h$1("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h$1("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h$1("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h$1("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h$1("div", { class: "dropdown-container" }, h$1("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
       let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
-      return (h$1("dropdown-item", { class: activeClass }, h$1("span", { onClick: (e) => {
+      let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
+      return (h$1("dropdown-item", { class: activeClass + activeDropdown }, h$1("span", { onClick: (e) => {
           e.preventDefault();
           this.onItemSelected(dataItem);
         } }, dataItem.text)));
@@ -25787,7 +25795,7 @@ const PtcPagenation$1 = class extends HTMLElement$1 {
   static get style() { return ptcPagenationCss; }
 };
 
-const ptcParaCss = ":host{position:relative;z-index:1}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}";
+const ptcParaCss = ":host{position:relative;z-index:1}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.htmlquote-para{font-size:var(--ptc-font-size-small)}@media only screen and (min-width: 992px){p.htmlquote-para{font-size:var(--ptc-font-size-large)}}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}";
 
 const PtcPara$1 = class extends HTMLElement$1 {
   constructor() {
@@ -26661,7 +26669,7 @@ const PtcReadmore$1 = class extends HTMLElement$1 {
       p.classList[p.scrollHeight > p.clientHeight ? 'add' : 'remove']('truncated');
     });
   }
-  // Created this function to initialize the truncate function on specific elements like tabs 
+  // Created this function to initialize the truncate function on specific elements like tabs
   enableAddTruncatedClass(element) {
     const allTabHeaders = document.querySelectorAll(element);
     for (const element of Array.from(allTabHeaders)) {
@@ -26692,7 +26700,7 @@ const PtcReadmore$1 = class extends HTMLElement$1 {
     this.checked = event.target.checked;
     // Getting cta element
     const cta = this.el.shadowRoot.querySelector('.read-more-cta-label');
-    // Updating the cta text 
+    // Updating the cta text
     this.checked
       ? cta.innerHTML = `<span> ${this.lessText ? this.lessText : ''} </span>`
       : cta.innerHTML = `<span> ${this.moreText ? this.moreText : ''}</span>`;
@@ -27383,15 +27391,19 @@ const Tab = class extends HTMLElement$1 {
   static get style() { return ptcTabsCss$1; }
 };
 
-const ptcTabListCss = "ptc-tab-list{display:block;position:relative;color:var(--color-gray-12)}ptc-tab-list.tab-with-banner{background-color:#fff;padding:20px 10px}@media only screen and (min-width: 480px){ptc-tab-list.tab-with-banner{padding:30px}}ptc-tab-list.tab-with-banner .tabs-content{padding:30px 0 0 0}ptc-tab-list.tab-with-banner .tabs-content p,ptc-tab-list.tab-with-banner .tabs-content span,ptc-tab-list.tab-with-banner .tabs-content h1,ptc-tab-list.tab-with-banner .tabs-content h2,ptc-tab-list.tab-with-banner .tabs-content h3,ptc-tab-list.tab-with-banner .tabs-content h4,ptc-tab-list.tab-with-banner .tabs-content h5,ptc-tab-list.tab-with-banner .tabs-content h6,ptc-tab-list.tab-with-banner .tabs-content ul,ptc-tab-list.tab-with-banner .tabs-content li,ptc-tab-list.tab-with-banner .tabs-content table{color:var(--color-gray-12)}.tabs-header-container{width:100%;border-bottom:2px solid var(--color-gray-02);position:relative}.tabs-header{display:flex;padding-left:1.5rem;padding-right:1.5rem;transition:opacity ease-out 250ms;opacity:0;width:90%}.tabs-header.active{opacity:1}.tabs-content{padding:40px 28px 28px}.ellipsis-btn{position:absolute;top:var(--ptc-element-spacing-01);right:1rem;display:none}.ellipsis-btn.active{display:block}tab-header{padding-right:48px}";
+const ptcTabListCss = "ptc-tab-list{display:block;position:relative;color:var(--color-gray-12)}ptc-tab-list.tab-with-banner{background-color:var(--color-white);padding:20px 10px}@media only screen and (min-width: 480px){ptc-tab-list.tab-with-banner{padding:30px}}ptc-tab-list.tab-with-banner .tabs-content{padding:30px 0 0 0}ptc-tab-list.tab-with-banner .tabs-content p,ptc-tab-list.tab-with-banner .tabs-content span,ptc-tab-list.tab-with-banner .tabs-content h1,ptc-tab-list.tab-with-banner .tabs-content h2,ptc-tab-list.tab-with-banner .tabs-content h3,ptc-tab-list.tab-with-banner .tabs-content h4,ptc-tab-list.tab-with-banner .tabs-content h5,ptc-tab-list.tab-with-banner .tabs-content h6,ptc-tab-list.tab-with-banner .tabs-content ul,ptc-tab-list.tab-with-banner .tabs-content li,ptc-tab-list.tab-with-banner .tabs-content table{color:var(--color-gray-12)}.tabs-header-container{width:100%;border-bottom:2px solid var(--color-gray-02);position:relative}.tabs-header{display:flex;padding-left:1.5rem;padding-right:1.5rem;transition:opacity ease-out 250ms;opacity:0;width:90%}.tabs-header.active{opacity:1}.tabs-content{padding:40px 28px 28px}.ellipsis-btn{display:none}@media only screen and (min-width: 768px){.ellipsis-btn{position:absolute;top:var(--ptc-element-spacing-01);right:1rem}}.ellipsis-btn.active{display:block}tab-header{padding-right:48px}";
 
 const PtcTabList$1 = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.type = undefined;
+    this.isMobile = undefined;
     this.selectedValue = undefined;
   }
+  componentWillLoad() {
+    this.isMobile = window.innerWidth < 768;
+  }
   componentDidLoad() {
     this.createGroup();
     this.calculateHeaderTabsRendering();
@@ -27414,15 +27426,27 @@ const PtcTabList$1 = class extends HTMLElement$1 {
     let tabs = header.children;
     let activateDropDown = false;
     let hiddenTabs = [];
+    this.isMobile = window.innerWidth < 768;
     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) {
+      let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
+      if (this.isMobile) {
+        let text = tab.querySelector('.text-cont').textContent;
+        header.style.display = 'none';
+        activateDropDown = true;
+        hiddenTabs.push({
+          value: tab.getAttribute('name'),
+          text: text,
+          isSelected: isSelectedTab
+        });
+      }
+      else {
+        header.style.display = 'flex';
+        if (header.scrollWidth > header.clientWidth) {
           tab.style.display = 'none';
           let text = tab.querySelector('.text-cont').textContent;
           activateDropDown = true;
@@ -28145,7 +28169,7 @@ const PtcContainer = /*@__PURE__*/proxyCustomElement(PtcContainer$1, [1,"ptc-con
 const PtcDate = /*@__PURE__*/proxyCustomElement(PtcDate$1, [1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateColor":[1,"date-color"],"dateStyles":[1,"date-styles"],"dataSize":[1,"data-size"],"formatOptions":[1,"format-options"]}]);
 const PtcDropdown = /*@__PURE__*/proxyCustomElement(PtcDropdown$1, [1,"ptc-dropdown",{"theme":[1],"label":[1],"listItems":[16],"toggle":[32],"selectedItem":[32]},[[4,"click","offClick"]]]);
 const PtcDynamicCard = /*@__PURE__*/proxyCustomElement(PtcDynamicCard$1, [1,"ptc-dynamic-card",{"cardType":[1,"card-type"],"cardTitle":[1,"card-title"],"cardImgSrc":[1,"card-img-src"],"cardImgAlt":[1,"card-img-alt"],"cardScreen":[1,"card-screen"],"isExpanded":[4,"is-expanded"],"overlayExists":[32]}]);
-const PtcEllipsisDropdown = /*@__PURE__*/proxyCustomElement(PtcEllipsisDropdown$1, [1,"ptc-ellipsis-dropdown",{"dataItems":[16],"selectedTab":[1,"selected-tab"],"isDropdownOpen":[32]},[[4,"click","offClick"]]]);
+const PtcEllipsisDropdown = /*@__PURE__*/proxyCustomElement(PtcEllipsisDropdown$1, [1,"ptc-ellipsis-dropdown",{"dataItems":[16],"selectedTab":[1,"selected-tab"],"isDropdownOpen":[32],"isMobile":[32]},[[4,"click","offClick"],[9,"resize","handleResize"]]]);
 const PtcFilterTag = /*@__PURE__*/proxyCustomElement(PtcFilterTag$1, [1,"ptc-filter-tag",{"theme":[1],"iconColorMap":[32]}]);
 const PtcHero = /*@__PURE__*/proxyCustomElement(PtcHero$1, [1,"ptc-hero",{"heroType":[1,"hero-type"],"bgUrl":[1,"bg-url"],"contentAlignment":[1,"content-alignment"]}]);
 const PtcHeroFooterCta = /*@__PURE__*/proxyCustomElement(PtcHeroFooterCta$1, [6,"ptc-hero-footer-cta",{"ctaTitle":[1,"cta-title"],"description":[1],"backgroundImage":[1,"background-image"]}]);
@@ -28198,7 +28222,7 @@ const PtcSubnav = /*@__PURE__*/proxyCustomElement(PtcSubnav$1, [1,"ptc-subnav",{
 const PtcSubnavCard = /*@__PURE__*/proxyCustomElement(PtcSubnavCard$1, [1,"ptc-subnav-card",{"cardTitle":[1,"card-title"],"cardHref":[1,"card-href"],"cardImageSrc":[1,"card-image-src"],"cardImageAlt":[1,"card-image-alt"],"ctaText":[1,"cta-text"],"ctaIconAssetName":[1,"cta-icon-asset-name"]}]);
 const PtcSvgBtn = /*@__PURE__*/proxyCustomElement(PtcSvgBtn$1, [1,"ptc-svg-btn",{"svgName":[1,"svg-name"],"display":[1],"zIndex":[1,"z-index"],"styles":[2]}]);
 const PtcTab = /*@__PURE__*/proxyCustomElement(Tab, [1,"ptc-tab",{"optionClicked":[1540,"option-clicked"],"label":[1],"price":[1],"active":[4],"disabled":[516]}]);
-const PtcTabList = /*@__PURE__*/proxyCustomElement(PtcTabList$1, [4,"ptc-tab-list",{"type":[1],"selectedValue":[32]},[[0,"tabClicked","onSelectedTab"],[9,"resize","calculateHeaderTabsRendering"]]]);
+const PtcTabList = /*@__PURE__*/proxyCustomElement(PtcTabList$1, [4,"ptc-tab-list",{"type":[1],"isMobile":[32],"selectedValue":[32]},[[0,"tabClicked","onSelectedTab"],[9,"resize","calculateHeaderTabsRendering"]]]);
 const PtcTabs = /*@__PURE__*/proxyCustomElement(Tabs, [1,"ptc-tabs",{"tabs":[32]}]);
 const PtcTextCopyWithBackground = /*@__PURE__*/proxyCustomElement(PtcTextCopyWithBackground$1, [1,"ptc-text-copy-with-background",{"type":[1],"backgroundImage":[1,"background-image"],"ImageAltText":[1,"image-alt-text"],"topSlitBackgroundColor":[1,"top-slit-background-color"],"slitPosition":[1,"slit-position"],"isBackgroundBlur":[4,"is-background-blur"],"overlay":[4]}]);
 const PtcTitle = /*@__PURE__*/proxyCustomElement(PtcTitle$1, [6,"ptc-title",{"isPlmHub":[4,"is-plm-hub"],"type":[1],"textAlign":[1,"text-align"],"upperline":[1],"titleShadow":[1,"title-shadow"],"titleColor":[1,"title-color"],"titleMargin":[1,"title-margin"],"titleWeight":[1,"title-weight"],"titleSize":[1,"title-size"],"titleHeight":[1,"title-height"],"styles":[1],"ellipsisLineCutoff":[2,"ellipsis-line-cutoff"],"titleDisplay":[1,"title-display"]}]);

package/dist/esm/icon-asset_16.entry.js

@@ -176,7 +176,7 @@ const PtcButton = class {
 };
 PtcButton.style = ptcButtonCss;
 
-const ptcParaCss = ":host{position:relative;z-index:1}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}";
+const ptcParaCss = ":host{position:relative;z-index:1}:host(.white){color:var(--color-white)}:host(.z-1){z-index:1}:host(.z-2){z-index:2}:host(.z-3){z-index:3}:host(.z-99){z-index:99}:host(.z-999){z-index:999}:host(.z-auto){z-index:auto}p.default{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;}p.main{text-shadow:0 3px 6px var(--color-white);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10)}p.primary-grey{color:var(--color-gray-10)}p.gray-darker{color:var(--color-gray-11)}p.white{color:var(--color-white)}p.xxx-small{font-size:var(--ptc-font-size-xxx-small)}p.xx-small{font-size:var(--ptc-font-size-xx-small)}p.x-small{font-size:var(--ptc-font-size-x-small)}p.small{font-size:var(--ptc-font-size-small)}p.medium{font-size:var(--ptc-font-size-medium)}p.large{font-size:var(--ptc-font-size-large)}p.x-large{font-size:var(--ptc-font-size-x-large)}p.xx-large{font-size:var(--ptc-font-size-xx-large)}p.xxx-large{font-size:var(--ptc-font-size-xxx-large)}p.xxxx-large{font-size:var(--ptc-font-size-xxxx-large)}p.htmlquote-para{font-size:var(--ptc-font-size-small)}@media only screen and (min-width: 992px){p.htmlquote-para{font-size:var(--ptc-font-size-large)}}p.w-3{font-weight:var(--ptc-font-weight-thin)}p.w-4{font-weight:var(--ptc-font-weight-regular)}p.w-5{font-weight:var(--ptc-font-weight-medium)}p.w-6{font-weight:var(--ptc-font-weight-semibold)}p.w-7{font-weight:var(--ptc-font-weight-bold)}p.w-8{font-weight:var(--ptc-font-weight-extrabold)}p.w-9{font-weight:var(--ptc-font-weight-black)}p.margin-flush{margin-top:0;margin-bottom:0}p.margin-top-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:0}p.margin-top-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}p.margin-top-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}p.margin-top-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}p.margin-top-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}p.margin-top-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}p.margin-bottom-1{margin-bottom:var(--ptc-element-spacing-01);margin-top:0}p.margin-bottom-2{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}p.margin-bottom-3{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}p.margin-bottom-4{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}p.margin-bottom-5{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}p.margin-bottom-6{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}p.margin-1{margin-top:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-01)}p.margin-2{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}p.margin-3{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}p.margin-4{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}p.margin-5{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}p.margin-6{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}p.line-height-densest{line-height:var(--ptc-line-height-densest)}p.line-height-denser{line-height:var(--ptc-line-height-denser)}p.line-height-p{line-height:var(--ptc-line-height-p)}p.line-height-dense{line-height:var(--ptc-line-height-dense)}p.line-height-normal{line-height:var(--ptc-line-height-normal)}p.line-height-loose{line-height:var(--ptc-line-height-loose)}p.line-height-looser{line-height:var(--ptc-line-height-looser)}p.left{text-align:left}p.right{text-align:right}p.center{text-align:center}p.justify{text-align:justify}p.announcement{text-transform:uppercase;font-size:var(--ptc-font-size-small);color:var(--color-gray-07);line-height:var(--ptc-line-height-looser);letter-spacing:var(--ptc-letter-spacing-loose)}p.ellipsis-boxing{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word}";
 
 const PtcPara = class {
   constructor(hostRef) {