@ptcwebops/ptcw-design 6.3.44-beta → 6.3.46-beta

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.js

@@ -31,8 +31,16 @@ export class PtcFilterDropdown {
       }));
     }
   }
-  toggleDropdown() {
+  toggleDropdown(focusInput = false) {
     this.isOpen = !this.isOpen;
+    if (focusInput) {
+      requestAnimationFrame(() => {
+        var _a;
+        const selected = this.hostElement.shadowRoot.querySelector('.filter-list input:checked');
+        const firstInput = this.hostElement.shadowRoot.querySelector('.filter-list input');
+        (_a = (selected || firstInput)) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+    }
   }
   clearFilter() {
     this.selectedOptions = [];
@@ -48,6 +56,7 @@ export class PtcFilterDropdown {
     this.emitSelectedOptions('clearButton');
   }
   emitSelectedOptions(clickedButton) {
+    var _a;
     // debugger
     this.selectedOptions = this.internalOptions
       .filter((option) => {
@@ -67,7 +76,7 @@ export class PtcFilterDropdown {
       this.toggleDropdown();
     }
     if (this.dropdownPlaceholder) {
-      this.dropdownPlaceholder.textContent = this.selectedOptions[0].value;
+      this.dropdownPlaceholder.textContent = (_a = this.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value;
     }
   }
   componentWillRender() {
@@ -75,11 +84,20 @@ export class PtcFilterDropdown {
   }
   handleKeyDown(e) {
     if (e.key === 'Enter') {
-      this.toggleDropdown();
+      this.toggleDropdown(true); // Focus after Enter
+    }
+    else if (e.key === 'Tab' && this.isOpen) {
+      // Let browser do default tabbing, but also guide focus inside dropdown
+      requestAnimationFrame(() => {
+        var _a;
+        const selected = this.hostElement.shadowRoot.querySelector('.filter-list input:checked');
+        const firstInput = this.hostElement.shadowRoot.querySelector('.filter-list input');
+        (_a = (selected || firstInput)) === null || _a === void 0 ? void 0 : _a.focus();
+      });
     }
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle mf-listen", onClick: () => this.toggleDropdown(), tabIndex: 0, onKeyDown: (e) => { this.handleKeyDown(e); } }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn mf-listen", onClick: () => this.clearFilter(), tabIndex: 0, onKeyDown: (e) => {
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle mf-listen", onClick: () => this.toggleDropdown(true), tabIndex: 0, onKeyDown: (e) => { this.handleKeyDown(e); } }, h("span", { class: "dropdown-placeholder" }, h("strong", null, "Filter: "), h("span", { class: "dropdown-filter-name" }, this.placeholder)), h("span", { class: "caret" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, h("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h("li", { key: option.tabId }, h("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h("div", { class: "filter-btns" }, h("span", { class: "clear-btn mf-listen", onClick: () => this.clearFilter(), tabIndex: 0, onKeyDown: (e) => {
         if (e.key === 'Enter')
           this.clearFilter();
       } }, "Clear"), h("ptc-button", { "tracker-id": "filter-apply-cta", type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions('applyButton'), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h("div", { class: "hidden" }, h("slot", null))));

package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css

@@ -326,6 +326,7 @@ a:focus-visible {
 }
 :host .flt-wrapper .back-button:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 :host .flt-wrapper .filter-section {

package/dist/collection/components/ptc-product-list/ptc-product-list.js

@@ -89,6 +89,10 @@ export class PtcProductList {
     });
   }
   componentDidLoad() {
+    // ptcLogger.log('Component loaded!');
+    // ptcLogger.info('Component loaded!');
+    // ptcLogger.warn('Component loaded!');
+    // ptcLogger.error('Component loaded!');
     this.addIds();
     this.noresultSection = this.hostElement.shadowRoot.querySelector('.no-result-wrap');
     this.productList = this.hostElement.shadowRoot.querySelector('.product-list');

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

@@ -15,7 +15,7 @@ export class PtcQuote {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' &&
+    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' && this.quoteImage &&
       h("ptc-picture", { alt: "quote", src: this.quoteImage }), h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
   }
   getCssClassMap() {

package/dist/collection/components/ptc-theater-video/ptc-theater-video.css

@@ -82,10 +82,12 @@ ptc-link, ptc-square-card,
   position: relative;
   border-radius: 12px;
   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.24);
+  margin-top: 5px;
   cursor: pointer;
 }
 :host .img-wrap:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 :host .img-wrap img {

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

@@ -5714,6 +5714,7 @@ Credits to Dave Berning
 }
 .modal .modal-container .vm-close:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 1200px) {
@@ -5746,6 +5747,7 @@ Credits to Dave Berning
 }
 .modal .modal-container .v-nav button:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 .modal .modal-container .card-description-content p {
@@ -5800,6 +5802,7 @@ Credits to Dave Berning
 }
 .modal.modal-only-video .modal-wrapper .vm-close:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
 .modal.modal-only-video .modal-wrapper .aspect-ratio-container {

package/dist/collection/global/global.js

@@ -0,0 +1,3 @@
+// src/global/global.ts
+import { ptcLogger } from '../utils/fef-logger';
+globalThis.ptcLogger = ptcLogger;

package/dist/collection/utils/fef-logger.js

@@ -0,0 +1,23 @@
+class PTCLogger {
+  constructor() {
+    this.prefix = '[PTC FEF LOG]';
+  }
+  format(level, message, ...args) {
+    const timestamp = new Date().toISOString();
+    return [`${this.prefix} [${level.toUpperCase()}] ${timestamp}:`, message, ...args];
+  }
+  log(message, ...args) {
+    console.log(...this.format('log', message, ...args));
+  }
+  info(message, ...args) {
+    console.info(...this.format('info', message, ...args));
+  }
+  warn(message, ...args) {
+    console.warn(...this.format('warn', message, ...args));
+  }
+  error(message, ...args) {
+    console.error(...this.format('error', message, ...args));
+  }
+}
+// Singleton
+export const ptcLogger = new PTCLogger();