@ptcwebops/ptcw-design 2.7.7 → 2.7.8

package/dist/collection/components/ptc-pricing-add-on-section/ptc-pricing-add-on-section.js

@@ -1,76 +1,75 @@
-import { Host, h } from '@stencil/core';
-export class PtcPricingAddOnSection {
-  constructor() {
-    this.cardCount = undefined;
-    this.cardData = [];
-  }
-  componentWillLoad() {
-    if (this.cardCount > 8) {
-      this.cardCount = 8;
-    }
-    for (let i = 0; i < this.cardCount; i++) {
-      let title = this.el.querySelector(`[slot="card-title-${i + 1}"]`);
-      let pricing = this.el.querySelector(`[slot="card-pricing-${i + 1}"]`);
-      let cta = this.el.querySelector(`[slot="card-cta-${i + 1}"]`);
-      let disclaimer = this.el.querySelector(`[slot="card-disclaimer-${i + 1}"]`);
-      let data = {
-        title: title === null || title === void 0 ? void 0 : title.innerHTML.toString(),
-        pricing: pricing === null || pricing === void 0 ? void 0 : pricing.innerHTML.toString(),
-        cta: {
-          linkHref: (cta === null || cta === void 0 ? void 0 : cta.getAttribute('href')) || "",
-          linkText: (cta === null || cta === void 0 ? void 0 : cta.innerHTML.toString()) || "",
-        },
-        disclaimer: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.innerHTML.toString()) || "",
-      };
-      title === null || title === void 0 ? void 0 : title.remove();
-      pricing === null || pricing === void 0 ? void 0 : pricing.remove();
-      cta === null || cta === void 0 ? void 0 : cta.remove();
-      disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.remove();
-      this.cardData.push(data);
-    }
-    if (this.cardData.length != this.cardCount) {
-      this.cardData = [];
-    }
-  }
-  render() {
-    return (h(Host, null, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, "Cloud Add-ons"), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "is-grid has-col-gap-md" }, this.cardData.map((data, ind) => h("div", { class: "is-col-12 is-col-6-md is-col-4-lg is-col-3-xl" }, h("ptc-pricing-add-on-card", { "card-title": data.title, "card-pricing-text": data.pricing, "card-cta-href": data.cta.linkHref, "card-cta-text": data.cta.linkText, "card-disclaimer": data.disclaimer }, h("div", { slot: "card-body" }, h("slot", { name: `card-body-${ind + 1}` })))))), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" })));
-  }
-  static get is() { return "ptc-pricing-add-on-section"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-pricing-add-on-section.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-pricing-add-on-section.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cardCount": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Number of cards in section"
-        },
-        "attribute": "card-count",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "cardData": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcPricingAddOnSection {
+  constructor() {
+    this.cardCount = undefined;
+    this.cardData = [];
+  }
+  componentWillLoad() {
+    if (this.cardCount > 8) {
+      this.cardCount = 8;
+    }
+    for (let i = 0; i < this.cardCount; i++) {
+      let title = this.el.querySelector(`[slot="card-title-${i + 1}"]`);
+      let pricing = this.el.querySelector(`[slot="card-pricing-${i + 1}"]`);
+      let cta = this.el.querySelector(`[slot="card-cta-${i + 1}"]`);
+      let disclaimer = this.el.querySelector(`[slot="card-disclaimer-${i + 1}"]`);
+      let data = {
+        title: title === null || title === void 0 ? void 0 : title.innerHTML.toString(),
+        pricing: pricing === null || pricing === void 0 ? void 0 : pricing.innerHTML.toString(),
+        cta: {
+          linkHref: (cta === null || cta === void 0 ? void 0 : cta.getAttribute('href')) || "",
+          linkText: (cta === null || cta === void 0 ? void 0 : cta.innerHTML.toString()) || "",
+          linkTarget: (cta === null || cta === void 0 ? void 0 : cta.getAttribute('target')) || "_blank",
+        },
+        disclaimer: (disclaimer === null || disclaimer === void 0 ? void 0 : disclaimer.innerHTML.toString()) || "",
+      };
+      title === null || title === void 0 ? void 0 : title.remove();
+      cta === null || cta === void 0 ? void 0 : cta.remove();
+      this.cardData.push(data);
+    }
+    if (this.cardData.length != this.cardCount) {
+      this.cardData = [];
+    }
+  }
+  render() {
+    return (h(Host, null, h("ptc-title", { type: "h3", "text-align": "left", "title-size": "large", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, "Cloud Add-ons"), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "is-grid has-col-gap-md" }, this.cardData.map((data, ind) => h("div", { class: "is-col-12 is-col-6-md is-col-4-lg is-col-3-xl" }, h("ptc-pricing-add-on-card", { "card-title": data.title, "card-pricing-text": data.pricing, "card-cta-href": data.cta.linkHref, "card-cta-text": data.cta.linkText, "card-cta-target": data.cta.linkTarget, "card-disclaimer": data.disclaimer }, h("span", { slot: "card-pricing" }, h("slot", { name: `card-pricing-${ind + 1}` })), h("div", { slot: "card-body" }, h("slot", { name: `card-body-${ind + 1}` })), h("span", { slot: "card-disclaimer" }, h("slot", { name: `card-disclaimer-${ind + 1}` }))))))));
+  }
+  static get is() { return "ptc-pricing-add-on-section"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-pricing-add-on-section.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-pricing-add-on-section.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Number of cards in section"
+        },
+        "attribute": "card-count",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "cardData": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.js

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

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.css

@@ -0,0 +1,317 @@
+:host {
+  display: block;
+}
+:host #pricing-table {
+  position: relative;
+  overflow-wrap: break-word;
+}
+:host #vertical-scroll-content-clipper.normal {
+  display: none;
+}
+:host #vertical-scroll-content-clipper.sticky {
+  display: block;
+  z-index: 20;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: var(--sticky-stop-at, 50px);
+}
+:host #table-container {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--ptc-border-radius-standard);
+  box-shadow: var(--ptc-shadow-x-small);
+  position: relative;
+}
+:host #table-body {
+  width: 100%;
+  overflow-x: scroll;
+  position: relative;
+}
+:host .scroll-button {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  z-index: 15;
+  height: 100%;
+}
+:host .scroll-button#previous-scroll-button div {
+  margin-right: var(--ptc-element-spacing-02);
+  border-radius: 0px var(--ptc-element-spacing-01) var(--ptc-element-spacing-01) 0px;
+}
+:host .scroll-button#previous-scroll-button div ptc-para {
+  margin-right: var(--ptc-element-spacing-04);
+}
+:host .scroll-button#next-scroll-button {
+  transform: translateX(-100%);
+}
+:host .scroll-button#next-scroll-button div {
+  margin-left: var(--ptc-element-spacing-02);
+  border-radius: var(--ptc-element-spacing-01) 0px 0px var(--ptc-element-spacing-01);
+}
+:host .scroll-button#next-scroll-button div ptc-para {
+  margin-left: var(--ptc-element-spacing-04);
+}
+:host .scroll-button div {
+  display: inline-block;
+  width: fit-content;
+  height: 36px;
+  background-color: white;
+  color: black;
+  box-shadow: var(--ptc-shadow-x-medium);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .scroll-button div icon-asset {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 100%;
+}
+:host .scroll-button div ptc-para {
+  display: none;
+  white-space: nowrap;
+}
+:host .table-filler-cell {
+  display: none;
+  min-width: var(--filler-cell-width, 0px);
+  max-width: var(--filler-cell-width, 0px);
+  height: 100%;
+  box-sizing: content-box;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+  border-bottom: 1px solid var(--color-gray-02);
+}
+:host .table-filler-cell.show {
+  display: table-cell;
+}
+:host #table-header {
+  display: table-row;
+  background: var(--color-gray-10);
+  color: white;
+  z-index: 10;
+}
+:host #table-header.normal {
+  position: relative;
+}
+:host #table-header.sticky {
+  position: fixed;
+  top: var(--sticky-stop-at, 50px);
+  border-top-left-radius: var(--ptc-border-radius-standard);
+  border-top-right-radius: var(--ptc-border-radius-standard);
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  box-shadow: var(--ptc-shadow-x-large);
+}
+:host #table-header.sticky::-webkit-scrollbar {
+  display: none;
+}
+:host #table-header .table-cell {
+  min-width: var(--cell-width-xxs, 180px);
+  max-width: var(--cell-width-xxs, 180px);
+  box-sizing: content-box;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+  border-right: 1px solid var(--color-gray-07);
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+}
+:host #table-header .table-cell.table-last-cell {
+  border-right: none;
+}
+:host #table-header .table-cell ptc-link a.ptc-link {
+  line-height: var(--ptc-line-height-p);
+}
+:host #table-header .table-filler-cell {
+  border-bottom: none;
+  border-left: 1px solid var(--color-gray-07);
+}
+:host #table-header-placeholder.normal {
+  position: absolute;
+  top: 0;
+  display: table-row;
+  opacity: 0;
+}
+:host #table-header-placeholder.sticky {
+  position: relative;
+  display: table-row;
+  opacity: 0;
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+:host #table-header-placeholder .table-cell {
+  min-width: var(--cell-width-xxs, 180px);
+  max-width: var(--cell-width-xxs, 180px);
+  box-sizing: content-box;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+  border-right: 1px solid var(--color-gray-07);
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+}
+:host #table-header-placeholder .table-cell.table-last-cell {
+  border-right: none;
+}
+:host #table-header-placeholder .table-filler-cell {
+  border-bottom: none;
+  border-left: 1px solid var(--color-gray-07);
+}
+:host .desktop-header-first-cell {
+  display: table-cell;
+  position: sticky;
+  left: 0;
+  z-index: 10;
+}
+:host .mobile-sticky-row-header {
+  display: block;
+  position: sticky;
+  left: 0;
+  background-color: var(--color-gray-01);
+  border-bottom: 1px solid var(--color-gray-02);
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+}
+:host .table-row {
+  display: table-row;
+}
+:host .table-row .table-cell {
+  min-width: var(--cell-width-xxs, 180px);
+  max-width: var(--cell-width-xxs, 180px);
+  box-sizing: content-box;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+  border-right: 1px solid var(--color-gray-02);
+  border-bottom: 1px solid var(--color-gray-02);
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+}
+:host .table-row .table-cell.table-last-cell {
+  border-right: none;
+}
+:host .table-row .table-filler-cell {
+  border-left: 1px solid var(--color-gray-02);
+}
+:host .table-cta-row {
+  display: table-row;
+}
+:host .table-cta-row .table-cell {
+  min-width: var(--cell-width-xxs, 180px);
+  max-width: var(--cell-width-xxs, 180px);
+  box-sizing: content-box;
+  padding: var(--ptc-element-spacing-06);
+  border-right: 1px solid var(--color-gray-02);
+  border-bottom: 1px solid var(--color-gray-02);
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+}
+:host .table-cta-row .table-cell.table-last-cell {
+  border-right: none;
+}
+:host .table-cta-row .table-filler-cell {
+  border-left: 1px solid var(--color-gray-02);
+}
+@media only screen and (min-width: 768px) {
+  :host .table-descriptor {
+    max-width: 768px;
+    margin: auto;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host .scroll-button {
+    height: 100%;
+    top: 0;
+  }
+  :host .scroll-button div ptc-para {
+    display: none;
+  }
+  :host .scroll-button div:hover {
+    cursor: pointer;
+  }
+  :host .scroll-button div:hover ptc-para {
+    display: block;
+  }
+  :host .scroll-button#previous-scroll-button {
+    right: 0;
+    transform: translateX(100%);
+  }
+  :host #horizontal-scroll-shadow {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--ptc-element-spacing-06);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
+    z-index: 1;
+  }
+  :host #table-header.sticky {
+    box-shadow: none;
+  }
+  :host #table-header .table-cell {
+    min-width: var(--cell-width-md, 225px);
+    max-width: var(--cell-width-md, 225px);
+  }
+  :host #table-header .last-column-tooltip .tooltip {
+    right: 4px;
+  }
+  :host #table-header-placeholder .table-cell {
+    min-width: var(--cell-width-md, 225px);
+    max-width: var(--cell-width-md, 225px);
+  }
+  :host #table-header-placeholder .last-column-tooltip .tooltip {
+    right: -4px;
+  }
+  :host .desktop-sticky-row-header {
+    min-width: var(--desktop-row-header-cell-width-md, 275px);
+    max-width: var(--desktop-row-header-cell-width-md, 275px);
+    box-sizing: content-box;
+    padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+    border-right: 1px solid var(--color-gray-02);
+    border-bottom: 1px solid var(--color-gray-02);
+    display: table-cell;
+    vertical-align: middle;
+    position: sticky;
+    left: 0;
+    background-color: white;
+    z-index: 5;
+  }
+  :host .desktop-sticky-row-header.desktop-alternate-row {
+    background-color: var(--color-gray-01);
+  }
+  :host .desktop-header-first-cell {
+    min-width: var(--desktop-row-header-cell-width-md, 275px);
+    max-width: var(--desktop-row-header-cell-width-md, 275px);
+    box-sizing: content-box;
+    padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
+    border-right: 1px solid var(--color-gray-07);
+    display: table-cell;
+    vertical-align: middle;
+    position: sticky;
+    left: 0;
+    z-index: 10;
+    background: var(--color-gray-10);
+  }
+  :host .table-row .table-cell {
+    min-width: var(--cell-width-md, 225px);
+    max-width: var(--cell-width-md, 225px);
+  }
+  :host .table-row.desktop-alternate-row {
+    background-color: var(--color-gray-01);
+  }
+  :host .mobile-sticky-row-header {
+    display: none;
+  }
+  :host .table-cta-row {
+    display: table-row;
+  }
+  :host .table-cta-row .table-cell {
+    min-width: var(--cell-width-md, 225px);
+    max-width: var(--cell-width-md, 225px);
+  }
+  :host .table-cta-row .last-column-tooltip .tooltip {
+    right: -4px;
+  }
+}