@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

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

@@ -1,7 +1,7 @@
-import { Host, h, } from "@stencil/core";
-import { debounce, generateUUID, MapDOM } from "../../utils/utils";
-import info from "../../media/svg-imgs/icon-info.svg";
-import infoGreen from "../../media/svg-imgs/icon-info-green.svg";
+import { Host, h } from '@stencil/core';
+import { debounce, generateUUID, MapDOM } from '../../utils/utils';
+import info from '../../media/svg-imgs/icon-info.svg';
+import infoGreen from '../../media/svg-imgs/icon-info-green.svg';
 class CollapseListItem {
 }
 export class PtcCollapseList {
@@ -29,14 +29,14 @@ export class PtcCollapseList {
     this.ready.emit({
       sender: this.el,
       tree: this.data,
-      search: this.searchText,
+      search: this.searchText
     });
     let event = () => {
       this.changed.emit({
         sender: this.el,
         selectedValue: this.selectedValue,
         selectedItems: this.selectedItems,
-        search: this.searchText,
+        search: this.searchText
       });
     };
     this.debouncedUpdatedEvent = debounce(event, this.debounceUpdateDelay, this);
@@ -44,11 +44,11 @@ export class PtcCollapseList {
   }
   openList() {
     var _a;
-    const listitem = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".listOpen");
+    const listitem = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.listOpen');
     listitem.forEach((item) => {
-      if (item.classList.contains("listOpen")) {
-        item === null || item === void 0 ? void 0 : item.classList.add("expanded");
-        const ulElement = item === null || item === void 0 ? void 0 : item.querySelector("ul");
+      if (item.classList.contains('listOpen')) {
+        item === null || item === void 0 ? void 0 : item.classList.add('expanded');
+        const ulElement = item === null || item === void 0 ? void 0 : item.querySelector('ul');
         if (ulElement) {
           ulElement.style.maxHeight = `${ulElement.scrollHeight}px`;
         }
@@ -59,7 +59,7 @@ export class PtcCollapseList {
     this.viewUpdated.emit({
       sender: this.el,
       tree: this.data,
-      search: this.searchText,
+      search: this.searchText
     });
   }
   onItemSelectedHandler(event) {
@@ -68,7 +68,7 @@ export class PtcCollapseList {
       sender: event ? event.target : this.el,
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
-      tree: this.data,
+      tree: this.data
     });
     this.fireChangedEvent();
   }
@@ -81,7 +81,7 @@ export class PtcCollapseList {
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
       tree: this.data,
-      search: this.searchText,
+      search: this.searchText
     });
     this.fireChangedEvent();
   }
@@ -91,7 +91,7 @@ export class PtcCollapseList {
       sender: event ? event.target : this.el,
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
-      tree: this.data,
+      tree: this.data
     });
   }
   fireChangedEvent() {
@@ -108,9 +108,7 @@ export class PtcCollapseList {
           arr.map((z) => {
             var newItem = new CollapseListItem();
             newItem.isExternalLink = z.linkHref ? true : false;
-            newItem.trackerId = z.trackerId
-              ? z.trackerId
-              : `${this.trackerId}-list-item-${counter++}`;
+            newItem.trackerId = z.trackerId ? z.trackerId : `${this.trackerId}-list-item-${counter++}`;
             if (z.linkHref) {
               newItem.href = z.linkHref;
               newItem.target = z.linkTarget;
@@ -124,14 +122,13 @@ export class PtcCollapseList {
               newItem.name = z.facetName;
               newItem.value = z.facetValue;
               newItem.category = z.category;
-              newItem.allowMultiSelect =
-                z.allowMultiSelect != "false";
-              newItem.enableSearch = z.enableSearch == "true";
+              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
+              newItem.enableSearch = z.enableSearch == 'true';
               newItem.searchBoxPlaceholder = z.placeholderText;
               newItem.tooltip = z.tooltip;
               this.setUpCategory(newItem.category, newItem.allowMultiSelect);
               // Ensure listOpened is set based on is-list-opened attribute
-              newItem.listOpened = z.hasOwnProperty("listOpened");
+              newItem.listOpened = z.hasOwnProperty('listOpened');
             }
             if (z.collapseListItem) {
               newItem.children = new Array();
@@ -148,7 +145,7 @@ export class PtcCollapseList {
             outArr.push(newItem);
           });
         };
-        this.setUpCategory("default", true);
+        this.setUpCategory('default', true);
         buildChildren(dom.collapseListItem, this.data);
       }
     }
@@ -161,15 +158,15 @@ export class PtcCollapseList {
       this.selectedValue[name] = {
         name: name,
         items: new Array(),
-        allowMultiSelect: allowMultiSelect,
+        allowMultiSelect: allowMultiSelect
       };
     }
   }
   collapseAllFirstLevelItems(exclude) {
-    let items = this.el.shadowRoot.querySelectorAll(".level-1");
+    let items = this.el.shadowRoot.querySelectorAll('.level-1');
     items.forEach((z) => {
-      if (z.classList.contains("expanded") && z != exclude) {
-        z.classList.remove("expanded");
+      if (z.classList.contains('expanded') && z != exclude) {
+        z.classList.remove('expanded');
       }
     });
   }
@@ -179,13 +176,13 @@ export class PtcCollapseList {
         this.refreshBuffer = timestamp;
       }
       const elapsed = timestamp - this.refreshBuffer;
-      let items = this.el.shadowRoot.querySelectorAll("li");
+      let items = this.el.shadowRoot.querySelectorAll('li');
       items.forEach((z) => {
-        let ul = z.querySelector(":scope > ul");
+        let ul = z.querySelector(':scope > ul');
         if (ul) {
-          if (!z.classList.contains("expanded")) {
-            ul.style.removeProperty("max-height");
-            let childAnchorItems = ul.querySelectorAll("a");
+          if (!z.classList.contains('expanded')) {
+            ul.style.removeProperty('max-height');
+            let childAnchorItems = ul.querySelectorAll('a');
             if (childAnchorItems) {
               childAnchorItems.forEach((child) => {
                 if (child) {
@@ -193,7 +190,7 @@ export class PtcCollapseList {
                 }
               });
             }
-            let childInputsItems = ul.querySelectorAll("input");
+            let childInputsItems = ul.querySelectorAll('input');
             if (childInputsItems) {
               childInputsItems.forEach((child) => {
                 if (child) {
@@ -204,21 +201,19 @@ export class PtcCollapseList {
           }
           else {
             ul.style.maxHeight = ul.scrollHeight + "px";
-            let level1Parent = ul.closest(".level-1");
+            let level1Parent = ul.closest('.level-1');
             if (level1Parent) {
-              if (level1Parent.classList.contains("expanded")) {
+              if (level1Parent.classList.contains('expanded')) {
                 if (ul.childNodes) {
                   ul.childNodes.forEach((child) => {
-                    if (child.children[0] &&
-                      child.children[0].tagName !=
-                        "DIV") {
-                      child.children[0].setAttribute("tabindex", "0");
+                    if (child.children[0] && child.children[0].tagName != 'DIV') {
+                      child.children[0].setAttribute('tabindex', '0');
                     }
                   });
                 }
               }
             }
-            let childInputsItems = ul.querySelectorAll("input");
+            let childInputsItems = ul.querySelectorAll('input');
             if (childInputsItems) {
               childInputsItems.forEach((child) => {
                 if (child) {
@@ -247,7 +242,7 @@ export class PtcCollapseList {
     var _a;
     let selectedItem = this.hashMap[uuid];
     if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : "default";
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
       if (!this.selectedValue[categoryName]) {
         this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
       }
@@ -257,20 +252,14 @@ export class PtcCollapseList {
           items.push(selectedItem.value);
         }
         else {
-          this.selectedItems = this.selectedItems.filter((z) => {
-            return z.value != items[0];
-          });
+          this.selectedItems = this.selectedItems.filter((z) => { return z.value != items[0]; });
           items = [selectedItem.value];
         }
         this.selectedItems.push(selectedItem);
       }
       else {
-        items = items.filter((z) => {
-          return z != selectedItem.value;
-        });
-        this.selectedItems = this.selectedItems.filter((z) => {
-          return z.value != selectedItem.value;
-        });
+        items = items.filter((z) => { return z != selectedItem.value; });
+        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
       }
       this.selectedValue[categoryName].items = items;
     }
@@ -279,18 +268,14 @@ export class PtcCollapseList {
     var _a;
     let selectedItem = this.hashMap[uuid];
     if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : "default";
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
       if (!this.selectedValue[categoryName]) {
         this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
       }
       let items = this.selectedValue[categoryName].items;
       if (items.indexOf(selectedItem.value) > -1) {
-        items = items.filter((z) => {
-          return z != selectedItem.value;
-        });
-        this.selectedItems = this.selectedItems.filter((z) => {
-          return z.value != selectedItem.value;
-        });
+        items = items.filter((z) => { return z != selectedItem.value; });
+        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
       }
       this.selectedValue[categoryName].items = items;
     }
@@ -299,7 +284,7 @@ export class PtcCollapseList {
     var _a;
     let selectedItem = this.hashMap[uuid];
     if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : "default";
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
       if (!this.selectedValue[categoryName]) {
         this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
       }
@@ -334,9 +319,7 @@ export class PtcCollapseList {
       let input = e.target;
       let search = input.value;
       if (input) {
-        let items = input
-          .closest("ul")
-          .querySelectorAll("li:not(.search-box-wrapper)");
+        let items = input.closest('ul').querySelectorAll('li:not(.search-box-wrapper)');
         if (search && search.length > 0) {
           items.forEach((item) => {
             var _a;
@@ -369,19 +352,17 @@ export class PtcCollapseList {
     if (event) {
       event.preventDefault();
       let sender = event.currentTarget;
-      let root = sender.closest(".level-1");
-      let parent = sender.closest("li");
+      let root = sender.closest('.level-1');
+      let parent = sender.closest('li');
       if (collapseParents) {
         this.collapseAllFirstLevelItems(root);
       }
       if (parent) {
         parent.classList.toggle("expanded");
       }
-      if (sender.classList.contains("expander-icon")) {
-        let icon = parent.classList.contains("expanded")
-          ? "minus"
-          : "plus";
-        sender.querySelector("icon-asset").setAttribute("name", icon);
+      if (sender.classList.contains('expander-icon')) {
+        let icon = parent.classList.contains('expanded') ? 'minus' : 'plus';
+        sender.querySelector('icon-asset').setAttribute('name', icon);
       }
       this.updateExpandedItems();
     }
@@ -390,24 +371,21 @@ export class PtcCollapseList {
   render() {
     let renderToolTip = (tooltip) => {
       if (tooltip) {
-        return (h("ptc-tooltip", { "text-display": "inline", mode: "wrapper", "z-index": "z-2", position: "bottom", description: "" }, h("div", { class: "icon-wrapper" }, h("i", { class: "active-icon", innerHTML: infoGreen }), h("i", { class: "inactive-icon", innerHTML: info })), h("span", { class: "popup", slot: "description" }, h("i", { innerHTML: infoGreen }), h("div", { class: "content", innerHTML: tooltip }))));
+        return (h("ptc-tooltip", { "text-display": "inline", mode: "wrapper", "z-index": "z-2", position: "bottom", description: '' }, h("div", { class: "icon-wrapper" }, h("i", { class: 'active-icon', innerHTML: infoGreen }), h("i", { class: 'inactive-icon', innerHTML: info })), h("span", { class: "popup", slot: "description" }, h("i", { innerHTML: infoGreen }), h("div", { class: "content", innerHTML: tooltip }))));
       }
     };
     let renderLevel = (arr, level, searchOptions) => {
       let levelClass = `level-${level} mf-listen`;
-      let tId = this.trackerId ? `${this.trackerId}-${levelClass}` : "";
-      return (h("ul", null, searchOptions && (h("li", { class: "search-box-wrapper" }, h("div", { id: tId, class: "search-box mf-listen" }, h("input", { class: "search-box", id: "searchBoxId", type: "text", placeholder: searchOptions.placeholder, tabIndex: -1, onKeyUp: (e) => {
-          this.onItemFilterSearchUpdate(e);
-        }, onBlur: (e) => {
-          this.onItemFilterSearchUpdate(e);
-        } })))), arr.map((z) => {
+      let tId = this.trackerId ? `${this.trackerId}-${levelClass}` : '';
+      return (h("ul", null, searchOptions &&
+        h("li", { class: "search-box-wrapper" }, h("div", { id: tId, class: "search-box mf-listen" }, h("input", { class: "search-box", id: "searchBoxId", type: "text", placeholder: searchOptions.placeholder, tabIndex: -1, onKeyUp: (e) => { this.onItemFilterSearchUpdate(e); }, onBlur: (e) => { this.onItemFilterSearchUpdate(e); } }))), arr.map((z) => {
         let expandable = false;
         let selectable = false;
         let icon;
         let searchOptions = undefined;
         if (z.enableSearch) {
           searchOptions = {
-            placeholder: z.searchBoxPlaceholder,
+            placeholder: z.searchBoxPlaceholder
           };
         }
         if (level == 1) {
@@ -434,10 +412,8 @@ export class PtcCollapseList {
         }
         return (h("li", { id: z.trackerId, class: {
             [levelClass]: true,
-            listOpen: z.listOpened,
-          } }, getLink(z, icon, level, expandable, selectable), z.children
-          ? renderLevel(z.children, level + 1, searchOptions)
-          : ""));
+            listOpen: z.listOpened
+          } }, getLink(z, icon, level, expandable, selectable), z.children ? renderLevel(z.children, level + 1, searchOptions) : ''));
       })));
     };
     let getLink = (item, icon, level, expandable, selectable) => {
@@ -454,29 +430,22 @@ export class PtcCollapseList {
       if (item.isExternalLink) {
         return (h("a", { href: item.href, id: item.id, target: item.target, title: item.title, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
       }
-      else if ((!expandable && selectable) ||
-        (expandable && !selectable)) {
+      else if ((!expandable && selectable) || (expandable && !selectable)) {
         return (h("a", { href: "#", id: item.id, title: item.text, onClick: clickEvent, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
       }
       else {
         return [
-          h("a", { class: "expander-icon", href: "#", id: item.id, onClick: (e) => {
-              this.onExpandClick(e, false);
-            }, tabindex: tabIndexValue }, icon),
-          h("a", { href: "#", title: item.text, id: item.id, onClick: (e) => {
-              this.onItemLinkClick(e, item.id);
-            }, tabindex: tabIndexValue }, item.text),
-          renderToolTip(tooltip),
+          h("a", { class: "expander-icon", href: "#", id: item.id, onClick: (e) => { this.onExpandClick(e, false); }, tabindex: tabIndexValue }, icon),
+          h("a", { href: "#", title: item.text, id: item.id, onClick: (e) => { this.onItemLinkClick(e, item.id); }, tabindex: tabIndexValue }, item.text),
+          renderToolTip(tooltip)
         ];
       }
     };
     // Ignore search bar if the showSearchBar is false
     if (!this.showSearchBar) {
-      return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: "h2", "title-size": "medium", "title-weight": "w-6", "text-align": "left", upperline: "no-upperline" }, this.header), renderLevel(this.data, 1))));
+      return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), renderLevel(this.data, 1))));
     }
-    return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: "h2", "title-size": "medium", "title-weight": "w-6", "text-align": "left", upperline: "no-upperline" }, this.header), h("div", { id: `${this.trackerId}-search-box`, class: "search-box mf-listen" }, h("input", { type: "text", id: "searchBoxId", placeholder: this.placeholderText, onKeyUp: (e) => {
-        this.onInputUpdated(e);
-      } })), renderLevel(this.data, 1))));
+    return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), h("div", { id: `${this.trackerId}-search-box`, class: "search-box mf-listen" }, h("input", { type: "text", id: "searchBoxId", placeholder: this.placeholderText, onKeyUp: (e) => { this.onInputUpdated(e); } })), renderLevel(this.data, 1))));
   }
   async removeSelectedItem(value) {
     let item = this.getItemByValue(value);

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

@@ -9,10 +9,8 @@ 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;
@@ -31,10 +29,8 @@ 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-container/ptc-container.js

@@ -1,10 +1,10 @@
-import { h, Host } from "@stencil/core";
+import { h, Host } from '@stencil/core';
 export class PtcContainer {
   constructor() {
-    this.backgroundColor = "white";
-    this.elevation = "small";
-    this.containerType = "";
-    this.spacing = "xxx-large";
+    this.backgroundColor = 'white';
+    this.elevation = 'small';
+    this.containerType = '';
+    this.spacing = 'xxx-large';
     this.styles = undefined;
   }
   render() {
@@ -13,21 +13,21 @@ export class PtcContainer {
   }
   getContainerClass() {
     switch (this.containerType) {
-      case "large":
-        return "ptc-container-lg";
-      case "none":
+      case 'large':
+        return 'ptc-container-lg';
+      case 'none':
         return undefined;
       default:
-        return "ptc-container";
+        return 'ptc-container';
     }
   }
   getCssClassMap() {
     const spacing = `spacing-${this.spacing}`;
     return {
-      ["content-wrapper"]: true,
+      ['content-wrapper']: true,
       [this.backgroundColor]: true,
       [this.elevation]: true,
-      [spacing]: true,
+      [spacing]: true
     };
   }
   static get is() { return "ptc-container"; }
@@ -48,7 +48,7 @@ export class PtcContainer {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"white\" | \"gray\"",
+          "original": "'white' | 'gray'",
           "resolved": "\"gray\" | \"white\"",
           "references": {}
         },
@@ -60,13 +60,13 @@ export class PtcContainer {
         },
         "attribute": "background-color",
         "reflect": false,
-        "defaultValue": "\"white\""
+        "defaultValue": "'white'"
       },
       "elevation": {
         "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": {}
         },
@@ -78,13 +78,13 @@ export class PtcContainer {
         },
         "attribute": "elevation",
         "reflect": false,
-        "defaultValue": "\"small\""
+        "defaultValue": "'small'"
       },
       "containerType": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"large\" | \"none\" | \"\"",
+          "original": "'large' | 'none' | ''",
           "resolved": "\"\" | \"large\" | \"none\"",
           "references": {}
         },
@@ -96,13 +96,13 @@ export class PtcContainer {
         },
         "attribute": "container-type",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "''"
       },
       "spacing": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"xx-small\"\r\n\t\t| \"x-small\"\r\n\t\t| \"small\"\r\n\t\t| \"medium\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xxx-large\"",
+          "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large'",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\"",
           "references": {}
         },
@@ -114,7 +114,7 @@ export class PtcContainer {
         },
         "attribute": "spacing",
         "reflect": false,
-        "defaultValue": "\"xxx-large\""
+        "defaultValue": "'xxx-large'"
       },
       "styles": {
         "type": "string",

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

@@ -9,10 +9,8 @@ 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;
@@ -31,10 +29,8 @@ 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 */