@ptcwebops/ptcw-design 2.4.1 → 2.4.4

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

@@ -1,76 +1,76 @@
-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()) || "",
+        },
+        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"; }
+}

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-table/ptc-pricing-table.css

@@ -2,12 +2,6 @@
   display: block;
   position: relative;
 }
-@media only screen and (min-width: 768px) {
-  :host .table-descriptor {
-    width: 768px;
-    margin: auto;
-  }
-}
 :host #vertical-scroll-content-clipper {
   position: fixed;
   top: 0;
@@ -39,15 +33,10 @@
 :host #sticky-header-container::-webkit-scrollbar {
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #sticky-header-container {
-    box-shadow: none;
-  }
-}
 :host #sticky-header-container th {
   background: var(--color-gray-10);
   color: white;
-  padding: 16px 24px 16px 24px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
   min-width: 168px;
   max-width: 180px;
   vertical-align: middle;
@@ -65,28 +54,6 @@
   width: 99%;
   box-sizing: content-box;
 }
-@media only screen and (min-width: 768px) {
-  :host #sticky-header-container th {
-    max-width: 275px;
-  }
-  :host #sticky-header-container th.desktop-header-first-cell {
-    display: table-cell;
-    min-width: 275px;
-    box-sizing: content-box;
-  }
-  :host #sticky-header-container th:first-of-type {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    z-index: 5;
-  }
-  :host #sticky-header-container th.table-filler-header-cell {
-    width: 99%;
-    display: none;
-    max-width: fit-content;
-    box-sizing: border-box;
-  }
-}
 :host .scroll-buttons-container {
   position: absolute;
   top: 0;
@@ -99,6 +66,7 @@
   z-index: 15;
   position: absolute;
   display: inline-block;
+  width: 36px;
   width: fit-content;
   height: 36px;
   background-color: white;
@@ -108,39 +76,33 @@
   align-items: center;
 }
 :host .scroll-buttons-container .scroll-buttons icon-asset {
+  z-index: 15;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 36px;
+  height: 100%;
 }
 :host .scroll-buttons-container .scroll-buttons.prev-button {
+  z-index: 15;
   left: 0;
-  border-radius: 0px 4px 4px 0px;
+  border-radius: 0px var(--ptc-element-spacing-01) var(--ptc-element-spacing-01) 0px;
 }
 :host .scroll-buttons-container .scroll-buttons.prev-button ptc-para {
+  z-index: 15;
+  margin-right: var(--ptc-element-spacing-04);
   display: none;
 }
-:host .scroll-buttons-container .scroll-buttons.prev-button:hover {
-  cursor: pointer;
-}
-:host .scroll-buttons-container .scroll-buttons.prev-button:hover ptc-para {
-  margin-right: 16px;
-  display: block;
-}
 :host .scroll-buttons-container .scroll-buttons.next-button {
+  z-index: 15;
   right: 0;
-  border-radius: 4px 0px 0px 4px;
+  border-radius: var(--ptc-element-spacing-01) 0px 0px var(--ptc-element-spacing-01);
 }
 :host .scroll-buttons-container .scroll-buttons.next-button ptc-para {
+  z-index: 15;
+  margin-left: var(--ptc-element-spacing-04);
   display: none;
 }
-:host .scroll-buttons-container .scroll-buttons.next-button:hover {
-  cursor: pointer;
-}
-:host .scroll-buttons-container .scroll-buttons.next-button:hover ptc-para {
-  margin-left: 16px;
-  display: block;
-}
 :host #table-container {
   border-radius: var(--ptc-border-radius-standard);
   box-shadow: var(--ptc-shadow-x-small);
@@ -150,26 +112,13 @@
 :host #table-container #horizontal-scroll-box-shadow {
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container #horizontal-scroll-box-shadow {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 24px;
-    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
-    z-index: 10;
-    visibility: hidden;
-  }
-}
 :host #table-container table {
   border-spacing: 0;
 }
 :host #table-container th {
   background: var(--color-gray-10);
   color: white;
-  padding: 16px 24px 16px 24px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
 }
 :host #table-container th:not(:last-child) {
   border-right: 1px solid var(--color-gray-07);
@@ -181,25 +130,6 @@
   width: 99%;
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container th {
-    max-width: 275px;
-  }
-  :host #table-container th.desktop-header-first-cell {
-    display: table-cell;
-    min-width: 275px;
-  }
-  :host #table-container th:first-of-type {
-    position: -webkit-sticky;
-    position: sticky;
-    left: 0;
-    z-index: 5;
-  }
-  :host #table-container th.table-filler-header-cell {
-    width: 99%;
-    display: none;
-  }
-}
 :host #table-container tbody.mobile-table-body {
   display: contents;
   width: 100%;
@@ -207,15 +137,6 @@
 :host #table-container tbody.desktop-table-body {
   display: none;
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container tbody.mobile-table-body {
-    display: none;
-  }
-  :host #table-container tbody.desktop-table-body {
-    display: contents;
-    width: 100%;
-  }
-}
 :host #table-container tr {
   background-color: white;
   width: 100%;
@@ -233,25 +154,14 @@
 :host #table-container tr.table-button-row td {
   border-top: 1px solid var(--color-gray-02);
 }
-@media only screen and (min-width: 768px) {
-  :host #table-container tr:nth-child(odd) {
-    background-color: white;
-  }
-  :host #table-container tr:nth-child(even) {
-    background-color: var(--color-gray-01);
-  }
-  :host #table-container tr.table-button-row {
-    background-color: white;
-  }
-  :host #table-container tr.table-button-row td {
-    border-top: 1px solid var(--color-gray-02);
-  }
+:host #table-container tr.table-button-row td ptc-tooltip .text-ellipsis {
+  font-size: var(--ptc-font-size-x-small);
 }
 :host #table-container td {
   text-align: center;
   min-width: 168px;
   max-width: 180px;
-  padding: 16px 24px 16px 24px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);
 }
 :host #table-container td:not(:last-child) {
   border-right: 1px solid var(--color-gray-02);
@@ -261,6 +171,82 @@
   display: none;
 }
 @media only screen and (min-width: 768px) {
+  :host .table-descriptor {
+    width: 768px;
+    margin: auto;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host #sticky-header-container {
+    box-shadow: none;
+  }
+  :host #sticky-header-container th {
+    max-width: 275px;
+  }
+  :host #sticky-header-container th.desktop-header-first-cell {
+    display: table-cell;
+    min-width: 275px;
+    box-sizing: content-box;
+  }
+  :host #sticky-header-container th:first-of-type {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 5;
+  }
+  :host #sticky-header-container th.table-filler-header-cell {
+    width: 99%;
+    display: none;
+    max-width: fit-content;
+    box-sizing: border-box;
+  }
+  :host #table-container #horizontal-scroll-box-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: 10;
+    visibility: hidden;
+  }
+  :host #table-container th {
+    max-width: 275px;
+  }
+  :host #table-container th.desktop-header-first-cell {
+    display: table-cell;
+    min-width: 275px;
+  }
+  :host #table-container th:first-of-type {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 5;
+  }
+  :host #table-container th.table-filler-header-cell {
+    width: 99%;
+    display: none;
+  }
+  :host #table-container tbody.mobile-table-body {
+    display: none;
+  }
+  :host #table-container tbody.desktop-table-body {
+    display: contents;
+    width: 100%;
+  }
+  :host #table-container tr:nth-child(odd) {
+    background-color: white;
+  }
+  :host #table-container tr:nth-child(even) {
+    background-color: var(--color-gray-01);
+  }
+  :host #table-container tr.table-button-row {
+    background-color: white;
+  }
+  :host #table-container tr.table-button-row td {
+    border-top: 1px solid var(--color-gray-02);
+  }
   :host #table-container td {
     max-width: 275px;
   }