@ptcwebops/ptcw-design 3.2.2 → 3.2.3

package/dist/cjs/ptc-previous-url.cjs.entry.js

@@ -6,17 +6,17 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcPreviousUrlCss = ":host{display:block;margin-top:var(--ptc-element-spacing-03)}.back-to-videos{display:inline-block;font-family:var(--ptc-font-latin);font-style:normal;font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-dense)}.back-to-videos:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}::slotted(*){transform:translate(-2px, -2px)}.backarrow:hover+.back-to-videos{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}";
 
-const PtcPreviousUrl = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.href = undefined;
-    this.text = undefined;
-    this.styles = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, index.h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), index.h("a", { class: "back-to-videos" }, this.text)), index.h("slot", null)));
-  }
-};
+const PtcPreviousUrl = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.text = undefined;
+    this.styles = undefined;
+  }
+  render() {
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, index.h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), index.h("a", { class: "back-to-videos" }, this.text)), index.h("slot", null)));
+  }
+};
 PtcPreviousUrl.style = ptcPreviousUrlCss;
 
 exports.ptc_previous_url = PtcPreviousUrl;

package/dist/cjs/ptc-pricing-add-on-card.cjs.entry.js

@@ -6,23 +6,23 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcPricingAddOnCardCss = ":host{display:block;height:99%}.add-on-card{padding:var(--ptc-element-spacing-06);border-top:var(--color-gray-10) solid var(--ptc-element-spacing-01);background-color:white;border-radius:var(--ptc-border-radius-standard);box-shadow:var(--ptc-shadow-x-small);height:100%;box-sizing:border-box;word-break:break-word}";
 
-const PtcPricingAddOnCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.cardPricingText = undefined;
-    this.cardCtaHref = null;
-    this.cardCtaText = null;
-    this.cardCtaTarget = null;
-    this.cardDisclaimer = null;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "add-on-card" }, index.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), index.h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("slot", { name: "card-pricing" })), index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), index.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) ?
-      index.h("slot", { name: "card-body" }) :
-      index.h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, index.h("slot", { name: "card-body" })), index.h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "x-large" }), index.h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget }, index.h("ptc-tooltip", { "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.cardCtaText, position: "bottom" }))), this.cardDisclaimer && index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), index.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) ? index.h("slot", { name: "card-disclaimer" }) : index.h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, index.h("slot", { name: "card-disclaimer" })))))));
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcPricingAddOnCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardPricingText = undefined;
+    this.cardCtaHref = null;
+    this.cardCtaText = null;
+    this.cardCtaTarget = null;
+    this.cardDisclaimer = null;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "add-on-card" }, index.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), index.h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "left", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("slot", { name: "card-pricing" })), index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), index.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) ?
+      index.h("slot", { name: "card-body" }) :
+      index.h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, index.h("slot", { name: "card-body" })), index.h("slot", { name: "card-body" })), this.cardCtaHref && this.cardCtaText && index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "x-large" }), index.h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "xx-small" }), index.h("ptc-button", { type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget }, index.h("ptc-tooltip", { "text-display": "inline", "max-length": "30", "z-index": "z-2", description: this.cardCtaText, position: "bottom" }))), this.cardDisclaimer && index.h(index.Fragment, null, index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), index.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) ? index.h("slot", { name: "card-disclaimer" }) : index.h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, index.h("slot", { name: "card-disclaimer" })))))));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcPricingAddOnCard.style = ptcPricingAddOnCardCss;
 
 exports.ptc_pricing_add_on_card = PtcPricingAddOnCard;

package/dist/cjs/ptc-pricing-add-on-section.cjs.entry.js

@@ -6,44 +6,44 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcPricingAddOnSectionCss = ":host{display:block}";
 
-const PtcPricingAddOnSection = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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 (index.h(index.Host, null, index.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"), index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), index.h("div", { class: "is-grid has-col-gap-md" }, this.cardData.map((data, ind) => index.h("div", { class: "is-col-12 is-col-6-md is-col-4-lg is-col-3-xl" }, index.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 }, index.h("span", { slot: "card-pricing" }, index.h("slot", { name: `card-pricing-${ind + 1}` })), index.h("div", { slot: "card-body" }, index.h("slot", { name: `card-body-${ind + 1}` })), index.h("span", { slot: "card-disclaimer" }, index.h("slot", { name: `card-disclaimer-${ind + 1}` }))))))));
-  }
-  get el() { return index.getElement(this); }
-};
+const PtcPricingAddOnSection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, null, index.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"), index.h("ptc-spacer", { breakpoint: "small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "large" }), index.h("div", { class: "is-grid has-col-gap-md" }, this.cardData.map((data, ind) => index.h("div", { class: "is-col-12 is-col-6-md is-col-4-lg is-col-3-xl" }, index.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 }, index.h("span", { slot: "card-pricing" }, index.h("slot", { name: `card-pricing-${ind + 1}` })), index.h("div", { slot: "card-body" }, index.h("slot", { name: `card-body-${ind + 1}` })), index.h("span", { slot: "card-disclaimer" }, index.h("slot", { name: `card-disclaimer-${ind + 1}` }))))))));
+  }
+  get el() { return index.getElement(this); }
+};
 PtcPricingAddOnSection.style = ptcPricingAddOnSectionCss;
 
 exports.ptc_pricing_add_on_section = PtcPricingAddOnSection;

package/dist/cjs/ptc-pricing-block.cjs.entry.js

@@ -6,26 +6,26 @@ const index = require('./index-cd9a1b1a.js');
 
 const ptcPricingBlockCss = ":host{display:block;color:var(--color-gray-10);margin-top:var(--ptc-element-spacing-03)}:host .ptc-pricing-block{width:100%;background-color:var(--color-gray-02);border:1px solid var(--color-gray-02);border-radius:var(--ptc-border-radius-standard);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);display:block;transition:background-color var(--ptc-ease-inout) var(--ptc-transition-medium), border-color var(--ptc-ease-inout) var(--ptc-transition-medium)}:host .ptc-pricing-block.active{background-color:var(--color-gray-12);border-color:var(--color-gray-12);color:var(--color-white)}:host .ptc-pricing-block:hover:not(.active){border-color:var(--color-gray-12)}@media (min-width: 400px){:host .ptc-pricing-block{display:flex;justify-content:space-between;align-items:center}}:host .right-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-dense);text-align:left;margin:0px 20px 15px 15px;display:block}@media (min-width: 400px){:host .right-text{text-align:right;float:right;margin-top:15px}}:host .left-text{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);text-align:left;margin:15px 15px 0 20px;display:block}@media (min-width: 400px){:host .left-text{text-align:left;display:inline-block;margin-bottom:15px}}";
 
-const PtcPricingBlock = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.active = undefined;
-    this.optionClicked = undefined;
-  }
-  onContentChange(content) {
-    console.log(content);
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: this.active ? "is-active" : "" }, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "left-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-pricing-block']: true,
-      ['active']: this.active
-    };
-  }
-};
+const PtcPricingBlock = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.active = undefined;
+    this.optionClicked = undefined;
+  }
+  onContentChange(content) {
+    console.log(content);
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: this.active ? "is-active" : "" }, index.h("div", { class: classMap }, index.h("span", { class: "left-text" }, index.h("slot", { name: "left-text" })), index.h("span", { class: "right-text" }, index.h("slot", { name: "right-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-pricing-block']: true,
+      ['active']: this.active
+    };
+  }
+};
 PtcPricingBlock.style = ptcPricingBlockCss;
 
 exports.ptc_pricing_block = PtcPricingBlock;