@ptcwebops/ptcw-design 6.3.5 → 6.3.6

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

@@ -74,6 +74,7 @@ ptc-link, ptc-square-card,
   padding: 16px 4px;
   display: block;
   max-width: 450px;
+  min-width: 280px;
   border-radius: 4px;
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.32);
   background-color: #20262a;
@@ -81,6 +82,7 @@ ptc-link, ptc-square-card,
 @media only screen and (min-width: 480px) {
   .countdown-outer {
     padding: 16px 32px;
+    min-width: 380px;
   }
 }
 

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

@@ -1,16 +1,21 @@
 import { h } from '@stencil/core';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
+// import timezone from 'dayjs/plugin/timezone';
 // Extend dayjs with timezone support
 dayjs.extend(utc);
-dayjs.extend(timezone);
+// dayjs.extend(timezone);
 export class PtcCountdown {
   constructor() {
     this.countdownTitle = '';
     this.eventTime = '';
-    this.eventTimeZone = 'America/New_York';
+    this.eventTimeZone = 'EST';
     this.expiredText = 'This event has started on';
+    this.daysText = 'days';
+    this.hoursText = 'hours';
+    this.minutesText = 'minutes';
+    this.secondsText = 'seconds';
+    this.useHourFormat = true;
     this.timeLeft = {
       days: 0,
       hours: 0,
@@ -18,24 +23,70 @@ export class PtcCountdown {
       seconds: 0,
     };
     this.isExpired = false;
+    this.displayLocale = 'en';
   }
   componentWillLoad() {
     if (!this.eventTime || !this.eventTimeZone) {
       console.error('Both eventTime and eventTimeZone are required.');
       return;
     }
+    this.detectLocaleFromURL();
     this.startCountdown();
   }
   disconnectedCallback() {
     clearInterval(this.timer);
   }
+  // Map time zone abbreviations to their offset in minutes.
+  getOffsetFromAbbr(abbr) {
+    const tzMapping = {
+      'ACDT': 630,
+      'ACST': 570,
+      'ADT': -180,
+      'AEDT': 660,
+      'AEST': 600,
+      'AKDT': -480,
+      'AKST': -540,
+      'AST': -240,
+      'AWST': 480,
+      'BST': 60,
+      'CDT': -300,
+      'CEST': 120,
+      'CET': 60,
+      'CST': -360,
+      'CST_CN': 480,
+      'EDT': -240,
+      'EEST': 180,
+      'EET': 120,
+      'EST': -300,
+      'GMT': 0,
+      'HKT': 480,
+      'IST': 330,
+      'JST': 540,
+      'MDT': -360,
+      'MST': -420,
+      'PDT': -420,
+      'PST': -480,
+      'UTC': 0,
+    };
+    return tzMapping[abbr] !== undefined ? tzMapping[abbr] : 0;
+  }
+  // Convert the provided date to ISO 8601 if needed.
   transformDate(contentDate) {
+    // If contentDate includes a 'T', assume it’s ISO 8601.
+    if (contentDate.includes('T')) {
+      return contentDate;
+    }
+    // Otherwise, assume the original format "M/D/YYYY h:mm:ss A"
     return dayjs(contentDate, 'M/D/YYYY h:mm:ss A').format('YYYY-MM-DDTHH:mm:ss');
   }
   calculateTimeLeft() {
-    const now = dayjs();
-    const formatEventTime = this.transformDate(this.eventTime);
-    const target = dayjs.tz(formatEventTime, this.eventTimeZone);
+    const offset = this.getOffsetFromAbbr(this.eventTimeZone);
+    // Parse eventTime as if it is in the provided time zone.
+    // Using utcOffset(offset, true) tells dayjs to treat the parsed time as local in that offset.
+    const target = dayjs(this.transformDate(this.eventTime))
+      .utcOffset(offset, true)
+      .utc();
+    const now = dayjs.utc();
     const diff = target.diff(now);
     if (diff > 0) {
       this.timeLeft = {
@@ -51,24 +102,58 @@ export class PtcCountdown {
     }
   }
   startCountdown() {
+    this.calculateTimeLeft();
     this.timer = window.setInterval(() => this.calculateTimeLeft(), 1000);
   }
+  shouldUse12HourFormat() {
+    if (this.displayLocale === 'en') {
+      return true;
+    }
+    else if (this.useHourFormat !== undefined) {
+      return this.useHourFormat;
+    }
+  }
+  detectLocaleFromURL() {
+    const url = window.location.href;
+    if (url.includes('/cn/')) {
+      this.displayLocale = 'zh-CN';
+    }
+    else if (url.includes('/tw/')) {
+      this.displayLocale = 'zh-TW';
+    }
+    else if (url.includes('/fr/')) {
+      this.displayLocale = 'fr';
+    }
+    else if (url.includes('/de/')) {
+      this.displayLocale = 'de';
+    }
+    else if (url.includes('/it/')) {
+      this.displayLocale = 'it';
+    }
+    else if (url.includes('/ja/')) {
+      this.displayLocale = 'ja';
+    }
+    else if (url.includes('/ko/')) {
+      this.displayLocale = 'ko';
+    }
+    else {
+      this.displayLocale = 'en';
+    }
+  }
   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.expiredText} `, 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,
+    // Format the event time in 24-hour ISO 8601 style, applying the eventTimeZone offset.
+    const formattedEventTime = dayjs(this.transformDate(this.eventTime))
+      .utcOffset(this.getOffsetFromAbbr(this.eventTimeZone), true)
+      .format('YYYY-MM-DD HH:mm');
+    const hour12 = this.shouldUse12HourFormat();
+    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, this.daysText)), h("div", { class: "hours" }, h("div", null, hours), h("span", null, this.hoursText)), h("div", { class: "minutes" }, h("div", null, minutes), h("span", null, this.minutesText)), h("div", { class: "seconds" }, h("div", null, seconds), h("span", null, this.secondsText)))) : (h("div", { class: "expired" }, `${this.expiredText} ${formattedEventTime} ${this.eventTimeZone}`)), h("div", { class: "cd-event-date" }, new Date(this.eventTime).toLocaleDateString(this.displayLocale, {
       month: 'long',
       day: 'numeric',
       year: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
+      hour12: hour12,
     }), ' ', "(", this.eventTimeZone, ")")));
   }
   static get is() { return "ptc-countdown"; }
@@ -137,7 +222,7 @@ export class PtcCountdown {
         },
         "attribute": "event-time-zone",
         "reflect": false,
-        "defaultValue": "'America/New_York'"
+        "defaultValue": "'EST'"
       },
       "expiredText": {
         "type": "string",
@@ -156,13 +241,104 @@ export class PtcCountdown {
         "attribute": "expired-text",
         "reflect": false,
         "defaultValue": "'This event has started on'"
+      },
+      "daysText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "days-text",
+        "reflect": false,
+        "defaultValue": "'days'"
+      },
+      "hoursText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hours-text",
+        "reflect": false,
+        "defaultValue": "'hours'"
+      },
+      "minutesText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "minutes-text",
+        "reflect": false,
+        "defaultValue": "'minutes'"
+      },
+      "secondsText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "seconds-text",
+        "reflect": false,
+        "defaultValue": "'seconds'"
+      },
+      "useHourFormat": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-hour-format",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
   static get states() {
     return {
       "timeLeft": {},
-      "isExpired": {}
+      "isExpired": {},
+      "displayLocale": {}
     };
   }
 }

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

@@ -481,10 +481,10 @@ ptc-link, ptc-square-card,
   text-decoration-line: underline;
   line-height: var(--ptc-line-height-densest);
 }
-:host .wrapper .bottom-close span:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  outline: 5px solid var(--keyboard-nav-outline);
-}
 :host .wrapper .bottom-close span:hover {
   color: var(--color-blue-08);
+}
+:host .wrapper .bottom-close:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
 }

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

@@ -27,15 +27,6 @@ export class PtcModal {
         fallbackElement.focus();
       }
     };
-    //change it with @Watch
-    // componentDidUpdate() {
-    //   if (this.show) {
-    //     this.lastFocusElement = document.activeElement as HTMLElement;
-    //     this.fireOnOpened(this);
-    //   } else {
-    //     this.fireOnClosed(this);
-    //   }
-    // }
     this.handleKeyPress = (event) => {
       if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
         this.openedByKeyboard = true;
@@ -65,7 +56,6 @@ export class PtcModal {
     this.headerOnlyText1 = undefined;
     this.headerOnlyText2 = undefined;
     this.bottomCloseBtn = undefined;
-    this.initialFocus = true;
     this.openedByKeyboard = false;
     this.bodyOverflowSetting = undefined;
   }
@@ -238,12 +228,16 @@ export class PtcModal {
           this.trap.deactivate();
         }
       } })));
-    let bottomCloseBtnEle = (h("div", { class: "bottom-close", id: "modal-bottom-close", onClick: e => {
+    let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: e => {
         e.preventDefault();
         this.close();
       }, onKeyPress: e => {
         e.preventDefault();
         this.close();
+        this.setReturnFocus();
+        if (this.trap) {
+          this.trap.deactivate();
+        }
       } }, h("span", null, this.bottomCloseBtn)));
     if (this.iframeUrl) {
       content = h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: '100%', width: '100%', scrolling: "no", onLoad: this.resizeIframe });
@@ -669,24 +663,6 @@ export class PtcModal {
         },
         "attribute": "bottom-close-btn",
         "reflect": false
-      },
-      "initialFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "initial-focus",
-        "reflect": false,
-        "defaultValue": "true"
       }
     };
   }