@ptcwebops/ptcw-design 5.8.0 → 5.8.2

package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js

@@ -2,48 +2,92 @@ import { Host, h, getAssetPath } from '@stencil/core';
 //import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';
 export class PtcDynamicCard {
   constructor() {
+    /**
+     * Open the card
+     */
+    this.openCard = () => {
+      if (!this.isExpanded) {
+        this.isExpanded = true;
+        this.cardOpened.emit(this.trackerId);
+      }
+      // If already expanded, do nothing to ensure at least one card remains open
+    };
+    /**
+     * Handle keyboard interactions
+     */
+    this.handleKeyDown = (event) => {
+      switch (event.key) {
+        case 'Enter':
+          //event.preventDefault();
+          this.openCard();
+          break;
+        default:
+          break;
+      }
+    };
     this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
     this.cardType = 'sequential';
     this.cardTitle = 'Card Title Goes Here';
     this.cardImgSrc = undefined;
     this.cardImgAlt = undefined;
     this.cardScreen = 'desktop';
-    this.isExpanded = undefined;
+    this.isExpanded = false;
     this.overlayExists = true;
     this.styles = undefined;
     this.trackerId = undefined;
   }
-  // handleClick() {
-  //   this.isExpanded = !this.isExpanded;
-  // }
+  componentDidLoad() {
+    // Handle mouse enter and leave for overlay
+    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
+    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
+  }
+  /**
+   * Listen for 'cardOpened' events on the document to close other cards
+   */
+  handleCardOpened(event) {
+    const openedTrackerId = event.detail;
+    if (openedTrackerId !== this.trackerId && this.isExpanded) {
+      this.isExpanded = false;
+    }
+  }
+  /**
+   * Focus the card-wrapper element
+   */
+  async focusCardWrapper() {
+    const cardWrapper = this.el.querySelector('.card-wrapper');
+    if (cardWrapper) {
+      cardWrapper.focus();
+    }
+  }
+  /**
+   * Get CSS class map
+   */
+  getCssClassMap() {
+    return {
+      [this.cardType]: true,
+    };
+  }
+  /**
+   * Get desktop card based on expansion state
+   */
   getDesktopCard() {
     if (this.cardScreen === 'desktop' && this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId, tabindex: "0", role: "button", "aria-expanded": this.isExpanded }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
+        h("div", { class: "card card-dt-open mf-listen", id: this.trackerId }, h("ptc-card-content", { "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))), h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
       ];
     }
     else if (this.cardScreen === 'desktop' && !this.isExpanded) {
       return [
-        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId, role: "button", tabindex: "0", "aria-expanded": this.isExpanded }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? h("ptc-overlay", { "filter-color": "solid-black-1" }) : h("ptc-overlay", { "filter-color": "solid-black-2" })), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
+        h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId }, h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (h("ptc-overlay", { "filter-color": "solid-black-1" })) : (h("ptc-overlay", { "filter-color": "solid-black-2" }))), h("div", { class: "closed-content", "card-type": "card-dynamic" }, h("div", { class: "card-title" }, h("h2", null, this.cardTitle)))),
       ];
     }
     else {
       return null;
     }
   }
-  componentDidLoad() {
-    // this.handleResize();
-    this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
-    this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
-  }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper" }, this.cardScreen == 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId, role: "button", "aria-expanded": this.isExpanded }, h("ptc-picture", { height: '287', "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: true,
-    };
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: "card-wrapper", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, h("div", { class: "card-title" }, h("h3", null, this.cardTitle)), h("div", { class: "card-content" }, h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))))));
   }
   static get is() { return "ptc-dynamic-card"; }
   static get encapsulation() { return "shadow"; }
@@ -150,20 +194,21 @@ export class PtcDynamicCard {
       },
       "isExpanded": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "is card expanded?"
         },
         "attribute": "is-expanded",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "false"
       },
       "styles": {
         "type": "string",
@@ -206,5 +251,55 @@ export class PtcDynamicCard {
       "overlayExists": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "cardOpened",
+        "name": "cardOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when this card is opened"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "focusCardWrapper": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus the card-wrapper element",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "cardOpened",
+        "method": "handleCardOpened",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -39,7 +39,7 @@ export class PtcEllipsisDropdown {
     return (h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (h("div", { class: 'mob-drop' }, h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), h("div", { class: "dropdown-container" }, h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
       let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
       let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
-      return (h("dropdown-item", { class: activeClass + activeDropdown }, h("span", { onClick: (e) => {
+      return (h("dropdown-item", { class: activeClass + activeDropdown + 'mf-listen' }, h("span", { onClick: (e) => {
           e.preventDefault();
           this.onItemSelected(dataItem);
         } }, dataItem.text)));

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: 8px;
+  padding: calc((34px - 18px) / 2);
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: 0px;
+  margin: calc((34px - 34px) / 2);
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: 8px;
+  top: calc((34px - 18px) / 2);
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: 8px;
+  left: calc((34px - 18px) / 2);
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: 0px;
+  top: calc((34px - 34px) / 2);
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: 0px;
+  right: calc((34px - 34px) / 2);
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: 0px;
+  left: calc((34px - 34px) / 2);
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

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

@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,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.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 

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

@@ -54,7 +54,116 @@ ptc-link, ptc-square-card,
   }
 }
 
-.dropdown li {
+.ptc-multi-select {
+  position: relative;
+  display: block;
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+.ptc-multi-select.invalid::before {
+  content: "";
+  position: absolute;
+  width: calc(100% + 16px);
+  height: calc(100% + 8px);
+  background: #FEF3F3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 0;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ptc-multi-select.invalid .mdc-select-helper-text--validation-msg {
+  z-index: 2;
+  opacity: 1;
+  position: relative;
+  color: #AF3231;
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-xx-small);
+  font-style: normal;
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-densest);
+  opacity: 1;
+  height: auto;
+  margin-left: 8px;
+  margin-top: var(--ptc-element-spacing-02);
+}
+.ptc-multi-select.invalid .mdc-select-helper-text--validation-msg svg {
+  transform: translate(-8px, 3px);
+}
+.ptc-multi-select .multi-select-label {
+  display: block;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: normal;
+  margin-bottom: var(--ptc-element-spacing-01);
+  z-index: 1;
+  position: relative;
+  color: #40434A;
+}
+.ptc-multi-select .selected-items {
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  padding: 8px;
+  border-radius: 0px;
+  position: relative;
+  user-select: none;
+  color: var(--color-gray-12);
+  font-family: var(--ptc-font-latin);
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-regular);
+  max-width: 100%;
+  max-height: 34px;
+  overflow: hidden;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ptc-multi-select .selected-items:focus-visible {
+  outline: 2px solid #007bff;
+}
+.ptc-multi-select .selected-items .input-text {
+  width: calc(100% - 18px);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
+.ptc-multi-select .multi-select-icon {
+  fill: rgba(0, 0, 0, 0.54);
+  position: absolute;
+  right: var(--ptc-element-spacing-02);
+  width: 18px;
+  height: 18px;
+  margin: 0 auto;
+}
+.ptc-multi-select .multi-select-icon .multi-arrow-svg {
+  transform: translate(-50%, 25%);
+  position: relative;
+  left: 50%;
+  bottom: 25%;
+}
+.ptc-multi-select .dropdown {
+  display: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border: 1px solid #ccc;
+  max-height: 350px;
+  overflow-y: auto;
+  position: absolute;
+  width: 100%;
+  background-color: #fff;
+  z-index: 1000;
+  /* Custom square for the checkbox */
+  /* When checkbox is checked, change background color */
+}
+.ptc-multi-select .dropdown.show {
+  display: block;
+}
+.ptc-multi-select .dropdown li {
   display: flex;
   align-items: center;
   padding: 5px 8px;
@@ -63,16 +172,16 @@ ptc-link, ptc-square-card,
   position: relative;
   /* Focused item styles */
 }
-.dropdown li:hover, .dropdown li:focus-within {
+.ptc-multi-select .dropdown li:hover, .ptc-multi-select .dropdown li:focus-within {
   background-color: var(--color-gray-02);
 }
-.dropdown li.selected {
+.ptc-multi-select .dropdown li.selected {
   background-color: var(--color-gray-02);
 }
-.dropdown li.selected:hover {
+.ptc-multi-select .dropdown li.selected:hover {
   background-color: var(--color-gray-04);
 }
-.dropdown li label {
+.ptc-multi-select .dropdown li label {
   display: -webkit-box;
   font-family: var(--ptc-font-latin);
   font-size: var(--ptc-font-size-xx-small);
@@ -87,7 +196,91 @@ ptc-link, ptc-square-card,
   text-overflow: ellipsis;
   line-height: 24px;
 }
-.dropdown li:focus-within {
+.ptc-multi-select .dropdown li:focus-within {
   background-color: var(--color-gray-02);
   outline: none;
+}
+.ptc-multi-select .dropdown li:last-child {
+  border-bottom: none;
+}
+.ptc-multi-select .dropdown input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+.ptc-multi-select .dropdown input[type=checkbox]:checked {
+  background-color: var(--color-green-07);
+}
+.ptc-multi-select .dropdown label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 5px;
+  width: 14px;
+  height: 14px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+.ptc-multi-select .dropdown input[type=checkbox]:checked + label::before {
+  background-color: var(--color-green-07);
+  border-color: var(--color-green-07);
+}
+.ptc-multi-select .dropdown input[type=checkbox]:checked + label::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.15341 1.14134C7.0572 1.04719 6.94024 1 6.80262 1C6.66499 1 6.54771 1.04719 6.45158 1.14134L3.06571 4.45979L1.5485 2.96965C1.45197 2.8755 1.33501 2.82831 1.19738 2.82831C1.05976 2.82831 0.942797 2.8755 0.846348 2.96965L0.144437 3.65645C0.0482247 3.75091 0 3.86528 0 4.00004C0 4.13472 0.0482247 4.2494 0.144437 4.34355L2.01277 6.17186L2.71492 6.85866C2.81113 6.95312 2.92809 7 3.06571 7C3.20334 7 3.3203 6.95312 3.41675 6.85866L4.11866 6.17186L7.85556 2.51525C7.95177 2.42086 8 2.30641 8 2.17173C8 2.03705 7.95177 1.9226 7.85556 1.82814L7.15341 1.14134Z' fill='white'/%3E%3C/svg%3E");
+  position: absolute;
+  left: 3px;
+  top: 0px;
+  color: white;
+  width: 8px;
+  height: 24px;
+}
+.ptc-multi-select button.ddl-click-text {
+  all: unset;
+  cursor: pointer;
+  color: var(--color-gray-7);
+  text-decoration: underline;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+}
+.ptc-multi-select .tooltip {
+  position: absolute;
+  transform: translate(0, -12px);
+  z-index: 1001;
+  padding: 8px;
+  color: var(--color-white);
+  font-size: var(--ptc-font-size-xxx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  background: var(--color-gray-09);
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+  border: none;
+  border-radius: 2px;
+  width: auto;
+  height: fit-content;
+  text-align: left;
+  text-shadow: none;
+  white-space: normal;
+}
+.ptc-multi-select .tooltip::after {
+  position: absolute;
+  content: "";
+  bottom: 0px;
+  border: 8px solid transparent;
+  border-top: 8px solid var(--color-gray-09);
+  left: 50%;
+  transform: translate(-50%, 100%);
+}
+@media only screen and (min-width: 992px) {
+  .ptc-multi-select .tooltip {
+    width: 273px;
+    transform: translate(-100%, 80%);
+  }
+  .ptc-multi-select .tooltip::after {
+    right: 8px;
+    left: auto;
+    transform: translateY(100%);
+  }
+}
+.ptc-multi-select .tooltip span {
+  word-break: initial;
 }

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-tabs/ptc-pricing-tabs.css

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.3333333333% - 10.66666666px);
+    width: calc(33.333333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,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.3333333333% - 21.3333333px);
+    width: calc(33.333333333333% - 21.3333333px);
   }
 }
 

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

@@ -69,7 +69,7 @@ export class PtcReadmore {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)) : null, h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex + ' ' + this.readMorePosition} read-more-cta-label` }, h("span", null, this.moreText)))));
+    return (h(Host, { class: this.display }, h("div", { class: classMap }, h("input", { type: "checkbox", id: "expanded", onClick: (e) => this.handleClick(e), tabIndex: -1 }), !!this.visibleLines || !!this.visibleLinesCustom ? h("p", { class: `read-more-text ${this.visibleLines}`, style: { WebkitLineClamp: `${this.visibleLinesCustom}` } }, h("slot", null)) : null, h("label", { htmlFor: "expanded", role: "button", class: `${this.zIndex + ' ' + this.readMorePosition} read-more-cta-label mf-listen` }, h("span", null, this.moreText)))));
   }
   getCssClassMap() {
     return {