@ptcwebops/ptcw-design 6.2.10-beta → 6.2.10

package/dist/types/components.d.ts

@@ -44,7 +44,6 @@ export namespace Components {
     }
     interface EventJumbotronExample {
         "cards": { title: string; description: string; panelContent: string; cardBg: string }[];
-        "modalBtnCloseText": string;
     }
     interface FeaturedEventsSliderExample {
     }
@@ -170,8 +169,6 @@ export namespace Components {
          */
         "styles"?: string;
     }
-    interface ModalFormExample {
-    }
     interface MostPopularNews {
         "topTitle": string;
     }
@@ -906,10 +903,6 @@ export namespace Components {
     }
     interface PtcIconCard {
         "cardHref": string;
-        /**
-          * Add dark-focus-state property where button is present on dark backgrounds
-         */
-        "darkFocusState": boolean;
         "target": string;
         "trackerId"?: string;
     }
@@ -1217,7 +1210,6 @@ export namespace Components {
           * Add the border radius  Options: standard | large | pill | circle
          */
         "borderRadius"?: 'standard' | 'large' | 'pill' | 'circle';
-        "bottomCloseBtn"?: string;
         /**
           * Sets if popup should close if click on outside
          */
@@ -1230,9 +1222,6 @@ export namespace Components {
           * Sets if popup should overlay
          */
         "fixed"?: boolean;
-        "headerOnlyBg"?: string;
-        "headerOnlyText1"?: string;
-        "headerOnlyText2"?: string;
         /**
           * Sets if popup should have rounded corners
          */
@@ -1272,7 +1261,7 @@ export namespace Components {
         /**
           * Sets if popup should close if click on outside
          */
-        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max'| 'sm-modal';
+        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'max'| 'sm-modal';
         /**
           * (optional) Injected CSS Styles
          */
@@ -1531,7 +1520,7 @@ export namespace Components {
         /**
           * Paragraph Color
          */
-        "paraColor": 'primary-grey' | 'primary-green' | 'white' | 'gray-darker';
+        "paraColor": 'primary-grey' | 'white' | 'gray-darker';
         /**
           * line height
          */
@@ -1695,7 +1684,6 @@ export namespace Components {
          */
         "styles"?: string;
         "text": string | undefined;
-        "theme": 'standard' | 'light';
     }
     interface PtcPricingAddOnCard {
         /**
@@ -2199,10 +2187,6 @@ export namespace Components {
         "xUrl": string;
     }
     interface PtcSocialIconsFooter {
-        /**
-          * Add dark-focus-state property where button is present on dark backgrounds
-         */
-        "darkFocusState": boolean;
         "facebookImageAlt": string;
         "facebookImageUrl": string;
         "facebookUrl": string;
@@ -2434,14 +2418,11 @@ export namespace Components {
         "infoText": string;
         "inputValue": string;
         "labelText": string;
-        "placeholderText": string;
         "ptcDataEloquaName": string;
         "ptcDataTargetEloquaName": string;
         "ptcMaxLength"?: number;
         "required": boolean;
-        "styles": string;
         "syncCountry": (countryCode: string) => Promise<void>;
-        "textfieldForm": 'default' | 'email-signup';
         "type": string;
         "validateTextField": () => Promise<void>;
     }
@@ -3076,12 +3057,6 @@ declare global {
         prototype: HTMLMaxWidthContainerElement;
         new (): HTMLMaxWidthContainerElement;
     };
-    interface HTMLModalFormExampleElement extends Components.ModalFormExample, HTMLStencilElement {
-    }
-    var HTMLModalFormExampleElement: {
-        prototype: HTMLModalFormExampleElement;
-        new (): HTMLModalFormExampleElement;
-    };
     interface HTMLMostPopularNewsElement extends Components.MostPopularNews, HTMLStencilElement {
     }
     var HTMLMostPopularNewsElement: {
@@ -3979,7 +3954,6 @@ declare global {
         "jumbotron-sub-mune": HTMLJumbotronSubMuneElement;
         "list-item": HTMLListItemElement;
         "max-width-container": HTMLMaxWidthContainerElement;
-        "modal-form-example": HTMLModalFormExampleElement;
         "most-popular-news": HTMLMostPopularNewsElement;
         "my-component": HTMLMyComponentElement;
         "news-search-result": HTMLNewsSearchResultElement;
@@ -4165,7 +4139,6 @@ declare namespace LocalJSX {
     }
     interface EventJumbotronExample {
         "cards"?: { title: string; description: string; panelContent: string; cardBg: string }[];
-        "modalBtnCloseText"?: string;
     }
     interface FeaturedEventsSliderExample {
     }
@@ -4297,8 +4270,6 @@ declare namespace LocalJSX {
          */
         "styles"?: string;
     }
-    interface ModalFormExample {
-    }
     interface MostPopularNews {
         "topTitle"?: string;
     }
@@ -5057,10 +5028,6 @@ declare namespace LocalJSX {
     }
     interface PtcIconCard {
         "cardHref"?: string;
-        /**
-          * Add dark-focus-state property where button is present on dark backgrounds
-         */
-        "darkFocusState"?: boolean;
         "target"?: string;
         "trackerId"?: string;
     }
@@ -5369,7 +5336,6 @@ declare namespace LocalJSX {
           * Add the border radius  Options: standard | large | pill | circle
          */
         "borderRadius"?: 'standard' | 'large' | 'pill' | 'circle';
-        "bottomCloseBtn"?: string;
         /**
           * Sets if popup should close if click on outside
          */
@@ -5382,9 +5348,6 @@ declare namespace LocalJSX {
           * Sets if popup should overlay
          */
         "fixed"?: boolean;
-        "headerOnlyBg"?: string;
-        "headerOnlyText1"?: string;
-        "headerOnlyText2"?: string;
         /**
           * Sets if popup should have rounded corners
          */
@@ -5429,7 +5392,7 @@ declare namespace LocalJSX {
         /**
           * Sets if popup should close if click on outside
          */
-        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max'| 'sm-modal';
+        "size"?: 'sm' | 'md' | 'lg' | 'xl' | 'max'| 'sm-modal';
         /**
           * (optional) Injected CSS Styles
          */
@@ -5696,7 +5659,7 @@ declare namespace LocalJSX {
         /**
           * Paragraph Color
          */
-        "paraColor"?: 'primary-grey' | 'primary-green' | 'white' | 'gray-darker';
+        "paraColor"?: 'primary-grey' | 'white' | 'gray-darker';
         /**
           * line height
          */
@@ -5858,7 +5821,6 @@ declare namespace LocalJSX {
          */
         "styles"?: string;
         "text"?: string | undefined;
-        "theme"?: 'standard' | 'light';
     }
     interface PtcPricingAddOnCard {
         /**
@@ -6385,10 +6347,6 @@ declare namespace LocalJSX {
         "xUrl"?: string;
     }
     interface PtcSocialIconsFooter {
-        /**
-          * Add dark-focus-state property where button is present on dark backgrounds
-         */
-        "darkFocusState"?: boolean;
         "facebookImageAlt"?: string;
         "facebookImageUrl"?: string;
         "facebookUrl"?: string;
@@ -6621,13 +6579,10 @@ declare namespace LocalJSX {
         "infoText"?: string;
         "inputValue"?: string;
         "labelText"?: string;
-        "placeholderText"?: string;
         "ptcDataEloquaName"?: string;
         "ptcDataTargetEloquaName"?: string;
         "ptcMaxLength"?: number;
         "required"?: boolean;
-        "styles"?: string;
-        "textfieldForm"?: 'default' | 'email-signup';
         "type"?: string;
     }
     interface PtcTheaterVideo {
@@ -6938,7 +6893,6 @@ declare namespace LocalJSX {
         "jumbotron-sub-mune": JumbotronSubMune;
         "list-item": ListItem;
         "max-width-container": MaxWidthContainer;
-        "modal-form-example": ModalFormExample;
         "most-popular-news": MostPopularNews;
         "my-component": MyComponent;
         "news-search-result": NewsSearchResult;
@@ -7116,7 +7070,6 @@ declare module "@stencil/core" {
             "jumbotron-sub-mune": LocalJSX.JumbotronSubMune & JSXBase.HTMLAttributes<HTMLJumbotronSubMuneElement>;
             "list-item": LocalJSX.ListItem & JSXBase.HTMLAttributes<HTMLListItemElement>;
             "max-width-container": LocalJSX.MaxWidthContainer & JSXBase.HTMLAttributes<HTMLMaxWidthContainerElement>;
-            "modal-form-example": LocalJSX.ModalFormExample & JSXBase.HTMLAttributes<HTMLModalFormExampleElement>;
             "most-popular-news": LocalJSX.MostPopularNews & JSXBase.HTMLAttributes<HTMLMostPopularNewsElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
             "news-search-result": LocalJSX.NewsSearchResult & JSXBase.HTMLAttributes<HTMLNewsSearchResultElement>;

package/dist/types/utils/utils.d.ts

@@ -25,4 +25,3 @@ export declare class PreloaderDependency {
   resolve: () => any;
   reject: () => any;
 }
-export declare function CheckDarkFocusState(context: any, el: HTMLElement, classList?: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptcwebops/ptcw-design",
-  "version": "6.2.10-beta",
+  "version": "6.2.10",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "./dist/index.js",

package/readme.md

@@ -1,6 +1,6 @@
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
 
-# PTC Design 6.2.10-beta
+# PTC Design 6.2.10
 
 The site is the place for documentation on PTC Design System
 
@@ -17,7 +17,3 @@ To build the site from the source, ensure you're using the most recent versions
 - puppeteer 10.0.0
 
 ## License
-
-## Release notes
-
-TODO: figure out how to do release notes with npm

package/dist/cjs/event-jumbotron-example.cjs.entry.js

@@ -1,131 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-63ddc79c.js');
-
-const eventJumbotronExampleCss = "h1.sc-event-jumbotron-example,h2.sc-event-jumbotron-example,h3.sc-event-jumbotron-example,h4.sc-event-jumbotron-example,h5.sc-event-jumbotron-example,h6.sc-event-jumbotron-example,p.sc-event-jumbotron-example,ul.sc-event-jumbotron-example,li.sc-event-jumbotron-example,ptc-subnav.sc-event-jumbotron-example,ptc-tab-list.sc-event-jumbotron-example,ptc-link.sc-event-jumbotron-example,ptc-square-card.sc-event-jumbotron-example,.hyphenate-text.sc-event-jumbotron-example,ptc-footer.sc-event-jumbotron-example{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1.sc-event-jumbotron-example,h2.sc-event-jumbotron-example,h3.sc-event-jumbotron-example,h4.sc-event-jumbotron-example,h5.sc-event-jumbotron-example,h6.sc-event-jumbotron-example,p.sc-event-jumbotron-example,ul.sc-event-jumbotron-example,li.sc-event-jumbotron-example,ptc-subnav.sc-event-jumbotron-example,ptc-tab-list.sc-event-jumbotron-example,ptc-link.sc-event-jumbotron-example,ptc-square-card.sc-event-jumbotron-example,.hyphenate-text.sc-event-jumbotron-example,ptc-footer.sc-event-jumbotron-example{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}}.sc-event-jumbotron-example-h{display:block;position:relative}.event-jumbotron.sc-event-jumbotron-example{margin-bottom:3rem;width:100%}.white-placeholder.sc-event-jumbotron-example{position:absolute;height:130px;width:100%;background-color:#F3f3f3;bottom:0px}.jumbotron-cards-wrapper.sc-event-jumbotron-example{z-index:1;position:relative;display:flex;flex-direction:column}.jumbotron-cards.sc-event-jumbotron-example{display:flex;gap:16px;overflow-x:auto;padding:0 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab}.jumbotron-cards.sc-event-jumbotron-example::-webkit-scrollbar{display:none}.jumbotron-cards.dragging.sc-event-jumbotron-example{cursor:grabbing}.card.sc-event-jumbotron-example{flex:0 0 auto;width:250px;height:414px;background:transparent;border-radius:var(--ptc-border-radius-standard);display:flex;justify-content:center;align-items:center;text-align:center;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);flex-direction:column;padding:24px;position:relative}.card.sc-event-jumbotron-example ptc-img.sc-event-jumbotron-example::after{content:\"\";top:0px;left:0px;position:absolute;width:100%;height:100%;border-radius:var(--ptc-border-radius-standard);background:linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);transition:var(--ptc-transition-slow) ease-in-out}.card.sc-event-jumbotron-example:hover ptc-img.sc-event-jumbotron-example::after{background:linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%)}.card.sc-event-jumbotron-example:focus ptc-img.sc-event-jumbotron-example::after,.card.sc-event-jumbotron-example:active ptc-img.sc-event-jumbotron-example::after{background:linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%)}.text-wrapper.sc-event-jumbotron-example{align-self:flex-start;text-align:left}.card-title.sc-event-jumbotron-example{color:var(--color-white);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-x-large);font-weight:var(--ptc-font-weight-extrabold);line-height:var(--ptc-line-height-densest);position:relative;z-index:2;margin-top:0;margin-bottom:var(--ptc-element-spacing-06)}.card-title.sc-event-jumbotron-example span.sc-event-jumbotron-example{font-weight:var(--ptc-font-weight-medium);display:block}.cta-all.sc-event-jumbotron-example{margin-right:20px}.panel.sc-event-jumbotron-example{display:none;visibility:hidden}@media only screen and (min-width: 992px){.cta-group.sc-event-jumbotron-example{margin-bottom:88px}.jumbotron-cards.sc-event-jumbotron-example{overflow-x:visible;justify-content:space-between;cursor:auto;transition:transform 0.3s ease-in-out}.card.sc-event-jumbotron-example{width:218px;height:530px;padding:24px;cursor:pointer}.card.hidden.sc-event-jumbotron-example{opacity:0;pointer-events:none}.card.active.sc-event-jumbotron-example{border-top-right-radius:0px;border-bottom-right-radius:0px}.panel.sc-event-jumbotron-example{visibility:hidden;opacity:0;position:absolute;top:0;left:0;width:726px;height:530px;padding:40px;background:var(--color-white);border-radius:var(--ptc-border-radius-standard);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;z-index:10}.panel.visible.sc-event-jumbotron-example{visibility:visible;opacity:1;border-top-left-radius:0px;border-bottom-left-radius:0px}.close-panel.sc-event-jumbotron-example{position:absolute;top:0px;right:0px;background:var(--color-white);border:none;text-align:center;cursor:pointer;padding:0px;margin:5px}.hide-scrollbar.sc-event-jumbotron-example{margin-left:-40px;margin-right:-40px}}@media only screen and (min-width: 1200px){.card.sc-event-jumbotron-example{width:260px}.card-title.sc-event-jumbotron-example{font-size:32px}.card-title.sc-event-jumbotron-example span.sc-event-jumbotron-example{font-size:32px}.jumbotron-cards.sc-event-jumbotron-example{padding:0}.panel.sc-event-jumbotron-example{width:876px}}@media only screen and (min-width: 1440px){.card.sc-event-jumbotron-example{width:270px}.panel.sc-event-jumbotron-example{width:930px}}";
-
-const EventJumbotronExample = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.startX = 0;
-    this.scrollLeft = 0;
-    this.updateContainerClass = () => {
-      if (this.screenStatus.isDesktop) {
-        this.sliderWrapper.classList.add('ptc-container', 'u-paddingRight-flush', 'u-paddingLeft-flush');
-        this.disableDragging();
-      }
-      else {
-        this.sliderWrapper.classList.remove('ptc-container', 'u-paddingRight-flush', 'u-paddingLeft-flush');
-        this.enableDragging();
-      }
-    };
-    this.startDragging = (e) => {
-      this.isMouseDown = true;
-      this.isDragging = false;
-      this.startX = e.pageX;
-      this.scrollLeft = this.slider.scrollLeft;
-    };
-    this.performDragging = (e) => {
-      if (!this.isMouseDown)
-        return;
-      const x = e.pageX - this.slider.offsetLeft;
-      const walk = x - this.startX;
-      this.isDragging = Math.abs(walk) > 5;
-      this.slider.scrollLeft = this.scrollLeft - walk;
-    };
-    this.stopDragging = () => {
-      this.isMouseDown = false;
-    };
-    this.cards = [];
-    this.modalBtnCloseText = "Close";
-    this.activePanel = null;
-    this.isDragging = false;
-    this.isMouseDown = false;
-    this.screenStatus = { isDesktop: window.innerWidth >= 992 };
-  }
-  handleCardClick(cardIndex) {
-    const card = this.slider.children[cardIndex];
-    const panelID = `panel-${cardIndex}`;
-    const panel = document.getElementById(panelID);
-    if (this.screenStatus.isDesktop && panel) {
-      this.showPanel(card, panel);
-    }
-    else if (!this.screenStatus.isDesktop) {
-      if (!this.isDragging) {
-        const modal = document.getElementById(`modal-${cardIndex}`);
-        console.log('open: ' + modal.id);
-        modal.show = true;
-      }
-    }
-  }
-  showPanel(card, panel) {
-    if (this.activePanel)
-      return;
-    this.slider.style.transform = `translateX(-${card.offsetLeft}px)`;
-    Array.from(this.slider.children).forEach(c => {
-      if (c !== card)
-        c.classList.add('hidden');
-    });
-    panel.style.display = 'block';
-    setTimeout(() => {
-      panel.style.transform = `translateX(${card.offsetWidth}px)`;
-      panel.classList.add('visible');
-      card.classList.add('active');
-      this.activePanel = panel.id;
-    }, 100);
-  }
-  closePanel(panelId) {
-    const panel = document.getElementById(panelId);
-    if (panel) {
-      panel.classList.remove('visible');
-      panel.addEventListener('transitionend', () => {
-        if (!panel.classList.contains('visible')) {
-          panel.style.display = 'none';
-        }
-      }, { once: true });
-    }
-    this.activePanel = null;
-    this.slider.style.transform = 'translateX(0)';
-    Array.from(this.slider.children).forEach(card => {
-      card.classList.remove('hidden', 'active');
-    });
-  }
-  enableDragging() {
-    this.slider.addEventListener('mousedown', this.startDragging);
-    this.slider.addEventListener('mousemove', this.performDragging);
-    ['mouseup', 'mouseleave'].forEach(event => this.slider.addEventListener(event, this.stopDragging));
-  }
-  disableDragging() {
-    this.slider.removeEventListener('mousedown', this.startDragging);
-    this.slider.removeEventListener('mousemove', this.performDragging);
-    ['mouseup', 'mouseleave'].forEach(event => this.slider.removeEventListener(event, this.stopDragging));
-  }
-  componentDidLoad() {
-    // const cardOverlays = document.querySelectorAll('overlay');
-    this.sliderWrapper = document.querySelector('.jumbotron-cards-wrapper');
-    this.slider = document.querySelector('.jumbotron-cards');
-    this.updateContainerClass();
-    window.addEventListener('resize', () => {
-      this.screenStatus.isDesktop = window.innerWidth >= 992;
-      this.updateContainerClass();
-      this.activePanel && this.closePanel(this.activePanel);
-    });
-    // cardOverlays.forEach( (ele=> {(ele as HTMLPtcOverlayElement).setOverlayColorValue('linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%)')}))
-  }
-  render() {
-    const modalContentSlots = Array.from(this.el.querySelectorAll('template'));
-    return [
-      index.h("div", { class: {
-          'event-jumbotron': true,
-          'ptc-container': this.screenStatus.isDesktop,
-        } }, index.h("div", { class: "jumbotron-cards-wrapper" }, index.h("div", { class: "jumbotron-cards" }, this.cards.map((card, index$1) => (index.h("div", { class: "card", onClick: () => this.handleCardClick(index$1), "data-panel": `panel-${index$1}` }, index.h("ptc-img", { "border-radius": "radius-standard", "image-type": "smart-bg", "img-url": card.cardBg, "load-mode": "lazy-bg", styles: "ptc-img{position: absolute; width: 100%; height: 100%; z-index: 0}" }), index.h("div", { class: "text-wrapper" }, index.h("h3", { class: "card-title" }, card.title, index.h("span", null, card.description)), index.h("div", { innerHTML: card.panelContent })))))), this.cards.map((_, index$1) => (index.h("div", { id: `panel-${index$1}`, class: "panel" }, index.h("button", { tabindex: "-1", class: "close-panel", onClick: () => this.closePanel(`panel-${index$1}`), "aria-label": "Close panel" }, index.h("ptc-close-icon", null)), index.h("slot", { name: `panel-content-${index$1}` })))), !this.screenStatus.isDesktop && this.cards.map((_, index$1) => (index.h("ptc-modal", { id: `modal-${index$1}`, show: false, "close-on-blur": true, "modal-type": "event-listing", "custom-class": "event-mobile-modal", headerOnlyText1: this.cards[index$1].title, headerOnlyText2: this.cards[index$1].description, headerOnlyBg: this.cards[index$1].cardBg, bottomCloseBtn: this.modalBtnCloseText }, index.h("div", { innerHTML: modalContentSlots[index$1].innerHTML })))))),
-      index.h("div", { class: "white-placeholder" }),
-    ];
-  }
-  get el() { return index.getElement(this); }
-};
-EventJumbotronExample.style = eventJumbotronExampleCss;
-
-exports.event_jumbotron_example = EventJumbotronExample;

package/dist/cjs/modal-form-example.cjs.entry.js

@@ -1,94 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-63ddc79c.js');
-
-const modalFormExampleCss = ":host {\r\n  display: block;\r\n}\r\n\r\n.form-wrapper {\r\n  width: 371px;\r\n  display: flex;\r\n  border-radius: 3px;\r\n  background: #FFF;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 0px 32px;\r\n\r\n  @media only screen and (min-width: 360px) and (max-width: 479.55px) {\r\n    max-width: 360px;\r\n    width: 360px;\r\n  }\r\n\r\n  .button-wrapper {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    gap: 20px;\r\n    margin-top: 48px;\r\n    flex-wrap: wrap;\r\n  }\r\n}\r\n";
-
-const PtcForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.formData = {
-      email: '',
-      firstName: '',
-      lastName: '',
-      company: '',
-      country: '',
-      phone: '',
-      inquiryReason: '',
-      howhearselfreport: '',
-      policyChecked: false,
-    };
-  }
-  // private countryEle: HTMLPtcSelectElement;
-  // private inquiryreasonEle: HTMLPtcTextfieldElement;
-  // private howhearselfreport: HTMLPtcTextfieldElement;
-  componentDidLoad() {
-    this.formButton = this.el.querySelector('.form-submit');
-    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
-    //get Email
-    this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
-    this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
-    this.lastNameEle = this.el.querySelector('ptc-textfield[field-id="contact-lastname"]');
-    this.companyEle = this.el.querySelector('ptc-textfield[field-id="company"]');
-    this.phoneEle = this.el.querySelector('ptc-textfield[field-id="contact-phone"]');
-    // this.countryEle = this.el.querySelector('ptc-select[field-id="contact-country"]')
-    // this.inquiryreasonEle = this.el.querySelector('ptc-textfield[field-id="contact-inquiry"]')
-    // this.howhearselfreport = this.el.querySelector('ptc-textfield[field-id="self-reporting"]')
-  }
-  handleInputChange(field, value) {
-    this.formData = Object.assign(Object.assign({}, this.formData), { [field]: value });
-  }
-  handleSubmit(event) {
-    event.preventDefault();
-    this.formData.email = this.emailEle.inputValue;
-    this.formData.firstName = this.firstNameEle.inputValue;
-    this.formData.lastName = this.lastNameEle.inputValue;
-    this.formData.company = this.companyEle.inputValue;
-    this.formData.phone = this.phoneEle.inputValue;
-    // this.formData.country = this.countryEle.inputValue;
-    // this.formData.inquiryReason= this.inquiryreasonEle.inputValue;
-    // this.formData.howhearselfreport = this.howhearselfreport.inputValue;
-    // console.log("get form Data: " + this.formData.email)
-    if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent('formSubmit', {
-        detail: this.formData,
-        bubbles: true,
-      });
-      this.el.dispatchEvent(formSubmitEvent);
-      console.log('Form Submitted: ' + this.formData);
-    }
-    else {
-      console.log('Form validation failed');
-      console.log('Form Submitted: ' + this.formData.email, this.formData.firstName, this.formData.lastName, this.formData.company, this.formData.phone);
-    }
-  }
-  isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    // console.log('invalid fields length: ' + invalidLength), check the select field
-    return (email !== '' &&
-      phone !== '' &&
-      firstName !== '' &&
-      lastName !== '' &&
-      company !== '' &&
-      country !== '' &&
-      inquiryReason !== '' &&
-      howhearselfreport != '' &&
-      policyChecked &&
-      invalidLength === 0);
-  }
-  render() {
-    const multiSelectItems = [
-      { text: 'Item 1', selected: false, ptcDataEloquaName: 'item_1', ptcDataTargetEloquaName: 'item_target-1' },
-      { text: 'Item 2', selected: false, ptcDataEloquaName: 'item_2', ptcDataTargetEloquaName: 'item_target-2' },
-      { text: 'Item 3', selected: false, ptcDataEloquaName: 'item_3', ptcDataTargetEloquaName: 'item_target-3' }
-    ];
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-container u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("ptc-title", { "seo-compatibility-mode": true, "text-align": "left", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false", "title-size": "medium" }, index.h("h2", null, "PTC\u2019s PLM application suite combines the power of Windchill, the industry\u2019s #1 PLM software with Thingworx")), index.h("ptc-spacer", { size: "x-small", breakpoint: "small" }), index.h("ptc-spacer", { size: "small", breakpoint: "x-small" }), index.h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-densest" }, "PTC\u2019s market-leading, purpose-built IIoT platform. The suite offers a mix of Packages, Add-Ons, and Apps to best suit your business needs:"), index.h("ptc-spacer", { size: "x-small", breakpoint: "small" }), index.h("ptc-spacer", { size: "small", breakpoint: "x-small" }), index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event) }, index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item placehoder-li", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Select a country")), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.h("ptc-multi-select", { items: multiSelectItems, "is-required": 'true' }), index.h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), index.h("div", { class: "button-wrapper" }, index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Submit"), index.h("ptc-button", { class: "form-close", color: "ptc-tertiary", type: "button", styles: ":host{align-self:flex-end; display:block; float: left; width: fit-content;}" }, "Cancel")))))));
-  }
-  get el() { return index.getElement(this); }
-};
-PtcForm.style = modalFormExampleCss;
-
-exports.modal_form_example = PtcForm;

package/dist/cjs/ptc-card-bottom_2.cjs.entry.js

@@ -1,132 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-63ddc79c.js');
-
-const ptcCardBottomCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,ptc-square-card,.hyphenate-text,ptc-footer{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}:host ::slotted([slot=seo-content]){display:none}:host(.card-tall) .ptc-card-bottom-wrapper,:host(.card-wide) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0 var(--ptc-element-spacing-07) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);z-index:2}:host(.card-2up) .ptc-card-bottom-wrapper{position:absolute;bottom:0;left:0;padding:0px 24px 24px 16px}:host(.card-playlist){flex:72% 2 1;align-self:center}:host(.mouse-hover-card-bottom) .ptc-card-bottom-wrapper{z-index:5;cursor:pointer}:host(.extra-tall){position:absolute;top:0;left:0}:host(.extra-tall) .ptc-card-bottom-wrapper{position:relative;top:0px;left:0px;bottom:0px;right:0px;display:flex;flex-direction:column;align-items:center;width:calc(100% - 64px);padding:var(--ptc-layout-spacing-05) var(--ptc-element-spacing-07);padding-bottom:calc(var(--ptc-layout-spacing-03) + var(--ptc-layout-spacing-05));z-index:2}@media only screen and (min-width: 768px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-bottom:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 992px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 1200px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:calc(var(--ptc-layout-spacing-04) + var(--ptc-layout-spacing-05))}}@media only screen and (min-width: 1440px){:host(.extra-tall) .ptc-card-bottom-wrapper{padding-top:calc(var(--ptc-layout-spacing-05) * 2)}}:host(.color-outlined) .ptc-card-bottom-wrapper{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;flex-direction:column;align-items:center;width:calc(100% - 80px);height:100%;padding:0px var(--ptc-element-spacing-08)}:host(.most-popular){padding:0 16px 14px 16px}@media only screen and (min-width: 768px){:host(.card-2up) .ptc-card-bottom-wrapper{padding:0 32px 32px 24px}}@media only screen and (min-width: 1200px){:host(.card-video-intro){flex:20% 2 1;justify-content:flex-end}:host(.card-video-intro) .ptc-card-bottom-wrapper{display:flex;justify-content:flex-end}}@media only screen and (min-width: 1440px){:host(.card-2up) .ptc-card-bottom-wrapper{width:70%}}@media only screen and (min-width: 1980px){:host(.card-2up) .ptc-card-bottom-wrapper{width:60%}}";
-
-const PtcCardBottom = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hoverEvent = index.createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = index.createEvent(this, "leaveEvent", 7);
-    this.cardType = undefined;
-    this.styles = undefined;
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    //if statement: the card type that doesn't need a hover event
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
-      this.el.previousElementSibling.classList.add('mouse-hover');
-      this.el.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    //if statement: the card type that doesn't need a hover event
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
-      this.el.previousElementSibling.classList.remove('mouse-hover');
-      this.el.classList.remove('mouse-hover-card-bottom');
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { part: "card-bottom", class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && index.h("style", null, this.styles), index.h("slot", { name: "slot-content" }), index.h("div", { class: "ptc-card-bottom-wrapper" }, index.h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: this.cardType ? true : false,
-    };
-  }
-  get el() { return index.getElement(this); }
-};
-PtcCardBottom.style = ptcCardBottomCss;
-
-const ptcCardWrapperCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{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,ptc-square-card,.hyphenate-text,ptc-footer{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}:host(.card-tall),:host(.card-wide),:host(.card-video),:host(.card-playlist),:host(.card-2up){position:relative}:host(.card-tall) a,:host(.card-wide) a,:host(.card-video) a,:host(.card-playlist) a,:host(.card-2up) a{text-decoration:none !important}:host(.card-tall) a:hover,:host(.card-wide) a:hover,:host(.card-video) a:hover,:host(.card-playlist) a:hover,:host(.card-2up) a:hover{text-decoration:none}:host(.card-tall) a:focus,:host(.card-wide) a:focus,:host(.card-video) a:focus,:host(.card-playlist) a:focus,:host(.card-2up) a:focus{outline:none;text-decoration:none}:host(.card-tall) a:focus-visible,:host(.card-wide) a:focus-visible,:host(.card-video) a:focus-visible,:host(.card-playlist) a:focus-visible,:host(.card-2up) a:focus-visible{outline:none;text-decoration:none}:host(.card-tall) a:focus-visible::before,:host(.card-wide) a:focus-visible::before,:host(.card-video) a:focus-visible::before,:host(.card-playlist) a:focus-visible::before,:host(.card-2up) a:focus-visible::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;border-radius:var(--ptc-border-radius-large);outline:5px solid var(--keyboard-nav-outline)}:host(.card-tall) a.focus-state-dark-background:focus-visible::before,:host(.card-wide) a.focus-state-dark-background:focus-visible::before,:host(.card-video) a.focus-state-dark-background:focus-visible::before,:host(.card-playlist) a.focus-state-dark-background:focus-visible::before,:host(.card-2up) a.focus-state-dark-background:focus-visible::before{border:2px solid white}:host(.card-playlist) div:not(.tracker-div),:host(.card-playlist) a{display:flex;text-decoration:none;outline:none}:host(.card-playlist) div:not(.tracker-div):hover,:host(.card-playlist) a:hover{text-decoration:none;outline:none}:host(.card-video-intro){border-bottom-left-radius:var(--ptc-border-radius-large);border-bottom-right-radius:var(--ptc-border-radius-large)}:host(.card-video-intro) div:not(.tracker-div){display:block}:host(.card-video-shadow){box-shadow:var(--ptc-shadow-x-small)}:host(.extra-tall){position:relative}:host(.extra-tall) a{position:relative;display:block;width:100%;height:100%;inset:0px}:host(.extra-tall) a::after{content:\"\";position:absolute;width:100%;height:100%;background:rgba(0, 0, 0, 0);bottom:0;left:0;border-radius:var(--ptc-border-radius-large);transition:background var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.color-outlined){position:relative;border-radius:var(--ptc-border-radius-large)}:host(.card-video-p){padding:var(--ptc-element-spacing-05);padding-bottom:var(--ptc-element-spacing-06)}:host(.card-m-right){margin-right:var(--ptc-element-spacing-02)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-02)}:host(.extraT-overlay) a::after{background:rgba(0, 0, 0, 0.6)}@media only screen and (min-width: 768px){:host(.card-m-right){margin-right:var(--ptc-element-spacing-03)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-03)}}@media only screen and (min-width: 992px){:host(.card-m-right){margin-right:var(--ptc-element-spacing-04)}:host(.card-m-left){margin-left:var(--ptc-element-spacing-04)}}@media only screen and (min-width: 1200px){:host(.card-video-intro) div:not(.tracker-div){display:flex}}:host(.result-box){width:505px;border:1px solid #6A6A6A;padding-top:56px;padding-bottom:56px;border-radius:var(--ptc-border-radius-large)}:host(.result-box) div:not(.tracker-div){display:flex;justify-content:center;align-items:center;flex-direction:column}:host(.simple-card){border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);box-shadow:var(--ptc-shadow-small);padding:var(--ptc-layout-spacing-03)}:host(.simple-card) a{text-decoration:none}:host(.simple-card) a:hover{text-decoration:none}:host(.most-popular){position:relative;margin:12px;background-color:var(--color-white)}:host(.most-popular) a{text-decoration:none}:host(.most-popular) a:hover{text-decoration:none}:host(.most-popular) a:focus-visible{box-shadow:0 0 0 5px var(--keyboard-nav-outline);border-radius:var(--ptc-border-radius-standard) !important;display:block;outline:none}";
-
-const PtcCardPlm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hoverEvent = index.createEvent(this, "hoverEvent", 7);
-    this.leaveEvent = index.createEvent(this, "leaveEvent", 7);
-    this.squareHeightChanged = index.createEvent(this, "squareHeightChanged", 7);
-    this.cardType = undefined;
-    this.cardLink = undefined;
-    this.linkTitle = undefined;
-    this.linkTarget = '_self';
-    this.isLoading = false;
-    this.trackerId = undefined;
-    this.styles = undefined;
-    this.darkFocusState = false;
-  }
-  handleResize() {
-    this.checkScreenSize();
-    this.emitHeight();
-  }
-  hoverEventHandler() {
-    if (this.el.classList.contains('extra-tall')) {
-      this.hoverEvent.emit();
-      this.el.classList.add('extraT-overlay');
-    }
-    if (this.el.classList.contains('color-outlined')) {
-      this.hoverEvent.emit();
-      const cardOverlay = this.el.querySelector('ptc-overlay');
-      cardOverlay.setOverlay('black-5');
-    }
-  }
-  leaveEventHandler() {
-    if (this.el.classList.contains('extra-tall')) {
-      this.hoverEvent.emit();
-      this.el.classList.remove('extraT-overlay');
-    }
-    if (this.el.classList.contains('color-outlined')) {
-      this.hoverEvent.emit();
-      const cardOverlay = this.el.querySelector('ptc-overlay');
-      cardOverlay.setOverlay('black-4');
-    }
-  }
-  componentDidLoad() {
-    this.checkScreenSize();
-    this.emitHeight();
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const Tag = !!this.cardLink ? 'a' : 'div';
-    return (index.h(index.Host, Object.assign({ class: classMap }, (!this.isLoading ? { onMouseEnter: this.hoverEventHandler.bind(this) } : {}), (!this.isLoading ? { onMouseLeave: this.leaveEventHandler.bind(this) } : {})), this.styles && index.h("style", null, this.styles), index.h("div", { class: "tracker-div mf-listen", id: this.trackerId }, index.h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}` }, (!!this.cardLink && this.cardType !== "simple-card" ? { tabindex: '0' } : { tabindex: '-1' }), (!!this.cardLink && !this.isLoading ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink && !this.isLoading ? { target: this.linkTarget } : {}), (!!this.cardLink && !this.isLoading ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})), index.h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: this.cardType ? true : false,
-    };
-  }
-  emitHeight() {
-    const height = this.el.offsetHeight;
-    this.squareHeightChanged.emit(height);
-  }
-  getBtmContentHeight() {
-    const bottomContent = this.el.querySelector('ptc-card-bottom');
-    return bottomContent.offsetHeight;
-  }
-  checkScreenSize() {
-    if (this.cardType === 'extra-tall') {
-      if (window.innerWidth < 768) {
-        const cardContent = this.el.querySelector('ptc-card-content');
-        if (cardContent) {
-          cardContent.setHeight(this.getBtmContentHeight());
-        }
-      }
-      else {
-        const cardContent = this.el.querySelector('ptc-card-content');
-        if (cardContent) {
-          cardContent.removeInlineHeight();
-        }
-      }
-    }
-  }
-  get el() { return index.getElement(this); }
-};
-PtcCardPlm.style = ptcCardWrapperCss;
-
-exports.ptc_card_bottom = PtcCardBottom;
-exports.ptc_card_wrapper = PtcCardPlm;