@ptcwebops/ptcw-design 0.8.3 → 0.8.6

package/dist/esm/ptc-tab-list.entry.js

@@ -1,131 +1,131 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-0c73b51e.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-40bc29fc.js';
 
 const ptcTabListCss = "ptc-tab-list{display:block;position:relative}.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:85%}.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 PtcTabList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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" }))));
-  }
-  get host() { return getElement(this); }
-};
+const PtcTabList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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" }))));
+  }
+  get host() { return getElement(this); }
+};
 PtcTabList.style = ptcTabListCss;
 
 export { PtcTabList as ptc_tab_list };

package/dist/esm/ptc-text-copy-with-background.entry.js

@@ -1,27 +1,32 @@
-import { r as registerInstance, h, H as Host } from './index-0c73b51e.js';
+import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
 
-const ptcTextCopyWithBackgroundCss = ":host{display:block;position:relative;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.55}@media only screen and (min-width: 1200px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-03)) var(--ptc-layout-spacing-03)}}:host(.tab-cta-with-background){min-height:400px;padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center}}@media only screen and (min-width: 1200px){:host(.tab-cta-with-background){padding:var(--ptc-element-spacing-08)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}";
+const ptcTextCopyWithBackgroundCss = ":host{display:block;position:relative;width:100%;padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);color:var(--color-white)}@media only screen and (min-width: 768px){:host{padding:var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-06) 0}}@media only screen and (min-width: 1200px){:host{padding:var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03)}}:host .content-wrap{position:relative}:host .tcb-top-slit{fill:#f3f3f3;transform:scale(1.5, -1);position:absolute;top:-1px;right:80px;z-index:99;display:none}@media only screen and (min-width: 992px){:host .tcb-top-slit{display:block}}:host .bg-img-filter{-webkit-filter:url(#blur);filter:url(#blur);-webkit-mask:-webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));-webkit-mask:linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));-webkit-filter:blur(7px)}:host .copy-bg-image{top:0;left:0;height:100%;width:100%;position:absolute;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 992px){:host .copy-bg-image{display:block}}:host .copy-bg-overlay-layer{position:absolute;top:0;left:0;height:100%;width:100%;background:var(--color-black);opacity:0.55}@media only screen and (min-width: 1200px){:host(.hero-footer-cta){padding:calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-03)) var(--ptc-layout-spacing-03)}}:host(.tab-cta-with-background){min-height:400px;padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background){display:flex;align-items:center}}@media only screen and (min-width: 1200px){:host(.tab-cta-with-background){padding:var(--ptc-element-spacing-08)}}:host(.tab-cta-with-background) .copy-bg-overlay-layer{background:initial;opacity:1;background-image:linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%)}@media only screen and (min-width: 992px){:host(.tab-cta-with-background) .copy-bg-overlay-layer{background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%)}}:host(.bottom-right) .tcb-top-slit{top:auto;bottom:0;transform:scale(1.5, 1.5)}:host(.case-studies){min-height:25rem;height:auto;margin-bottom:10rem;display:flex;align-items:center}@media only screen and (min-width: 768px){:host(.case-studies){min-height:33.75rem;height:auto;margin-bottom:0;padding-top:var(--ptc-layout-spacing-06)}}:host(.case-studies) .card-wrap{position:relative;border:1px solid transparent;width:100%;height:100%;max-width:540px;bottom:-13rem}@media only screen and (min-width: 768px){:host(.case-studies) .card-wrap{bottom:auto}}:host(.case-studies) .card-wrap::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;top:0px;left:0px;animation:widthAnimate 0.2s linear 0.2s 1 forwards}:host(.case-studies) .card-wrap::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;top:0px;right:0px;animation:heightAnimate 0.2s linear 0.4s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border{border:1px solid transparent;position:absolute;left:-1px;right:0;bottom:0px;top:-1px;width:100%;height:100%;box-shadow:var(--ptc-shadow-x-small)}:host(.case-studies) .card-wrap .card-animated-border::after{position:absolute;width:0;height:1px;content:\"\";background:#fff;bottom:0px;right:0px;animation:widthAnimate 0.2s linear 0.6s 1 forwards}:host(.case-studies) .card-wrap .card-animated-border::before{position:absolute;width:1px;height:0;content:\"\";background:#fff;bottom:0px;left:0px;animation:heightAnimate 0.2s linear 0.8s 1 forwards}:host(.case-studies) .card-wrap .card-content{opacity:0;animation:fadeIn 0.5s ease-in 0.9s 1 forwards;background-color:transparent;width:100%;height:100%}:host(.case-studies) .card-wrap .card-content .card-layout{padding:var(--ptc-layout-spacing-04);background-color:#fff}@keyframes widthAnimate{0%{width:0}100%{width:100%}}@keyframes heightAnimate{0%{height:0}100%{height:100%}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}:host(.case-studies) .ptc-container-lg{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 480px){:host(.case-studies) .ptc-container-lg{padding-left:var(--ptc-layout-spacing-03);padding-right:var(--ptc-layout-spacing-03)}}@media only screen and (min-width: 768px){:host(.case-studies) .ptc-container-lg{padding-left:var(--ptc-layout-spacing-04);padding-right:var(--ptc-layout-spacing-04)}}@media only screen and (min-width: 992px){:host(.case-studies) .ptc-container-lg{padding-left:var(--ptc-element-spacing-08);padding-right:var(--ptc-element-spacing-08)}}@media only screen and (min-width: 1980px){:host(.case-studies) .ptc-container-lg{padding-left:0;padding-right:0;max-width:1900px}}";
 
-const PtcTextCopyWithBackground = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = 'text-copy-with-background';
-    this.backgroundImage = undefined;
-    this.ImageAltText = undefined;
-    this.topSlitBackgroundColor = undefined;
-    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
-    };
-  }
-};
+const PtcTextCopyWithBackground = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = 'text-copy-with-background';
+    this.backgroundImage = undefined;
+    this.ImageAltText = undefined;
+    this.topSlitBackgroundColor = undefined;
+    this.slitPosition = 'top-right';
+    this.isBackgroundBlur = false;
+    this.overlay = true;
+  }
+  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 })), this.overlay &&
+      h("div", { class: "copy-bg-overlay-layer" }), h("div", { class: "content-wrap" }, this.type == "case-studies" &&
+      h("div", { class: "ptc-container-lg" }, h("div", { class: "card-wrap" }, h("div", { class: "card-animated-border" }), h("div", { class: "card-content" }, h("div", { class: "card-layout" }, h("slot", { name: 'card-content' }))))), h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.type]: true,
+      [this.slitPosition]: true
+    };
+  }
+};
 PtcTextCopyWithBackground.style = ptcTextCopyWithBackgroundCss;
 
 export { PtcTextCopyWithBackground as ptc_text_copy_with_background };

package/dist/esm/ptc-title.entry.js

@@ -1,72 +1,74 @@
-import { r as registerInstance, h, H as Host } from './index-0c73b51e.js';
+import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
 
-const ptcTitleCss = "div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before,div.center.dotted.sc-ptc-title h4.sc-ptc-title::before,div.center.dotted.sc-ptc-title h5.sc-ptc-title::before,div.center.dotted.sc-ptc-title h6.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before,div.left.dotted.sc-ptc-title h4.sc-ptc-title::before,div.left.dotted.sc-ptc-title h5.sc-ptc-title::before,div.left.dotted.sc-ptc-title h6.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before,div.right.dotted.sc-ptc-title h4.sc-ptc-title::before,div.right.dotted.sc-ptc-title h5.sc-ptc-title::before,div.right.dotted.sc-ptc-title h6.sc-ptc-title::before{right:0%}div.inherit.sc-ptc-title{text-align:inherit}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before,div.dotted.sc-ptc-title h4.sc-ptc-title::before,div.dotted.sc-ptc-title h5.sc-ptc-title::before,div.dotted.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed var(--color-green-07)}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before,div.solid.sc-ptc-title h4.sc-ptc-title::before,div.solid.sc-ptc-title h5.sc-ptc-title::before,div.solid.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-07);opacity:0.9;left:0px}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after,div.solid.sc-ptc-title h4.sc-ptc-title::after,div.solid.sc-ptc-title h5.sc-ptc-title::after,div.solid.sc-ptc-title h6.sc-ptc-title::after{content:\"\";position:absolute;width:20%;height:2px;background-color:var(--color-green-07);top:-2px;left:0px}div.is-standard.sc-ptc-title h1.sc-ptc-title,div.is-standard.sc-ptc-title h2.sc-ptc-title,div.is-standard.sc-ptc-title h3.sc-ptc-title,div.is-standard.sc-ptc-title h4.sc-ptc-title,div.is-standard.sc-ptc-title h5.sc-ptc-title,div.is-standard.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative}div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}div.is-plm-hub.sc-ptc-title h1.sc-ptc-title,div.is-plm-hub.sc-ptc-title h2.sc-ptc-title,div.is-plm-hub.sc-ptc-title h3.sc-ptc-title,div.is-plm-hub.sc-ptc-title h4.sc-ptc-title,div.is-plm-hub.sc-ptc-title h5.sc-ptc-title,div.is-plm-hub.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px;color:var(--color-white) !important}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-flush.sc-ptc-title h1.sc-ptc-title,div.margin-flush.sc-ptc-title h2.sc-ptc-title,div.margin-flush.sc-ptc-title h3.sc-ptc-title,div.margin-flush.sc-ptc-title h4.sc-ptc-title,div.margin-flush.sc-ptc-title h5.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-top-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}div.margin-top-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}div.margin-top-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}div.margin-top-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}div.margin-top-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}div.margin-bottom-2.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}div.margin-bottom-3.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}div.margin-bottom-4.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}div.margin-bottom-5.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}div.margin-bottom-6.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}div.margin-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}div.margin-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}div.margin-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}div.margin-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}div.margin-5.sc-ptc-title h4.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}div.green.sc-ptc-title h1.sc-ptc-title,div.green.sc-ptc-title h2.sc-ptc-title,div.green.sc-ptc-title h3.sc-ptc-title,div.green.sc-ptc-title h4.sc-ptc-title,div.green.sc-ptc-title h5.sc-ptc-title,div.green.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-green-07)}div.blue.sc-ptc-title h1.sc-ptc-title,div.blue.sc-ptc-title h2.sc-ptc-title,div.blue.sc-ptc-title h3.sc-ptc-title,div.blue.sc-ptc-title h4.sc-ptc-title,div.blue.sc-ptc-title h5.sc-ptc-title,div.blue.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-blue-07)}div.red.sc-ptc-title h1.sc-ptc-title,div.red.sc-ptc-title h2.sc-ptc-title,div.red.sc-ptc-title h3.sc-ptc-title,div.red.sc-ptc-title h4.sc-ptc-title,div.red.sc-ptc-title h5.sc-ptc-title,div.red.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-red-07)}div.orange.sc-ptc-title h1.sc-ptc-title,div.orange.sc-ptc-title h2.sc-ptc-title,div.orange.sc-ptc-title h3.sc-ptc-title,div.orange.sc-ptc-title h4.sc-ptc-title,div.orange.sc-ptc-title h5.sc-ptc-title,div.orange.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-orange-07)}div.slate-grey.sc-ptc-title h1.sc-ptc-title,div.slate-grey.sc-ptc-title h2.sc-ptc-title,div.slate-grey.sc-ptc-title h3.sc-ptc-title,div.slate-grey.sc-ptc-title h4.sc-ptc-title,div.slate-grey.sc-ptc-title h5.sc-ptc-title,div.slate-grey.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-grey-07)}div.w-3.sc-ptc-title h1.sc-ptc-title,div.w-3.sc-ptc-title h2.sc-ptc-title,div.w-3.sc-ptc-title h3.sc-ptc-title,div.w-3.sc-ptc-title h4.sc-ptc-title,div.w-3.sc-ptc-title h5.sc-ptc-title,div.w-3.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-thin)}div.w-4.sc-ptc-title h1.sc-ptc-title,div.w-4.sc-ptc-title h2.sc-ptc-title,div.w-4.sc-ptc-title h3.sc-ptc-title,div.w-4.sc-ptc-title h4.sc-ptc-title,div.w-4.sc-ptc-title h5.sc-ptc-title,div.w-4.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-regular)}div.w-5.sc-ptc-title h1.sc-ptc-title,div.w-5.sc-ptc-title h2.sc-ptc-title,div.w-5.sc-ptc-title h3.sc-ptc-title,div.w-5.sc-ptc-title h4.sc-ptc-title,div.w-5.sc-ptc-title h5.sc-ptc-title,div.w-5.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-medium)}div.w-6.sc-ptc-title h1.sc-ptc-title,div.w-6.sc-ptc-title h2.sc-ptc-title,div.w-6.sc-ptc-title h3.sc-ptc-title,div.w-6.sc-ptc-title h4.sc-ptc-title,div.w-6.sc-ptc-title h5.sc-ptc-title,div.w-6.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-semibold)}div.w-7.sc-ptc-title h1.sc-ptc-title,div.w-7.sc-ptc-title h2.sc-ptc-title,div.w-7.sc-ptc-title h3.sc-ptc-title,div.w-7.sc-ptc-title h4.sc-ptc-title,div.w-7.sc-ptc-title h5.sc-ptc-title,div.w-7.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-bold)}div.w-8.sc-ptc-title h1.sc-ptc-title,div.w-8.sc-ptc-title h2.sc-ptc-title,div.w-8.sc-ptc-title h3.sc-ptc-title,div.w-8.sc-ptc-title h4.sc-ptc-title,div.w-8.sc-ptc-title h5.sc-ptc-title,div.w-8.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-extrabold)}div.w-9.sc-ptc-title h1.sc-ptc-title,div.w-9.sc-ptc-title h2.sc-ptc-title,div.w-9.sc-ptc-title h3.sc-ptc-title,div.w-9.sc-ptc-title h4.sc-ptc-title,div.w-9.sc-ptc-title h5.sc-ptc-title,div.w-9.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-black)}div.xx-small.sc-ptc-title h1.sc-ptc-title,div.xx-small.sc-ptc-title h2.sc-ptc-title,div.xx-small.sc-ptc-title h3.sc-ptc-title,div.xx-small.sc-ptc-title h4.sc-ptc-title,div.xx-small.sc-ptc-title h5.sc-ptc-title,div.xx-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-small)}div.x-small.sc-ptc-title h1.sc-ptc-title,div.x-small.sc-ptc-title h2.sc-ptc-title,div.x-small.sc-ptc-title h3.sc-ptc-title,div.x-small.sc-ptc-title h4.sc-ptc-title,div.x-small.sc-ptc-title h5.sc-ptc-title,div.x-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-small)}div.small.sc-ptc-title h1.sc-ptc-title,div.small.sc-ptc-title h2.sc-ptc-title,div.small.sc-ptc-title h3.sc-ptc-title,div.small.sc-ptc-title h4.sc-ptc-title,div.small.sc-ptc-title h5.sc-ptc-title,div.small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-small)}div.medium.sc-ptc-title h1.sc-ptc-title,div.medium.sc-ptc-title h2.sc-ptc-title,div.medium.sc-ptc-title h3.sc-ptc-title,div.medium.sc-ptc-title h4.sc-ptc-title,div.medium.sc-ptc-title h5.sc-ptc-title,div.medium.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-medium)}div.large.sc-ptc-title h1.sc-ptc-title,div.large.sc-ptc-title h2.sc-ptc-title,div.large.sc-ptc-title h3.sc-ptc-title,div.large.sc-ptc-title h4.sc-ptc-title,div.large.sc-ptc-title h5.sc-ptc-title,div.large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-large)}div.x-large.sc-ptc-title h1.sc-ptc-title,div.x-large.sc-ptc-title h2.sc-ptc-title,div.x-large.sc-ptc-title h3.sc-ptc-title,div.x-large.sc-ptc-title h4.sc-ptc-title,div.x-large.sc-ptc-title h5.sc-ptc-title,div.x-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}@media only screen and (min-width: 768px){div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}@media only screen and (min-width: 768px){div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}}div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 768px){div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.densest.sc-ptc-title h1.sc-ptc-title,div.densest.sc-ptc-title h2.sc-ptc-title,div.densest.sc-ptc-title h3.sc-ptc-title,div.densest.sc-ptc-title h4.sc-ptc-title,div.densest.sc-ptc-title h5.sc-ptc-title,div.densest.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-densest)}div.denser.sc-ptc-title h1.sc-ptc-title,div.denser.sc-ptc-title h2.sc-ptc-title,div.denser.sc-ptc-title h3.sc-ptc-title,div.denser.sc-ptc-title h4.sc-ptc-title,div.denser.sc-ptc-title h5.sc-ptc-title,div.denser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-denser)}div.dense.sc-ptc-title h1.sc-ptc-title,div.dense.sc-ptc-title h2.sc-ptc-title,div.dense.sc-ptc-title h3.sc-ptc-title,div.dense.sc-ptc-title h4.sc-ptc-title,div.dense.sc-ptc-title h5.sc-ptc-title,div.dense.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-dense)}div.normal.sc-ptc-title h1.sc-ptc-title,div.normal.sc-ptc-title h2.sc-ptc-title,div.normal.sc-ptc-title h3.sc-ptc-title,div.normal.sc-ptc-title h4.sc-ptc-title,div.normal.sc-ptc-title h5.sc-ptc-title,div.normal.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-normal)}div.loose.sc-ptc-title h1.sc-ptc-title,div.loose.sc-ptc-title h2.sc-ptc-title,div.loose.sc-ptc-title h3.sc-ptc-title,div.loose.sc-ptc-title h4.sc-ptc-title,div.loose.sc-ptc-title h5.sc-ptc-title,div.loose.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-loose)}div.looser.sc-ptc-title h1.sc-ptc-title,div.looser.sc-ptc-title h2.sc-ptc-title,div.looser.sc-ptc-title h3.sc-ptc-title,div.looser.sc-ptc-title h4.sc-ptc-title,div.looser.sc-ptc-title h5.sc-ptc-title,div.looser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-looser)}div.paragraph.sc-ptc-title h1.sc-ptc-title,div.paragraph.sc-ptc-title h2.sc-ptc-title,div.paragraph.sc-ptc-title h3.sc-ptc-title,div.paragraph.sc-ptc-title h4.sc-ptc-title,div.paragraph.sc-ptc-title h5.sc-ptc-title,div.paragraph.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}div.black.sc-ptc-title h1.sc-ptc-title,div.black.sc-ptc-title h2.sc-ptc-title,div.black.sc-ptc-title h3.sc-ptc-title,div.black.sc-ptc-title h4.sc-ptc-title,div.black.sc-ptc-title h5.sc-ptc-title,div.black.sc-ptc-title h6.sc-ptc-title{color:var(--color-black)}div.white.sc-ptc-title h1.sc-ptc-title,div.white.sc-ptc-title h2.sc-ptc-title,div.white.sc-ptc-title h3.sc-ptc-title,div.white.sc-ptc-title h4.sc-ptc-title,div.white.sc-ptc-title h5.sc-ptc-title,div.white.sc-ptc-title h6.sc-ptc-title{color:var(--color-white)}div.gray.sc-ptc-title h1.sc-ptc-title,div.gray.sc-ptc-title h2.sc-ptc-title,div.gray.sc-ptc-title h3.sc-ptc-title,div.gray.sc-ptc-title h4.sc-ptc-title,div.gray.sc-ptc-title h5.sc-ptc-title,div.gray.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-10)}div.ellipsis-boxing.sc-ptc-title h1.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h2.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h3.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h4.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h5.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h6.sc-ptc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}";
+const ptcTitleCss = "div.center.sc-ptc-title{text-align:center}div.center.dotted.sc-ptc-title h1.sc-ptc-title::before,div.center.dotted.sc-ptc-title h2.sc-ptc-title::before,div.center.dotted.sc-ptc-title h3.sc-ptc-title::before,div.center.dotted.sc-ptc-title h4.sc-ptc-title::before,div.center.dotted.sc-ptc-title h5.sc-ptc-title::before,div.center.dotted.sc-ptc-title h6.sc-ptc-title::before{left:50%;transform:translateX(-50%)}div.left.sc-ptc-title{text-align:left}div.left.dotted.sc-ptc-title h1.sc-ptc-title::before,div.left.dotted.sc-ptc-title h2.sc-ptc-title::before,div.left.dotted.sc-ptc-title h3.sc-ptc-title::before,div.left.dotted.sc-ptc-title h4.sc-ptc-title::before,div.left.dotted.sc-ptc-title h5.sc-ptc-title::before,div.left.dotted.sc-ptc-title h6.sc-ptc-title::before{left:0%}div.right.sc-ptc-title{text-align:right}div.right.dotted.sc-ptc-title h1.sc-ptc-title::before,div.right.dotted.sc-ptc-title h2.sc-ptc-title::before,div.right.dotted.sc-ptc-title h3.sc-ptc-title::before,div.right.dotted.sc-ptc-title h4.sc-ptc-title::before,div.right.dotted.sc-ptc-title h5.sc-ptc-title::before,div.right.dotted.sc-ptc-title h6.sc-ptc-title::before{right:0%}div.inherit.sc-ptc-title{text-align:inherit}div.dotted.sc-ptc-title h1.sc-ptc-title::before,div.dotted.sc-ptc-title h2.sc-ptc-title::before,div.dotted.sc-ptc-title h3.sc-ptc-title::before,div.dotted.sc-ptc-title h4.sc-ptc-title::before,div.dotted.sc-ptc-title h5.sc-ptc-title::before,div.dotted.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;top:-6px;width:30%;display:block;border-top:3px dashed var(--color-green-07)}div.solid.sc-ptc-title h1.sc-ptc-title,div.solid.sc-ptc-title h2.sc-ptc-title,div.solid.sc-ptc-title h3.sc-ptc-title,div.solid.sc-ptc-title h4.sc-ptc-title,div.solid.sc-ptc-title h5.sc-ptc-title,div.solid.sc-ptc-title h6.sc-ptc-title{padding-top:4px}div.solid.sc-ptc-title h1.sc-ptc-title::before,div.solid.sc-ptc-title h2.sc-ptc-title::before,div.solid.sc-ptc-title h3.sc-ptc-title::before,div.solid.sc-ptc-title h4.sc-ptc-title::before,div.solid.sc-ptc-title h5.sc-ptc-title::before,div.solid.sc-ptc-title h6.sc-ptc-title::before{content:\"\";position:absolute;width:100%;height:0.7px;background-color:var(--color-gray-03);opacity:0.9;left:0px}div.solid.sc-ptc-title h1.sc-ptc-title::after,div.solid.sc-ptc-title h2.sc-ptc-title::after,div.solid.sc-ptc-title h3.sc-ptc-title::after,div.solid.sc-ptc-title h4.sc-ptc-title::after,div.solid.sc-ptc-title h5.sc-ptc-title::after,div.solid.sc-ptc-title h6.sc-ptc-title::after{content:\"\";position:absolute;width:56px;height:2px;background-color:var(--color-green-07);top:2px;left:0px}div.is-standard.sc-ptc-title h1.sc-ptc-title,div.is-standard.sc-ptc-title h2.sc-ptc-title,div.is-standard.sc-ptc-title h3.sc-ptc-title,div.is-standard.sc-ptc-title h4.sc-ptc-title,div.is-standard.sc-ptc-title h5.sc-ptc-title,div.is-standard.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative}div.is-standard.sc-ptc-title h1.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0px;color:var(--color-gray-10)}div.is-standard.sc-ptc-title h2.sc-ptc-title{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-extrabold);color:var(--color-gray-10)}div.is-plm-hub.sc-ptc-title h1.sc-ptc-title,div.is-plm-hub.sc-ptc-title h2.sc-ptc-title,div.is-plm-hub.sc-ptc-title h3.sc-ptc-title,div.is-plm-hub.sc-ptc-title h4.sc-ptc-title,div.is-plm-hub.sc-ptc-title h5.sc-ptc-title,div.is-plm-hub.sc-ptc-title h6.sc-ptc-title{display:inline-block;position:relative;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px;color:var(--color-white) !important}div.margin-flush.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-flush.sc-ptc-title h1.sc-ptc-title,div.margin-flush.sc-ptc-title h2.sc-ptc-title,div.margin-flush.sc-ptc-title h3.sc-ptc-title,div.margin-flush.sc-ptc-title h4.sc-ptc-title,div.margin-flush.sc-ptc-title h5.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-top-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:0}div.margin-top-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:0}div.margin-top-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:0}div.margin-top-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:0}div.margin-top-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:0}div.margin-bottom-2.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-02);margin-top:0}div.margin-bottom-3.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-03);margin-top:0}div.margin-bottom-4.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-04);margin-top:0}div.margin-bottom-5.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-05);margin-top:0}div.margin-bottom-6.sc-ptc-title{margin-bottom:var(--ptc-element-spacing-06);margin-top:0}div.margin-2.sc-ptc-title{margin-top:var(--ptc-element-spacing-02);margin-bottom:var(--ptc-element-spacing-02)}div.margin-3.sc-ptc-title{margin-top:var(--ptc-element-spacing-03);margin-bottom:var(--ptc-element-spacing-03)}div.margin-4.sc-ptc-title{margin-top:var(--ptc-element-spacing-04);margin-bottom:var(--ptc-element-spacing-04)}div.margin-5.sc-ptc-title{margin-top:var(--ptc-element-spacing-05);margin-bottom:var(--ptc-element-spacing-05)}div.margin-5.sc-ptc-title h4.sc-ptc-title{margin-top:0;margin-bottom:0}div.margin-6.sc-ptc-title{margin-top:var(--ptc-element-spacing-06);margin-bottom:var(--ptc-element-spacing-06)}div.green.sc-ptc-title h1.sc-ptc-title,div.green.sc-ptc-title h2.sc-ptc-title,div.green.sc-ptc-title h3.sc-ptc-title,div.green.sc-ptc-title h4.sc-ptc-title,div.green.sc-ptc-title h5.sc-ptc-title,div.green.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-green-07)}div.blue.sc-ptc-title h1.sc-ptc-title,div.blue.sc-ptc-title h2.sc-ptc-title,div.blue.sc-ptc-title h3.sc-ptc-title,div.blue.sc-ptc-title h4.sc-ptc-title,div.blue.sc-ptc-title h5.sc-ptc-title,div.blue.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-blue-07)}div.red.sc-ptc-title h1.sc-ptc-title,div.red.sc-ptc-title h2.sc-ptc-title,div.red.sc-ptc-title h3.sc-ptc-title,div.red.sc-ptc-title h4.sc-ptc-title,div.red.sc-ptc-title h5.sc-ptc-title,div.red.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-red-07)}div.orange.sc-ptc-title h1.sc-ptc-title,div.orange.sc-ptc-title h2.sc-ptc-title,div.orange.sc-ptc-title h3.sc-ptc-title,div.orange.sc-ptc-title h4.sc-ptc-title,div.orange.sc-ptc-title h5.sc-ptc-title,div.orange.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-orange-07)}div.slate-grey.sc-ptc-title h1.sc-ptc-title,div.slate-grey.sc-ptc-title h2.sc-ptc-title,div.slate-grey.sc-ptc-title h3.sc-ptc-title,div.slate-grey.sc-ptc-title h4.sc-ptc-title,div.slate-grey.sc-ptc-title h5.sc-ptc-title,div.slate-grey.sc-ptc-title h6.sc-ptc-title{text-shadow:0px 0px var(--ptc-element-spacing-03) var(--color-grey-07)}div.w-3.sc-ptc-title h1.sc-ptc-title,div.w-3.sc-ptc-title h2.sc-ptc-title,div.w-3.sc-ptc-title h3.sc-ptc-title,div.w-3.sc-ptc-title h4.sc-ptc-title,div.w-3.sc-ptc-title h5.sc-ptc-title,div.w-3.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-thin)}div.w-4.sc-ptc-title h1.sc-ptc-title,div.w-4.sc-ptc-title h2.sc-ptc-title,div.w-4.sc-ptc-title h3.sc-ptc-title,div.w-4.sc-ptc-title h4.sc-ptc-title,div.w-4.sc-ptc-title h5.sc-ptc-title,div.w-4.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-regular)}div.w-5.sc-ptc-title h1.sc-ptc-title,div.w-5.sc-ptc-title h2.sc-ptc-title,div.w-5.sc-ptc-title h3.sc-ptc-title,div.w-5.sc-ptc-title h4.sc-ptc-title,div.w-5.sc-ptc-title h5.sc-ptc-title,div.w-5.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-medium)}div.w-6.sc-ptc-title h1.sc-ptc-title,div.w-6.sc-ptc-title h2.sc-ptc-title,div.w-6.sc-ptc-title h3.sc-ptc-title,div.w-6.sc-ptc-title h4.sc-ptc-title,div.w-6.sc-ptc-title h5.sc-ptc-title,div.w-6.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-semibold)}div.w-7.sc-ptc-title h1.sc-ptc-title,div.w-7.sc-ptc-title h2.sc-ptc-title,div.w-7.sc-ptc-title h3.sc-ptc-title,div.w-7.sc-ptc-title h4.sc-ptc-title,div.w-7.sc-ptc-title h5.sc-ptc-title,div.w-7.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-bold)}div.w-8.sc-ptc-title h1.sc-ptc-title,div.w-8.sc-ptc-title h2.sc-ptc-title,div.w-8.sc-ptc-title h3.sc-ptc-title,div.w-8.sc-ptc-title h4.sc-ptc-title,div.w-8.sc-ptc-title h5.sc-ptc-title,div.w-8.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-extrabold)}div.w-9.sc-ptc-title h1.sc-ptc-title,div.w-9.sc-ptc-title h2.sc-ptc-title,div.w-9.sc-ptc-title h3.sc-ptc-title,div.w-9.sc-ptc-title h4.sc-ptc-title,div.w-9.sc-ptc-title h5.sc-ptc-title,div.w-9.sc-ptc-title h6.sc-ptc-title{font-weight:var(--ptc-font-weight-black)}div.xx-small.sc-ptc-title h1.sc-ptc-title,div.xx-small.sc-ptc-title h2.sc-ptc-title,div.xx-small.sc-ptc-title h3.sc-ptc-title,div.xx-small.sc-ptc-title h4.sc-ptc-title,div.xx-small.sc-ptc-title h5.sc-ptc-title,div.xx-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-small)}div.x-small.sc-ptc-title h1.sc-ptc-title,div.x-small.sc-ptc-title h2.sc-ptc-title,div.x-small.sc-ptc-title h3.sc-ptc-title,div.x-small.sc-ptc-title h4.sc-ptc-title,div.x-small.sc-ptc-title h5.sc-ptc-title,div.x-small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-small)}div.small.sc-ptc-title h1.sc-ptc-title,div.small.sc-ptc-title h2.sc-ptc-title,div.small.sc-ptc-title h3.sc-ptc-title,div.small.sc-ptc-title h4.sc-ptc-title,div.small.sc-ptc-title h5.sc-ptc-title,div.small.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-small)}div.medium.sc-ptc-title h1.sc-ptc-title,div.medium.sc-ptc-title h2.sc-ptc-title,div.medium.sc-ptc-title h3.sc-ptc-title,div.medium.sc-ptc-title h4.sc-ptc-title,div.medium.sc-ptc-title h5.sc-ptc-title,div.medium.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-medium)}div.large.sc-ptc-title h1.sc-ptc-title,div.large.sc-ptc-title h2.sc-ptc-title,div.large.sc-ptc-title h3.sc-ptc-title,div.large.sc-ptc-title h4.sc-ptc-title,div.large.sc-ptc-title h5.sc-ptc-title,div.large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-large)}div.x-large.sc-ptc-title h1.sc-ptc-title,div.x-large.sc-ptc-title h2.sc-ptc-title,div.x-large.sc-ptc-title h3.sc-ptc-title,div.x-large.sc-ptc-title h4.sc-ptc-title,div.x-large.sc-ptc-title h5.sc-ptc-title,div.x-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-x-large)}@media only screen and (min-width: 768px){div.xx-large.sc-ptc-title h1.sc-ptc-title,div.xx-large.sc-ptc-title h2.sc-ptc-title,div.xx-large.sc-ptc-title h3.sc-ptc-title,div.xx-large.sc-ptc-title h4.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}}div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}@media only screen and (min-width: 768px){div.xxx-large.sc-ptc-title h1.sc-ptc-title,div.xxx-large.sc-ptc-title h2.sc-ptc-title,div.xxx-large.sc-ptc-title h3.sc-ptc-title,div.xxx-large.sc-ptc-title h4.sc-ptc-title,div.xxx-large.sc-ptc-title h5.sc-ptc-title,div.xxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}}div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxx-large)}@media only screen and (min-width: 768px){div.xxxx-large.sc-ptc-title h1.sc-ptc-title,div.xxxx-large.sc-ptc-title h2.sc-ptc-title,div.xxxx-large.sc-ptc-title h3.sc-ptc-title,div.xxxx-large.sc-ptc-title h4.sc-ptc-title,div.xxxx-large.sc-ptc-title h5.sc-ptc-title,div.xxxx-large.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}}div.xx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xx-large)}div.xxxx-large-allbp.sc-ptc-title h1.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h2.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h3.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h4.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h5.sc-ptc-title,div.xxxx-large-allbp.sc-ptc-title h6.sc-ptc-title{font-size:var(--ptc-font-size-xxxx-large)}div.densest.sc-ptc-title h1.sc-ptc-title,div.densest.sc-ptc-title h2.sc-ptc-title,div.densest.sc-ptc-title h3.sc-ptc-title,div.densest.sc-ptc-title h4.sc-ptc-title,div.densest.sc-ptc-title h5.sc-ptc-title,div.densest.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-densest)}div.denser.sc-ptc-title h1.sc-ptc-title,div.denser.sc-ptc-title h2.sc-ptc-title,div.denser.sc-ptc-title h3.sc-ptc-title,div.denser.sc-ptc-title h4.sc-ptc-title,div.denser.sc-ptc-title h5.sc-ptc-title,div.denser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-denser)}div.dense.sc-ptc-title h1.sc-ptc-title,div.dense.sc-ptc-title h2.sc-ptc-title,div.dense.sc-ptc-title h3.sc-ptc-title,div.dense.sc-ptc-title h4.sc-ptc-title,div.dense.sc-ptc-title h5.sc-ptc-title,div.dense.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-dense)}div.normal.sc-ptc-title h1.sc-ptc-title,div.normal.sc-ptc-title h2.sc-ptc-title,div.normal.sc-ptc-title h3.sc-ptc-title,div.normal.sc-ptc-title h4.sc-ptc-title,div.normal.sc-ptc-title h5.sc-ptc-title,div.normal.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-normal)}div.loose.sc-ptc-title h1.sc-ptc-title,div.loose.sc-ptc-title h2.sc-ptc-title,div.loose.sc-ptc-title h3.sc-ptc-title,div.loose.sc-ptc-title h4.sc-ptc-title,div.loose.sc-ptc-title h5.sc-ptc-title,div.loose.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-loose)}div.looser.sc-ptc-title h1.sc-ptc-title,div.looser.sc-ptc-title h2.sc-ptc-title,div.looser.sc-ptc-title h3.sc-ptc-title,div.looser.sc-ptc-title h4.sc-ptc-title,div.looser.sc-ptc-title h5.sc-ptc-title,div.looser.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-looser)}div.paragraph.sc-ptc-title h1.sc-ptc-title,div.paragraph.sc-ptc-title h2.sc-ptc-title,div.paragraph.sc-ptc-title h3.sc-ptc-title,div.paragraph.sc-ptc-title h4.sc-ptc-title,div.paragraph.sc-ptc-title h5.sc-ptc-title,div.paragraph.sc-ptc-title h6.sc-ptc-title{line-height:var(--ptc-line-height-paragraph)}div.black.sc-ptc-title h1.sc-ptc-title,div.black.sc-ptc-title h2.sc-ptc-title,div.black.sc-ptc-title h3.sc-ptc-title,div.black.sc-ptc-title h4.sc-ptc-title,div.black.sc-ptc-title h5.sc-ptc-title,div.black.sc-ptc-title h6.sc-ptc-title{color:var(--color-black)}div.white.sc-ptc-title h1.sc-ptc-title,div.white.sc-ptc-title h2.sc-ptc-title,div.white.sc-ptc-title h3.sc-ptc-title,div.white.sc-ptc-title h4.sc-ptc-title,div.white.sc-ptc-title h5.sc-ptc-title,div.white.sc-ptc-title h6.sc-ptc-title{color:var(--color-white)}div.gray.sc-ptc-title h1.sc-ptc-title,div.gray.sc-ptc-title h2.sc-ptc-title,div.gray.sc-ptc-title h3.sc-ptc-title,div.gray.sc-ptc-title h4.sc-ptc-title,div.gray.sc-ptc-title h5.sc-ptc-title,div.gray.sc-ptc-title h6.sc-ptc-title{color:var(--color-gray-10)}div.ellipsis-boxing.sc-ptc-title h1.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h2.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h3.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h4.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h5.sc-ptc-title,div.ellipsis-boxing.sc-ptc-title h6.sc-ptc-title{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;padding-bottom:0}div.block.sc-ptc-title h1.sc-ptc-title,div.block.sc-ptc-title h2.sc-ptc-title,div.block.sc-ptc-title h3.sc-ptc-title,div.block.sc-ptc-title h4.sc-ptc-title,div.block.sc-ptc-title h5.sc-ptc-title,div.block.sc-ptc-title h6.sc-ptc-title{display:block}";
 
-const PtcTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isPlmHub = false;
-    this.type = 'h2';
-    this.textAlign = undefined;
-    this.upperline = 'dotted';
-    this.titleShadow = undefined;
-    this.titleColor = 'gray';
-    this.titleMargin = undefined;
-    this.titleWeight = undefined;
-    this.titleSize = undefined;
-    this.titleHeight = 'paragraph';
-    this.styles = undefined;
-    this.ellipsisLineCutoff = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const cutOff = this.getLineCuttoff();
-    let TagType;
-    switch (this.type) {
-      case 'h1':
-        TagType = 'h1';
-        break;
-      case 'h3':
-        TagType = 'h3';
-        break;
-      case 'h4':
-        TagType = 'h4';
-        break;
-      case 'h5':
-        TagType = 'h5';
-        break;
-      case 'h6':
-        TagType = 'h6';
-        break;
-      default:
-        TagType = 'h2';
-    }
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.textAlign]: !!this.textAlign ? true : false,
-      [this.upperline]: true,
-      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
-      [this.titleMargin]: !!this.titleMargin ? true : false,
-      [this.titleShadow]: !!this.titleShadow ? true : false,
-      [this.titleWeight]: !!this.titleWeight ? true : false,
-      [this.titleSize]: !!this.titleSize ? true : false,
-      [this.titleHeight]: !!this.titleHeight ? true : false,
-      [this.titleColor]: !!this.titleColor ? true : false,
-      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0
-    };
-  }
-  getLineCuttoff() {
-    let result;
-    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
-      result = {
-        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`
-      };
-    }
-    return result;
-  }
-};
+const PtcTitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isPlmHub = false;
+    this.type = 'h2';
+    this.textAlign = undefined;
+    this.upperline = 'dotted';
+    this.titleShadow = undefined;
+    this.titleColor = 'gray';
+    this.titleMargin = undefined;
+    this.titleWeight = undefined;
+    this.titleSize = undefined;
+    this.titleHeight = 'paragraph';
+    this.styles = undefined;
+    this.ellipsisLineCutoff = undefined;
+    this.titleDisplay = 'inline-block';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const cutOff = this.getLineCuttoff();
+    let TagType;
+    switch (this.type) {
+      case 'h1':
+        TagType = 'h1';
+        break;
+      case 'h3':
+        TagType = 'h3';
+        break;
+      case 'h4':
+        TagType = 'h4';
+        break;
+      case 'h5':
+        TagType = 'h5';
+        break;
+      case 'h6':
+        TagType = 'h6';
+        break;
+      default:
+        TagType = 'h2';
+    }
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: classMap }, h(TagType, { style: cutOff }, h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.textAlign]: !!this.textAlign ? true : false,
+      [this.upperline]: true,
+      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
+      [this.titleMargin]: !!this.titleMargin ? true : false,
+      [this.titleShadow]: !!this.titleShadow ? true : false,
+      [this.titleWeight]: !!this.titleWeight ? true : false,
+      [this.titleSize]: !!this.titleSize ? true : false,
+      [this.titleHeight]: !!this.titleHeight ? true : false,
+      [this.titleColor]: !!this.titleColor ? true : false,
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0,
+      [this.titleDisplay]: !!this.titleDisplay ? true : false,
+    };
+  }
+  getLineCuttoff() {
+    let result;
+    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`,
+      };
+    }
+    return result;
+  }
+};
 PtcTitle.style = ptcTitleCss;
 
 export { PtcTitle as ptc_title };

package/dist/esm/ptc-two-column-media.entry.js

@@ -1,22 +1,22 @@
-import { r as registerInstance, h, H as Host } from './index-0c73b51e.js';
+import { r as registerInstance, h, H as Host } from './index-40bc29fc.js';
 
 const ptcTwoColumnMediaCss = ":host{display:block;padding:var(--ptc-layout-spacing-02) 0}@media only screen and (min-width: 992px){:host{padding:var(--ptc-layout-spacing-04) 0}}";
 
-const PtcTwoColumnMedia = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.componentType = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("slot", null)));
-  }
-  getCssClassMap() {
-    return {
-      [this.componentType]: this.componentType ? true : false
-    };
-  }
-};
+const PtcTwoColumnMedia = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.componentType = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.componentType]: this.componentType ? true : false
+    };
+  }
+};
 PtcTwoColumnMedia.style = ptcTwoColumnMediaCss;
 
 export { PtcTwoColumnMedia as ptc_two_column_media };