@ptcwebops/ptcw-design 6.1.42 → 6.1.44

package/dist/collection/components/ptc-countdown/ptc-countdown.js

@@ -0,0 +1,146 @@
+import { h } from '@stencil/core';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+// Extend dayjs with timezone support
+dayjs.extend(utc);
+dayjs.extend(timezone);
+export class PtcCountdown {
+  constructor() {
+    this.countdownTitle = '';
+    this.eventTime = '';
+    this.eventTimeZone = 'America/New_York';
+    this.timeLeft = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    };
+    this.isExpired = false;
+  }
+  componentWillLoad() {
+    if (!this.eventTime || !this.eventTimeZone) {
+      console.error('Both eventTime and eventTimeZone are required.');
+      return;
+    }
+    this.startCountdown();
+  }
+  disconnectedCallback() {
+    clearInterval(this.timer);
+  }
+  calculateTimeLeft() {
+    const now = dayjs();
+    const target = dayjs.tz(this.eventTime, this.eventTimeZone);
+    const diff = target.diff(now);
+    if (diff > 0) {
+      this.timeLeft = {
+        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((diff / (1000 * 60)) % 60),
+        seconds: Math.floor((diff / 1000) % 60),
+      };
+    }
+    else {
+      this.isExpired = true;
+      clearInterval(this.timer);
+    }
+  }
+  startCountdown() {
+    //const eventDateInUTC = this.convertToUTC(this.eventTime, this.eventTimeZone);
+    this.timer = window.setInterval(() => this.calculateTimeLeft(), 1000);
+  }
+  render() {
+    const { days, hours, minutes, seconds } = this.timeLeft;
+    return (h("div", { class: "countdown-outer" }, this.countdownTitle && h("div", { class: "event-name" }, this.countdownTitle), !this.isExpired ? (h("div", { id: "CDOutput", class: "countdown" }, h("div", { class: "day" }, h("div", null, days), h("span", null, "days")), h("div", { class: "hours" }, h("div", null, hours), h("span", null, "hours")), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, "minutes")), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, "seconds")))) : (h("div", { class: "expired" }, "This event has started.at", ' ', new Date(this.eventTime).toLocaleString('en-US', {
+      //timeZone: this.eventTimeZone,
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    }))), h("div", { class: "cd-event-date" }, new Date(this.eventTime).toLocaleString('en-US', {
+      //timeZone: this.eventTimeZone,
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    }), ' ', "(", this.eventTimeZone, ")")));
+  }
+  static get is() { return "ptc-countdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-countdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-countdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "countdownTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "countdown-title",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "eventTime": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "event-time",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "eventTimeZone": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "event-time-zone",
+        "reflect": false,
+        "defaultValue": "'America/New_York'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "timeLeft": {},
+      "isExpired": {}
+    };
+  }
+}

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
 
 .mdc-checkbox {
   transform: translateX(-8px);
-  padding: calc((34px - 18px) / 2);
+  padding: 8px;
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: calc((34px - 34px) / 2);
+  margin: 0px;
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: calc((34px - 18px) / 2);
+  top: 8px;
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: calc((34px - 18px) / 2);
+  left: 8px;
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: calc((34px - 34px) / 2);
+  top: 0px;
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: calc((34px - 34px) / 2);
+  right: 0px;
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: calc((34px - 34px) / 2);
+  left: 0px;
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -1105,7 +1105,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1122,7 +1122,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-pagenation/ptc-pagenation.css

@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid var(--color-gray-10);
-  border-radius: calc(var(--ptc-border-radius-standard)/2);
+  border-radius: calc(var(--ptc-border-radius-standard) / 2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
 .standard-filter .next-button:hover, .standard-filter .previous-button:hover {

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

@@ -12,7 +12,7 @@ export class PtcPricingAddOnCard {
   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" }, h("slot", { name: "card-pricing" })), 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": "More", "less-text": "Less" }, 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", { class: "mf-listen", type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget, "tracker-id": `table-card-${this.sectionId}` }, 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) ? h("slot", { name: "card-disclaimer" }) : h("ptc-readmore", { "more-text": "More", "less-text": "Less" }, h("slot", { name: "card-disclaimer" })))))));
+      h("ptc-readmore", { "more-text": "More", "less-text": "Less", "is-content-slotted": true }, 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", { class: "mf-listen", type: "link", color: "ptc-tertiary", "link-href": this.cardCtaHref, target: this.cardCtaTarget, "tracker-id": `table-card-${this.sectionId}` }, 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) ? h("slot", { name: "card-disclaimer" }) : h("ptc-readmore", { "more-text": "More", "less-text": "Less", "is-content-slotted": true }, h("slot", { name: "card-disclaimer" })))))));
   }
   static get is() { return "ptc-pricing-add-on-card"; }
   static get encapsulation() { return "shadow"; }

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

@@ -419,7 +419,7 @@ export class PtcPricingPackagingTable {
     const TableDescription = () => {
       return (this.tableDescription && h(Fragment, null, h("div", { class: "table-descriptor" }, h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-align": "center", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, (this.tableDescription.innerText.length <= 500) ?
         h("slot", { name: "table-description" }) :
-        h("ptc-readmore", { "more-text": this.moreText, "less-text": this.LessText }, h("slot", { name: "table-description" }))))));
+        h("ptc-readmore", { "is-content-slotted": true, "more-text": this.moreText, "less-text": this.LessText }, h("slot", { name: "table-description" }))))));
     };
     const TableHeader = () => {
       return h("div", { id: "table-header", class: this.headerType, onScroll: () => this.handleHorizontalScroll() }, h("div", { class: `desktop-header-first-cell` }, (this.isDesktopView) ?

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

@@ -1050,7 +1050,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1067,7 +1067,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-readmore/ptc-readmore.js

@@ -38,6 +38,7 @@ export class PtcReadmore {
     this.size = 'small';
     this.isIcon = false;
     this.color = 'blue';
+    this.isContentSlotted = false;
   }
   async updateReadmoreStatus() {
     setTimeout(() => {
@@ -85,12 +86,22 @@ export class PtcReadmore {
     }, 400);
   }
   setTabIndex() {
-    var _a;
-    let links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    var _a, _b, _c;
+    //debugger
+    let links;
+    if (!this.isContentSlotted) {
+      links = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    }
+    else {
+      let slot = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector('slot').assignedNodes();
+      links = (slot[0] instanceof HTMLElement)
+        ? slot[0].querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+        : null;
+    }
     let bottom = 999999;
-    let rects = this.el.getClientRects();
+    let rects = (_c = this.el.shadowRoot.querySelector('.read-more-text')) === null || _c === void 0 ? void 0 : _c.getClientRects();
     if (rects && rects.length > 0) {
-      bottom = rects[0].bottom - 55;
+      bottom = rects[0].bottom;
     }
     if (links) {
       links.forEach(link => {
@@ -361,6 +372,24 @@ export class PtcReadmore {
         "attribute": "color",
         "reflect": false,
         "defaultValue": "'blue'"
+      },
+      "isContentSlotted": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "isContentSlotted: if the readmore content is from slot,"
+        },
+        "attribute": "is-content-slotted",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ptc-textfield/ptc-textfield.css

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input,
-.iti input[type=text],
-.iti input[type=tel] {
+.iti input.iti__tel-input,
+.iti input.iti__tel-input[type=text],
+.iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,26 +2256,35 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__country-list {
+.iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 -1px;
+  margin-left: -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
-  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__country-list--dropup {
+.iti__dropdown-content--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
+.iti__search-input {
+  width: 100%;
+  border-width: 0;
+}
+.iti__country-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.iti--flexible-dropdown-width .iti__country-list {
+  white-space: nowrap;
+}
 @media (max-width: 500px) {
-  .iti__country-list {
+  .iti--flexible-dropdown-width .iti__country-list {
     white-space: normal;
   }
 }
@@ -2307,20 +2316,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input,
-.iti--allow-dropdown input[type=text],
-.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
-.iti--separate-dial-code input[type=text],
-.iti--separate-dial-code input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input,
+.iti--allow-dropdown input.iti__tel-input[type=text],
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
+.iti--separate-dial-code input.iti__tel-input[type=text],
+.iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input,
-[dir=rtl] .iti--allow-dropdown input[type=text],
-[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
-[dir=rtl] .iti--separate-dial-code input[type=text],
-[dir=rtl] .iti--separate-dial-code input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2339,12 +2348,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2368,18 +2377,26 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+.iti--fullscreen-popup.iti--container {
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: fixed;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.iti--fullscreen-popup.iti--container.iti--country-search {
+  justify-content: flex-start;
 }
-.iti-mobile .iti__country-list {
+.iti--fullscreen-popup .iti__dropdown-content {
   max-height: 100%;
-  width: 100%;
+  position: relative;
 }
-.iti-mobile .iti__country {
+.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2405,7 +2422,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3471,7 +3488,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }

package/dist/custom-elements/index.d.ts

@@ -296,6 +296,12 @@ export const PtcContainer: {
   new (): PtcContainer;
 };
 
+interface PtcCountdown extends Components.PtcCountdown, HTMLElement {}
+export const PtcCountdown: {
+  prototype: PtcCountdown;
+  new (): PtcCountdown;
+};
+
 interface PtcDataLookup extends Components.PtcDataLookup, HTMLElement {}
 export const PtcDataLookup: {
   prototype: PtcDataLookup;