@ptcwebops/ptcw-design 2.2.3 → 2.2.5

package/dist/types/components/ptc-related-card-rail/ptc-related-card-rail.d.ts

@@ -0,0 +1,30 @@
+export declare class PtcRelatedCardRail {
+  /**
+  * Card Rail Element
+  */
+  el: HTMLElement;
+  /**
+  * Query selector of page footer above which the related card rail will unstick
+  */
+  footerQuerySelector: string;
+  closed: boolean;
+  cardInView: number;
+  data: {
+    image: string;
+    text: string;
+    href: string;
+  }[];
+  screenBasedProps: {
+    contentContainerMargin: string;
+    contentCards: number;
+    parahFontSize: string;
+  };
+  setScreenBasedProps: () => void;
+  handlePrevClick: () => void;
+  handleNextClick: () => void;
+  handleOnScrollBehaviour: () => void;
+  handleOnResizeBehaviour: () => void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -461,7 +461,7 @@ export namespace Components {
         /**
           * Card Type
          */
-        "cardType": 'card-video' | 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-2up' | 'extra-tall' | 'color-outlined' | 'result-box';
+        "cardType": 'card-video' | 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-2up' | 'extra-tall' | 'color-outlined' | 'result-box' | 'simple-card';
         /**
           * Internal Screen Size State
          */
@@ -474,6 +474,10 @@ export namespace Components {
           * link Title
          */
         "linkTitle"?: string;
+        /**
+          * (optional) Injected CSS Styles
+         */
+        "styles"?: string;
     }
     interface PtcCaseStudiesSlider {
     }
@@ -1391,6 +1395,12 @@ export namespace Components {
          */
         "readMoreText": string;
     }
+    interface PtcRelatedCardRail {
+        /**
+          * Query selector of page footer above which the related card rail will unstick
+         */
+        "footerQuerySelector": string;
+    }
     interface PtcResponsiveWrapper {
     }
     interface PtcSearchField {
@@ -2341,6 +2351,12 @@ declare global {
         prototype: HTMLPtcReadmoreCharElement;
         new (): HTMLPtcReadmoreCharElement;
     };
+    interface HTMLPtcRelatedCardRailElement extends Components.PtcRelatedCardRail, HTMLStencilElement {
+    }
+    var HTMLPtcRelatedCardRailElement: {
+        prototype: HTMLPtcRelatedCardRailElement;
+        new (): HTMLPtcRelatedCardRailElement;
+    };
     interface HTMLPtcResponsiveWrapperElement extends Components.PtcResponsiveWrapper, HTMLStencilElement {
     }
     var HTMLPtcResponsiveWrapperElement: {
@@ -2581,6 +2597,7 @@ declare global {
         "ptc-quote": HTMLPtcQuoteElement;
         "ptc-readmore": HTMLPtcReadmoreElement;
         "ptc-readmore-char": HTMLPtcReadmoreCharElement;
+        "ptc-related-card-rail": HTMLPtcRelatedCardRailElement;
         "ptc-responsive-wrapper": HTMLPtcResponsiveWrapperElement;
         "ptc-search-field": HTMLPtcSearchFieldElement;
         "ptc-shopping-cart": HTMLPtcShoppingCartElement;
@@ -3081,7 +3098,7 @@ declare namespace LocalJSX {
         /**
           * Card Type
          */
-        "cardType"?: 'card-video' | 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-2up' | 'extra-tall' | 'color-outlined' | 'result-box';
+        "cardType"?: 'card-video' | 'card-tall' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-2up' | 'extra-tall' | 'color-outlined' | 'result-box' | 'simple-card';
         /**
           * Internal Screen Size State
          */
@@ -3096,6 +3113,10 @@ declare namespace LocalJSX {
         "linkTitle"?: string;
         "onHoverEvent"?: (event: PtcCardWrapperCustomEvent<void>) => void;
         "onLeaveEvent"?: (event: PtcCardWrapperCustomEvent<void>) => void;
+        /**
+          * (optional) Injected CSS Styles
+         */
+        "styles"?: string;
     }
     interface PtcCaseStudiesSlider {
     }
@@ -4043,6 +4064,12 @@ declare namespace LocalJSX {
          */
         "readMoreText"?: string;
     }
+    interface PtcRelatedCardRail {
+        /**
+          * Query selector of page footer above which the related card rail will unstick
+         */
+        "footerQuerySelector"?: string;
+    }
     interface PtcResponsiveWrapper {
     }
     interface PtcSearchField {
@@ -4515,6 +4542,7 @@ declare namespace LocalJSX {
         "ptc-quote": PtcQuote;
         "ptc-readmore": PtcReadmore;
         "ptc-readmore-char": PtcReadmoreChar;
+        "ptc-related-card-rail": PtcRelatedCardRail;
         "ptc-responsive-wrapper": PtcResponsiveWrapper;
         "ptc-search-field": PtcSearchField;
         "ptc-shopping-cart": PtcShoppingCart;
@@ -4625,6 +4653,7 @@ declare module "@stencil/core" {
             "ptc-quote": LocalJSX.PtcQuote & JSXBase.HTMLAttributes<HTMLPtcQuoteElement>;
             "ptc-readmore": LocalJSX.PtcReadmore & JSXBase.HTMLAttributes<HTMLPtcReadmoreElement>;
             "ptc-readmore-char": LocalJSX.PtcReadmoreChar & JSXBase.HTMLAttributes<HTMLPtcReadmoreCharElement>;
+            "ptc-related-card-rail": LocalJSX.PtcRelatedCardRail & JSXBase.HTMLAttributes<HTMLPtcRelatedCardRailElement>;
             "ptc-responsive-wrapper": LocalJSX.PtcResponsiveWrapper & JSXBase.HTMLAttributes<HTMLPtcResponsiveWrapperElement>;
             "ptc-search-field": LocalJSX.PtcSearchField & JSXBase.HTMLAttributes<HTMLPtcSearchFieldElement>;
             "ptc-shopping-cart": LocalJSX.PtcShoppingCart & JSXBase.HTMLAttributes<HTMLPtcShoppingCartElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptcwebops/ptcw-design",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "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 2.2.3
+# PTC Design 2.2.4
 The site is the place for documentation on PTC Design System
 
 ## Building the Site

package/dist/ptcw-design/p-8b34f2db.entry.js

@@ -1 +0,0 @@
-import{r as t,c as a,h as e,H as o,g as i}from"./p-ce0e4c5c.js";const r=class{constructor(e){t(this,e),this.hoverEvent=a(this,"hoverEvent",7),this.leaveEvent=a(this,"leaveEvent",7),this.cardType=void 0,this.styles=void 0}hoverEventHandler(){this.hoverEvent.emit(),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(),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 t=this.getCssClassMap();return e(o,{part:"card-bottom",class:t,onMouseEnter:this.hoverEventHandler.bind(this),onMouseLeave:this.leaveEventHandler.bind(this)},this.styles&&e("style",null,this.styles),e("div",{class:"ptc-card-bottom-wrapper"},e("slot",null)))}getCssClassMap(){return{[this.cardType]:!!this.cardType}}get el(){return i(this)}};r.style=":host{display:block}: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)}@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 s=class{constructor(e){t(this,e),this.hoverEvent=a(this,"hoverEvent",7),this.leaveEvent=a(this,"leaveEvent",7),this.cardType=void 0,this.cardLink=void 0,this.linkTitle=void 0,this.linkTarget="_self",this.isLoading=!1}handleResize(){this.checkScreenSize()}hoverEventHandler(){this.el.classList.contains("extra-tall")&&(this.hoverEvent.emit(),this.el.classList.add("extraT-overlay")),this.el.classList.contains("color-outlined")&&(this.hoverEvent.emit(),this.el.querySelector("ptc-overlay").setOverlay("black-5"))}leaveEventHandler(){this.el.classList.contains("extra-tall")&&(this.hoverEvent.emit(),this.el.classList.remove("extraT-overlay")),this.el.classList.contains("color-outlined")&&(this.hoverEvent.emit(),this.el.querySelector("ptc-overlay").setOverlay("black-4"))}componentDidLoad(){this.checkScreenSize()}render(){const t=this.getCssClassMap(),a=this.cardLink?"a":"div";return e(o,Object.assign({class:t},this.isLoading?{}:{onMouseEnter:this.hoverEventHandler.bind(this)},this.isLoading?{}:{onMouseLeave:this.leaveEventHandler.bind(this)}),e(a,Object.assign({},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}:{}),e("slot",null)))}getCssClassMap(){return{[this.cardType]:!!this.cardType}}getBtmContentHeight(){return this.el.querySelector("ptc-card-bottom").offsetHeight}checkScreenSize(){if("extra-tall"===this.cardType)if(window.innerWidth<768){const t=this.el.querySelector("ptc-card-content");t&&t.setHeight(this.getBtmContentHeight())}else{const t=this.el.querySelector("ptc-card-content");t&&t.removeInlineHeight()}}get el(){return i(this)}};s.style=':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-playlist) div,:host(.card-playlist) a{display:flex;text-decoration:none;outline:none}:host(.card-playlist) 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{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{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{display:flex;justify-content:center;align-items:center;flex-direction:column}';const n=class{constructor(a){t(this,a),this.isLoading=!0,this.animated=!1,this.width="100%",this.borderRadius=void 0,this.topMargin="0px",this.btmMargin="0px"}render(){const t=this.borderRadius||getComputedStyle(document.documentElement).getPropertyValue("--ptc-border-radius-large");return e("div",{class:"content "+(this.animated&&this.isLoading?"animated":""),style:{width:this.width,marginTop:this.topMargin,marginBottom:this.btmMargin}},this.isLoading?e("div",{class:"placeholder",style:{borderRadius:t}}):e("slot",null))}get el(){return i(this)}};n.style=".content{display:flex;align-items:center;justify-content:center;height:100%;}.placeholder{width:100%;height:100%;min-height:1em;background:linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.08) 100%);background-size:400% 100%}@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.animated .placeholder{animation:loading 2.5s ease-in-out infinite}";export{r as ptc_card_bottom,s as ptc_card_wrapper,n as ptc_skeleton}