@ptcwebops/ptcw-design 3.7.0 → 3.7.2

package/dist/cjs/{index-cd9a1b1a.js → index-4b85b38a.js}

@@ -166,6 +166,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -186,6 +194,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
@@ -198,6 +212,13 @@ const vdomFnUtils = {
     forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
     map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
 };
+/**
+ * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
+ * friendlier public interface (hence, 'convertToPublic').
+ *
+ * @param node the virtual DOM node to convert
+ * @returns a converted child node
+ */
 const convertToPublic = (node) => ({
     vattrs: node.$attrs$,
     vchildren: node.$children$,
@@ -206,6 +227,15 @@ const convertToPublic = (node) => ({
     vtag: node.$tag$,
     vtext: node.$text$,
 });
+/**
+ * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
+ * order to use the resulting object in the virtual DOM. The initial object was
+ * likely created as part of presenting a public API, so converting it back
+ * involved making it 'private' again (hence, `convertToPrivate`).
+ *
+ * @param node the child node to convert
+ * @returns a converted virtual DOM node
+ */
 const convertToPrivate = (node) => {
     if (typeof node.vtag === 'function') {
         const vnodeData = Object.assign({}, node.vattrs);
@@ -676,6 +706,21 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
     }
     plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
     let childNode;
@@ -692,6 +737,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -970,7 +1028,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -1198,6 +1257,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;

package/dist/cjs/innovator-toggle-container.cjs.entry.js

@@ -2,31 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cd9a1b1a.js');
+const index = require('./index-4b85b38a.js');
 
-const innovatorToggleContainerCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;background:linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));background-position:50%;background-size:cover;overflow:hidden;position:relative}:host .bgImage{height:100%;left:0;object-fit:cover;position:absolute;top:0;transform:scale(1.1);width:100%;z-index:-2}:host svg.cut{left:0;position:absolute;z-index:99}:host svg.cut-top{top:0;transform:rotate(180deg) translateY(5px)}:host .cut-bottom{bottom:0;transform:scaleX(-1) translateY(5px)}:host .backdrop-blur{backdrop-filter:blur(7px);padding:var(--ptc-layout-spacing-05) 0}:host .content-box{padding:var(--ptc-element-spacing-05);backdrop-filter:blur(13.7px);border:1px solid rgba(255, 255, 255, 0.54);border-radius:10px;position:relative}@media only screen and (min-width: 768px){:host .content-box{padding:var(--ptc-element-spacing-08)}}:host .content-box .backdrop{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:10px;box-shadow:0 3px 15px 0 rgba(0, 0, 0, 0.35);width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}:host .content-box .backdrop::before{background-color:#2a2729;border-radius:10px;content:\"\";height:100%;opacity:0.7;position:absolute;width:100%;z-index:-1}:host .ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){:host .ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host .ptc-container{padding-left:0;padding-right:0;max-width:1200px}}";
+const innovatorToggleContainerCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;background:linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));background-position:50%;background-size:cover;overflow:hidden;position:relative}:host .bgImage{height:100%;left:0;object-fit:cover;position:absolute;top:0;transform:scale(1.1);width:100%;z-index:-2}:host svg.cut{left:0;position:absolute;z-index:99}:host svg.cut-top{top:0;transform:rotate(180deg) translateY(5px)}:host .cut-bottom{bottom:0;transform:scaleX(-1) translateY(5px)}:host .backdrop-blur{backdrop-filter:blur(7px);padding:var(--ptc-layout-spacing-05) 0}:host .content-box{padding:var(--ptc-element-spacing-05);backdrop-filter:blur(13.7px);border:1px solid rgba(255, 255, 255, 0.54);border-radius:10px;position:relative}@media only screen and (min-width: 768px){:host .content-box{padding:var(--ptc-element-spacing-08)}}:host .content-box .backdrop{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:10px;box-shadow:0 3px 15px 0 rgba(0, 0, 0, 0.35);width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}:host .content-box .backdrop::before{background-color:#2a2729;border-radius:10px;content:\"\";height:100%;opacity:0.7;position:absolute;width:100%;z-index:-1}:host .ptc-container{padding-right:24px;padding-left:24px;margin-right:auto;margin-left:auto}@media only screen and (min-width: 1200px){:host .ptc-container{padding-left:0;padding-right:0;max-width:1136px}}@media only screen and (min-width: 1440px){:host .ptc-container{padding-left:0;padding-right:0;max-width:1200px}}";
 
-const InnovatorToggleContainer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sectionTitle = undefined;
-    this.description = undefined;
-    this.backgroundImage = undefined;
-  }
-  componentDidLoad() {
-    this.el.addEventListener("mousemove", () => { });
-    let imgElement = this.el.shadowRoot.querySelector('.bgImage');
-    onmousemove = (event) => {
-      if (event.target === this.el) {
-        imgElement.style.setProperty('transform', `translate(-${event.clientX / 100}px, -${event.clientY / 100}px) scale(1.1, 1.1)`);
-      }
-    };
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("img", { src: this.backgroundImage, alt: "", class: 'bgImage' }), index.h("svg", { class: "cut cut-top", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: 'backdrop-blur' }, index.h("div", { class: "ptc-container" }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-color": "white", "title-margin": "margin-flush" }, this.sectionTitle), index.h("ptc-para", { "font-size": "small", "para-align": "center", "font-weight": "w-5", "para-color": "white", "para-margin": "margin-5" }, this.description), index.h("ptc-spacer", null)), index.h("div", { class: "ptc-container" }, index.h("div", { class: "content-box" }, index.h("div", { class: "backdrop" }), index.h("slot", null)))), index.h("svg", { class: "cut cut-bottom", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" }))));
-  }
-  get el() { return index.getElement(this); }
-};
+const InnovatorToggleContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sectionTitle = undefined;
+    this.description = undefined;
+    this.backgroundImage = undefined;
+  }
+  componentDidLoad() {
+    this.el.addEventListener("mousemove", () => { });
+    let imgElement = this.el.shadowRoot.querySelector('.bgImage');
+    onmousemove = (event) => {
+      if (event.target === this.el) {
+        imgElement.style.setProperty('transform', `translate(-${event.clientX / 100}px, -${event.clientY / 100}px) scale(1.1, 1.1)`);
+      }
+    };
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("img", { src: this.backgroundImage, alt: "", class: 'bgImage' }), index.h("svg", { class: "cut cut-top", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })), index.h("div", { class: 'backdrop-blur' }, index.h("div", { class: "ptc-container" }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-color": "white", "title-margin": "margin-flush" }, this.sectionTitle), index.h("ptc-para", { "font-size": "small", "para-align": "center", "font-weight": "w-5", "para-color": "white", "para-margin": "margin-5" }, this.description), index.h("ptc-spacer", null)), index.h("div", { class: "ptc-container" }, index.h("div", { class: "content-box" }, index.h("div", { class: "backdrop" }), index.h("slot", null)))), index.h("svg", { class: "cut cut-bottom", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" }, index.h("path", { fill: "#F3F3F3", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" }))));
+  }
+  get el() { return index.getElement(this); }
+};
 InnovatorToggleContainer.style = innovatorToggleContainerCss;
 
 exports.innovator_toggle_container = InnovatorToggleContainer;

package/dist/cjs/list-item.cjs.entry.js

@@ -2,45 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cd9a1b1a.js');
+const index = require('./index-4b85b38a.js');
 
-const listItemCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host(.list-primary){display:block}:host(.flush-before) li::before{content:\"\" !important}:host(.breadcrumb){display:inline-block}:host(.breadcrumb) li{position:relative;display:inline-block;color:var(--color-white);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-xxx-small);line-height:var(--ptc-line-height-densest);display:flex;align-items:baseline}:host(.breadcrumb) li::before{content:\"/\";top:0;left:0;margin-left:2px}:host(.breadcrumb) li a.item-link{color:var(--color-white);font-weight:var(--ptc-font-weight-bold) !important;font-size:var(--ptc-font-size-xxx-small) !important;line-height:var(--ptc-line-height-densest);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;text-decoration-thickness:1px;outline:none;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.breadcrumb) li a.item-link:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}:host(.breadcrumb-center) li{display:inline}:host(.list-green){display:block;margin-bottom:16px}:host(.list-green) li a{font-size:var(--ptc-font-size-xx-small);color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:var(--color-green-04);font-weight:var(--ptc-font-weight-bold);transition:color var(--ptc-transition-medium) var(--ptc-ease-inout);line-height:var(--ptc-line-height-p);text-underline-offset:4px}:host(.list-green) li a:hover{color:var(--color-green-04)}:host(:not(.flush-before)) li::before{margin-right:2px}:host(.list-footer) li{display:inline-block;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-regular);font-style:normal;font-stretch:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;color:var(--color-white);margin:0 0.5rem}:host(.list-footer) li a{color:var(--color-white-grey);border-bottom:1px solid transparent;display:inline-block;text-decoration:none}:host(.list-footer) li a:hover,:host(.list-footer) li a:focus,:host(.list-footer) li a:active{text-decoration:none;border-bottom:1px solid var(--color-green-06);color:var(--color-white-grey);transition:border var(--ptc-ease-inout) var(--ptc-transition-medium)}:host(.list-footer) li a:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}:host(.white) li{color:var(--color-white)}:host(.white) li a.item-link{color:var(--color-white)}:host(.light-gray) li{color:var(--color-gray-01)}:host(.light-gray) li a.item-link{color:var(--color-gray-01)}:host(.primary-gray) li{color:var(--color-gray-10)}:host(.primary-gray) li a.item-link{color:var(--color-gray-10)}:host(.list-underline) li{color:var(--color-gray-10);list-style:none;text-decoration:underline 1px solid;text-underline-offset:2px;line-height:var(--ptc-line-height-p)}:host(.list-underline) li a{display:inline-block;padding:4px 0}:host(.list-underline) li a.item-link{color:var(--color-gray-10)}:host li .has-before-home-icon{display:block}@media only screen and (min-width: 480px){:host li .has-before-home-icon{display:none}}";
+const listItemCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host(.list-primary){display:block}:host(.flush-before) li::before{content:\"\" !important}:host(.breadcrumb){display:inline-block}:host(.breadcrumb) li{position:relative;display:inline-block;color:var(--color-white);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-xxx-small);line-height:var(--ptc-line-height-densest);display:flex;align-items:baseline}:host(.breadcrumb) li::before{content:\"/\";top:0;left:0;margin-left:2px}:host(.breadcrumb) li a.item-link{color:var(--color-white);font-weight:var(--ptc-font-weight-bold) !important;font-size:var(--ptc-font-size-xxx-small) !important;line-height:var(--ptc-line-height-densest);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;text-decoration-thickness:1px;outline:none;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.breadcrumb) li a.item-link:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}:host(.breadcrumb-center) li{display:inline}:host(.list-green){display:block;margin-bottom:16px}:host(.list-green) li a{font-size:var(--ptc-font-size-xx-small);color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:var(--color-green-04);font-weight:var(--ptc-font-weight-bold);transition:color var(--ptc-transition-medium) var(--ptc-ease-inout);line-height:var(--ptc-line-height-p);text-underline-offset:4px}:host(.list-green) li a:hover{color:var(--color-green-04)}:host(:not(.flush-before)) li::before{margin-right:2px}:host(.list-footer) li{display:inline-block;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-regular);font-style:normal;font-stretch:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;color:var(--color-white);margin:0 0.5rem}:host(.list-footer) li a{color:var(--color-white-grey);border-bottom:1px solid transparent;display:inline-block;text-decoration:none}:host(.list-footer) li a:hover,:host(.list-footer) li a:focus,:host(.list-footer) li a:active{text-decoration:none;border-bottom:1px solid var(--color-green-06);color:var(--color-white-grey);transition:border var(--ptc-ease-inout) var(--ptc-transition-medium)}:host(.list-footer) li a:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}:host(.white) li{color:var(--color-white)}:host(.white) li a.item-link{color:var(--color-white)}:host(.light-gray) li{color:var(--color-gray-01)}:host(.light-gray) li a.item-link{color:var(--color-gray-01)}:host(.primary-gray) li{color:var(--color-gray-10)}:host(.primary-gray) li a.item-link{color:var(--color-gray-10)}:host(.list-underline) li{color:var(--color-gray-10);list-style:none;text-decoration:underline 1px solid;text-underline-offset:2px;line-height:var(--ptc-line-height-p)}:host(.list-underline) li a{display:inline-block;padding:4px 0}:host(.list-underline) li a.item-link{color:var(--color-gray-10)}:host li .has-before-home-icon{display:block}@media only screen and (min-width: 480px){:host li .has-before-home-icon{display:none}}";
 
-const ListItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.listType = 'list-primary';
-    this.linkHref = undefined;
-    this.flushBefore = false;
-    this.linkTarget = '_self';
-    this.hasBeforeHomeIcon = false;
-    this.color = undefined;
-    this.styles = undefined;
-    this.ariaLabel = '';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("li", null, this.linkHref ? (index.h("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== '' ? { 'aria-label': this.ariaLabel } : {})), index.h("slot", null))) : (index.h("slot", null)))));
-  }
-  getCssClassMap() {
-    let bcEnable = false;
-    if (this.hostElement && this.hostElement.parentElement) {
-      try {
-        bcEnable = (this.hostElement.parentElement.classList.contains('center') && this.hostElement.parentElement.tagName === 'PTC-BREADCRUMB');
-      }
-      catch (err) {
-        console.log(err);
-      }
-    }
-    return {
-      [this.listType]: true,
-      ['flush-before']: this.flushBefore ? true : false,
-      [this.color]: !!this.color ? true : false,
-      ['breadcrumb-center']: bcEnable
-    };
-  }
-  get hostElement() { return index.getElement(this); }
-};
+const ListItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.listType = 'list-primary';
+    this.linkHref = undefined;
+    this.flushBefore = false;
+    this.linkTarget = '_self';
+    this.hasBeforeHomeIcon = false;
+    this.color = undefined;
+    this.styles = undefined;
+    this.ariaLabel = '';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("li", null, this.linkHref ? (index.h("a", Object.assign({ class: "item-link", target: this.linkTarget }, (this.linkHref ? { href: this.linkHref } : {}), (this.ariaLabel !== '' ? { 'aria-label': this.ariaLabel } : {})), index.h("slot", null))) : (index.h("slot", null)))));
+  }
+  getCssClassMap() {
+    let bcEnable = false;
+    if (this.hostElement && this.hostElement.parentElement) {
+      try {
+        bcEnable = (this.hostElement.parentElement.classList.contains('center') && this.hostElement.parentElement.tagName === 'PTC-BREADCRUMB');
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
+    return {
+      [this.listType]: true,
+      ['flush-before']: this.flushBefore ? true : false,
+      [this.color]: !!this.color ? true : false,
+      ['breadcrumb-center']: bcEnable
+    };
+  }
+  get hostElement() { return index.getElement(this); }
+};
 ListItem.style = listItemCss;
 
 exports.list_item = ListItem;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cd9a1b1a.js');
+const index = require('./index-4b85b38a.js');
 
 /*
- Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/dist/cjs/most-popular-news.cjs.entry.js

@@ -2,54 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cd9a1b1a.js');
-const utils = require('./utils-b8cf5ed2.js');
+const index = require('./index-4b85b38a.js');
+const utils = require('./utils-03d92070.js');
 
-const numberOneSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
-<path d="M22.224 20.0959V22.9999H12.48V20.0959H15.888V12.8239C15.744 13.0159 15.512 13.2159 15.192 13.4239C14.888 13.6159 14.552 13.7999 14.184 13.9759C13.816 14.1519 13.432 14.2959 13.032 14.4079C12.648 14.5199 12.304 14.5759 12 14.5759V11.5759C12.288 11.5759 12.64 11.4879 13.056 11.3119C13.472 11.1199 13.88 10.8959 14.28 10.6399C14.68 10.3839 15.024 10.1359 15.312 9.8959C15.616 9.6399 15.808 9.4399 15.888 9.2959H19.176V20.0959H22.224Z" fill="white"/>
-</svg>
+const numberOneSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
+<path d="M22.224 20.0959V22.9999H12.48V20.0959H15.888V12.8239C15.744 13.0159 15.512 13.2159 15.192 13.4239C14.888 13.6159 14.552 13.7999 14.184 13.9759C13.816 14.1519 13.432 14.2959 13.032 14.4079C12.648 14.5199 12.304 14.5759 12 14.5759V11.5759C12.288 11.5759 12.64 11.4879 13.056 11.3119C13.472 11.1199 13.88 10.8959 14.28 10.6399C14.68 10.3839 15.024 10.1359 15.312 9.8959C15.616 9.6399 15.808 9.4399 15.888 9.2959H19.176V20.0959H22.224Z" fill="white"/>
+</svg>
 `;
 
-const numberTwoSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
-<path d="M12 23.0002C12 22.2802 12.056 21.6322 12.168 21.0562C12.28 20.4642 12.472 19.9202 12.744 19.4242C13.032 18.9282 13.416 18.4642 13.896 18.0322C14.392 17.6002 15.016 17.1762 15.768 16.7602C16.424 16.4082 17 16.1042 17.496 15.8482C18.008 15.5762 18.432 15.3282 18.768 15.1042C19.104 14.8802 19.36 14.6562 19.536 14.4322C19.712 14.1922 19.8 13.9202 19.8 13.6162C19.8 13.1362 19.608 12.7282 19.224 12.3922C18.84 12.0402 18.288 11.8642 17.568 11.8642C17.184 11.8642 16.832 11.9202 16.512 12.0322C16.192 12.1282 15.888 12.2642 15.6 12.4402C15.328 12.6162 15.072 12.8162 14.832 13.0402C14.608 13.2482 14.4 13.4722 14.208 13.7122L12.144 11.3362C12.352 11.1122 12.648 10.8722 13.032 10.6162C13.416 10.3442 13.864 10.0962 14.376 9.87215C14.904 9.63215 15.48 9.44015 16.104 9.29615C16.744 9.13615 17.424 9.05615 18.144 9.05615C18.96 9.05615 19.688 9.16015 20.328 9.36815C20.968 9.56015 21.504 9.84015 21.936 10.2082C22.384 10.5602 22.72 10.9922 22.944 11.5042C23.184 12.0002 23.304 12.5442 23.304 13.1362C23.304 13.6962 23.2 14.1922 22.992 14.6242C22.784 15.0562 22.52 15.4402 22.2 15.7762C21.88 16.1122 21.528 16.4082 21.144 16.6642C20.776 16.9042 20.416 17.1202 20.064 17.3122C19.776 17.4722 19.448 17.6562 19.08 17.8642C18.712 18.0722 18.344 18.3042 17.976 18.5602C17.624 18.8002 17.296 19.0562 16.992 19.3282C16.688 19.5842 16.456 19.8402 16.296 20.0962H23.568V23.0002H12Z" fill="white"/>
-</svg>
+const numberTwoSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
+<path d="M12 23.0002C12 22.2802 12.056 21.6322 12.168 21.0562C12.28 20.4642 12.472 19.9202 12.744 19.4242C13.032 18.9282 13.416 18.4642 13.896 18.0322C14.392 17.6002 15.016 17.1762 15.768 16.7602C16.424 16.4082 17 16.1042 17.496 15.8482C18.008 15.5762 18.432 15.3282 18.768 15.1042C19.104 14.8802 19.36 14.6562 19.536 14.4322C19.712 14.1922 19.8 13.9202 19.8 13.6162C19.8 13.1362 19.608 12.7282 19.224 12.3922C18.84 12.0402 18.288 11.8642 17.568 11.8642C17.184 11.8642 16.832 11.9202 16.512 12.0322C16.192 12.1282 15.888 12.2642 15.6 12.4402C15.328 12.6162 15.072 12.8162 14.832 13.0402C14.608 13.2482 14.4 13.4722 14.208 13.7122L12.144 11.3362C12.352 11.1122 12.648 10.8722 13.032 10.6162C13.416 10.3442 13.864 10.0962 14.376 9.87215C14.904 9.63215 15.48 9.44015 16.104 9.29615C16.744 9.13615 17.424 9.05615 18.144 9.05615C18.96 9.05615 19.688 9.16015 20.328 9.36815C20.968 9.56015 21.504 9.84015 21.936 10.2082C22.384 10.5602 22.72 10.9922 22.944 11.5042C23.184 12.0002 23.304 12.5442 23.304 13.1362C23.304 13.6962 23.2 14.1922 22.992 14.6242C22.784 15.0562 22.52 15.4402 22.2 15.7762C21.88 16.1122 21.528 16.4082 21.144 16.6642C20.776 16.9042 20.416 17.1202 20.064 17.3122C19.776 17.4722 19.448 17.6562 19.08 17.8642C18.712 18.0722 18.344 18.3042 17.976 18.5602C17.624 18.8002 17.296 19.0562 16.992 19.3282C16.688 19.5842 16.456 19.8402 16.296 20.0962H23.568V23.0002H12Z" fill="white"/>
+</svg>
 `;
 
-const numberThreeSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
-<path d="M20.472 16.3358C21.464 16.5118 22.264 16.9918 22.872 17.7758C23.496 18.5438 23.808 19.4878 23.808 20.6078C23.808 21.3598 23.656 22.0398 23.352 22.6478C23.064 23.2558 22.648 23.7678 22.104 24.1838C21.576 24.6158 20.928 24.9438 20.16 25.1678C19.392 25.4078 18.528 25.5278 17.568 25.5278C16.352 25.5278 15.272 25.3278 14.328 24.9278C13.4 24.5438 12.624 23.9758 12 23.2238L13.824 20.9438C14.24 21.4718 14.736 21.8798 15.312 22.1678C15.888 22.4558 16.608 22.5998 17.472 22.5998C18.448 22.5998 19.192 22.4078 19.704 22.0238C20.216 21.6398 20.472 21.0478 20.472 20.2478C20.472 19.4158 20.176 18.7758 19.584 18.3278C18.992 17.8798 18.096 17.6558 16.896 17.6558H16.224V15.2558H16.968C17.96 15.2558 18.728 15.0398 19.272 14.6078C19.816 14.1598 20.088 13.5918 20.088 12.9038C20.088 12.2478 19.864 11.7598 19.416 11.4398C18.968 11.1198 18.384 10.9598 17.664 10.9598C16.928 10.9598 16.264 11.1278 15.672 11.4638C15.096 11.7998 14.624 12.2718 14.256 12.8798L12.24 10.6238C12.48 10.2558 12.8 9.92778 13.2 9.63978C13.6 9.33578 14.048 9.07978 14.544 8.87178C15.056 8.64778 15.608 8.47978 16.2 8.36778C16.792 8.23978 17.4 8.17578 18.024 8.17578C18.84 8.17578 19.584 8.27978 20.256 8.48778C20.928 8.69578 21.504 8.98378 21.984 9.35178C22.48 9.71978 22.856 10.1678 23.112 10.6958C23.384 11.2078 23.52 11.7838 23.52 12.4238C23.52 12.9038 23.448 13.3598 23.304 13.7918C23.16 14.2238 22.952 14.6158 22.68 14.9678C22.408 15.3198 22.08 15.6158 21.696 15.8558C21.328 16.0958 20.92 16.2558 20.472 16.3358Z" fill="white"/>
-</svg>
+const numberThreeSvg = `<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="#006E09"/>
+<path d="M20.472 16.3358C21.464 16.5118 22.264 16.9918 22.872 17.7758C23.496 18.5438 23.808 19.4878 23.808 20.6078C23.808 21.3598 23.656 22.0398 23.352 22.6478C23.064 23.2558 22.648 23.7678 22.104 24.1838C21.576 24.6158 20.928 24.9438 20.16 25.1678C19.392 25.4078 18.528 25.5278 17.568 25.5278C16.352 25.5278 15.272 25.3278 14.328 24.9278C13.4 24.5438 12.624 23.9758 12 23.2238L13.824 20.9438C14.24 21.4718 14.736 21.8798 15.312 22.1678C15.888 22.4558 16.608 22.5998 17.472 22.5998C18.448 22.5998 19.192 22.4078 19.704 22.0238C20.216 21.6398 20.472 21.0478 20.472 20.2478C20.472 19.4158 20.176 18.7758 19.584 18.3278C18.992 17.8798 18.096 17.6558 16.896 17.6558H16.224V15.2558H16.968C17.96 15.2558 18.728 15.0398 19.272 14.6078C19.816 14.1598 20.088 13.5918 20.088 12.9038C20.088 12.2478 19.864 11.7598 19.416 11.4398C18.968 11.1198 18.384 10.9598 17.664 10.9598C16.928 10.9598 16.264 11.1278 15.672 11.4638C15.096 11.7998 14.624 12.2718 14.256 12.8798L12.24 10.6238C12.48 10.2558 12.8 9.92778 13.2 9.63978C13.6 9.33578 14.048 9.07978 14.544 8.87178C15.056 8.64778 15.608 8.47978 16.2 8.36778C16.792 8.23978 17.4 8.17578 18.024 8.17578C18.84 8.17578 19.584 8.27978 20.256 8.48778C20.928 8.69578 21.504 8.98378 21.984 9.35178C22.48 9.71978 22.856 10.1678 23.112 10.6958C23.384 11.2078 23.52 11.7838 23.52 12.4238C23.52 12.9038 23.448 13.3598 23.304 13.7918C23.16 14.2238 22.952 14.6158 22.68 14.9678C22.408 15.3198 22.08 15.6158 21.696 15.8558C21.328 16.0958 20.92 16.2558 20.472 16.3358Z" fill="white"/>
+</svg>
 `;
 
-const mostPopularNewsCss = "h1,h2,h3,h4,h5,h6,p,ul,li{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.most-popular-wrapper{border:1px solid #eee;display:flex;flex-flow:column nowrap;background-color:var(--color-gray-02)}::slotted([slot=seo-content]){display:none}.most-popular-title{border-radius:4px 4px 0px 0px;background-color:var(--color-gray-12);padding:var(--ptc-element-spacing-05) 0px}.most-popular-cards{display:flex;flex-flow:column nowrap;max-width:100%;padding:12px}.most-popular-card ptc-card-wrapper{border-radius:4px;background:#FFF;box-shadow:var(--ptc-shadow-x-small)}.most-popular-card ptc-card-wrapper:hover{box-shadow:var(--ptc-shadow-small)}@media screen and (min-width: 768px){.most-popular-title{display:none}.most-popular-cards{display:flex;flex-flow:row nowrap}}@media screen and (min-width: 992px){.most-popular-title{display:block}.most-popular-cards{display:flex;flex-flow:column nowrap;max-width:246px;padding:12px 0;margin:0 auto}}";
-
-const MostPopularNews = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.topTitle = undefined;
-  }
-  // handleResize = () => {
-  //   equalizeHeightsWithinShadow('.js-card-bottom', this.el);
-  //   console.log('Window resized!');
-  // };
-  // // Debounce the handleResize function
-  // debouncedHandleResize = debounce(this.handleResize, 250); // Adjust 250ms to your needs
-  // componentWillLoad() {
-  //   window.addEventListener('resize', this.debouncedHandleResize);
-  // }
-  // disconnectedCallback() {
-  //   window.removeEventListener('resize', this.debouncedHandleResize);
-  // }
-  componentDidRender() {
-    utils.equalizeHeightsWithinShadow('.js-card-bottom', this.el);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "most-popular-wrapper" }, index.h("slot", { name: "seo-content" }), index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", class: "most-popular-title" }, this.topTitle), index.h("div", { class: "most-popular-cards" }, index.h("div", { class: "most-popular-card" }, index.h("ptc-card-wrapper", { "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, index.h("ptc-badge", { type: "svg", "svg-code": numberOneSvg }), index.h("ptc-card-content", null, index.h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), index.h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, index.h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, index.h("p", null, "PTC Q2 FY\u201923 Earnings Presentation"))))), index.h("div", { class: "most-popular-card" }, index.h("ptc-card-wrapper", { "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, index.h("ptc-badge", { type: "svg", "svg-code": numberTwoSvg }), index.h("ptc-card-content", null, index.h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), index.h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, index.h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, index.h("p", null, "PTC Announces Availability of Creo 9"))))), index.h("div", { class: "most-popular-card" }, index.h("ptc-card-wrapper", { "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, index.h("ptc-badge", { type: "svg", "svg-code": numberThreeSvg }), index.h("ptc-card-content", null, index.h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), index.h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, index.h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, index.h("p", null, "PTC Completes Acquisition of Intland Software")))))))));
-  }
-  get el() { return index.getElement(this); }
-};
+const mostPopularNewsCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}.most-popular-wrapper{border:1px solid #eee;display:flex;flex-flow:column nowrap;background-color:var(--color-gray-02)}::slotted([slot=seo-content]){display:none}.most-popular-title{border-radius:4px 4px 0px 0px;background-color:var(--color-gray-12);padding:var(--ptc-element-spacing-05) 0px}.most-popular-cards{display:flex;flex-flow:column nowrap;max-width:100%;padding:12px}.most-popular-card ptc-card-wrapper{border-radius:4px;background:#FFF;box-shadow:var(--ptc-shadow-x-small)}.most-popular-card ptc-card-wrapper:hover{box-shadow:var(--ptc-shadow-small)}@media screen and (min-width: 768px){.most-popular-title{display:none}.most-popular-cards{display:flex;flex-flow:row nowrap}}@media screen and (min-width: 992px){.most-popular-title{display:block}.most-popular-cards{display:flex;flex-flow:column nowrap;max-width:246px;padding:12px 0;margin:0 auto}}";
+
+const MostPopularNews = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.topTitle = undefined;
+  }
+  // handleResize = () => {
+  //   equalizeHeightsWithinShadow('.js-card-bottom', this.el);
+  //   console.log('Window resized!');
+  // };
+  // // Debounce the handleResize function
+  // debouncedHandleResize = debounce(this.handleResize, 250); // Adjust 250ms to your needs
+  // componentWillLoad() {
+  //   window.addEventListener('resize', this.debouncedHandleResize);
+  // }
+  // disconnectedCallback() {
+  //   window.removeEventListener('resize', this.debouncedHandleResize);
+  // }
+  componentDidRender() {
+    utils.equalizeHeightsWithinShadow('.js-card-bottom', this.el);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "most-popular-wrapper" }, index.h("slot", { name: "seo-content" }), index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", class: "most-popular-title" }, this.topTitle), index.h("div", { class: "most-popular-cards" }, index.h("div", { class: "most-popular-card" }, index.h("ptc-card-wrapper", { "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, index.h("ptc-badge", { type: "svg", "svg-code": numberOneSvg }), index.h("ptc-card-content", null, index.h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), index.h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, index.h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, index.h("p", null, "PTC Q2 FY\u201923 Earnings Presentation"))))), index.h("div", { class: "most-popular-card" }, index.h("ptc-card-wrapper", { "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, index.h("ptc-badge", { type: "svg", "svg-code": numberTwoSvg }), index.h("ptc-card-content", null, index.h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), index.h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, index.h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, index.h("p", null, "PTC Announces Availability of Creo 9"))))), index.h("div", { class: "most-popular-card" }, index.h("ptc-card-wrapper", { "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, index.h("ptc-badge", { type: "svg", "svg-code": numberThreeSvg }), index.h("ptc-card-content", null, index.h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), index.h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, index.h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, index.h("p", null, "PTC Completes Acquisition of Intland Software")))))))));
+  }
+  get el() { return index.getElement(this); }
+};
 MostPopularNews.style = mostPopularNewsCss;
 
 exports.most_popular_news = MostPopularNews;

package/dist/cjs/my-component.cjs.entry.js

@@ -2,25 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cd9a1b1a.js');
-const utils = require('./utils-b8cf5ed2.js');
+const index = require('./index-4b85b38a.js');
+const utils = require('./utils-03d92070.js');
 
 const myComponentCss = ":host{display:block}";
 
-const MyComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.first = undefined;
-    this.middle = undefined;
-    this.last = undefined;
-  }
-  getText() {
-    return utils.format(this.first, this.middle, this.last);
-  }
-  render() {
-    return index.h("div", null, "Hello, World! I'm ", this.getText());
-  }
-};
+const MyComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.first = undefined;
+    this.middle = undefined;
+    this.last = undefined;
+  }
+  getText() {
+    return utils.format(this.first, this.middle, this.last);
+  }
+  render() {
+    return index.h("div", null, "Hello, World! I'm ", this.getText());
+  }
+};
 MyComponent.style = myComponentCss;
 
 exports.my_component = MyComponent;