@ptcwebops/ptcw-design 2.1.6 → 2.1.7

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

@@ -0,0 +1,120 @@
+import { Host, h, Fragment } from '@stencil/core';
+export class PtcPricingAddOnCard {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardPricingText = undefined;
+    this.cardCtaHref = null;
+    this.cardCtaText = null;
+    this.cardDisclaimer = null;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "add-on-card" }, h("ptc-title", { type: "h4", "text-align": "left", "title-size": "medium", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.cardTitle), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.cardPricingText), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.el.querySelector('[slot="card-body"]').innerHTML.toString().length <= 300) ?
+      h("slot", { name: "card-body" }) :
+      h("ptc-readmore", { "more-text": "See more" }, h("slot", { name: "card-body" })), h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: "_blank" }, h("ptc-tooltip", { "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.cardCtaText, position: "bottom" }))), this.cardDisclaimer && h(Fragment, null, h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-para", { "font-size": "xx-small", "font-weight": "w-6", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.cardDisclaimer.length <= 150) ? this.cardDisclaimer : h("ptc-readmore", { "more-text": "See more" }, this.cardDisclaimer))))));
+  }
+  static get is() { return "ptc-pricing-add-on-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-pricing-add-on-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-pricing-add-on-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title"
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardPricingText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Pricing text"
+        },
+        "attribute": "card-pricing-text",
+        "reflect": false
+      },
+      "cardCtaHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CTA Button href"
+        },
+        "attribute": "card-cta-href",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "cardCtaText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CTA Button text"
+        },
+        "attribute": "card-cta-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "cardDisclaimer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disclaimer text"
+        },
+        "attribute": "card-disclaimer",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +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"; }
+}

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

@@ -0,0 +1,292 @@
+:host {
+  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;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-color: white;
+  z-index: 25;
+  display: none;
+}
+:host .last-column-tooltip .tooltip {
+  right: -48px;
+}
+:host #sticky-header-container {
+  position: fixed;
+  z-index: 20;
+  background-color: white;
+  overflow-x: scroll;
+  overflow-y: visible;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  visibility: hidden;
+  border-top-left-radius: var(--ptc-border-radius-standard);
+  border-top-right-radius: var(--ptc-border-radius-standard);
+  box-shadow: var(--ptc-shadow-x-large);
+}
+: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;
+  min-width: 168px;
+  max-width: 180px;
+  vertical-align: middle;
+}
+:host #sticky-header-container th:not(:last-child) {
+  border-right: 1px solid var(--color-gray-07);
+}
+:host #sticky-header-container th.desktop-header-first-cell {
+  display: none;
+}
+:host #sticky-header-container th.border-box-header-cell {
+  box-sizing: border-box;
+}
+:host #sticky-header-container th.table-filler-header-cell {
+  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;
+  right: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+:host .scroll-buttons-container .scroll-buttons {
+  z-index: 15;
+  position: absolute;
+  display: inline-block;
+  width: fit-content;
+  height: 36px;
+  background-color: white;
+  box-shadow: var(--ptc-shadow-x-medium);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .scroll-buttons-container .scroll-buttons icon-asset {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+}
+:host .scroll-buttons-container .scroll-buttons.prev-button {
+  left: 0;
+  border-radius: 0px 4px 4px 0px;
+}
+:host .scroll-buttons-container .scroll-buttons.prev-button ptc-para {
+  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 {
+  right: 0;
+  border-radius: 4px 0px 0px 4px;
+}
+:host .scroll-buttons-container .scroll-buttons.next-button ptc-para {
+  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);
+  overflow-x: scroll;
+  position: relative;
+}
+: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;
+}
+:host #table-container th:not(:last-child) {
+  border-right: 1px solid var(--color-gray-07);
+}
+:host #table-container th.desktop-header-first-cell {
+  display: none;
+}
+:host #table-container th.table-filler-header-cell {
+  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%;
+}
+: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%;
+  overflow-x: scroll;
+}
+:host #table-container tr:nth-child(odd) {
+  background-color: var(--color-gray-01);
+}
+:host #table-container tr:nth-child(even) {
+  background-color: white;
+}
+: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);
+}
+@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 td {
+  text-align: center;
+  min-width: 168px;
+  max-width: 180px;
+  padding: 16px 24px 16px 24px;
+}
+:host #table-container td:not(:last-child) {
+  border-right: 1px solid var(--color-gray-02);
+}
+:host #table-container td.table-filler-body-cell {
+  width: 99%;
+  display: none;
+}
+@media only screen and (min-width: 768px) {
+  :host #table-container td {
+    max-width: 275px;
+  }
+  :host #table-container td:first-of-type {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 5;
+    background: inherit;
+    min-width: 275px;
+  }
+  :host #table-container td:not(:first-child) {
+    text-align: center;
+  }
+  :host #table-container td.first-column-cell.scroll-shadow {
+    box-shadow: var(--ptc-shadow-x-large);
+  }
+  :host #table-container td.first-column-cell.no-shadow {
+    box-shadow: none;
+  }
+  :host #table-container td.table-filler-body-cell {
+    width: 99%;
+    display: none;
+  }
+  :host #table-container td.table-filler-button-cell {
+    width: 99%;
+    display: none;
+  }
+}