npm - @postnord/pn-marketweb-components - Versions diffs - 3.0.2 → 3.0.4 - Mend

@postnord/pn-marketweb-components 3.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (756) hide show

package/cjs/pn-usp-promoter.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-usp-promoter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,o7JAAo7J,CAAC;AAC98J,4BAAe,gBAAgB;;MCKlB,aAAa;;;uBAGE,IAAI;gCACK,IAAI;wBACZ,IAAI;kCACM,IAAI;yBACZ,KAAK;0BACJ,KAAK;+BACA,KAAK;;IAEhC,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,EAAE;YACxC,OAAO,uCAAuC,CAAC;SAChD;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG;YACd,cAAc;YACd,SAAS,GAAG,0BAA0B,GAAG,EAAE;YAC3C,UAAU,GAAG,2BAA2B,GAAG,EAAE;SAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,GAAG,iCAAiC,GAAG,EAAE,CAAC;QAE3F,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5GA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EACjCA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,iEAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/DA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAGA,sBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACLA,gEAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzDA,mEAAM,IAAI,EAAC,WAAW,GAAQ,EAC9BA,mEAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH~~;;;;;;;~~","names":["h","Host"],"sources":["src/components/widgets/pn-usp-promoter/pn-usp-promoter.scss?tag=pn-usp-promoter","src/components/widgets/pn-usp-promoter/pn-usp-promoter.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$borderWhiteShadowSmall: 0 0 0 0.2rem #fff;\n$borderBlueShadowMedium: 0 0 0 0.4rem $blue900;\n\npn-usp-promoter {\n width: 80%;\n\n .usp-promoter {\n display: flex;\n justify-content: center;\n padding: 3rem 0.8rem;\n }\n\n .usp-promoter--full-width {\n overflow: hidden;\n margin: 0 calc(-50vw + 50%);\n\n @media screen and (min-width: 768px) {\n padding: 8rem 4rem;\n }\n }\n\n .usp-promoter__content {\n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: 114rem;\n\n @media screen and (min-width: 768px) {\n align-items: center;\n text-align: left;\n justify-content: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 75rem;\n\n @media screen and (min-width: 768px) {\n align-items: flex-start;\n padding-left: 4rem;\n }\n }\n\n .usp-promoter__content-heading {\n margin-bottom: 0.8rem;\n\n @media screen and (min-width:768px) {\n font-size: 4.2rem;\n }\n\n @media screen and (min-width:1140px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width:1440px) {\n font-size: 5.6rem;\n }\n }\n\n .usp-promoter__no-margin-bottom {\n margin-bottom: 0 !important;\n }\n\n .usp-promoter__content-text {\n font-size: 1.6rem;\n max-width: 47rem;\n margin-bottom: 2.6rem;\n\n @media screen and (min-width:768px){\n text-wrap: balance;\n }\n\n @media screen and (min-width:1140px) {\n font-size: 1.8rem;\n max-width: 60rem;\n }\n\n @media screen and (min-width:1440px) {\n font-size: 2rem;\n max-width: 70rem;\n }\n }\n\n [slot='app-store'] {\n display: flex;\n align-items: flex-start;\n margin-bottom: 2.6rem;\n gap: 1rem;\n\n & > a {\n background-color: black;\n border: 0.1rem solid #a6a6a6;\n border-radius: 0.8rem;\n color: #fff;\n display: inline-block;\n line-height: 0;\n text-decoration: none;\n transition: background-color 0.2s ease-in-out;\n\n &::after {\n margin-left: 0 !important;\n margin-right: 0.5rem;\n top: 0.2rem;\n position: relative;\n }\n\n &:hover {\n background-color: $blue900;\n }\n\n &:focus {\n background-color: $blue900;\n box-shadow: $borderWhiteShadowSmall, $borderBlueShadowMedium;\n }\n\n &:focus-visible {\n outline: none;\n }\n }\n }\n\n [slot='usp-buttons'] {\n pn-button {\n margin-bottom: 1.6rem;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue700;\n }\n }\n }\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n flex-direction: column;\n\n @media screen and (min-width: 768px) {\n display: flex;\n flex-direction: row;\n gap: 1.6rem;\n }\n }\n\n [slot='illustration'] {\n max-width: 25%;\n position: relative;\n left: -1.6rem;\n\n pn-scroll {\n position: sticky;\n top: 0;\n }\n\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & picture img {\n max-width: 100%;\n\n @media screen and (min-width: 1140px) {\n width: 32rem;\n }\n\n @media screen and (min-width: 1440px) {\n width: 33.6rem;\n }\n }\n }\n\n .usp-promoter__heading-extension {\n display: flex;\n flex-direction: column;\n }\n\n .usp-promoter--right-align {\n .usp-promoter__content {\n flex-direction: row-reverse;\n text-align: right;\n\n @media screen and (min-width: 768px) {\n align-items: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding-left: 0;\n\n @media screen and (min-width: 768px) {\n padding-right: 4rem;\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n align-items: flex-end;\n }\n\n [slot='illustration'] {\n left: 1.6rem;\n }\n }\n\n .usp-promoter--hide-image-small-screen {\n @media screen and (max-width: 768px) {\n [slot='illustration'] picture img {\n display: none;\n }\n\n .usp-promoter__content {\n text-align: center;\n }\n\n .usp-promoter__content-wrapper {\n align-items: center;\n padding-right: 0;\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n }\n }\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-usp-promoter',\n styleUrl: 'pn-usp-promoter.scss',\n})\nexport class PnUspPromoter {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() headingExtension: string = null;\n @Prop() bodyText: string = null;\n @Prop() backgroundGradient: string = null;\n @Prop() fullWidth: boolean = false;\n @Prop() rightAlign: boolean = false;\n @Prop() hideMobileImage: boolean = false;\n\n private centerMobileContent() {\n const slot = this.hostElement.querySelector('[slot=\"illustration\"]');\n if (this.hideMobileImage \|\| slot == null) {\n return 'usp-promoter--hide-image-small-screen';\n }\n return \"\";\n }\n\n render() {\n const { fullWidth, rightAlign } = this;\n const classes = [\n 'usp-promoter',\n fullWidth ? \"usp-promoter--full-width\" : \"\",\n rightAlign ? \"usp-promoter--right-align\" : \"\",\n ].join(' ');\n const hasHeadingExtension = this.headingExtension ? \"usp-promoter__heading-extension\" : \"\";\n\n return (\n <Host>\n <div class={` ${classes} ${this.centerMobileContent()}`} style={{ 'background': `${this.backgroundGradient}` }}>\n <div class=\"usp-promoter__content\">\n <slot name=\"illustration\"></slot>\n <div class=\"usp-promoter__content-wrapper\">\n <h2 class={`usp-promoter__content-heading ${hasHeadingExtension}`}>\n <span>{this.heading}</span>\n {this.headingExtension ? <span>{this.headingExtension}</span> : null}\n </h2>\n <p class=\"usp-promoter__content-text\">{this.bodyText}</p>\n <slot name=\"app-store\"></slot>\n <slot name=\"usp-buttons\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-usp-promoter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,o7JAAo7J,CAAC;AAC98J,4BAAe,gBAAgB;;MCKlB,aAAa;;;uBAGE,IAAI;gCACK,IAAI;wBACZ,IAAI;kCACM,IAAI;yBACZ,KAAK;0BACJ,KAAK;+BACA,KAAK;;;IAEhC,mBAAmB;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,EAAE;YACxC,OAAO,uCAAuC,CAAC;SAChD;QACD,OAAO,EAAE,CAAC;KACX;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG;YACd,cAAc;YACd,SAAS,GAAG,0BAA0B,GAAG,EAAE;YAC3C,UAAU,GAAG,2BAA2B,GAAG,EAAE;SAC9C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,GAAG,iCAAiC,GAAG,EAAE,CAAC;QAE3F,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,EAAE,IAC5GA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EACjCA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,iEAAI,KAAK,EAAE,iCAAiC,mBAAmB,EAAE,IAC/DA,qEAAO,IAAI,CAAC,OAAO,CAAQ,EAC1B,IAAI,CAAC,gBAAgB,GAAGA,sBAAO,IAAI,CAAC,gBAAgB,CAAQ,GAAG,IAAI,CACjE,EACLA,gEAAG,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzDA,mEAAM,IAAI,EAAC,WAAW,GAAQ,EAC9BA,mEAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/widgets/pn-usp-promoter/pn-usp-promoter.scss?tag=pn-usp-promoter","src/components/widgets/pn-usp-promoter/pn-usp-promoter.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$borderWhiteShadowSmall: 0 0 0 0.2rem #fff;\n$borderBlueShadowMedium: 0 0 0 0.4rem $blue900;\n\npn-usp-promoter {\n width: 80%;\n\n .usp-promoter {\n display: flex;\n justify-content: center;\n padding: 3rem 0.8rem;\n }\n\n .usp-promoter--full-width {\n overflow: hidden;\n margin: 0 calc(-50vw + 50%);\n\n @media screen and (min-width: 768px) {\n padding: 8rem 4rem;\n }\n }\n\n .usp-promoter__content {\n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: 114rem;\n\n @media screen and (min-width: 768px) {\n align-items: center;\n text-align: left;\n justify-content: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 75rem;\n\n @media screen and (min-width: 768px) {\n align-items: flex-start;\n padding-left: 4rem;\n }\n }\n\n .usp-promoter__content-heading {\n margin-bottom: 0.8rem;\n\n @media screen and (min-width:768px) {\n font-size: 4.2rem;\n }\n\n @media screen and (min-width:1140px) {\n font-size: 4.8rem;\n }\n\n @media screen and (min-width:1440px) {\n font-size: 5.6rem;\n }\n }\n\n .usp-promoter__no-margin-bottom {\n margin-bottom: 0 !important;\n }\n\n .usp-promoter__content-text {\n font-size: 1.6rem;\n max-width: 47rem;\n margin-bottom: 2.6rem;\n\n @media screen and (min-width:768px){\n text-wrap: balance;\n }\n\n @media screen and (min-width:1140px) {\n font-size: 1.8rem;\n max-width: 60rem;\n }\n\n @media screen and (min-width:1440px) {\n font-size: 2rem;\n max-width: 70rem;\n }\n }\n\n [slot='app-store'] {\n display: flex;\n align-items: flex-start;\n margin-bottom: 2.6rem;\n gap: 1rem;\n\n & > a {\n background-color: black;\n border: 0.1rem solid #a6a6a6;\n border-radius: 0.8rem;\n color: #fff;\n display: inline-block;\n line-height: 0;\n text-decoration: none;\n transition: background-color 0.2s ease-in-out;\n\n &::after {\n margin-left: 0 !important;\n margin-right: 0.5rem;\n top: 0.2rem;\n position: relative;\n }\n\n &:hover {\n background-color: $blue900;\n }\n\n &:focus {\n background-color: $blue900;\n box-shadow: $borderWhiteShadowSmall, $borderBlueShadowMedium;\n }\n\n &:focus-visible {\n outline: none;\n }\n }\n }\n\n [slot='usp-buttons'] {\n pn-button {\n margin-bottom: 1.6rem;\n }\n\n & > a {\n color: $blue700;\n font-weight: 500;\n font-size: 1.6rem;\n padding: 0.1rem;\n text-decoration: none;\n\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n\n path {\n fill: $blue700;\n }\n }\n\n &:hover {\n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue700;\n }\n }\n }\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n flex-direction: column;\n\n @media screen and (min-width: 768px) {\n display: flex;\n flex-direction: row;\n gap: 1.6rem;\n }\n }\n\n [slot='illustration'] {\n max-width: 25%;\n position: relative;\n left: -1.6rem;\n\n pn-scroll {\n position: sticky;\n top: 0;\n }\n\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & picture img {\n max-width: 100%;\n\n @media screen and (min-width: 1140px) {\n width: 32rem;\n }\n\n @media screen and (min-width: 1440px) {\n width: 33.6rem;\n }\n }\n }\n\n .usp-promoter__heading-extension {\n display: flex;\n flex-direction: column;\n }\n\n .usp-promoter--right-align {\n .usp-promoter__content {\n flex-direction: row-reverse;\n text-align: right;\n\n @media screen and (min-width: 768px) {\n align-items: center;\n }\n }\n\n .usp-promoter__content-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding-left: 0;\n\n @media screen and (min-width: 768px) {\n padding-right: 4rem;\n }\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n align-items: flex-end;\n }\n\n [slot='illustration'] {\n left: 1.6rem;\n }\n }\n\n .usp-promoter--hide-image-small-screen {\n @media screen and (max-width: 768px) {\n [slot='illustration'] picture img {\n display: none;\n }\n\n .usp-promoter__content {\n text-align: center;\n }\n\n .usp-promoter__content-wrapper {\n align-items: center;\n padding-right: 0;\n }\n\n [slot='app-store'],\n [slot='usp-buttons'] {\n display: flex;\n flex-direction: row;\n justify-content: center;\n }\n }\n }\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-usp-promoter',\n styleUrl: 'pn-usp-promoter.scss',\n})\nexport class PnUspPromoter {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() headingExtension: string = null;\n @Prop() bodyText: string = null;\n @Prop() backgroundGradient: string = null;\n @Prop() fullWidth: boolean = false;\n @Prop() rightAlign: boolean = false;\n @Prop() hideMobileImage: boolean = false;\n\n private centerMobileContent() {\n const slot = this.hostElement.querySelector('[slot=\"illustration\"]');\n if (this.hideMobileImage \|\| slot == null) {\n return 'usp-promoter--hide-image-small-screen';\n }\n return \"\";\n }\n\n render() {\n const { fullWidth, rightAlign } = this;\n const classes = [\n 'usp-promoter',\n fullWidth ? \"usp-promoter--full-width\" : \"\",\n rightAlign ? \"usp-promoter--right-align\" : \"\",\n ].join(' ');\n const hasHeadingExtension = this.headingExtension ? \"usp-promoter__heading-extension\" : \"\";\n\n return (\n <Host>\n <div class={` ${classes} ${this.centerMobileContent()}`} style={{ 'background': `${this.backgroundGradient}` }}>\n <div class=\"usp-promoter__content\">\n <slot name=\"illustration\"></slot>\n <div class=\"usp-promoter__content-wrapper\">\n <h2 class={`usp-promoter__content-heading ${hasHeadingExtension}`}>\n <span>{this.heading}</span>\n {this.headingExtension ? <span>{this.headingExtension}</span> : null}\n </h2>\n <p class=\"usp-promoter__content-text\">{this.bodyText}</p>\n <slot name=\"app-store\"></slot>\n <slot name=\"usp-buttons\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/collection/components/animation/pn-animated-tile/pn-animated-tile.js CHANGED Viewed

@@ -3,13 +3,14 @@ import { h, Host } from "@stencil/core";
 import { plus } from "pn-design-assets/pn-assets/icons.js";
 export class PnAnimatedTile {
     constructor() {
-        this.onClickHandler = () => {
-            this.toggled = !this.toggled;
-        };
         this.toggled = false;
         this.transitionClassName = '';
         this.animateIcon = '';
     }
+    hostElement;
+    onClickHandler = () => {
+        this.toggled = !this.toggled;
+    };
     onToggledHandler() {
         this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });
         this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });

package/collection/components/animation/pn-animated-tile/pn-animated-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-animated-tile.js","sourceRoot":"","sources":["../../../../src/components/animation/pn-animated-tile/pn-animated-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAM3D,MAAM,OAAO,cAAc;;~~QAOzB~~,~~mBAAc~~,GAAG,GAAG,EAAE;~~YACpB~~,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;~~QAC~~/B,CAAC,CAAC;~~uBAN0B~~,~~KAAK;mCACM,EAAE;2BACV,EAAE;;IAOjC,~~gBAAgB;QACd,IAAI,CAAC,mBAAmB,GAAG,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACjG,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAChF,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,6BAA6B;gBACtC,4DAAK,KAAK,EAAE,yCAAyC,IAAI,CAAC,mBAAmB,EAAE;oBAC7E,6DAAM,IAAI,EAAC,QAAQ,GAAG;oBACtB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBACN,+DAAQ,IAAI,EAAC,QAAQ,gBAAY,WAAW,EAAC,KAAK,EAAE,+CAA+C,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc;oBACjJ,gEAAS,IAAI,EAAE,IAAI,GAAY,CACxB,CACL,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import classNames from 'classnames';\n\nimport { Component, Element, h, Host, State, Watch } from '@stencil/core';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-animated-tile',\n styleUrl: 'pn-animated-tile.scss',\n})\nexport class PnAnimatedTile {\n @Element() hostElement: HTMLElement;\n\n @State() toggled: boolean = false;\n @State() transitionClassName: string = '';\n @State() animateIcon: string = '';\n\n onClickHandler = () => {\n this.toggled = !this.toggled;\n };\n\n @Watch('toggled')\n onToggledHandler() {\n this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });\n this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-animated-tile__container\">\n <div class={`pn-animated-tile__content cat-animate ${this.transitionClassName}`}>\n <slot name=\"side-a\" />\n <slot name=\"side-b\" />\n </div>\n <button type=\"button\" aria-label=\"Read more\" class={`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`} onClick={this.onClickHandler}>\n <pn-icon icon={plus}></pn-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-animated-tile.js","sourceRoot":"","sources":["../../../../src/components/animation/pn-animated-tile/pn-animated-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,qCAAqC,CAAC;AAM3D,MAAM,OAAO,cAAc;;uBAGG,KAAK;mCACM,EAAE;2BACV,EAAE;;IAJtB,WAAW,CAAc;IAMpC,cAAc,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC,CAAC;IAGF,gBAAgB;QACd,IAAI,CAAC,mBAAmB,GAAG,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAgB,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACjG,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IAChF,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,6BAA6B;gBACtC,4DAAK,KAAK,EAAE,yCAAyC,IAAI,CAAC,mBAAmB,EAAE;oBAC7E,6DAAM,IAAI,EAAC,QAAQ,GAAG;oBACtB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBACN,+DAAQ,IAAI,EAAC,QAAQ,gBAAY,WAAW,EAAC,KAAK,EAAE,+CAA+C,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc;oBACjJ,gEAAS,IAAI,EAAE,IAAI,GAAY,CACxB,CACL,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import classNames from 'classnames';\n\nimport { Component, Element, h, Host, State, Watch } from '@stencil/core';\nimport { plus } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-animated-tile',\n styleUrl: 'pn-animated-tile.scss',\n})\nexport class PnAnimatedTile {\n @Element() hostElement: HTMLElement;\n\n @State() toggled: boolean = false;\n @State() transitionClassName: string = '';\n @State() animateIcon: string = '';\n\n onClickHandler = () => {\n this.toggled = !this.toggled;\n };\n\n @Watch('toggled')\n onToggledHandler() {\n this.transitionClassName = classNames({ 'fade': this.toggled, 'fade--reversed': !this.toggled });\n this.animateIcon = classNames({ 'animate': this.toggled, '': !this.toggled });\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-animated-tile__container\">\n <div class={`pn-animated-tile__content cat-animate ${this.transitionClassName}`}>\n <slot name=\"side-a\" />\n <slot name=\"side-b\" />\n </div>\n <button type=\"button\" aria-label=\"Read more\" class={`pn-animated-tile__toggle cat-animate toggle ${this.animateIcon}`} onClick={this.onClickHandler}>\n <pn-icon icon={plus}></pn-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.js CHANGED Viewed

@@ -22,22 +22,6 @@ const onNotIntersecting = (video, togglePaused) => {
 };
 export class PnPlayOnScroll {
     constructor() {
-        this.testAdditionalParamIntoCallback = true;
-        this.handlePlayPauseClicked = () => {
-            if (this.video.paused || this.video.ended) {
-                this.video.play();
-                this.isManuallyPaused = false;
-                this.isPaused = false;
-            }
-            else {
-                this.video.pause();
-                this.isManuallyPaused = true;
-                this.isPaused = true;
-            }
-        };
-        this.togglePaused = (paused) => {
-            this.isPaused = paused;
-        };
         this.videoSrc = '';
         this.observerOptions = defaultObserverOptions;
         this.showOverlay = false;
@@ -45,6 +29,10 @@ export class PnPlayOnScroll {
         this.isManuallyPaused = false;
         this.isPaused = false;
     }
+    hostElement;
+    localObserverOptions;
+    testAdditionalParamIntoCallback = true;
+    video;
     generateUniqueId() {
         return uuidv4();
     }
@@ -56,6 +44,21 @@ export class PnPlayOnScroll {
         this.video.addEventListener('click', this.handlePlayPauseClicked);
         this.localObserverOptions = this.observerOptions;
     }
+    handlePlayPauseClicked = () => {
+        if (this.video.paused || this.video.ended) {
+            this.video.play();
+            this.isManuallyPaused = false;
+            this.isPaused = false;
+        }
+        else {
+            this.video.pause();
+            this.isManuallyPaused = true;
+            this.isPaused = true;
+        }
+    };
+    togglePaused = (paused) => {
+        this.isPaused = paused;
+    };
     render() {
         return (h(Host, { key: 'b76be7833abdd0c16b2b865e343a764fb5762466' }, h("pn-scroll", { key: 'c3dbb68e12611706fb4a3cbbbad84287ac3c2e73', intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.localObserverOptions }, h("div", { key: '461df9fcf966d409345e945117418eb35d58f540', slot: "scroll-affected" }, h("video", { key: '1b23bfb0e5f2ad71d1bbe0740bc7823784ff80c0', playsinline: true, muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { key: '8bf03c50ae3d3245acaae0beb3b7fc7ee048c0d8', src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { key: '21a69fa7ed440704f2e9aa5017f4616322fe9a4b', showOverlay: this.showOverlay, isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
     }

package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-play-on-scroll.js","sourceRoot":"","sources":["../../../../src/components/animation/pn-play-on-scroll/pn-play-on-scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE;;EAEE;AAEF,MAAM,sBAAsB,GAA6B;IACvD,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,cAAuB,EAAE,YAAoC,EAAE,EAAE;IAChH,+CAA+C;IAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,YAAoC,EAAE,EAAE;IAC1F,oDAAoD;IACpD,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;IACvB,YAAY,CAAC,IAAI,CAAC,CAAC;AACrB,CAAC,CAAC;AAMF,MAAM,OAAO,cAAc;;~~QAUzB~~,~~oCAA+B~~,~~GAAY~~,~~IAAI,CAAC~~;~~QAiBhD~~,~~2BAAsB,GAAG,GAAG,~~EAAE;~~YAC5B~~,~~IAAI~~,~~IAAI~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,~~MAAM~~,~~IAAI~~,IAAI,CAAC,KAAK,~~CAAC~~,~~KAAK~~,EAAE,CAAC;~~gBAC1C~~,IAAI,CAAC,~~KAAK~~,~~CAAC~~,IAAI,EAAE,CAAC;~~gBAClB~~,IAAI,CAAC,~~gBAAgB~~,GAAG,~~KAAK~~,CAAC~~;gBAC9B~~,~~IAAI~~,CAAC,~~QAAQ~~,~~GAAG~~,~~KAAK~~,~~CAAC;YACxB~~,CAAC;~~iBAAM~~,~~CAAC;gBACN,~~IAAI,CAAC,KAAK,CAAC,~~KAAK~~,EAAE,~~CAAC;gBACnB,~~IAAI,CAAC,~~gBAAgB~~,~~GAAG~~,~~IAAI,~~CAAC;~~gBAC7B~~,IAAI,CAAC,~~QAAQ~~,GAAG,IAAI,CAAC~~;YACvB~~,CAAC;~~QACH~~,CAAC~~,CAAC~~;~~QAEF~~,~~iBAAY~~,GAAG,~~CAAC~~,~~MAAe,~~EAAE~~,EAAE~~;~~YACjC~~,IAAI,CAAC,~~QAAQ~~,~~GAAG~~,MAAM,~~CAAC;QACzB~~,~~CAAC~~,CAAC~~;wBAvCyB~~,~~EAAE;+BACuB~~,~~sBAAsB;2BAC3C~~,KAAK~~;uBACT~~,EAAE~~;gCACQ~~,~~KAAK~~;~~wBACb~~,KAAK~~;;IAMlC~~,~~gBAAgB;QACd~~,~~OAAO~~,~~MAAM,~~EAAE,CAAC;~~IAClB~~,~~CAAC;IAED,iBAAiB;QACf,~~IAAI,CAAC,~~OAAO~~,GAAG,IAAI,CAAC,~~gBAAgB~~,~~EAAE~~,CAAC;~~IACzC~~,CAAC;~~IAED~~,~~gBAAgB~~;~~QACd~~,IAAI,CAAC,KAAK,~~GAAG~~,~~QAAQ~~,~~CAAC~~,~~cAAc,~~CAAC,IAAI,CAAC,~~OAAO~~,~~CAAqB~~,CAAC;~~QACvE~~,IAAI,CAAC,~~KAAK~~,CAAC,~~gBAAgB~~,CAAC,~~OAAO~~,~~EAAE~~,~~IAAI~~,CAAC,~~sBAAsB~~,~~CAAC~~,~~CAAC~~;~~QAClE~~,IAAI,CAAC,~~oBAAoB~~,GAAG,~~IAAI~~,CAAC,~~eAAe,~~CAAC~~;IACnD~~,CAAC;~~IAkBD~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,kEACE,aAAa,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,EACzF,gBAAgB,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,EACxE,UAAU,EAAE,IAAI,EAChB,gBAAgB,EAAE,sBAAsB,EACxC,eAAe,EAAE,IAAI,CAAC,oBAAoB;gBAE1C,4DAAK,IAAI,EAAC,iBAAiB;oBACzB,8DAAO,WAAW,QAAC,KAAK,QAAC,QAAQ,QAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;wBACrD,+DAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAG,CACzC;oBACR,yEAAkB,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,kBAAkB,EAAE,IAAI,CAAC,sBAAsB,GAAqB,CACnK,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/\n play content when scoll observer sees content as inview\n/\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n root: null,\n threshold: 1,\n rootMargin: '0px 0px 0px 0px',\n};\n\nconst onIntersecting = (video: HTMLVideoElement, isManualPaused: boolean, togglePaused: (arg: boolean) => void) => {\n //what to do when intersecting, eg video.play()\n if (!isManualPaused) {\n video && video.play();\n togglePaused(false);\n }\n};\n\nconst onNotIntersecting = (video: HTMLVideoElement, togglePaused: (arg: boolean) => void) => {\n //what to do when not intersecting, eg video.pause()\n video && video.pause();\n togglePaused(true);\n};\n\n@Component({\n tag: 'pn-play-on-scroll',\n styleUrl: 'pn-play-on-scroll.scss',\n})\nexport class PnPlayOnScroll {\n @Element() hostElement: HTMLElement;\n @Prop() videoSrc: string = '';\n @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n @Prop() showOverlay: boolean = false;\n @State() videoId: string = '';\n @State() isManuallyPaused: boolean = false;\n @State() isPaused: boolean = false;\n localObserverOptions: IntersectionObserverInit;\n\n testAdditionalParamIntoCallback: boolean = true;\n video: HTMLVideoElement;\n\n generateUniqueId() {\n return uuidv4();\n }\n\n componentWillLoad() {\n this.videoId = this.generateUniqueId();\n }\n\n componentDidLoad() {\n this.video = document.getElementById(this.videoId) as HTMLVideoElement;\n this.video.addEventListener('click', this.handlePlayPauseClicked);\n this.localObserverOptions = this.observerOptions;\n }\n\n handlePlayPauseClicked = () => {\n if (this.video.paused \|\| this.video.ended) {\n this.video.play();\n this.isManuallyPaused = false;\n this.isPaused = false;\n } else {\n this.video.pause();\n this.isManuallyPaused = true;\n this.isPaused = true;\n }\n };\n\n togglePaused = (paused: boolean) => {\n this.isPaused = paused;\n };\n\n render() {\n return (\n <Host>\n <pn-scroll\n intersectFunc={() => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused)}\n notIntersectFunc={() => onNotIntersecting(this.video, this.togglePaused)}\n shouldLoop={true}\n behaviourClasses={'some-behaviour-class'}\n observerOptions={this.localObserverOptions}\n >\n <div slot=\"scroll-affected\">\n <video playsinline muted autoPlay id={`${this.videoId}`}>\n <source src={this.videoSrc} type=\"video/mp4\" />\n </video>\n <pn-video-overlay showOverlay={this.showOverlay} isPaused={this.isManuallyPaused \|\| this.isPaused} onPlayPauseClicked={this.handlePlayPauseClicked}></pn-video-overlay>\n </div>\n </pn-scroll>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-play-on-scroll.js","sourceRoot":"","sources":["../../../../src/components/animation/pn-play-on-scroll/pn-play-on-scroll.tsx"],"names":[],"mappings":"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","sourcesContent":["import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/\n play content when scoll observer sees content as inview\n/\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n root: null,\n threshold: 1,\n rootMargin: '0px 0px 0px 0px',\n};\n\nconst onIntersecting = (video: HTMLVideoElement, isManualPaused: boolean, togglePaused: (arg: boolean) => void) => {\n //what to do when intersecting, eg video.play()\n if (!isManualPaused) {\n video && video.play();\n togglePaused(false);\n }\n};\n\nconst onNotIntersecting = (video: HTMLVideoElement, togglePaused: (arg: boolean) => void) => {\n //what to do when not intersecting, eg video.pause()\n video && video.pause();\n togglePaused(true);\n};\n\n@Component({\n tag: 'pn-play-on-scroll',\n styleUrl: 'pn-play-on-scroll.scss',\n})\nexport class PnPlayOnScroll {\n @Element() hostElement: HTMLElement;\n @Prop() videoSrc: string = '';\n @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n @Prop() showOverlay: boolean = false;\n @State() videoId: string = '';\n @State() isManuallyPaused: boolean = false;\n @State() isPaused: boolean = false;\n localObserverOptions: IntersectionObserverInit;\n\n testAdditionalParamIntoCallback: boolean = true;\n video: HTMLVideoElement;\n\n generateUniqueId() {\n return uuidv4();\n }\n\n componentWillLoad() {\n this.videoId = this.generateUniqueId();\n }\n\n componentDidLoad() {\n this.video = document.getElementById(this.videoId) as HTMLVideoElement;\n this.video.addEventListener('click', this.handlePlayPauseClicked);\n this.localObserverOptions = this.observerOptions;\n }\n\n handlePlayPauseClicked = () => {\n if (this.video.paused \|\| this.video.ended) {\n this.video.play();\n this.isManuallyPaused = false;\n this.isPaused = false;\n } else {\n this.video.pause();\n this.isManuallyPaused = true;\n this.isPaused = true;\n }\n };\n\n togglePaused = (paused: boolean) => {\n this.isPaused = paused;\n };\n\n render() {\n return (\n <Host>\n <pn-scroll\n intersectFunc={() => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused)}\n notIntersectFunc={() => onNotIntersecting(this.video, this.togglePaused)}\n shouldLoop={true}\n behaviourClasses={'some-behaviour-class'}\n observerOptions={this.localObserverOptions}\n >\n <div slot=\"scroll-affected\">\n <video playsinline muted autoPlay id={`${this.videoId}`}>\n <source src={this.videoSrc} type=\"video/mp4\" />\n </video>\n <pn-video-overlay showOverlay={this.showOverlay} isPaused={this.isManuallyPaused \|\| this.isPaused} onPlayPauseClicked={this.handlePlayPauseClicked}></pn-video-overlay>\n </div>\n </pn-scroll>\n </Host>\n );\n }\n}\n"]}

package/collection/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.js CHANGED Viewed

@@ -2,20 +2,13 @@ import { h, Host } from "@stencil/core";
 import { translations } from "./translations";
 export class PnVideoOverlay {
     constructor() {
-        this.handlePlayPauseClicked = () => {
-            this.playPauseClicked.emit();
-        };
-        this.renderPlayIcon = () => {
-            return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { d: "M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z", fill: "white" }), h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" })));
-        };
-        this.renderPauseIcon = () => {
-            return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { d: "M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z", fill: "white" }), h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z", fill: "white" })));
-        };
         this.language = 'en';
         this.isPaused = false;
         this.showOverlay = false;
         this.i18n = undefined;
     }
+    hostElement;
+    playPauseClicked;
     componentWillLoad() {
         this.setTranslations();
     }
@@ -30,6 +23,15 @@ export class PnVideoOverlay {
     onLanguageChange() {
         this.setTranslations();
     }
+    handlePlayPauseClicked = () => {
+        this.playPauseClicked.emit();
+    };
+    renderPlayIcon = () => {
+        return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { d: "M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z", fill: "white" }), h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" })));
+    };
+    renderPauseIcon = () => {
+        return (h("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "64", height: "64", rx: "32", fill: "#005D92" }), h("path", { d: "M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z", fill: "white" }), h("path", { d: "M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z", fill: "white" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z", fill: "white" })));
+    };
     render() {
         return (h(Host, { key: '469d957d702aaddf614c350488710934ef9f45db', class: `pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}` }, h("button", { key: 'd45e7df077ca7a3a3bf8ae1c31499d02791e8044', type: "button", id: "overlayed-button-pause-video", "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
     }

package/collection/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-video-overlay.js","sourceRoot":"","sources":["../../../../../src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAErG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAM9C,MAAM,OAAO,cAAc;;~~QA2BzB~~,~~2BAAsB~~,GAAG,GAAG,EAAE;~~YAC5B~~,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;~~QAC~~/B,CAAC,CAAC;~~QAEF~~,~~mBAAc~~,GAAG,GAAG,EAAE;~~YACpB~~,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;~~gBAC5F~~,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,GAAG;~~gBACtD~~,YACE,CAAC,EAAC,6dAA6d,EAC/d,IAAI,EAAC,OAAO,GACZ;~~gBACF~~,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0YAA0Y,EAC5Y,IAAI,EAAC,OAAO,GACZ;~~gBACF~~,YACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ,CACE,CACP,CAAC;~~QACJ~~,CAAC,CAAC;~~QAEF~~,~~oBAAe~~,GAAG,GAAG,EAAE;~~YACrB~~,OAAO,CACL,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;~~gBAC5F~~,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,GAAG;~~gBACtD~~,YACE,CAAC,EAAC,6dAA6d,EAC/d,IAAI,EAAC,OAAO,GACZ;~~gBACF~~,YACE,CAAC,EAAC,mOAAmO,EACrO,IAAI,EAAC,OAAO,GACZ;~~gBACF~~,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,ieAAie,EACne,IAAI,EAAC,OAAO,GACZ;~~gBACF~~,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,ieAAie,EACne,IAAI,EAAC,OAAO,GACZ,CACE,CACP,CAAC;~~QACJ~~,CAAC,CAAC;~~wBA7EyB~~,IAAI;wBACH,KAAK;2BACF,KAAK;;;IAKpC,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAwDD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EAAE;YACzF,+DAAQ,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,8BAA8B,gBAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAC/H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CACxD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-video-overlay',\n styleUrl: 'pn-video-overlay.scss',\n})\nexport class PnVideoOverlay {\n @Element() hostElement: HTMLElement;\n @Prop() language: string = 'en';\n @Prop() isPaused: boolean = false;\n @Prop() showOverlay: boolean = false;\n @State() i18n: any;\n\n @Event() playPauseClicked: EventEmitter<void>;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n handlePlayPauseClicked = () => {\n this.playPauseClicked.emit();\n };\n\n renderPlayIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n renderPauseIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n render() {\n return (\n <Host class={`pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}`}>\n <button type=\"button\" id=\"overlayed-button-pause-video\" aria-label={`${this.i18n.ariaLabel}`} onClick={this.handlePlayPauseClicked}>\n {this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon()}\n </button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-video-overlay.js","sourceRoot":"","sources":["../../../../../src/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translations } from './translations';\n\n@Component({\n tag: 'pn-video-overlay',\n styleUrl: 'pn-video-overlay.scss',\n})\nexport class PnVideoOverlay {\n @Element() hostElement: HTMLElement;\n @Prop() language: string = 'en';\n @Prop() isPaused: boolean = false;\n @Prop() showOverlay: boolean = false;\n @State() i18n: any;\n\n @Event() playPauseClicked: EventEmitter<void>;\n\n componentWillLoad() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language === 'nb') {\n this.language = 'no';\n }\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n @Watch('language')\n onLanguageChange() {\n this.setTranslations();\n }\n\n handlePlayPauseClicked = () => {\n this.playPauseClicked.emit();\n };\n\n renderPlayIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M8 32C8 18.7305 18.7305 8 32 8C38.6401 8 44.5751 10.6887 48.9432 15.0568C49.5851 15.6988 49.5851 16.7396 48.9432 17.3815C48.3012 18.0235 47.2604 18.0235 46.6185 17.3815C42.8331 13.5962 37.7215 11.2877 32 11.2877C20.5462 11.2877 11.2877 20.5462 11.2877 32C11.2877 43.4538 20.5462 52.7123 32 52.7123C43.4538 52.7123 52.7123 43.4538 52.7123 32C52.7123 31.0921 53.4483 30.3562 54.3562 30.3562C55.264 30.3562 56 31.0921 56 32C56 45.2695 45.2695 56 32 56C18.7305 56 8 45.2695 8 32Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M24.5996 20.0577C25.1064 19.7636 25.7315 19.7615 26.2402 20.0522L44.6512 30.5728C45.1634 30.8654 45.4795 31.4101 45.4795 32C45.4795 32.5899 45.1634 33.1346 44.6512 33.4272L26.2402 43.9478C25.7315 44.2385 25.1064 44.2364 24.5996 43.9423C24.0928 43.6482 23.7808 43.1065 23.7808 42.5205V21.4795C23.7808 20.8935 24.0928 20.3518 24.5996 20.0577ZM27.0685 39.6879L40.5224 32L27.0685 24.3121V39.6879Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n renderPauseIcon = () => {\n return (\n <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect width=\"64\" height=\"64\" rx=\"32\" fill=\"#005D92\" />\n <path\n d=\"M32 8C18.7305 8 8 18.7305 8 32C8 45.2695 18.7305 56 32 56C45.2695 56 56 45.2695 56 32C56 31.0921 55.264 30.3562 54.3562 30.3562C53.4483 30.3562 52.7123 31.0921 52.7123 32C52.7123 43.4538 43.4538 52.7123 32 52.7123C20.5462 52.7123 11.2877 43.4538 11.2877 32C11.2877 20.5462 20.5462 11.2877 32 11.2877C37.7215 11.2877 42.8331 13.5962 46.6185 17.3815C47.2604 18.0235 48.3012 18.0235 48.9432 17.3815C49.5851 16.7396 49.5851 15.6988 48.9432 15.0568C44.5751 10.6887 38.6401 8 32 8Z\"\n fill=\"white\"\n />\n <path\n d=\"M51.0685 19.1781C50.1606 19.1781 49.4247 19.9141 49.4247 20.8219C49.4247 21.7298 50.1606 22.4658 51.0685 22.4658H51.0816C51.9895 22.4658 52.7255 21.7298 52.7255 20.8219C52.7255 19.9141 51.9895 19.1781 51.0816 19.1781H51.0685Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M19.1729 24.1096C19.1729 21.7491 21.0865 19.8356 23.4469 19.8356H26.0771C28.4375 19.8356 30.351 21.7491 30.351 24.1096V39.8904C30.351 42.2509 28.4375 44.1644 26.0771 44.1644H23.4469C21.0865 44.1644 19.1729 42.2509 19.1729 39.8904V24.1096ZM23.4469 23.1233C22.9022 23.1233 22.4606 23.5649 22.4606 24.1096V39.8904C22.4606 40.4351 22.9022 40.8767 23.4469 40.8767H26.0771C26.6218 40.8767 27.0634 40.4351 27.0634 39.8904V24.1096C27.0634 23.5649 26.6218 23.1233 26.0771 23.1233H23.4469Z\"\n fill=\"white\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M37.7765 19.8356C35.4161 19.8356 33.5026 21.7491 33.5026 24.1096V39.8904C33.5026 42.2509 35.4161 44.1644 37.7765 44.1644H40.4067C42.7671 44.1644 44.6807 42.2509 44.6807 39.8904V24.1096C44.6807 21.7491 42.7671 19.8356 40.4067 19.8356H37.7765ZM36.7902 24.1096C36.7902 23.5649 37.2318 23.1233 37.7765 23.1233H40.4067C40.9514 23.1233 41.393 23.5649 41.393 24.1096V39.8904C41.393 40.4351 40.9514 40.8767 40.4067 40.8767H37.7765C37.2318 40.8767 36.7902 40.4351 36.7902 39.8904V24.1096Z\"\n fill=\"white\"\n />\n </svg>\n );\n };\n\n render() {\n return (\n <Host class={`pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}`}>\n <button type=\"button\" id=\"overlayed-button-pause-video\" aria-label={`${this.i18n.ariaLabel}`} onClick={this.handlePlayPauseClicked}>\n {this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon()}\n </button>\n </Host>\n );\n }\n}\n"]}

package/collection/components/animation/pn-scroll/pn-scroll.js CHANGED Viewed

@@ -16,6 +16,7 @@ export class PnScroll {
         this.notIntersectFunc = undefined;
         this.compId = null;
     }
+    hostElement;
     generateUniqueId() {
         return uuidv4();
     }
@@ -23,20 +24,20 @@ export class PnScroll {
         entries.forEach(entry => {
             if (!shouldLoop) {
                 if (!entry.isIntersecting) {
-                    onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+                    onNotIntersecting?.(entry, observer);
                     return;
                 }
                 entry.target.classList.add('in-view');
-                onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+                onIntersecting?.(entry, observer);
                 observer.unobserve(entry.target);
             }
             else {
                 entry.target.classList.toggle('in-view', entry.isIntersecting);
                 if (entry.isIntersecting) {
-                    onIntersecting === null || onIntersecting === void 0 ? void 0 : onIntersecting(entry, observer);
+                    onIntersecting?.(entry, observer);
                 }
                 else {
-                    onNotIntersecting === null || onNotIntersecting === void 0 ? void 0 : onNotIntersecting(entry, observer);
+                    onNotIntersecting?.(entry, observer);
                 }
             }
         });

package/collection/components/animation/pn-scroll/pn-scroll.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-scroll.js","sourceRoot":"","sources":["../../../../src/components/animation/pn-scroll/pn-scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,MAAM,sBAAsB,GAA6B;IACvD,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,oBAAoB;CACjC,CAAC;AAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAM1C,MAAM,OAAO,QAAQ;;+BAEiC,sBAAsB;gCACvC,eAAe;yCACN,GAAG;0BAChB,KAAK;;;sBAIV,IAAI;;~~IAE9B~~,gBAAgB;QACd,OAAO,MAAM,EAAE,CAAC;IAClB,CAAC;IAED,kBAAkB,CAAC,OAAoC,EAAE,QAA+B,EAAE,cAAyB,EAAE,iBAA4B,EAAE,UAAoB;QACrK,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACtB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC1B,iBAAiB,~~aAAjB~~,~~iBAAiB~~,~~uBAAjB,iBAAiB,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;oBACrC,OAAO;gBACT,CAAC;gBACD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACtC,cAAc,~~aAAd~~,~~cAAc~~,~~uBAAd,cAAc,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;gBAClC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;gBAC/D,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,cAAc,~~aAAd~~,~~cAAc~~,~~uBAAd,cAAc,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;gBACpC,CAAC;qBAAM,CAAC;oBACN,iBAAiB,~~aAAjB~~,~~iBAAiB~~,~~uBAAjB,iBAAiB,CAAG,~~KAAK,EAAE,QAAQ,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,8CAA8C;IAC9C,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxC,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,EAC7H,IAAI,CAAC,eAAe,CACrB,CAAC;QACF,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC,yBAAyB,GAAG,EAAE;gBAC/J,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n root: null,\n threshold: 0,\n rootMargin: '0px 0px -150px 0px',\n};\n\nconst SCROLL_ID = `pn-scroll-wrapper-id-`;\n\n@Component({\n tag: 'pn-scroll',\n styleUrl: 'pn-scroll.scss',\n})\nexport class PnScroll {\n @Element() hostElement: HTMLElement;\n @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n @Prop() behaviourClasses: string = 'fade slide-up';\n @Prop() transitionDurationSeconds: number = 0.5;\n @Prop() shouldLoop?: boolean = false;\n @Prop() intersectFunc?: Function;\n @Prop() notIntersectFunc?: Function;\n\n @State() compId: string = null;\n\n generateUniqueId() {\n return uuidv4();\n }\n\n handleIntersection(entries: IntersectionObserverEntry[], observer?: IntersectionObserver, onIntersecting?: Function, onNotIntersecting?: Function, shouldLoop?: boolean) {\n entries.forEach(entry => {\n if (!shouldLoop) {\n if (!entry.isIntersecting) {\n onNotIntersecting?.(entry, observer);\n return;\n }\n entry.target.classList.add('in-view');\n onIntersecting?.(entry, observer);\n observer.unobserve(entry.target);\n } else {\n entry.target.classList.toggle('in-view', entry.isIntersecting);\n if (entry.isIntersecting) {\n onIntersecting?.(entry, observer);\n } else {\n onNotIntersecting?.(entry, observer);\n }\n }\n });\n }\n\n //on load, generate unique id for this wrapper\n componentWillLoad() {\n this.compId = this.generateUniqueId();\n }\n\n componentDidLoad() {\n const observer = new IntersectionObserver(\n (entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop),\n this.observerOptions,\n );\n const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);\n observer.observe(objectToObserve);\n }\n\n render() {\n return (\n <Host>\n <div class={`scroll-wrapper ${this.behaviourClasses}`} id={`${SCROLL_ID}${this.compId}`} style={{ '--transition-duration': `${this.transitionDurationSeconds}s` }}>\n <slot name=\"scroll-affected\" />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-scroll.js","sourceRoot":"","sources":["../../../../src/components/animation/pn-scroll/pn-scroll.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,MAAM,sBAAsB,GAA6B;IACvD,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,oBAAoB;CACjC,CAAC;AAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAM1C,MAAM,OAAO,QAAQ;;+BAEiC,sBAAsB;gCACvC,eAAe;yCACN,GAAG;0BAChB,KAAK;;;sBAIV,IAAI;;IARnB,WAAW,CAAc;IAUpC,gBAAgB;QACd,OAAO,MAAM,EAAE,CAAC;IAClB,CAAC;IAED,kBAAkB,CAAC,OAAoC,EAAE,QAA+B,EAAE,cAAyB,EAAE,iBAA4B,EAAE,UAAoB;QACrK,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACtB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC1B,iBAAiB,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;oBACrC,OAAO;gBACT,CAAC;gBACD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;gBACtC,cAAc,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAClC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;gBAC/D,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,cAAc,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBACpC,CAAC;qBAAM,CAAC;oBACN,iBAAiB,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,8CAA8C;IAC9C,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxC,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,UAAU,CAAC,EAC7H,IAAI,CAAC,eAAe,CACrB,CAAC;QACF,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC,yBAAyB,GAAG,EAAE;gBAC/J,6DAAM,IAAI,EAAC,iBAAiB,GAAG,CAC3B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { v4 as uuidv4 } from 'uuid';\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nconst defaultObserverOptions: IntersectionObserverInit = {\n root: null,\n threshold: 0,\n rootMargin: '0px 0px -150px 0px',\n};\n\nconst SCROLL_ID = `pn-scroll-wrapper-id-`;\n\n@Component({\n tag: 'pn-scroll',\n styleUrl: 'pn-scroll.scss',\n})\nexport class PnScroll {\n @Element() hostElement: HTMLElement;\n @Prop() observerOptions: IntersectionObserverInit = defaultObserverOptions;\n @Prop() behaviourClasses: string = 'fade slide-up';\n @Prop() transitionDurationSeconds: number = 0.5;\n @Prop() shouldLoop?: boolean = false;\n @Prop() intersectFunc?: Function;\n @Prop() notIntersectFunc?: Function;\n\n @State() compId: string = null;\n\n generateUniqueId() {\n return uuidv4();\n }\n\n handleIntersection(entries: IntersectionObserverEntry[], observer?: IntersectionObserver, onIntersecting?: Function, onNotIntersecting?: Function, shouldLoop?: boolean) {\n entries.forEach(entry => {\n if (!shouldLoop) {\n if (!entry.isIntersecting) {\n onNotIntersecting?.(entry, observer);\n return;\n }\n entry.target.classList.add('in-view');\n onIntersecting?.(entry, observer);\n observer.unobserve(entry.target);\n } else {\n entry.target.classList.toggle('in-view', entry.isIntersecting);\n if (entry.isIntersecting) {\n onIntersecting?.(entry, observer);\n } else {\n onNotIntersecting?.(entry, observer);\n }\n }\n });\n }\n\n //on load, generate unique id for this wrapper\n componentWillLoad() {\n this.compId = this.generateUniqueId();\n }\n\n componentDidLoad() {\n const observer = new IntersectionObserver(\n (entries, observer) => this.handleIntersection(entries, observer, this.intersectFunc, this.notIntersectFunc, this.shouldLoop),\n this.observerOptions,\n );\n const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);\n observer.observe(objectToObserve);\n }\n\n render() {\n return (\n <Host>\n <div class={`scroll-wrapper ${this.behaviourClasses}`} id={`${SCROLL_ID}${this.compId}`} style={{ '--transition-duration': `${this.transitionDurationSeconds}s` }}>\n <slot name=\"scroll-affected\" />\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class PnLineShape {
+    hostElement;
     //props
     render() {
         return (h(Host, { key: '6f7804eed509b1f396fabdcd82154bbc0ff35a7c' }, h("div", { key: '63fb1b9e18eb96f7618dfe8bda1731c8c8e1aa0f', class: "pn-line-shape__container" }, h("canvas", { key: '88bc355c48871838e141fccddab97203bb020edc', class: "pn-line-shape__line" }), h("canvas", { key: 'b1836cc1f1520d7e780d82568028caeb47d0dd1b', class: "pn-line-shape__dot" }))));

package/collection/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-line-shape.js","sourceRoot":"","sources":["../../../../../src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAM5D,MAAM,OAAO,WAAW;~~IAEtB~~,OAAO;IAEP,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,+DAAQ,KAAK,EAAC,qBAAqB,GAAU;gBAC7C,+DAAQ,KAAK,EAAC,oBAAoB,GAAU,CACxC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'pn-line-shape',\n styleUrl: 'pn-line-shape.scss',\n})\nexport class PnLineShape {\n @Element() hostElement: HTMLElement;\n //props\n\n render() {\n return (\n <Host>\n <div class=\"pn-line-shape__container\">\n <canvas class=\"pn-line-shape__line\"></canvas>\n <canvas class=\"pn-line-shape__dot\"></canvas>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-line-shape.js","sourceRoot":"","sources":["../../../../../src/components/cards/pn-quote-card/pn-line-shape/pn-line-shape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAM5D,MAAM,OAAO,WAAW;IACX,WAAW,CAAc;IACpC,OAAO;IAEP,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,0BAA0B;gBACnC,+DAAQ,KAAK,EAAC,qBAAqB,GAAU;gBAC7C,+DAAQ,KAAK,EAAC,oBAAoB,GAAU,CACxC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'pn-line-shape',\n styleUrl: 'pn-line-shape.scss',\n})\nexport class PnLineShape {\n @Element() hostElement: HTMLElement;\n //props\n\n render() {\n return (\n <Host>\n <div class=\"pn-line-shape__container\">\n <canvas class=\"pn-line-shape__line\"></canvas>\n <canvas class=\"pn-line-shape__dot\"></canvas>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/cards/pn-quote-card/pn-quote-card.js CHANGED Viewed

@@ -5,6 +5,7 @@ export class PnQuoteCard {
         this.name = null;
         this.occupation = null;
     }
+    hostElement;
     render() {
         return (h(Host, { key: 'adf7a00980ef81bddf83262dcc24540f962abf27' }, h("div", { key: '4b8ec2139d33c1d432c269ba04c8e13732b46dcd', class: "pn-quote-card__section" }, h("div", { key: '67713c139963d7e2477fcf0b6d078d336a768940', class: "pn-quote-card__container" }, h("slot", { key: 'b68d98f863024314c4d14e6697ce2e2396041cc8', name: "vertical-line" }, " "), h("div", { key: 'f712e28f92b230e64fe5ffc5abf001443a9d16ec', class: "pn-quote-card__quote__container" }, h("blockquote", { key: 'cd1eb6e0c9d973aa816b2c8644be9c05558e7c17', class: "pn-quote-card__quote" }, h("svg", { key: '947cdf4204f8e2aea7ba33cb7b2a4c1f3b919415', width: "25", height: "18", viewBox: "0 0 25 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ec7acd41030a16824b604eda941c3cde35e69647', d: "M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z", fill: "white" })), this.quote), h("slot", { key: 'ee71250def5a98c730ae00a60761868e4cf2b2f0', name: "horizontal-line" }), h("div", { key: '41f86563902c051b7c2ec0d915244b6f6c7b8533', class: "pn-quote-card__reference__container" }, h("slot", { key: 'e1dce0ca310574a9da9ba5c15ba823f1e70c61fa', name: "illustration" }), h("div", { key: 'a06f795ff2d1d7165b8b0f654c5ee9bd8fb4eca9', class: "pn-quote-card__reference" }, h("span", { key: '3507763b1414b00076fdaa9cfb6b5c7ec1e36cb5', class: "pn-quote-card__reference__name" }, this.name), h("span", { key: 'ce5f2580a1cb9c00e99536228c0c2cc784ef9fe2', class: "pn-quote-card__reference__occupation" }, this.occupation)))), h("div", { key: 'c3c7b60385beb22bfdb9ce05b77f44199d5b8fbb', class: "pn-quote-card__large-photo" }, h("slot", { key: 'eb72a8ce622a9166271549bb0090c68e9847ae17', name: "illustration-big" }))))));
     }

package/collection/components/cards/pn-quote-card/pn-quote-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-quote-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-quote-card/pn-quote-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMlE,MAAM,OAAO,WAAW;;qBAGE,IAAI;oBACL,IAAI;0BACE,IAAI;;~~IACjC~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,0BAA0B;oBACnC,6DAAM,IAAI,EAAC,eAAe,QAAS;oBACnC,4DAAK,KAAK,EAAC,iCAAiC;wBAC1C,mEAAY,KAAK,EAAC,sBAAsB;4BACtC,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;gCAC5F,6DACE,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,OAAO,GACZ,CACE;4BAEL,IAAI,CAAC,KAAK,CACA;wBAEb,6DAAM,IAAI,EAAC,iBAAiB,GAAQ;wBACpC,4DAAK,KAAK,EAAC,qCAAqC;4BAC9C,6DAAM,IAAI,EAAC,cAAc,GAAG;4BAC5B,4DAAK,KAAK,EAAC,0BAA0B;gCACnC,6DAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ;gCAC/D,6DAAM,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,UAAU,CAAQ,CACvE,CACF,CACF;oBACN,4DAAK,KAAK,EAAC,4BAA4B;wBACrC,6DAAM,IAAI,EAAC,kBAAkB,GAAG,CAC5B,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-quote-card',\n styleUrl: 'pn-quote-card.scss',\n})\nexport class PnQuoteCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() quote: string = null;\n @Prop() name: string = null;\n @Prop() occupation: string = null;\n render() {\n return (\n <Host>\n <div class=\"pn-quote-card__section\">\n <div class=\"pn-quote-card__container\">\n <slot name=\"vertical-line\"> </slot>\n <div class=\"pn-quote-card__quote__container\">\n <blockquote class=\"pn-quote-card__quote\">\n <svg width=\"25\" height=\"18\" viewBox=\"0 0 25 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z\"\n fill=\"white\"\n />\n </svg>\n\n {this.quote}\n </blockquote>\n\n <slot name=\"horizontal-line\"></slot>\n <div class=\"pn-quote-card__reference__container\">\n <slot name=\"illustration\" />\n <div class=\"pn-quote-card__reference\">\n <span class=\"pn-quote-card__reference__name\">{this.name}</span>\n <span class=\"pn-quote-card__reference__occupation\">{this.occupation}</span>\n </div>\n </div>\n </div>\n <div class=\"pn-quote-card__large-photo\">\n <slot name=\"illustration-big\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-quote-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-quote-card/pn-quote-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMlE,MAAM,OAAO,WAAW;;qBAGE,IAAI;oBACL,IAAI;0BACE,IAAI;;IAJtB,WAAW,CAAc;IAKpC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,0BAA0B;oBACnC,6DAAM,IAAI,EAAC,eAAe,QAAS;oBACnC,4DAAK,KAAK,EAAC,iCAAiC;wBAC1C,mEAAY,KAAK,EAAC,sBAAsB;4BACtC,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;gCAC5F,6DACE,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,OAAO,GACZ,CACE;4BAEL,IAAI,CAAC,KAAK,CACA;wBAEb,6DAAM,IAAI,EAAC,iBAAiB,GAAQ;wBACpC,4DAAK,KAAK,EAAC,qCAAqC;4BAC9C,6DAAM,IAAI,EAAC,cAAc,GAAG;4BAC5B,4DAAK,KAAK,EAAC,0BAA0B;gCACnC,6DAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ;gCAC/D,6DAAM,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,UAAU,CAAQ,CACvE,CACF,CACF;oBACN,4DAAK,KAAK,EAAC,4BAA4B;wBACrC,6DAAM,IAAI,EAAC,kBAAkB,GAAG,CAC5B,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-quote-card',\n styleUrl: 'pn-quote-card.scss',\n})\nexport class PnQuoteCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() quote: string = null;\n @Prop() name: string = null;\n @Prop() occupation: string = null;\n render() {\n return (\n <Host>\n <div class=\"pn-quote-card__section\">\n <div class=\"pn-quote-card__container\">\n <slot name=\"vertical-line\"> </slot>\n <div class=\"pn-quote-card__quote__container\">\n <blockquote class=\"pn-quote-card__quote\">\n <svg width=\"25\" height=\"18\" viewBox=\"0 0 25 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z\"\n fill=\"white\"\n />\n </svg>\n\n {this.quote}\n </blockquote>\n\n <slot name=\"horizontal-line\"></slot>\n <div class=\"pn-quote-card__reference__container\">\n <slot name=\"illustration\" />\n <div class=\"pn-quote-card__reference\">\n <span class=\"pn-quote-card__reference__name\">{this.name}</span>\n <span class=\"pn-quote-card__reference__occupation\">{this.occupation}</span>\n </div>\n </div>\n </div>\n <div class=\"pn-quote-card__large-photo\">\n <slot name=\"illustration-big\" />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/cards/pn-teaser-card/pn-teaser-card.js CHANGED Viewed

@@ -1,8 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class PnTeaserCard {
     constructor() {
-        var _a;
-        this.labelToCapitals = (_a = this.label) === null || _a === void 0 ? void 0 : _a.toUpperCase();
         this.text = null;
         this.heading = null;
         this.label = null;
@@ -11,6 +9,8 @@ export class PnTeaserCard {
         this.hasCtaSlotContent = false;
         this.hasIllustrationSlot = true;
     }
+    hostElement;
+    labelToCapitals = this.label?.toUpperCase();
     componentWillLoad() {
         this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
         this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');

package/collection/components/cards/pn-teaser-card/pn-teaser-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,OAAO,YAAY~~;;;QASvB~~,~~oBAAe,GAAG,MAAA,~~IAAI~~,CAAC,KAAK,0CAAE,WAAW,EAAE,CAAC~~;~~oBANrB,IAAI;~~uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;~~IAE5C~~,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvF,CAAC;IAED,QAAQ;IACR,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ;wBAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM;wBAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,OAAO,YAAY;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;6BACoB,OAAO;iCACH,MAAM;iCAIrB,KAAK;mCACH,IAAI;;IAXjC,WAAW,CAAc;IAQpC,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;IAK5C,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvF,CAAC;IAED,QAAQ;IACR,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,IAAI,CAAC,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,IAAI,CAAC,eAAe,CAAQ;wBAC/H,2DAAI,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAM;wBAC5F,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'pn-teaser-card',\n styleUrl: 'pn-teaser-card.scss',\n})\nexport class PnTeaserCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() text: string = null;\n @Prop() heading: string = null;\n @Prop() label?: string = null;\n @Prop({ reflect: true }) dataCardColor: string = 'coral';\n @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n labelToCapitals = this.label?.toUpperCase();\n\n @State() hasCtaSlotContent: boolean = false;\n @State() hasIllustrationSlot: boolean = true;\n\n componentWillLoad() {\n this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n }\n\n //render\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-teaser-card__container\">\n <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n <slot name=\"illustration\" />\n </div>\n <div class=\"pn-teaser-card__container__content\">\n <div class=\"pn-teaser-card__container__content__text__container\">\n {this.labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{this.labelToCapitals}</span>}\n <h2 class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</h2>\n <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n </div>\n {this.hasCtaSlotContent && (\n <div class=\"pn-teaser-card__container__content__cta\">\n <slot name=\"cta\" />\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/charts/pn-chart/pn-chart-helper.js CHANGED Viewed

@@ -18,7 +18,11 @@ export const chartCfg = (dataChartType, data, moreThanOneSet = false) => {
         },
     };
     if (dataChartType === 'bar') {
-        return Object.assign(Object.assign({}, cfg), { options: Object.assign(Object.assign({}, cfg.options), { scales: {
+        return {
+            ...cfg,
+            options: {
+                ...cfg.options,
+                scales: {
                     yAxes: [
                         {
                             ticks: {
@@ -26,10 +30,21 @@ export const chartCfg = (dataChartType, data, moreThanOneSet = false) => {
                             },
                         },
                     ],
-                } }) });
+                },
+            },
+        };
     }
     if (dataChartType === 'doughnut' || dataChartType === 'pie') {
-        return Object.assign(Object.assign({}, cfg), { options: Object.assign(Object.assign({}, cfg.options), { legend: Object.assign(Object.assign({}, cfg.options.legend), { display: true }) }) });
+        return {
+            ...cfg,
+            options: {
+                ...cfg.options,
+                legend: {
+                    ...cfg.options.legend,
+                    display: true,
+                },
+            },
+        };
     }
     return cfg;
 };
@@ -45,14 +60,24 @@ export const dataSetProps = (set, dataChartType) => {
     };
     let variant = {};
     if (dataChartType === 'doughnut' || dataChartType === 'pie') {
-        variant = Object.assign(Object.assign({}, dataSetProps), { borderColor: set.borderColor ? set.borderColor : 'transparent', datalabels: Object.assign(Object.assign({}, dataSetProps.datalabels), { color: '#000000' }) });
+        variant = {
+            ...dataSetProps,
+            borderColor: set.borderColor ? set.borderColor : 'transparent',
+            datalabels: {
+                ...dataSetProps.datalabels,
+                color: '#000000',
+            },
+        };
     }
     else if (dataChartType === 'line') {
-        variant = Object.assign(Object.assign({}, dataSetProps), { fill: false });
+        variant = {
+            ...dataSetProps,
+            fill: false,
+        };
     }
     else if (dataChartType === 'bar') {
-        variant = Object.assign({}, dataSetProps);
+        variant = { ...dataSetProps };
     }
-    return Object.assign(Object.assign({}, set), variant);
+    return { ...set, ...variant };
 };
 //# sourceMappingURL=pn-chart-helper.js.map

package/collection/components/charts/pn-chart/pn-chart-helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-chart-helper.js","sourceRoot":"","sources":["../../../../src/components/charts/pn-chart/pn-chart-helper.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,aAAa,EAAE,IAAI,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE;IACtE,IAAI,GAAG,GAAG;QACR,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE;YACP,UAAU,EAAE,IAAI;YAChB,mBAAmB,EAAE,KAAK;YAC1B,WAAW,EAAE,CAAC;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,cAAc;gBACvB,QAAQ,EAAE,QAAwB;gBAClC,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;aACnD;YACD,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;YACD,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;SACrE;KACF,CAAC;IAEF,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QAC5B,~~uCACK~~,GAAG,~~KACN~~,OAAO,~~kCACF~~,GAAG,CAAC,OAAO,~~KACd,~~MAAM,EAAE;oBACN,KAAK,EAAE;wBACL;4BACE,KAAK,EAAE;gCACL,WAAW,EAAE,IAAI;6BAClB;yBACF;qBACF;iBACF,~~OAEH~~;IACJ,CAAC;IAED,IAAI,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QAC5D,~~uCACK~~,GAAG,~~KACN~~,OAAO,~~kCACF~~,GAAG,CAAC,OAAO,~~KACd,~~MAAM,~~kCACD~~,GAAG,CAAC,OAAO,CAAC,MAAM,~~KACrB,~~OAAO,EAAE,IAAI,~~UAGjB~~;IACJ,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,aAAa,EAAE,EAAE;IACjD,MAAM,YAAY,GAAG;QACnB,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,IAAI,EAAE;gBACJ,IAAI,EAAE,EAAE;gBACR,MAAM,EAAE,GAAG;aACZ;SACF;KACF,CAAC;IAEF,IAAI,OAAO,GAAG,EAAE,CAAC;IAEjB,IAAI,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QAC5D,OAAO,~~mCACF~~,YAAY,~~KACf,~~WAAW,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,~~EAC9D,~~UAAU,~~kCACL~~,YAAY,CAAC,UAAU,~~KAC1B,~~KAAK,EAAE,SAAS,~~MAEnB,~~CAAC;IACJ,CAAC;SAAM,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QACpC,OAAO,~~mCACF~~,YAAY,~~KACf,~~IAAI,EAAE,KAAK,~~GACZ,~~CAAC;IACJ,CAAC;SAAM,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QACnC,OAAO,~~qBAAQ~~,YAAY,~~CAAE~~,CAAC;IAChC,CAAC;IAED,~~uCAAY~~,GAAG,~~GAAK~~,OAAO,~~EAAG~~;AAChC,CAAC,CAAC","sourcesContent":["import { PositionType } from 'chart.js';\n\nexport const chartCfg = (dataChartType, data, moreThanOneSet = false) => {\n let cfg = {\n type: dataChartType,\n data: data,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n aspectRatio: 1,\n legend: {\n display: moreThanOneSet,\n position: 'bottom' as PositionType,\n labels: { boxWidth: 20, fontFamily: 'sans-serif' },\n },\n tooltip: {\n enabled: true,\n },\n plugins: { deferred: { enabled: true, yOffset: '50%', delay: 300 } },\n },\n };\n\n if (dataChartType === 'bar') {\n return {\n ...cfg,\n options: {\n ...cfg.options,\n scales: {\n yAxes: [\n {\n ticks: {\n beginAtZero: true,\n },\n },\n ],\n },\n },\n };\n }\n\n if (dataChartType === 'doughnut' \|\| dataChartType === 'pie') {\n return {\n ...cfg,\n options: {\n ...cfg.options,\n legend: {\n ...cfg.options.legend,\n display: true,\n },\n },\n };\n }\n\n return cfg;\n};\n\nexport const dataSetProps = (set, dataChartType) => {\n const dataSetProps = {\n datalabels: {\n color: '#FFF',\n font: {\n size: 22,\n weight: 600,\n },\n },\n };\n\n let variant = {};\n\n if (dataChartType === 'doughnut' \|\| dataChartType === 'pie') {\n variant = {\n ...dataSetProps,\n borderColor: set.borderColor ? set.borderColor : 'transparent',\n datalabels: {\n ...dataSetProps.datalabels,\n color: '#000000',\n },\n };\n } else if (dataChartType === 'line') {\n variant = {\n ...dataSetProps,\n fill: false,\n };\n } else if (dataChartType === 'bar') {\n variant = { ...dataSetProps };\n }\n\n return { ...set, ...variant };\n};\n"]}
1	+ {"version":3,"file":"pn-chart-helper.js","sourceRoot":"","sources":["../../../../src/components/charts/pn-chart/pn-chart-helper.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,aAAa,EAAE,IAAI,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE;IACtE,IAAI,GAAG,GAAG;QACR,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,IAAI;QACV,OAAO,EAAE;YACP,UAAU,EAAE,IAAI;YAChB,mBAAmB,EAAE,KAAK;YAC1B,WAAW,EAAE,CAAC;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,cAAc;gBACvB,QAAQ,EAAE,QAAwB;gBAClC,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE;aACnD;YACD,OAAO,EAAE;gBACP,OAAO,EAAE,IAAI;aACd;YACD,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;SACrE;KACF,CAAC;IAEF,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QAC5B,OAAO;YACL,GAAG,GAAG;YACN,OAAO,EAAE;gBACP,GAAG,GAAG,CAAC,OAAO;gBACd,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL;4BACE,KAAK,EAAE;gCACL,WAAW,EAAE,IAAI;6BAClB;yBACF;qBACF;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAED,IAAI,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QAC5D,OAAO;YACL,GAAG,GAAG;YACN,OAAO,EAAE;gBACP,GAAG,GAAG,CAAC,OAAO;gBACd,MAAM,EAAE;oBACN,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM;oBACrB,OAAO,EAAE,IAAI;iBACd;aACF;SACF,CAAC;IACJ,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,EAAE,aAAa,EAAE,EAAE;IACjD,MAAM,YAAY,GAAG;QACnB,UAAU,EAAE;YACV,KAAK,EAAE,MAAM;YACb,IAAI,EAAE;gBACJ,IAAI,EAAE,EAAE;gBACR,MAAM,EAAE,GAAG;aACZ;SACF;KACF,CAAC;IAEF,IAAI,OAAO,GAAG,EAAE,CAAC;IAEjB,IAAI,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QAC5D,OAAO,GAAG;YACR,GAAG,YAAY;YACf,WAAW,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa;YAC9D,UAAU,EAAE;gBACV,GAAG,YAAY,CAAC,UAAU;gBAC1B,KAAK,EAAE,SAAS;aACjB;SACF,CAAC;IACJ,CAAC;SAAM,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QACpC,OAAO,GAAG;YACR,GAAG,YAAY;YACf,IAAI,EAAE,KAAK;SACZ,CAAC;IACJ,CAAC;SAAM,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;QACnC,OAAO,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAChC,CAAC;IAED,OAAO,EAAE,GAAG,GAAG,EAAE,GAAG,OAAO,EAAE,CAAC;AAChC,CAAC,CAAC","sourcesContent":["import { PositionType } from 'chart.js';\n\nexport const chartCfg = (dataChartType, data, moreThanOneSet = false) => {\n let cfg = {\n type: dataChartType,\n data: data,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n aspectRatio: 1,\n legend: {\n display: moreThanOneSet,\n position: 'bottom' as PositionType,\n labels: { boxWidth: 20, fontFamily: 'sans-serif' },\n },\n tooltip: {\n enabled: true,\n },\n plugins: { deferred: { enabled: true, yOffset: '50%', delay: 300 } },\n },\n };\n\n if (dataChartType === 'bar') {\n return {\n ...cfg,\n options: {\n ...cfg.options,\n scales: {\n yAxes: [\n {\n ticks: {\n beginAtZero: true,\n },\n },\n ],\n },\n },\n };\n }\n\n if (dataChartType === 'doughnut' \|\| dataChartType === 'pie') {\n return {\n ...cfg,\n options: {\n ...cfg.options,\n legend: {\n ...cfg.options.legend,\n display: true,\n },\n },\n };\n }\n\n return cfg;\n};\n\nexport const dataSetProps = (set, dataChartType) => {\n const dataSetProps = {\n datalabels: {\n color: '#FFF',\n font: {\n size: 22,\n weight: 600,\n },\n },\n };\n\n let variant = {};\n\n if (dataChartType === 'doughnut' \|\| dataChartType === 'pie') {\n variant = {\n ...dataSetProps,\n borderColor: set.borderColor ? set.borderColor : 'transparent',\n datalabels: {\n ...dataSetProps.datalabels,\n color: '#000000',\n },\n };\n } else if (dataChartType === 'line') {\n variant = {\n ...dataSetProps,\n fill: false,\n };\n } else if (dataChartType === 'bar') {\n variant = { ...dataSetProps };\n }\n\n return { ...set, ...variant };\n};\n"]}

package/collection/components/charts/pn-chart/pn-chart.js CHANGED Viewed

@@ -9,15 +9,28 @@ export class PnChart {
         this.dataChartType = 'doughnut';
         this.myChartCtxRef = undefined;
     }
+    element;
+    myChart;
+    parsedDataSets;
+    parsedLabels;
+    parsedDatasetWithDataParsed;
+    data;
+    numberOfSetsGreaterThanOne;
     dataChangeHandler() {
         this.parsedDataSets = JSON.parse(this.dataSets);
         this.numberOfSetsGreaterThanOne = this.parsedDataSets.length > 1;
         this.parsedDatasetWithDataParsed = this.parsedDataSets.map(set => dataSetProps(set, this.dataChartType));
-        this.data = Object.assign(Object.assign({}, this.data), { datasets: this.parsedDatasetWithDataParsed });
+        this.data = {
+            ...this.data,
+            datasets: this.parsedDatasetWithDataParsed,
+        };
     }
     labelsChangeHandler() {
         this.parsedLabels = JSON.parse(this.labels);
-        this.data = Object.assign(Object.assign({}, this.data), { labels: this.parsedLabels });
+        this.data = {
+            ...this.data,
+            labels: this.parsedLabels,
+        };
     }
     componentWillLoad() {
         this.dataChangeHandler();

package/collection/components/charts/pn-chart/pn-chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-chart.js","sourceRoot":"","sources":["../../../../src/components/charts/pn-chart/pn-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,aAAa,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM3D,MAAM,OAAO,OAAO;;sBAEO,IAAI;wBACF,IAAI;6BACF,UAAU;;;~~IAYvC~~,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;QACjE,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;QACzG,IAAI,CAAC,IAAI,~~mCACJ~~,IAAI,CAAC,IAAI,~~KACZ,~~QAAQ,EAAE,IAAI,CAAC,2BAA2B,~~GAC3C,~~CAAC;IACJ,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAa,CAAC;QACxD,IAAI,CAAC,IAAI,~~mCACJ~~,IAAI,CAAC,IAAI,~~KACZ,~~MAAM,EAAE,IAAI,CAAC,YAAY,~~GAC1B,~~CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACjE,IAAI,CAAC,OAAO,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACzH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,eAAe;gBACxB,+DAAQ,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,SAAS,GAAU,CAC/C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Chart } from 'chart.js';\nimport ChartDeferred from 'chartjs-plugin-deferred';\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { chartCfg, dataSetProps } from './pn-chart-helper';\n\n@Component({\n tag: 'pn-chart',\n styleUrl: 'pn-chart.scss',\n})\nexport class PnChart {\n @Element() element: HTMLElement;\n @Prop() labels: string = null;\n @Prop() dataSets: string = null;\n @Prop() dataChartType: any = 'doughnut';\n\n @State() myChartCtxRef: any;\n\n myChart: any;\n parsedDataSets: any;\n parsedLabels: string[];\n parsedDatasetWithDataParsed: any;\n data: any;\n numberOfSetsGreaterThanOne: boolean;\n\n @Watch('dataSets')\n dataChangeHandler() {\n this.parsedDataSets = JSON.parse(this.dataSets);\n this.numberOfSetsGreaterThanOne = this.parsedDataSets.length > 1;\n this.parsedDatasetWithDataParsed = this.parsedDataSets.map(set => dataSetProps(set, this.dataChartType));\n this.data = {\n ...this.data,\n datasets: this.parsedDatasetWithDataParsed,\n };\n }\n\n @Watch('labels')\n labelsChangeHandler() {\n this.parsedLabels = JSON.parse(this.labels) as string[];\n this.data = {\n ...this.data,\n labels: this.parsedLabels,\n };\n }\n\n componentWillLoad() {\n this.dataChangeHandler();\n this.labelsChangeHandler();\n }\n\n componentDidLoad() {\n Chart.plugins.register(ChartDeferred);\n this.myChartCtxRef = this.element.querySelector('#chart-canvas');\n this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data, this.numberOfSetsGreaterThanOne));\n }\n\n render() {\n return (\n <Host>\n <div class=\"chart-wrapper\">\n <canvas id=\"chart-canvas\" class=\"pnChart\"></canvas>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-chart.js","sourceRoot":"","sources":["../../../../src/components/charts/pn-chart/pn-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,aAAa,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM3D,MAAM,OAAO,OAAO;;sBAEO,IAAI;wBACF,IAAI;6BACF,UAAU;;;IAH5B,OAAO,CAAc;IAOhC,OAAO,CAAM;IACb,cAAc,CAAM;IACpB,YAAY,CAAW;IACvB,2BAA2B,CAAM;IACjC,IAAI,CAAM;IACV,0BAA0B,CAAU;IAGpC,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;QACjE,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;QACzG,IAAI,CAAC,IAAI,GAAG;YACV,GAAG,IAAI,CAAC,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,2BAA2B;SAC3C,CAAC;IACJ,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAa,CAAC;QACxD,IAAI,CAAC,IAAI,GAAG;YACV,GAAG,IAAI,CAAC,IAAI;YACZ,MAAM,EAAE,IAAI,CAAC,YAAY;SAC1B,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACjE,IAAI,CAAC,OAAO,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC;IACzH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,eAAe;gBACxB,+DAAQ,EAAE,EAAC,cAAc,EAAC,KAAK,EAAC,SAAS,GAAU,CAC/C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Chart } from 'chart.js';\nimport ChartDeferred from 'chartjs-plugin-deferred';\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { chartCfg, dataSetProps } from './pn-chart-helper';\n\n@Component({\n tag: 'pn-chart',\n styleUrl: 'pn-chart.scss',\n})\nexport class PnChart {\n @Element() element: HTMLElement;\n @Prop() labels: string = null;\n @Prop() dataSets: string = null;\n @Prop() dataChartType: any = 'doughnut';\n\n @State() myChartCtxRef: any;\n\n myChart: any;\n parsedDataSets: any;\n parsedLabels: string[];\n parsedDatasetWithDataParsed: any;\n data: any;\n numberOfSetsGreaterThanOne: boolean;\n\n @Watch('dataSets')\n dataChangeHandler() {\n this.parsedDataSets = JSON.parse(this.dataSets);\n this.numberOfSetsGreaterThanOne = this.parsedDataSets.length > 1;\n this.parsedDatasetWithDataParsed = this.parsedDataSets.map(set => dataSetProps(set, this.dataChartType));\n this.data = {\n ...this.data,\n datasets: this.parsedDatasetWithDataParsed,\n };\n }\n\n @Watch('labels')\n labelsChangeHandler() {\n this.parsedLabels = JSON.parse(this.labels) as string[];\n this.data = {\n ...this.data,\n labels: this.parsedLabels,\n };\n }\n\n componentWillLoad() {\n this.dataChangeHandler();\n this.labelsChangeHandler();\n }\n\n componentDidLoad() {\n Chart.plugins.register(ChartDeferred);\n this.myChartCtxRef = this.element.querySelector('#chart-canvas');\n this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data, this.numberOfSetsGreaterThanOne));\n }\n\n render() {\n return (\n <Host>\n <div class=\"chart-wrapper\">\n <canvas id=\"chart-canvas\" class=\"pnChart\"></canvas>\n </div>\n </Host>\n );\n }\n}\n"]}

package/collection/components/charts/pn-charts-card/pn-charts-card.js CHANGED Viewed

@@ -2,12 +2,6 @@ import { h, Host } from "@stencil/core";
 import { arrow_right } from "pn-design-assets/pn-assets/icons.js";
 export class PnChartsCard {
     constructor() {
-        this.showCtaLinkText = () => {
-            if (this.ctaLinkText) {
-                return (h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null }, this.ctaLinkText, " ", h("pn-icon", { icon: arrow_right }, " ")));
-            }
-            return null;
-        };
         this.header = undefined;
         this.highlight = undefined;
         this.preamble = undefined;
@@ -17,6 +11,13 @@ export class PnChartsCard {
         this.ctaLinkText = undefined;
         this.openInNewWindow = false;
     }
+    hostElement;
+    showCtaLinkText = () => {
+        if (this.ctaLinkText) {
+            return (h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null }, this.ctaLinkText, " ", h("pn-icon", { icon: arrow_right }, " ")));
+        }
+        return null;
+    };
     render() {
         return (h(Host, { key: '91447ac4f3c66c65a9c32357d1c15819529a47bf' }, h("slot", { key: '885766168316b0126bfd4bbc0fa6831d50271ac8', name: "clickable-block-wrapper" }), h("div", { key: 'c36f6da932a19fdf26331695fcff8f980ba9717f', class: "pn-charts-card__wrapper" }, h("div", { key: '21a27ad5df39c1d7c410dd303f8d15d0e57e6a97', class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, h("div", { key: '78a02d58749721eb9a7d3ff5cf5850051e6db6c3', class: "pn-charts-card__heading" }, this.header), h("div", { key: '86e37c66d1bc07b116880ed67631e379cda81794', class: "pn-charts-card__heading__highlight" }, this.highlight)), h("div", { key: '7be12f544ea812646e80e7f77bbfc235b92a1d57', class: "pn-charts-card__content__wrapper" }, h("slot", { key: '22cf9818c897929d08ffa732a487600c7c45d4f4', name: "chart" }), h("div", { key: '3b04e1a9cf180090e2cdb43e6c61c8201ece9f7c', class: "pn-charts-card__text__container" }, h("div", { key: '7f6b7a798ae08286bb35e7938c3f6c78176f2c6c', class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, h("div", { key: 'a1048bbf22cd5cf3efb0d2a3e6d689166ce2b45e', class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), h("div", { key: 'd4e8d1cf6e9f1242267d811ab72dd3cee8d74b86', class: "pn-charts-card__heading__highlight" }, this.highlight)), h("span", { key: 'ab93adf62d319525a0f46bbabf4f0cc5bd1a6291', class: "pn-charts-card__preamble" }, this.preamble), h("div", { key: 'e13eb63ad552134988650123c26293ad3507a312', class: "pn-charts-card__text__wrapper" }, h("div", { key: '64901e491a8b7de6adfa60e04d39d13dc9b17551', class: "pn-charts-card__source" }, h("label", { key: '2857102340c025aaf5a6f6229a29f3e5a76a3757' }, this.label), h("h3", { key: 'ebb5f05098fd21bc6da23e9aac3b0ba188404096', class: "pn-chart-card__text__heading" }, this.source), this.showCtaLinkText())))))));
     }