@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/collection/components/ptc-scroll-button/ptc-scroll-button.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-scroll-button/ptc-scroll-button.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcScrollButton {
   constructor() {
     //slider!: HTMLElement;
@@ -36,24 +36,25 @@ export class PtcScrollButton {
     this.handleClick = () => {
       if (!this.scrollContainer)
         return;
-      const scrollValue = this.scrollAmount * (this.direction === 'left' || this.direction === 'up' ? -1 : 1);
-      if (this.orientation === 'horizontal') {
+      const scrollValue = this.scrollAmount *
+        (this.direction === "left" || this.direction === "up" ? -1 : 1);
+      if (this.orientation === "horizontal") {
         this.scrollContainer.scrollBy({
           left: scrollValue,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
-      else if (this.orientation === 'vertical') {
+      else if (this.orientation === "vertical") {
         this.scrollContainer.scrollBy({
           top: scrollValue,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
       }
     };
     this.direction = undefined;
     this.scrollContainerClass = undefined;
     this.scrollAmount = 100;
-    this.orientation = 'horizontal';
+    this.orientation = "horizontal";
     this.trackerId = undefined;
     this.styles = undefined;
     this.isVisible = true;
@@ -63,12 +64,12 @@ export class PtcScrollButton {
   componentWillLoad() {
     this.scrollContainer = document.querySelector(`.${this.scrollContainerClass}`);
     if (this.scrollContainer) {
-      this.scrollContainer.classList.add('hide-scrollbar');
+      this.scrollContainer.classList.add("hide-scrollbar");
       this.updateVisibility(); // Initial visibility check
-      this.scrollContainer.addEventListener('scroll', this.handleScroll);
+      this.scrollContainer.addEventListener("scroll", this.handleScroll);
     }
     else {
-      console.error('scrollContainer ele not found');
+      console.error("scrollContainer ele not found");
     }
   }
   componentDidLoad() {
@@ -79,7 +80,7 @@ export class PtcScrollButton {
   }
   disconnectedCallback() {
     if (this.scrollContainer) {
-      this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+      this.scrollContainer.removeEventListener("scroll", this.handleScroll);
       this.disableDragging();
     }
   }
@@ -87,38 +88,38 @@ export class PtcScrollButton {
     this.updateVisibility();
   }
   enableDragging() {
-    this.scrollContainer.addEventListener('mousedown', this.startDragging);
-    this.scrollContainer.addEventListener('mousemove', this.performDragging);
-    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.addEventListener(event, this.stopDragging));
+    this.scrollContainer.addEventListener("mousedown", this.startDragging);
+    this.scrollContainer.addEventListener("mousemove", this.performDragging);
+    ["mouseup", "mouseleave"].forEach((event) => this.scrollContainer.addEventListener(event, this.stopDragging));
   }
   disableDragging() {
-    this.scrollContainer.removeEventListener('mousedown', this.startDragging);
-    this.scrollContainer.removeEventListener('mousemove', this.performDragging);
-    ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.removeEventListener(event, this.stopDragging));
+    this.scrollContainer.removeEventListener("mousedown", this.startDragging);
+    this.scrollContainer.removeEventListener("mousemove", this.performDragging);
+    ["mouseup", "mouseleave"].forEach((event) => this.scrollContainer.removeEventListener(event, this.stopDragging));
   }
   updateVisibility() {
     if (!this.scrollContainer)
       return;
-    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = this.scrollContainer;
-    if (this.orientation === 'horizontal') {
-      if (this.direction === 'left') {
+    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight, } = this.scrollContainer;
+    if (this.orientation === "horizontal") {
+      if (this.direction === "left") {
         this.isVisible = scrollLeft > 0;
       }
-      else if (this.direction === 'right') {
+      else if (this.direction === "right") {
         this.isVisible = scrollLeft + clientWidth + 1 < scrollWidth; // "+1" adjustments after adding margin-right 40px
       }
     }
-    else if (this.orientation === 'vertical') {
-      if (this.direction === 'up') {
+    else if (this.orientation === "vertical") {
+      if (this.direction === "up") {
         this.isVisible = scrollTop > 0;
       }
-      else if (this.direction === 'down') {
+      else if (this.direction === "down") {
         this.isVisible = scrollTop + clientHeight < scrollHeight;
       }
     }
   }
   render() {
-    return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
+    return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === "left" && (h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" })), this.direction === "right" && (h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" })), this.direction === "up" && "▲", this.direction === "down" && "▼"))));
   }
   static get is() { return "ptc-scroll-button"; }
   static get encapsulation() { return "shadow"; }
@@ -138,7 +139,7 @@ export class PtcScrollButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'left' | 'right' | 'up' | 'down'",
+          "original": "\"left\" | \"right\" | \"up\" | \"down\"",
           "resolved": "\"down\" | \"left\" | \"right\" | \"up\"",
           "references": {}
         },
@@ -190,7 +191,7 @@ export class PtcScrollButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'horizontal' | 'vertical'",
+          "original": "\"horizontal\" | \"vertical\"",
           "resolved": "\"horizontal\" | \"vertical\"",
           "references": {}
         },
@@ -202,7 +203,7 @@ export class PtcScrollButton {
         },
         "attribute": "orientation",
         "reflect": false,
-        "defaultValue": "'horizontal'"
+        "defaultValue": "\"horizontal\""
       },
       "trackerId": {
         "type": "string",

package/dist/collection/components/ptc-search-field/ptc-search-field.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-search-field/ptc-search-field.js

@@ -1,34 +1,34 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class PtcSearchField {
   constructor() {
     this.textValue = undefined;
     this.placeholderLabel = undefined;
     this.darkTheme = undefined;
     this.isNews = undefined;
-    this.elevation = 'small';
+    this.elevation = "small";
     this.enableClear = false;
     this.styles = undefined;
   }
   textChangedHandler(event) {
     this.valueChanged.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
+      sender: this,
+      event: event,
+      searchTerm: this.getSearchValue(),
     });
   }
   buttonClickHandler(event) {
     this.clicked.emit({
-      'sender': this,
-      'event': event,
-      'searchTerm': this.getSearchValue()
+      sender: this,
+      event: event,
+      searchTerm: this.getSearchValue(),
     });
   }
   keyDownHandler(event) {
-    if (event.key == 'Enter') {
+    if (event.key == "Enter") {
       this.clicked.emit({
-        'sender': this,
-        'event': event,
-        'searchTerm': this.getSearchValue()
+        sender: this,
+        event: event,
+        searchTerm: this.getSearchValue(),
       });
     }
     if (this.getSearchValue() && this.enableClear) {
@@ -40,8 +40,8 @@ export class PtcSearchField {
     }
   }
   getSearchValue() {
-    let result = '';
-    let input = this.el.shadowRoot.querySelector('input');
+    let result = "";
+    let input = this.el.shadowRoot.querySelector("input");
     if (input) {
       result = input.value;
     }
@@ -49,8 +49,7 @@ export class PtcSearchField {
   }
   async clearSearchValue() {
     this.textValue = "";
-    let input = this.el.shadowRoot.querySelector('input');
-    ;
+    let input = this.el.shadowRoot.querySelector("input");
     if (input) {
       input.value = "";
       this.enableClear = false;
@@ -59,14 +58,25 @@ export class PtcSearchField {
   render() {
     const classMap = this.getCssClassMap();
     const clearIconColor = this.darkTheme ? "white" : "black";
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: 'input-wrap mf-listen', id: "searchTextID" }, h("input", { id: "ptc-search-input", type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => { this.keyDownHandler(e); }, onKeyUp: () => { this.keyUpHandler(); }, onChange: (e) => { this.textChangedHandler(e); } }), this.enableClear && h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => { this.clearSearchValue(); this.buttonClickHandler(e); } }))), h("div", { class: "tracker-div mf-listen", id: "searchBtnID" }, h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => { this.buttonClickHandler(e); } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" }))))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "search-div" }, h("div", { class: "input-wrap mf-listen", id: "searchTextID" }, h("input", { id: "ptc-search-input", type: "text", value: this.textValue, placeholder: this.placeholderLabel, onKeyDown: (e) => {
+        this.keyDownHandler(e);
+      }, onKeyUp: () => {
+        this.keyUpHandler();
+      }, onChange: (e) => {
+        this.textChangedHandler(e);
+      } }), this.enableClear && (h("div", { class: "icon-wrapper" }, h("icon-asset", { class: "cls", type: "ptc", color: clearIconColor, name: "times", size: "xxx-small", onClick: (e) => {
+        this.clearSearchValue();
+        this.buttonClickHandler(e);
+      } })))), h("div", { class: "tracker-div mf-listen", id: "searchBtnID" }, h("button", { type: "button", color: "blackgrey", class: "search-btn", onClick: (e) => {
+        this.buttonClickHandler(e);
+      } }, h("icon-asset", { type: "ptc", size: "medium", name: "new-search", color: "white" }))))));
   }
   getCssClassMap() {
     return {
-      ['dark']: this.darkTheme ? true : false,
+      ["dark"]: this.darkTheme ? true : false,
       [this.elevation]: true,
-      ['enable-clear']: this.enableClear,
-      ['news']: this.isNews ? true : false,
+      ["enable-clear"]: this.enableClear,
+      ["news"]: this.isNews ? true : false,
     };
   }
   static get is() { return "ptc-search-field"; }
@@ -155,7 +165,7 @@ export class PtcSearchField {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'x-small' | 'small' | 'medium' | 'large' | 'x-large'",
+          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {}
         },
@@ -167,7 +177,7 @@ export class PtcSearchField {
         },
         "attribute": "elevation",
         "reflect": false,
-        "defaultValue": "'small'"
+        "defaultValue": "\"small\""
       },
       "enableClear": {
         "type": "boolean",

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

@@ -6039,8 +6039,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -6059,8 +6061,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -6096,7 +6100,7 @@ ptc-link, ptc-square-card,
   margin-bottom: var(--ptc-element-spacing-01);
   z-index: 1;
   position: relative;
-  color: #40434A;
+  color: #40434a;
 }
 .ptc-select .mdc-select {
   display: flex;
@@ -6108,7 +6112,7 @@ ptc-link, ptc-square-card,
   position: absolute;
   width: calc(100% + 16px);
   height: calc(100% + 8px);
-  background: #FEF3F3;
+  background: #fef3f3;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -6145,7 +6149,7 @@ ptc-link, ptc-square-card,
   transform: translate(-8px, 3px);
 }
 .ptc-select .mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid .mdc-select-helper-text--validation-msg {
-  color: #AF3231;
+  color: #af3231;
   font-family: Raleway;
   font-size: 14px;
   font-style: normal;
@@ -6156,7 +6160,7 @@ ptc-link, ptc-square-card,
   margin-left: 8px;
 }
 .ptc-select .mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid .mdc-select-helper-text--info-msg {
-  color: #40434A;
+  color: #40434a;
   font-family: var(--ptc-font-latin);
   font-size: var(--ptc-font-size-xx-small);
   font-style: normal;