@ptcwebops/ptcw-design 4.1.3 → 4.1.5

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

@@ -52,11 +52,44 @@ ptc-link, ptc-square-card {
   }
 }
 
-:host {
+.ptc-multi-select {
+  position: relative;
   display: block;
+  margin-bottom: var(--ptc-element-spacing-04);
 }
-
-.multi-select-label {
+.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);
@@ -66,8 +99,7 @@ ptc-link, ptc-square-card {
   position: relative;
   color: #40434A;
 }
-
-.selected-items {
+.ptc-multi-select .selected-items {
   cursor: pointer;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.38);
@@ -75,20 +107,17 @@ ptc-link, ptc-square-card {
   border-radius: 0px;
   position: relative;
   user-select: none;
-  margin-bottom: var(--ptc-element-spacing-03);
   color: rgba(0, 0, 0, 0.87);
   font-weight: 400;
   font-size: 16px;
   font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
 }
-
-.multi-select-icon {
+.ptc-multi-select .multi-select-icon {
   fill: rgba(0, 0, 0, 0.54);
   position: absolute;
   right: var(--ptc-element-spacing-03);
 }
-
-.dropdown {
+.ptc-multi-select .dropdown {
   display: block;
   list-style: none;
   padding: 0;
@@ -98,41 +127,46 @@ ptc-link, ptc-square-card {
   /* Adjust as needed */
   overflow-y: auto;
   position: absolute;
-  width: 271px;
+  width: 100%;
   background-color: #fff;
   z-index: 1000;
   /* Custom square for the checkbox */
   /* When checkbox is checked, change background color */
 }
-.dropdown li {
+.ptc-multi-select .dropdown li {
   display: flex;
   align-items: center;
   padding: 8px 10px;
   cursor: pointer;
-  border-bottom: 1px solid #eee;
 }
-.dropdown li.selected {
-  background-color: #efefef;
+.ptc-multi-select .dropdown li:hover {
+  background-color: var(--color-gray-02);
+}
+.ptc-multi-select .dropdown li.selected {
+  background-color: var(--color-gray-02);
 }
-.dropdown li label {
+.ptc-multi-select .dropdown li.selected:hover {
+  background-color: var(--color-gray-04);
+}
+.ptc-multi-select .dropdown li label {
   margin-left: 8px;
   font-size: var(--ptc-font-size-xx-small);
   position: relative;
   padding-left: 25px;
   cursor: pointer;
 }
-.dropdown li:last-child {
+.ptc-multi-select .dropdown li:last-child {
   border-bottom: none;
 }
-.dropdown input[type=checkbox] {
+.ptc-multi-select .dropdown input[type=checkbox] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
 }
-.dropdown input[type=checkbox]:checked {
+.ptc-multi-select .dropdown input[type=checkbox]:checked {
   background-color: var(--color-green-07);
 }
-.dropdown label::before {
+.ptc-multi-select .dropdown label::before {
   content: "";
   position: absolute;
   left: 0;
@@ -146,12 +180,12 @@ ptc-link, ptc-square-card {
   border: 1px solid #ccc;
   box-sizing: border-box;
 }
-.dropdown input[type=checkbox]:checked + label::before {
+.ptc-multi-select .dropdown input[type=checkbox]:checked + label::before {
   background-color: var(--color-green-07);
   /* Green background */
   border-color: var(--color-green-07);
 }
-.dropdown input[type=checkbox]:checked + label::after {
+.ptc-multi-select .dropdown input[type=checkbox]:checked + label::after {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 1 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
   position: absolute;
   left: 1px;
@@ -159,8 +193,7 @@ ptc-link, ptc-square-card {
   font-size: var(--ptc-font-size-xxx-small);
   color: white;
 }
-
-button.ddl-click-text {
+.ptc-multi-select button.ddl-click-text {
   all: unset;
   cursor: pointer;
   color: var(--color-gray-7);

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

@@ -1,25 +1,32 @@
 import { h, Host } from '@stencil/core';
+import { ValidationMessages } from '../../utils/validation-messages';
+import { getLanguageFromURL } from '../../utils/utils';
 export class PtcMultiSelect {
   constructor() {
-    // clearSelectedItems(event: Event) {
-    //   event.preventDefault();
-    //   event.stopPropagation();
-    //   this.items = this.items.map(item => ({ ...item, selected: false }));
-    // }
-    // selectAllItems(event: Event) {
-    //   event.preventDefault();
-    //   event.stopPropagation();
-    //   this.items = this.items.map(item => ({ ...item, selected: true }));
-    // }
+    this.handleBlur = () => {
+      this.updateValidity();
+    };
+    this.updateValidity = () => {
+      if (this.isRequired) {
+        this.isValid = this.selectedItemsCount > 0;
+      }
+      else {
+        this.isValid = true;
+      }
+    };
     this.selectAllItems = (event) => {
       event.preventDefault();
       event.stopPropagation();
       this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: true })));
+      // this.selectedItemsCount = this.items.filter(item => item.selected).length;
+      // this.updateValidity();
     };
     this.clearSelectedItems = (event) => {
       event.preventDefault();
       event.stopPropagation();
       this.items = this.items.map(item => (Object.assign(Object.assign({}, item), { selected: false })));
+      // this.selectedItemsCount = this.items.filter(item => item.selected).length;
+      // this.updateValidity();
     };
     this.items = [
       // Initialize with your items, setting 'selected' to false
@@ -29,13 +36,38 @@ export class PtcMultiSelect {
     this.selectAllText = 'Select All';
     this.clearAllText = 'Clear Selected Items';
     this.isRequired = false;
+    this.helpertext = 'This field is required';
     this.showDropdown = false;
+    this.language = 'en';
+    this.isValid = true;
+    this.selectedItemsCount = 0;
+  }
+  componentWillLoad() {
+    this.language = getLanguageFromURL();
+    // this.selectedItemsCount = this.items.filter(item => item.selected).length;
+    // this.updateValidity();
+  }
+  handleDocumentClick(event) {
+    const clickedInside = this.el.contains(event.target);
+    if (!clickedInside) {
+      this.showDropdown = false;
+      this.selectedItemsCount = this.items.filter(item => item.selected).length;
+      this.updateValidity();
+    }
   }
   toggleDropdown() {
     this.showDropdown = !this.showDropdown;
   }
   toggleItemSelection(index) {
     this.items = [...this.items.slice(0, index), Object.assign(Object.assign({}, this.items[index]), { selected: !this.items[index].selected }), ...this.items.slice(index + 1)];
+    // this.selectedItemsCount = this.items.filter(item => item.selected).length;
+    // this.updateValidity();
+  }
+  getValidationMessage(type) {
+    return ValidationMessages[this.language][type];
+  }
+  setHelperText() {
+    this.helpertext = this.getValidationMessage('required');
   }
   render() {
     const selectedItems = this.items.filter(item => item.selected);
@@ -46,10 +78,10 @@ export class PtcMultiSelect {
     if (selectedItemsCount === 1) {
       displayText = selectedItems[0].text;
     }
-    return (h(Host, null, h("label", { class: "multi-select-label" }, this.label), h("div", { class: "selected-items", onClick: () => this.toggleDropdown() }, displayText, h("span", { class: "multi-select-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), this.showDropdown && (h("ul", { class: "dropdown" }, h("li", null, h("button", { onClick: event => buttonAction(event), class: "ddl-click-text" }, buttonLabel)), this.items.map((item, index) => (h("li", { key: index }, h("input", { class: "multi-checkbox", type: "checkbox", id: `checkbox-${index}`, checked: item.selected, "data-eloqua-name": item.ptcDataEloquaName, "data-target-eloqua-name": item.ptcDataTargetEloquaName, required: this.isRequired, onClick: event => {
+    return (h(Host, { class: { 'ptc-multi-select': true, 'invalid': !this.isValid } }, h("label", { class: "multi-select-label" }, this.label), h("div", { class: "selected-items", onClick: () => this.toggleDropdown() }, displayText, h("span", { class: "multi-select-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), this.showDropdown && (h("ul", { class: "dropdown" }, h("li", null, h("button", { onClick: event => buttonAction(event), class: "ddl-click-text" }, buttonLabel)), this.items.map((item, index) => (h("li", { key: index, class: { selected: item.selected } }, h("input", { class: "multi-checkbox", type: "checkbox", id: `checkbox-${index}`, checked: item.selected, "data-eloqua-name": item.ptcDataEloquaName, "data-target-eloqua-name": item.ptcDataTargetEloquaName, required: this.isRequired, onClick: event => {
         event.stopPropagation(); // Prevents the dropdown from closing
         this.toggleItemSelection(index);
-      } }), h("label", { htmlFor: `checkbox-${index}` }, item.text))))))));
+      } }), h("label", { htmlFor: `checkbox-${index}` }, item.text)))))), h("div", { id: "tbd", class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext)));
   }
   static get is() { return "ptc-multi-select"; }
   static get originalStyleUrls() {
@@ -155,12 +187,43 @@ export class PtcMultiSelect {
         "attribute": "is-required",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "helpertext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "helpertext",
+        "reflect": false,
+        "defaultValue": "'This field is required'"
       }
     };
   }
   static get states() {
     return {
-      "showDropdown": {}
+      "showDropdown": {},
+      "language": {},
+      "isValid": {},
+      "selectedItemsCount": {}
     };
   }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocumentClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/ptc-pricing-packaging-table/ptc-pricing-packaging-table.js

@@ -1,4 +1,5 @@
 import { Host, h, Fragment } from '@stencil/core';
+import { generateUUID, debounce } from '../../utils/utils';
 export class PtcPricingPackagingTable {
   constructor() {
     this.verticalScrollContentClipperHeightOptions = {
@@ -52,7 +53,10 @@ export class PtcPricingPackagingTable {
           }
         }
       }
-      this.refreshHorizontalPosition();
+      // disable horizontal refresh during anchor scrolling
+      if (!this.getHashKey()) {
+        this.refreshHorizontalPosition();
+      }
       this.lastScrollTop = scrollTopPosition <= 0 ? 0 : scrollTopPosition;
     };
     this.handleHorizontalScroll = () => {
@@ -263,6 +267,8 @@ export class PtcPricingPackagingTable {
     this.dataCols = undefined;
     this.disclaimerCount = 0;
     this.isDesktopView = undefined;
+    this.hashKey = undefined;
+    this.debouncedHashEnable = undefined;
     this.cellWidthXXS = 180;
     this.cellWidthMD = 225;
     this.cellLeftRightPadding = 48;
@@ -293,7 +299,28 @@ export class PtcPricingPackagingTable {
     };
     window.requestAnimationFrame(refresh);
   }
+  getHashKey() {
+    let ctx = window;
+    if (!this.hashKey) {
+      this.hashKey = generateUUID();
+    }
+    if (!ctx.ppptHashes) {
+      ctx.ppptHashes = {};
+    }
+    return ctx.ppptHashes[this.hashKey] == true;
+  }
+  setHashKey(value) {
+    let ctx = window;
+    if (!this.hashKey) {
+      this.hashKey = generateUUID();
+    }
+    if (!ctx.ppptHashes) {
+      ctx.ppptHashes = {};
+    }
+    ctx.ppptHashes[this.hashKey] = value;
+  }
   componentWillLoad() {
+    this.setHashKey(false);
     this.preProcessTableDescription();
     this.preProcessdesktopHeaderFirstCell();
     this.preProcessColumnHeaders();
@@ -303,9 +330,17 @@ export class PtcPricingPackagingTable {
     this.preProcessDisclaimers();
   }
   componentDidLoad() {
+    let that = this;
     this.handleTableReset();
+    this.debouncedHashEnable = debounce(() => {
+      that.setHashKey(false);
+    }, 2000, this);
     window.addEventListener("scroll", () => this.handleVerticalScroll());
     window.addEventListener("resize", () => this.handleTableReset());
+    window.addEventListener("hashchange", () => {
+      that.setHashKey(true);
+      this.debouncedHashEnable();
+    });
   }
   render() {
     const TableTitle = () => {
@@ -491,6 +526,8 @@ export class PtcPricingPackagingTable {
   static get states() {
     return {
       "isDesktopView": {},
+      "hashKey": {},
+      "debouncedHashEnable": {},
       "cellWidthXXS": {},
       "cellWidthMD": {},
       "cellLeftRightPadding": {},

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -736,6 +736,17 @@ ptc-link, ptc-square-card {
   padding-bottom: 1.5rem;
 }
 
+.ptc-section-large {
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+@media only screen and (min-width: 992px) {
+  .ptc-section-large {
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
+  }
+}
+
 .u-flex {
   display: flex;
 }

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

@@ -6105,7 +6105,7 @@ ptc-link, ptc-square-card {
   content: "";
   position: absolute;
   width: calc(100% + 16px);
-  height: calc(100% + 10px);
+  height: calc(100% + 8px);
   background: #FEF3F3;
   display: flex;
   flex-direction: column;
@@ -6135,6 +6135,7 @@ ptc-link, ptc-square-card {
   z-index: 1;
   position: relative;
   opacity: 0;
+  margin-top: var(--ptc-element-spacing-02);
 }
 .ptc-select .select-error-svg {
   transform: translate(-8px, 3px);
@@ -6162,7 +6163,8 @@ ptc-link, ptc-square-card {
   height: auto;
   transform: translateX(8px);
 }
-.ptc-select .mdc-select-helper-text--validation-msg, .ptc-select .mdc-select-helper-text--info-msg {
+.ptc-select .mdc-select-helper-text--validation-msg,
+.ptc-select .mdc-select-helper-text--info-msg {
   line-height: 0.66;
   height: 0;
 }
@@ -6173,4 +6175,41 @@ ptc-link, ptc-square-card {
 }
 .ptc-select .mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon {
   fill: var(--color-hyperlink);
+}
+.ptc-select .mdc-list {
+  font-family: "Open Sans", Arial, sans-serif;
+}
+.ptc-select .mdc-list-item {
+  padding: 5px 8px;
+}
+.ptc-select .mdc-list-item:hover .mdc-list-item__ripple::before,
+.ptc-select .mdc-list-item:hover .mdc-list-item__ripple::after {
+  background-color: var(--color-gray-02) !important;
+  opacity: 1;
+  z-index: -1;
+}
+.ptc-select .mdc-list-item--selected .mdc-list-item__ripple::before,
+.ptc-select .mdc-list-item--selected .mdc-list-item__ripple::after {
+  background-color: var(--color-gray-02) !important;
+  opacity: 1;
+  z-index: -1;
+}
+.ptc-select .mdc-list-item--selected:hover .mdc-list-item__ripple::before,
+.ptc-select .mdc-list-item--selected:hover .mdc-list-item__ripple::after {
+  background-color: var(--color-gray-04) !important;
+  opacity: 1;
+  z-index: -1;
+}
+.ptc-select .mdc-list-item__text,
+.ptc-select .mdc-select__selected-text {
+  color: var(--color--color-gray-12);
+  font-family: "Open Sans", Arial, sans-serif;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: 24px;
+  /* 171.429% */
+}
+.ptc-select :not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple::before,
+.ptc-select :not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple::after {
+  background-color: unset;
 }

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

@@ -3566,7 +3566,7 @@ ptc-link, ptc-square-card {
   content: "";
   position: absolute;
   width: calc(100% + 16px);
-  height: calc(100% + 10px);
+  height: calc(100% + 8px);
   background: #FEF3F3;
   display: flex;
   flex-direction: column;
@@ -3616,6 +3616,7 @@ ptc-link, ptc-square-card {
   line-height: var(--ptc-line-height-densest);
   max-width: 240px;
   opacity: 0;
+  margin-top: var(--ptc-element-spacing-02);
 }
 .ptc-text-field .mdc-text-field--invalid + .mdc-text-field-helper-line {
   height: auto;
@@ -3686,6 +3687,11 @@ ptc-link, ptc-square-card {
 }
 .ptc-text-field .mdc-text-field__input {
   z-index: 2;
+  color: var(--color--color-gray-12) !important;
+  font-family: "Open Sans", Arial, sans-serif;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: 24px;
 }
 .ptc-text-field .mdc-text-field--with-internal-counter {
   padding-right: 56px;
@@ -3695,6 +3701,10 @@ ptc-link, ptc-square-card {
   right: 16px;
   top: 0px;
   transform: translateY(-150%);
+  font-family: "Open Sans", Arial, sans-serif;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-font-size-xx-small);
 }
 .ptc-text-field .iti {
   height: 35px;
@@ -3720,4 +3730,10 @@ ptc-link, ptc-square-card {
 }
 .ptc-text-field .mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
   color: var(--color-gray-13);
+}
+.ptc-text-field .mdc-text-field__input::placeholder {
+  font-family: "Open Sans", Arial, sans-serif;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: 24px;
 }

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

@@ -166,7 +166,7 @@ export class PtcTextfield {
   }
   getValidationPattern() {
     let validationPattern = '';
-    if (this.type === 'email' && this.fieldName === 'email') {
+    if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
       validationPattern = "[a-z0-9._%+\\-]+@[a-z0-9.\\-]+\\.(?!.*\\..*\\.)[a-z]{2,7}$";
     }
     if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
@@ -177,7 +177,7 @@ export class PtcTextfield {
   setHelperText() {
     this.helpertext = this.getValidationMessage('required');
     //console.log('default: ' + this.getValidationMessage('required'));
-    if (this.type === 'email' && this.fieldName === 'email') {
+    if ((this.type === 'email' && this.fieldName === 'email') || (this.type === 'email' && this.fieldName === "companyemail")) {
       if (this.customInput.validity.valueMissing) {
         this.helpertext = this.getValidationMessage('email');
       }

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

@@ -8,8 +8,10 @@ export class PtcSubnav {
     this.navOpen = !this.navOpen;
   }
   handleScroll() {
-    //this.el.shadowRoot.querySelector('nav.navbar').classList.remove('navOpen');
-    this.el.shadowRoot.querySelector('div.sticky-subnav').classList.remove('sticky');
+    let elem = this.el.shadowRoot.querySelector('div.sticky-subnav');
+    if (elem) {
+      elem.classList.remove('sticky');
+    }
   }
   handleNavLinkClickedEvent() {
     console.log('link clicked');

package/dist/collection/utils/utils.js

@@ -162,3 +162,31 @@ export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
     element.style.height = `${tallestHeight}px`;
   });
 }
+/*
+  observeInView:
+    Trigger CSS Animations when elements are scrolled into view
+
+    This function uses the Intersection Observer API to determine if objects are within the viewport
+    It adds an 'in-view' class to elements when they come into view (and removes the class when not on screen)
+    Use to add @keyframe or transition animations to elements so they animate once they are on screen
+
+  How to use:
+    Import observeInView function in the component
+      import { observeInView } from '../../utils/utils';
+    Call the function with the host element and selector
+      observeInView(this.hostEle, '.ptc-animate');
+
+*/
+export function observeInView(hostEle, selector) {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('in-view');
+        return;
+      }
+      entry.target.classList.remove('in-view');
+    });
+  });
+  const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
+  allAnimatedElements.forEach((element) => observer.observe(element));
+}

package/dist/custom-elements/index.d.ts

@@ -326,6 +326,12 @@ export const PtcHeroFooterCta: {
   new (): PtcHeroFooterCta;
 };
 
+interface PtcHomepageImageFeature extends Components.PtcHomepageImageFeature, HTMLElement {}
+export const PtcHomepageImageFeature: {
+  prototype: PtcHomepageImageFeature;
+  new (): PtcHomepageImageFeature;
+};
+
 interface PtcIconCard extends Components.PtcIconCard, HTMLElement {}
 export const PtcIconCard: {
   prototype: PtcIconCard;