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

@postnord/pn-marketweb-components 3.0.3 → 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/components/pn-charts-card.js CHANGED Viewed

@@ -8,12 +8,6 @@ const PnChartsCard$1 = /*@__PURE__*/ proxyCustomElement(class PnChartsCard exten
     constructor() {
         super();
         this.__registerHost();
-        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;
@@ -23,10 +17,16 @@ const PnChartsCard$1 = /*@__PURE__*/ proxyCustomElement(class PnChartsCard exten
         this.ctaLinkText = undefined;
         this.openInNewWindow = false;
     }
+    get hostElement() { return 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;
+    };
     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())))))));
     }
-    get hostElement() { return this; }
     static get style() { return PnChartsCardStyle0; }
 }, [4, "pn-charts-card", {
         "header": [1],

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

	@@ -1 +1 @@
1	- {"file":"pn-charts-card.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,s+JAAs+J,CAAC;AAC//J,2BAAe,eAAe;;MCMjBA,cAAY~~;;;;QAYvB~~,~~oBAAe~~,GAAG;~~YAChB~~,IAAI,IAAI,CAAC,WAAW,EAAE;~~gBACpB~~,QACE,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,GAAG,gCAAgC,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,GAAG,QAAQ,GAAG,IAAI,IAChK,IAAI,CAAC,WAAW,OAAE,eAAS,IAAI,EAAE,WAAW,QAAa,CACxD,EACJ;~~aACH~~;~~YACD~~,OAAO,IAAI,CAAC;~~SACb~~,CAAC~~;;;;;;;;+BAXiC~~,~~KAAK;;IAaxC,~~MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,6EAA6E,IACtF,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAO,EACxD,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,EAEN,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,4DAAK,KAAK,EAAC,+EAA+E,IACxF,4DAAK,KAAK,EAAC,iDAAiD,IAAE,IAAI,CAAC,MAAM,CAAO,EAChF,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,EACN,6DAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC7D,4DAAK,KAAK,EAAC,+BAA+B,IACxC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC3B,2DAAI,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,MAAM,CAAM,EAC1D,IAAI,CAAC,eAAe,EAAE,CACnB,CACF,CACF,CACF,CACF,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnChartsCard"],"sources":["src/components/charts/pn-charts-card/pn-charts-card.scss?tag=pn-charts-card","src/components/charts/pn-charts-card/pn-charts-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-charts-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-charts-card__wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n\n border-radius: 2.4rem;\n padding: 2.4rem;\n\n @media screen and (min-width: 1200px) {\n padding: 3.2rem;\n }\n }\n\n .pn-charts-card__heading__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: 0.8rem;\n }\n\n .pn-charts-card__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 110%;\n\n @media screen and (min-width: 1640px) {\n font-size: 3.2rem;\n }\n }\n\n .pn-charts-card__heading__highlight {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 110%;\n color: $blue700;\n\n @media screen and (min-width: 1640px) {\n font-size: 3.2rem;\n }\n }\n\n .pn-charts-card__content__wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .pn-charts-card__text__container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n }\n\n .pn-charts-card__heading__wrapper--horizontal {\n display: none;\n }\n\n .pn-charts-card__text__wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n span {\n display: block;\n margin-bottom: 5.4rem;\n }\n }\n\n .pn-charts-card__preamble {\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 140%;\n flex-grow: 1;\n margin-bottom: 1.6rem;\n\n @media screen and (min-width: 1640px) {\n font-size: 2rem;\n }\n }\n\n .pn-charts-card__source {\n display: flex;\n flex-direction: column;\n\n label {\n background-color: $blue400;\n color: $white;\n border-radius: 0.4rem;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1;\n text-transform: uppercase;\n padding: 0.4rem;\n margin-bottom: 0.6rem;\n width: fit-content;\n\n @media screen and (min-width: 1640px) {\n font-size: 1.2rem;\n padding: 0.6rem;\n }\n }\n\n .pn-chart-card__text__heading {\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 140%;\n color: $blue700;\n margin-bottom: 0;\n\n @media screen and (min-width: 1640px) {\n font-size: 2rem;\n }\n }\n\n a {\n text-decoration: none;\n color: $blue700;\n &:hover {\n text-decoration: underline;\n }\n\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n font-weight: 400;\n\n @media screen and (min-width: 1640px) {\n font-size: 2rem;\n }\n\n pn-icon svg {\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//horizontal layout\n.fullwidth {\n & > pn-charts-card {\n .pn-charts-card__wrapper {\n padding: 2.4rem;\n @media screen and (min-width: 992px) {\n padding: 4rem;\n }\n }\n\n .pn-charts-card__heading__wrapper {\n margin-bottom: 3.2rem;\n @media screen and (min-width: 768px) {\n justify-content: flex-start;\n }\n\n gap: 1.6rem;\n }\n\n .pn-charts-card__heading,\n .pn-charts-card__heading__highlight {\n font-size: 2.4rem;\n @media screen and (min-width: 768px) {\n font-size: 3.2rem;\n }\n }\n\n .pn-charts-card__content__wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media screen and (min-width: 992px) {\n flex-direction: row-reverse;\n gap: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n gap: 4rem;\n }\n\n @media screen and (min-width: 1640px) {\n gap: 3.2rem;\n }\n }\n\n .pn-charts-card__text__container {\n justify-content: center;\n @media screen and (min-width: 768px) {\n width: 100%;\n }\n }\n\n .pn-charts-card__heading__wrapper--vertical {\n display: flex;\n\n @media screen and (min-width: 992px) {\n display: none;\n }\n }\n\n .pn-charts-card__heading__wrapper--horizontal {\n display: none;\n @media screen and (min-width: 992px) {\n display: flex;\n }\n }\n\n .pn-charts-card__preamble {\n @media screen and (min-width: 768px) {\n flex-grow: 0;\n font-size: 2rem;\n }\n }\n }\n}\n\n//colors\npn-charts-card[data-chart-color='blue'] {\n & > .pn-charts-card__wrapper {\n background-color: $blue25;\n }\n}\n\npn-charts-card[data-chart-color='coral'] {\n & > .pn-charts-card__wrapper {\n background-color: $coral50;\n }\n}\n\npn-charts-card[data-chart-color='green'] {\n & > .pn-charts-card__wrapper {\n background-color: $green50;\n }\n}\n\npn-charts-card[data-chart-color='white'] {\n & > .pn-charts-card__wrapper {\n background-color: $white;\n }\n}\n\npn-charts-card[data-chart-color='gray'] {\n & > .pn-charts-card__wrapper {\n background-color: $gray25;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-charts-card',\n styleUrl: 'pn-charts-card.scss',\n})\nexport class PnChartsCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() header: string;\n @Prop() highlight: string;\n @Prop() preamble: string;\n @Prop() label: string;\n @Prop() source: string;\n @Prop() sourceUrl: string;\n @Prop() ctaLinkText: string;\n @Prop() openInNewWindow: boolean = false;\n\n showCtaLinkText = () => {\n if (this.ctaLinkText) {\n return (\n <a class=\"link--animated\" href={this.sourceUrl} rel={this.openInNewWindow ? 'noopener nofollower noreferrer' : null} target={this.openInNewWindow ? '_blank' : null}>\n {this.ctaLinkText} <pn-icon icon={arrow_right}> </pn-icon>\n </a>\n );\n }\n return null;\n };\n\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-charts-card__wrapper\">\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical\">\n <div class=\"pn-charts-card__heading\">{this.header}</div>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n\n <div class=\"pn-charts-card__content__wrapper\">\n <slot name=\"chart\"></slot>\n <div class=\"pn-charts-card__text__container\">\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal\">\n <div class=\"pn-charts-card__heading pn-charts-card__heading\">{this.header}</div>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n <span class=\"pn-charts-card__preamble\">{this.preamble}</span>\n <div class=\"pn-charts-card__text__wrapper\">\n <div class=\"pn-charts-card__source\">\n <label>{this.label}</label>\n <h3 class=\"pn-chart-card__text__heading\">{this.source}</h3>\n {this.showCtaLinkText()}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-charts-card.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,s+JAAs+J,CAAC;AAC//J,2BAAe,eAAe;;MCMjBA,cAAY;;;;;;;;;;;+BAUY,KAAK;;;IAExC,eAAe,GAAG;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,QACE,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,GAAG,gCAAgC,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,GAAG,QAAQ,GAAG,IAAI,IAChK,IAAI,CAAC,WAAW,OAAE,eAAS,IAAI,EAAE,WAAW,QAAa,CACxD,EACJ;SACH;QACD,OAAO,IAAI,CAAC;KACb,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,6EAA6E,IACtF,4DAAK,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAO,EACxD,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,EAEN,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,4DAAK,KAAK,EAAC,+EAA+E,IACxF,4DAAK,KAAK,EAAC,iDAAiD,IAAE,IAAI,CAAC,MAAM,CAAO,EAChF,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,EACN,6DAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC7D,4DAAK,KAAK,EAAC,+BAA+B,IACxC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC3B,2DAAI,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,MAAM,CAAM,EAC1D,IAAI,CAAC,eAAe,EAAE,CACnB,CACF,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnChartsCard"],"sources":["src/components/charts/pn-charts-card/pn-charts-card.scss?tag=pn-charts-card","src/components/charts/pn-charts-card/pn-charts-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-charts-card {\n width: 100%;\n height: 100%;\n display: flex;\n\n .pn-charts-card__wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n\n border-radius: 2.4rem;\n padding: 2.4rem;\n\n @media screen and (min-width: 1200px) {\n padding: 3.2rem;\n }\n }\n\n .pn-charts-card__heading__wrapper {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: 0.8rem;\n }\n\n .pn-charts-card__heading {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 110%;\n\n @media screen and (min-width: 1640px) {\n font-size: 3.2rem;\n }\n }\n\n .pn-charts-card__heading__highlight {\n font-weight: 700;\n font-size: 2.4rem;\n line-height: 110%;\n color: $blue700;\n\n @media screen and (min-width: 1640px) {\n font-size: 3.2rem;\n }\n }\n\n .pn-charts-card__content__wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .pn-charts-card__text__container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n }\n\n .pn-charts-card__heading__wrapper--horizontal {\n display: none;\n }\n\n .pn-charts-card__text__wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n span {\n display: block;\n margin-bottom: 5.4rem;\n }\n }\n\n .pn-charts-card__preamble {\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 140%;\n flex-grow: 1;\n margin-bottom: 1.6rem;\n\n @media screen and (min-width: 1640px) {\n font-size: 2rem;\n }\n }\n\n .pn-charts-card__source {\n display: flex;\n flex-direction: column;\n\n label {\n background-color: $blue400;\n color: $white;\n border-radius: 0.4rem;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1;\n text-transform: uppercase;\n padding: 0.4rem;\n margin-bottom: 0.6rem;\n width: fit-content;\n\n @media screen and (min-width: 1640px) {\n font-size: 1.2rem;\n padding: 0.6rem;\n }\n }\n\n .pn-chart-card__text__heading {\n font-weight: 400;\n font-size: 1.6rem;\n line-height: 140%;\n color: $blue700;\n margin-bottom: 0;\n\n @media screen and (min-width: 1640px) {\n font-size: 2rem;\n }\n }\n\n a {\n text-decoration: none;\n color: $blue700;\n &:hover {\n text-decoration: underline;\n }\n\n font-weight: 500;\n font-size: 1.6rem;\n text-decoration: none;\n color: $blue700;\n font-weight: 400;\n\n @media screen and (min-width: 1640px) {\n font-size: 2rem;\n }\n\n pn-icon svg {\n path {\n fill: $blue700;\n }\n }\n\n &[target='_blank']:not(.pn-button):after {\n display: none;\n }\n }\n }\n}\n\n//horizontal layout\n.fullwidth {\n & > pn-charts-card {\n .pn-charts-card__wrapper {\n padding: 2.4rem;\n @media screen and (min-width: 992px) {\n padding: 4rem;\n }\n }\n\n .pn-charts-card__heading__wrapper {\n margin-bottom: 3.2rem;\n @media screen and (min-width: 768px) {\n justify-content: flex-start;\n }\n\n gap: 1.6rem;\n }\n\n .pn-charts-card__heading,\n .pn-charts-card__heading__highlight {\n font-size: 2.4rem;\n @media screen and (min-width: 768px) {\n font-size: 3.2rem;\n }\n }\n\n .pn-charts-card__content__wrapper {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media screen and (min-width: 992px) {\n flex-direction: row-reverse;\n gap: 5.6rem;\n }\n\n @media screen and (min-width: 1200px) {\n gap: 4rem;\n }\n\n @media screen and (min-width: 1640px) {\n gap: 3.2rem;\n }\n }\n\n .pn-charts-card__text__container {\n justify-content: center;\n @media screen and (min-width: 768px) {\n width: 100%;\n }\n }\n\n .pn-charts-card__heading__wrapper--vertical {\n display: flex;\n\n @media screen and (min-width: 992px) {\n display: none;\n }\n }\n\n .pn-charts-card__heading__wrapper--horizontal {\n display: none;\n @media screen and (min-width: 992px) {\n display: flex;\n }\n }\n\n .pn-charts-card__preamble {\n @media screen and (min-width: 768px) {\n flex-grow: 0;\n font-size: 2rem;\n }\n }\n }\n}\n\n//colors\npn-charts-card[data-chart-color='blue'] {\n & > .pn-charts-card__wrapper {\n background-color: $blue25;\n }\n}\n\npn-charts-card[data-chart-color='coral'] {\n & > .pn-charts-card__wrapper {\n background-color: $coral50;\n }\n}\n\npn-charts-card[data-chart-color='green'] {\n & > .pn-charts-card__wrapper {\n background-color: $green50;\n }\n}\n\npn-charts-card[data-chart-color='white'] {\n & > .pn-charts-card__wrapper {\n background-color: $white;\n }\n}\n\npn-charts-card[data-chart-color='gray'] {\n & > .pn-charts-card__wrapper {\n background-color: $gray25;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-charts-card',\n styleUrl: 'pn-charts-card.scss',\n})\nexport class PnChartsCard {\n @Element() hostElement: HTMLElement;\n //props\n @Prop() header: string;\n @Prop() highlight: string;\n @Prop() preamble: string;\n @Prop() label: string;\n @Prop() source: string;\n @Prop() sourceUrl: string;\n @Prop() ctaLinkText: string;\n @Prop() openInNewWindow: boolean = false;\n\n showCtaLinkText = () => {\n if (this.ctaLinkText) {\n return (\n <a class=\"link--animated\" href={this.sourceUrl} rel={this.openInNewWindow ? 'noopener nofollower noreferrer' : null} target={this.openInNewWindow ? '_blank' : null}>\n {this.ctaLinkText} <pn-icon icon={arrow_right}> </pn-icon>\n </a>\n );\n }\n return null;\n };\n\n render() {\n return (\n <Host>\n <slot name=\"clickable-block-wrapper\" />\n <div class=\"pn-charts-card__wrapper\">\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical\">\n <div class=\"pn-charts-card__heading\">{this.header}</div>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n\n <div class=\"pn-charts-card__content__wrapper\">\n <slot name=\"chart\"></slot>\n <div class=\"pn-charts-card__text__container\">\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal\">\n <div class=\"pn-charts-card__heading pn-charts-card__heading\">{this.header}</div>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n <span class=\"pn-charts-card__preamble\">{this.preamble}</span>\n <div class=\"pn-charts-card__text__wrapper\">\n <div class=\"pn-charts-card__source\">\n <label>{this.label}</label>\n <h3 class=\"pn-chart-card__text__heading\">{this.source}</h3>\n {this.showCtaLinkText()}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-choice-button2.js CHANGED Viewed

@@ -15,6 +15,7 @@ const PnChoiceButton = /*@__PURE__*/ proxyCustomElement(class PnChoiceButton ext
         this.checked = false;
         this.indeterminate = false;
     }
+    get hostElement() { return this; }
     handlechange() {
         this.indeterminate = false;
     }
@@ -33,7 +34,6 @@ const PnChoiceButton = /*@__PURE__*/ proxyCustomElement(class PnChoiceButton ext
     render() {
         return (h(Host, { key: 'ee8c0f187d6ef73fb0686269fef381f272ae0d7e' }, h("input", { key: '3849a4c37e9182114136854f445fbf0af6852c9c', type: this.type, id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }), h("label", { key: '5aab99882ff06ac9d8583e6d0c7034cc611a0d0f', htmlFor: this.choiceid, class: "pn-choice-button" }, h("slot", { key: 'f42d62b727b8c570712cf95d0d20f96dd5707de6' }))));
     }
-    get hostElement() { return this; }
     static get style() { return PnChoiceButtonStyle0; }
 }, [4, "pn-choice-button", {
         "value": [520],

package/components/pn-choice-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-choice-button2.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+9CAA+9C,CAAC;AAC1/C,6BAAe,iBAAiB;;MCKnB,cAAc;;;;;;;oBASF,UAAU;wBACJ,KAAK;uBACN,KAAK;6BACkB,KAAK;;IAKxD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,gBAAgB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,kBAAkB;QAChB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,6BAA6B;QAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAqB,CAAC;QAEvF,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAClJ,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACrD,8DAAQ,CACF,CACH,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/input/pn-choice-button/pn-choice-button.scss?tag=pn-choice-button","src/components/input/pn-choice-button/pn-choice-button.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$check-timing: 180ms;\n$bg-timing: 220ms;\n$easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);\n\npn-choice-button {\n user-select: none;\n border: none;\n display: inline-block;\n background: #fff;\n position: relative;\n margin: 0.2em 0.4em;\n\n input {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n margin: 0;\n width: 100%;\n height: 100%;\n }\n\n label {\n display: flex;\n align-items: center;\n padding: 0.4rem 0.8rem;\n border: 0.1rem solid $gray200;\n color: $blue700;\n font-weight: 500;\n border-radius: 0.8rem;\n text-align: center;\n cursor: pointer;\n transition:\n box-shadow 0.1s,\n background 0.2s;\n\n pn-illustration {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n margin-right: 0.9rem;\n }\n }\n}\n\npn-choice-button > input {\n &:checked + label.pn-choice-button {\n background: $blue50;\n color: $blue700;\n border-color: $blue700;\n box-shadow:\n 0px 0.6px 1.8px rgba(0, 0, 0, 0.1),\n 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);\n }\n &:indeterminate + label.pn-choice-button {\n background: $white;\n color: $blue700;\n }\n\n &:hover + label.pn-choice-button {\n background: $blue50;\n }\n\n &:focus + label.pn-choice-button,\n &:active + label.pn-choice-button {\n box-shadow:\n 0 0 0 0.2rem #fff,\n 0 0 0 0.4rem $blue700;\n }\n\n &:active + label.pn-choice-button {\n background: $blue200;\n }\n\n &:disabled + label.pn-choice-button {\n background-color: $gray200;\n }\n\n &:checked + label.pn-choice-button:hover {\n background: $blue200;\n }\n\n &:checked + label.pn-choice-button:active {\n background: $blue200;\n border: 0.1rem solid $blue400;\n }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pn-choice-button',\n styleUrl: 'pn-choice-button.scss',\n})\nexport class PnChoiceButton {\n /** This will be emitted on change and input /\n @Prop({ reflect: true }) value: any;\n /* The name of the checkbox group /\n @Prop() name?: string;\n /* The string you put here will be what you'd make the ID of a native checkbox, you can't name props \"id\" because it's reserved\n * so we went with the more descriptive name \"choice\", if you want to create labels for your checkbox, you will bind it to this ID\n */\n @Prop() choiceid: string;\n @Prop() type: string = 'checkbox';\n @Prop() disabled?: boolean = false;\n @Prop() checked?: boolean = false;\n @Prop({ mutable: true }) indeterminate?: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n @Listen('change')\n handlechange() {\n this.indeterminate = false;\n }\n\n componentDidLoad() {\n this.checkAndSetIndeterminateState();\n }\n\n componentDidUpdate() {\n this.checkAndSetIndeterminateState();\n }\n\n checkAndSetIndeterminateState() {\n let checkbox = this.hostElement.querySelector(`#${this.choiceid}`) as HTMLInputElement;\n\n if (checkbox) {\n checkbox.indeterminate = this.indeterminate;\n }\n }\n\n render() {\n return (\n <Host>\n <input type={this.type} id={this.choiceid} value={this.value} name={this.name \|\| this.choiceid} disabled={this.disabled} checked={this.checked} />\n <label htmlFor={this.choiceid} class=\"pn-choice-button\">\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-choice-button2.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+9CAA+9C,CAAC;AAC1/C,6BAAe,iBAAiB;;MCKnB,cAAc;;;;;;;oBASF,UAAU;wBACJ,KAAK;uBACN,KAAK;6BACkB,KAAK;;;IAKxD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IAED,gBAAgB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,kBAAkB;QAChB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;IAED,6BAA6B;QAC3B,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAqB,CAAC;QAEvF,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAClJ,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACrD,8DAAQ,CACF,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input/pn-choice-button/pn-choice-button.scss?tag=pn-choice-button","src/components/input/pn-choice-button/pn-choice-button.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\n$check-timing: 180ms;\n$bg-timing: 220ms;\n$easing: cubic-bezier(0.79, 0.14, 0.15, 0.86);\n\npn-choice-button {\n user-select: none;\n border: none;\n display: inline-block;\n background: #fff;\n position: relative;\n margin: 0.2em 0.4em;\n\n input {\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n margin: 0;\n width: 100%;\n height: 100%;\n }\n\n label {\n display: flex;\n align-items: center;\n padding: 0.4rem 0.8rem;\n border: 0.1rem solid $gray200;\n color: $blue700;\n font-weight: 500;\n border-radius: 0.8rem;\n text-align: center;\n cursor: pointer;\n transition:\n box-shadow 0.1s,\n background 0.2s;\n\n pn-illustration {\n display: inline-block;\n width: 3rem;\n height: 3rem;\n margin-right: 0.9rem;\n }\n }\n}\n\npn-choice-button > input {\n &:checked + label.pn-choice-button {\n background: $blue50;\n color: $blue700;\n border-color: $blue700;\n box-shadow:\n 0px 0.6px 1.8px rgba(0, 0, 0, 0.1),\n 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);\n }\n &:indeterminate + label.pn-choice-button {\n background: $white;\n color: $blue700;\n }\n\n &:hover + label.pn-choice-button {\n background: $blue50;\n }\n\n &:focus + label.pn-choice-button,\n &:active + label.pn-choice-button {\n box-shadow:\n 0 0 0 0.2rem #fff,\n 0 0 0 0.4rem $blue700;\n }\n\n &:active + label.pn-choice-button {\n background: $blue200;\n }\n\n &:disabled + label.pn-choice-button {\n background-color: $gray200;\n }\n\n &:checked + label.pn-choice-button:hover {\n background: $blue200;\n }\n\n &:checked + label.pn-choice-button:active {\n background: $blue200;\n border: 0.1rem solid $blue400;\n }\n}\n","import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';\n\n@Component({\n tag: 'pn-choice-button',\n styleUrl: 'pn-choice-button.scss',\n})\nexport class PnChoiceButton {\n /** This will be emitted on change and input /\n @Prop({ reflect: true }) value: any;\n /* The name of the checkbox group /\n @Prop() name?: string;\n /* The string you put here will be what you'd make the ID of a native checkbox, you can't name props \"id\" because it's reserved\n * so we went with the more descriptive name \"choice\", if you want to create labels for your checkbox, you will bind it to this ID\n */\n @Prop() choiceid: string;\n @Prop() type: string = 'checkbox';\n @Prop() disabled?: boolean = false;\n @Prop() checked?: boolean = false;\n @Prop({ mutable: true }) indeterminate?: boolean = false;\n\n @Element() hostElement: HTMLElement;\n\n @Listen('change')\n handlechange() {\n this.indeterminate = false;\n }\n\n componentDidLoad() {\n this.checkAndSetIndeterminateState();\n }\n\n componentDidUpdate() {\n this.checkAndSetIndeterminateState();\n }\n\n checkAndSetIndeterminateState() {\n let checkbox = this.hostElement.querySelector(`#${this.choiceid}`) as HTMLInputElement;\n\n if (checkbox) {\n checkbox.indeterminate = this.indeterminate;\n }\n }\n\n render() {\n return (\n <Host>\n <input type={this.type} id={this.choiceid} value={this.value} name={this.name \|\| this.choiceid} disabled={this.disabled} checked={this.checked} />\n <label htmlFor={this.choiceid} class=\"pn-choice-button\">\n <slot />\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-cta-block.js CHANGED Viewed

@@ -15,6 +15,7 @@ const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class PnCtaBlock extends H
         this.isSmall = false;
         this.contentTop = false;
     }
+    get hostElement() { return this; }
     render() {
         const hasImage = this.hostElement.querySelector('[slot="illustration"]');
         const hasButtons = this.hostElement.querySelector('[slot="cta-buttons"]');
@@ -23,7 +24,6 @@ const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class PnCtaBlock extends H
             h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)) : null, (hasButtons ?
             h("div", { class: "cta-block__action" }, h("slot", { name: "cta-buttons" })) : null))));
     }
-    get hostElement() { return this; }
     static get style() { return PnCtaBlockStyle0; }
 }, [4, "pn-cta-block", {
         "heading": [1],

package/components/pn-cta-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-cta-block.js","mappings":";;AAAA,MAAM,aAAa,GAAG,k0IAAk0I,CAAC;AACz1I,yBAAe,aAAa;;MCKfA,YAAU;;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACE,EAAC,IAAI,uDACH,mFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACR,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEd,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;YAC7B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,UAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,EAClD,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,CAC1C,GAAG,IAAI,GAEb,UAAU;YACV,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["PnCtaBlock"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\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}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-cta-block',\n styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() bodyText: string = null;\n\n @Prop() pnBackgroundColor: string = null;\n\n @Prop() isLarge: boolean = false;\n @Prop() isCentered: boolean = false;\n @Prop() isSmall: boolean = false;\n @Prop() contentTop: boolean = false;\n\n render() {\n const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n return (\n <Host>\n <div pn-background-color={this.pnBackgroundColor} class={`cta-block ${this.isLarge ? 'cta-block--large' : ''} ${this.isCentered ? 'cta-block--center' : ''} ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}`}>\n {(hasImage ?\n <div class=\"cta-block__image-wrapper\">\n <slot name=\"illustration\" />\n </div> : null\n )}\n {(this.heading && this.bodyText)?\n <div class=\"cta-block__content\">\n <h2 class=\"cta-block__heading\">{this.heading}</h2>\n <p class=\"cta-block__text\">{this.bodyText}</p>\n </div> : null\n }\n {(hasButtons ?\n <div class=\"cta-block__action\">\n <slot name=\"cta-buttons\" />\n </div> : null\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-cta-block.js","mappings":";;AAAA,MAAM,aAAa,GAAG,k0IAAk0I,CAAC;AACz1I,yBAAe,aAAa;;MCKfA,YAAU;;;;uBAGK,IAAI;wBACH,IAAI;iCAEK,IAAI;uBAEb,KAAK;0BACF,KAAK;uBACR,KAAK;0BACF,KAAK;;;IAEnC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC1E,QACE,EAAC,IAAI,uDACH,mFAA0B,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,mBAAmB,GAAG,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,kBAAkB,GAAG,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,wBAAwB,GAAG,EAAE,EAAE,KACzP,QAAQ;YACR,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEd,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;YAC7B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,UAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,EAClD,SAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,CAC1C,GAAG,IAAI,GAEb,UAAU;YACV,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PnCtaBlock"],"sources":["src/components/cta/pn-cta-block/pn-cta-block.scss?tag=pn-cta-block","src/components/cta/pn-cta-block/pn-cta-block.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-cta-block {\n display: flex;\n justify-content: center;\n\n .cta-block {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n border-radius: 2.4rem;\n padding: 3.2rem 2.4rem;\n width: 100%;\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: 1140px) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: 1440px) {\n max-width: 90%;\n }\n\n &[pn-background-color='blue25'] {\n background-color: $blue25;\n }\n\n &[pn-background-color='coral50'] {\n background-color: $coral50;\n }\n\n &[pn-background-color='gray25'] {\n background-color: $gray25;\n }\n\n &[pn-background-color='green25'] {\n background-color: $green25;\n }\n\n &[pn-background-color='transparent'] {\n padding: 0 3.2rem;\n }\n }\n\n .cta-block--content-top {\n .cta-block__content {\n justify-content: flex-start;\n }\n }\n\n .cta-block--large {\n .cta-block__heading {\n @media screen and (min-width: 768px) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: 768px) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:992px) {\n display: inline-flex;\n max-width: 75%;\n\n &.cta-block--center {\n max-width: 66%;\n }\n }\n }\n\n .cta-block--center {\n align-items: center;\n flex-direction: column;\n gap: 1.6rem;\n text-align: center;\n\n @media screen and (min-width:768px) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: 768px) {\n max-width: 74rem;\n padding: 0;\n }\n }\n\n .cta-block__action {\n margin-top: 0.8rem;\n\n &>[slot='cta-button'] {\n gap: 0.8rem;\n }\n\n @media screen and (min-width: 768px) {\n flex-direction: row;\n gap: 2.4rem;\n margin-top: 1.6rem;\n\n &.cta-block__button {\n margin-bottom: 0;\n }\n\n &>[slot='cta-buttons'] {\n flex-direction: row;\n align-items: center;\n gap: 2.4rem;\n }\n }\n }\n\n .cta-block__image-wrapper {\n @media screen and (min-width: 768px) {\n display: block;\n }\n\n & > [slot='illustration'] {\n padding-right: 0;\n }\n }\n\n .cta-block__text {\n margin-bottom: 0 !important;\n }\n }\n\n .cta-block__image-wrapper {\n margin-bottom: 1.6rem;\n\n &>[slot='illustration'] {\n &>picture>img {\n border-radius: 0.8rem;\n max-width: 100%;\n }\n }\n\n @media screen and (min-width:768px) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: 992px) {\n display: block;\n margin-bottom: 0;\n\n & > [slot='illustration'] {\n padding-right: 3.2rem;\n }\n }\n }\n\n .cta-block__content {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n\n @media screen and (min-width: 768px) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width:768px) {\n max-width: 74rem;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: 768px) {\n margin-bottom: 0;\n }\n }\n }\n\n .cta-block__heading {\n margin-bottom: 0.8rem;\n }\n\n .cta-block__action {\n display: flex;\n\n &>[slot='cta-buttons'] {\n display: flex;\n flex-direction: column;\n row-gap: 1.6rem;\n flex: 1;\n\n @media screen and (min-width:768px) {\n align-items: flex-end;\n justify-content: center;\n gap: 1.6rem;\n margin-top: 0;\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}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'pn-cta-block',\n styleUrl: 'pn-cta-block.scss',\n})\nexport class PnCtaBlock {\n @Element() hostElement: HTMLElement;\n\n @Prop() heading: string = null;\n @Prop() bodyText: string = null;\n\n @Prop() pnBackgroundColor: string = null;\n\n @Prop() isLarge: boolean = false;\n @Prop() isCentered: boolean = false;\n @Prop() isSmall: boolean = false;\n @Prop() contentTop: boolean = false;\n\n render() {\n const hasImage = this.hostElement.querySelector('[slot=\"illustration\"]');\n const hasButtons = this.hostElement.querySelector('[slot=\"cta-buttons\"]');\n return (\n <Host>\n <div pn-background-color={this.pnBackgroundColor} class={`cta-block ${this.isLarge ? 'cta-block--large' : ''} ${this.isCentered ? 'cta-block--center' : ''} ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}`}>\n {(hasImage ?\n <div class=\"cta-block__image-wrapper\">\n <slot name=\"illustration\" />\n </div> : null\n )}\n {(this.heading && this.bodyText)?\n <div class=\"cta-block__content\">\n <h2 class=\"cta-block__heading\">{this.heading}</h2>\n <p class=\"cta-block__text\">{this.bodyText}</p>\n </div> : null\n }\n {(hasButtons ?\n <div class=\"cta-block__action\">\n <slot name=\"cta-buttons\" />\n </div> : null\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-customernumber-selector-option.js CHANGED Viewed

@@ -11,10 +11,10 @@ const PnProfileSelectorOption = /*@__PURE__*/ proxyCustomElement(class PnProfile
         this.description = '';
         this.url = '';
     }
+    get hostElement() { return this; }
     render() {
         return (h(Host, { key: 'd172e0800706cc597ae98251949b82126972a947' }, h("a", { key: '424a253bd2ff08411698484e2dacaeb5395ad23e', class: "customernumberoption", href: this.url }, h("span", { key: '3f4abf7c9db59ba1b6e8c3d517e59d002cbecdb7', class: "customernumberoption-text" }, h("span", { key: 'be944d80224df353672d0070cdf906e18c261c7b', class: "customernumberoption-title" }, this.heading), h("span", { key: '9d59a2f8f79344cdaf487896a66981f3fc52ff39', class: "customernumberoption-description" }, this.description), h("slot", { key: '9afd978a36634da1143190318f70521c5166ac53' })))));
     }
-    get hostElement() { return this; }
     static get style() { return PnCustomernumberSelectorOptionStyle0; }
 }, [4, "pn-customernumber-selector-option", {
         "heading": [1],

package/components/pn-customernumber-selector-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-customernumber-selector-option.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,qxBAAqxB,CAAC;AACh0B,6CAAe,iCAAiC;;MCInC,uBAAuB;;;;uBAGR,EAAE;2BACE,EAAE;mBACV,EAAE;;IAExB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0DAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5C,6DAAM,KAAK,EAAC,2BAA2B,IACrC,6DAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC9D,6DAAM,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,WAAW,CAAQ,EACxE,8DAAQ,CACH,CACL,CACC,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.scss?tag=pn-customernumber-selector-option","src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-customernumber-selector-option {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n &:last-of-type {\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n }\n}\n.customernumberoption {\n overflow: hidden;\n max-width: 100%;\n text-decoration: none;\n background: $white;\n transition: background 0.15s ease;\n padding: 1.6rem 1rem;\n &:hover,\n &:focus,\n &:active {\n background: $blue50;\n text-decoration: none;\n }\n}\n.customernumberoption-text {\n font-weight: 700;\n color: $gray900;\n}\n\n.customernumberoption-title {\n display: block;\n font-size: 1em;\n color: $blue700;\n font-weight: 700;\n}\n\n.customernumberoption-description {\n font-size: 0.75em;\n color: $gray700;\n font-weight: normal;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\n@Component({\n tag: 'pn-customernumber-selector-option',\n styleUrl: 'pn-customernumber-selector-option.scss',\n})\nexport class PnProfileSelectorOption {\n @Element() hostElement: Element;\n\n @Prop() heading: string = '';\n @Prop() description: string = '';\n @Prop() url: string = '';\n\n render() {\n return (\n <Host>\n <a class=\"customernumberoption\" href={this.url}>\n <span class=\"customernumberoption-text\">\n <span class=\"customernumberoption-title\">{this.heading}</span>\n <span class=\"customernumberoption-description\">{this.description}</span>\n <slot />\n </span>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-customernumber-selector-option.js","mappings":";;AAAA,MAAM,iCAAiC,GAAG,qxBAAqxB,CAAC;AACh0B,6CAAe,iCAAiC;;MCInC,uBAAuB;;;;uBAGR,EAAE;2BACE,EAAE;mBACV,EAAE;;;IAExB,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,0DAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5C,6DAAM,KAAK,EAAC,2BAA2B,IACrC,6DAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC9D,6DAAM,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,WAAW,CAAQ,EACxE,8DAAQ,CACH,CACL,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.scss?tag=pn-customernumber-selector-option","src/components/profile/pn-customernumber-selector/pn-customernumber-selector-option.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-customernumber-selector-option {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n &:last-of-type {\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n }\n}\n.customernumberoption {\n overflow: hidden;\n max-width: 100%;\n text-decoration: none;\n background: $white;\n transition: background 0.15s ease;\n padding: 1.6rem 1rem;\n &:hover,\n &:focus,\n &:active {\n background: $blue50;\n text-decoration: none;\n }\n}\n.customernumberoption-text {\n font-weight: 700;\n color: $gray900;\n}\n\n.customernumberoption-title {\n display: block;\n font-size: 1em;\n color: $blue700;\n font-weight: 700;\n}\n\n.customernumberoption-description {\n font-size: 0.75em;\n color: $gray700;\n font-weight: normal;\n}\n","import { Component, Prop, h, State, Element, Host } from '@stencil/core';\n@Component({\n tag: 'pn-customernumber-selector-option',\n styleUrl: 'pn-customernumber-selector-option.scss',\n})\nexport class PnProfileSelectorOption {\n @Element() hostElement: Element;\n\n @Prop() heading: string = '';\n @Prop() description: string = '';\n @Prop() url: string = '';\n\n render() {\n return (\n <Host>\n <a class=\"customernumberoption\" href={this.url}>\n <span class=\"customernumberoption-text\">\n <span class=\"customernumberoption-title\">{this.heading}</span>\n <span class=\"customernumberoption-description\">{this.description}</span>\n <slot />\n </span>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-customernumber-selector.js CHANGED Viewed

@@ -40,6 +40,7 @@ const PnCustomernumberSelector$1 = /*@__PURE__*/ proxyCustomElement(class PnCust
         this.description = '';
         this.i18n = translations['en'];
     }
+    get hostElement() { return this; }
     componentWillLoad() {
         this.init();
     }
@@ -54,7 +55,6 @@ const PnCustomernumberSelector$1 = /*@__PURE__*/ proxyCustomElement(class PnCust
     render() {
         return (h(Host, { key: 'ef400ae5ab8e698c589b47677ef66e4b19829a00' }, h("div", { key: 'c362270259d27d1cc68cc04b3ee88d43896a5d9e', class: "customernumber-container" }, h("button", { key: 'b03977829c105c3585f163f10527cff66b011fbe', class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => (this.open = !this.open) }, h("div", { key: '6383ccd2ca068d8baad92c5ffb8bab7467b7a470', class: "customernumber-selected" }, h("strong", { key: 'e630dc6e0aac2eeeb17e30dad8a5a4fc70b763f7', class: "customernumber-selected-title" }, this.heading), h("div", { key: '4ea4e6b7dfc3d215322d860ed74402328c57e5ae', class: "customernumber-selected-description" }, this.description)), h("pn-icon", { key: '0fee747fe17bc7654d5861cc0e4c7285edc6914a', icon: this.open ? angle_up : angle_down, small: "false", color: "blue700" })), h("div", { key: 'e5da61be4dcb5a2f78b438ffe7ad023abea33a8b', class: "customernumber-options" }, h("slot", { key: '38464c4f6edf1547c8c8b2f93ded8aec53a8527a' })))));
     }
-    get hostElement() { return this; }
     static get style() { return PnCustomernumberSelectorStyle0; }
 }, [4, "pn-customernumber-selector", {
         "language": [1537],

package/components/pn-customernumber-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-customernumber-selector.js","mappings":";;AAAA,MAAMA,MAAI,GAAG,4QAA4Q,CAAC;AACnR,MAAM,UAAU,GAAGA,MAAI;;ACD9B,MAAM,IAAI,GAAG,0QAA0Q,CAAC;AACjR,MAAM,QAAQ,GAAG,IAAI;;ACDrB,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,mBAAmB,EAAE,iBAAiB;KACvC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,wBAAwB;KAC9C;CACF;;ACnBD,MAAM,2BAA2B,GAAG,m4CAAm4C,CAAC;AACx6C,uCAAe,2BAA2B;;MCU7BC,0BAAwB;;;;wBAGwB,IAAI;oBACP,KAAK;uBAEnC,EAAE;2BACE,EAAE;oBAEY,YAAY,CAAC,IAAI,CAAC;;IAE9D,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,IAAI;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,+DAAQ,KAAK,EAAC,uBAAuB,gBAAa,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACtH,4DAAK,KAAK,EAAC,yBAAyB,IAClC,+DAAQ,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,OAAO,CAAU,EACrE,4DAAK,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,WAAW,CAAO,CACrE,EACN,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC3E,EACT,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAQ,CACJ,CACF,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["icon","PnCustomernumberSelector"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js","node_modules/pn-design-assets/pn-assets/icons/angle_up.js","src/components/profile/pn-customernumber-selector/translations.ts","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.scss?tag=pn-customernumber-selector","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M11.293 7.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1-1.414 1.414L12 9.414l-7.293 7.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_up = icon;\nexport const angleUp = icon;\n","export const translations = {\n sv: {\n toggleLinkTitleText: `Välj kundnummer`,\n },\n en: {\n toggleLinkTitleText: `Choose customernumber`,\n },\n da: {\n toggleLinkTitleText: `Vælg kundenummer`,\n },\n no: {\n toggleLinkTitleText: `Velg kundenummer`,\n },\n fi: {\n toggleLinkTitleText: `Valitse asiakasnumero`,\n },\n de: {\n toggleLinkTitleText: `Kundennummer auswählen`,\n },\n};\n","@import '../../../globals/main.scss';\n\npn-customernumber-selector {\n}\n\n.customernumber-container {\n position: relative;\n padding: 0;\n\n display: flex;\n flex-direction: column;\n border-radius: 0.8rem;\n border: 0.1rem solid $gray400;\n transition: border 0.15s ease;\n &:hover,\n pn-customernumber-selector[open] & {\n border-color: $blue700;\n }\n\n pn-customernumber-selector[open] & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n.customernumber-toggle {\n display: flex;\n z-index: 11;\n position: relative;\n margin: 0;\n border-radius: 0.8rem;\n padding: 1rem;\n border: 0;\n background: transparent;\n font-size: 1em;\n text-align: left;\n outline: 0;\n cursor: pointer;\n\n pn-icon {\n align-self: center;\n }\n}\n\n.customernumber-selected {\n flex-grow: 1;\n max-width: calc(100% - 2.4rem);\n overflow: hidden;\n}\n\n.customernumber-selected-title {\n color: $blue700;\n}\n\n.customernumber-selected-description {\n font-size: 0.875em;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.customernumber-options {\n position: absolute;\n z-index: 10;\n left: -0.1rem;\n right: -0.1rem;\n top: 100%;\n border: 0.1rem solid $blue700;\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n\n pn-customernumber-selector[open] & {\n opacity: 1;\n transition-delay: 0s;\n max-height: 500rem;\n }\n max-height: 0;\n opacity: 0;\n transform-origin: top left;\n transition:\n transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s,\n opacity 0.1s linear,\n max-height 0.1s ease;\n overflow-y: auto;\n}\n","import { Component, Prop, h, State, Element, Listen, Watch, Host, Event, EventEmitter } from '@stencil/core';\nimport { translations } from './translations';\nimport { CustomernumberSelectori18n } from './pn-customernumber-selector-types';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';\nimport { angle_down, angle_up } from \"pn-design-assets/pn-assets/icons\";\n\n@Component({\n tag: 'pn-customernumber-selector',\n styleUrl: 'pn-customernumber-selector.scss',\n})\nexport class PnCustomernumberSelector {\n @Element() hostElement: Element;\n\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n @Prop() heading: string = '';\n @Prop() description: string = '';\n\n @State() i18n: CustomernumberSelectori18n = translations['en'];\n\n componentWillLoad() {\n this.init();\n }\n\n init() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"customernumber-container\">\n <button class=\"customernumber-toggle\" aria-label={this.i18n.toggleLinkTitleText} onClick={() => (this.open = !this.open)}>\n <div class=\"customernumber-selected\">\n <strong class=\"customernumber-selected-title\">{this.heading}</strong>\n <div class=\"customernumber-selected-description\">{this.description}</div>\n </div>\n <pn-icon icon={this.open ? angle_up : angle_down} small=\"false\" color=\"blue700\" />\n </button>\n <div class=\"customernumber-options\">\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-customernumber-selector.js","mappings":";;AAAA,MAAMA,MAAI,GAAG,4QAA4Q,CAAC;AACnR,MAAM,UAAU,GAAGA,MAAI;;ACD9B,MAAM,IAAI,GAAG,0QAA0Q,CAAC;AACjR,MAAM,QAAQ,GAAG,IAAI;;ACDrB,MAAM,YAAY,GAAG;IAC1B,EAAE,EAAE;QACF,mBAAmB,EAAE,iBAAiB;KACvC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,kBAAkB;KACxC;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,uBAAuB;KAC7C;IACD,EAAE,EAAE;QACF,mBAAmB,EAAE,wBAAwB;KAC9C;CACF;;ACnBD,MAAM,2BAA2B,GAAG,m4CAAm4C,CAAC;AACx6C,uCAAe,2BAA2B;;MCU7BC,0BAAwB;;;;wBAGwB,IAAI;oBACP,KAAK;uBAEnC,EAAE;2BACE,EAAE;oBAEY,YAAY,CAAC,IAAI,CAAC;;;IAE9D,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,IAAI;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,eAAe;QACb,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChD,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,0BAA0B,IACnC,+DAAQ,KAAK,EAAC,uBAAuB,gBAAa,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACtH,4DAAK,KAAK,EAAC,yBAAyB,IAClC,+DAAQ,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,OAAO,CAAU,EACrE,4DAAK,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,WAAW,CAAO,CACrE,EACN,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC3E,EACT,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["icon","PnCustomernumberSelector"],"sources":["node_modules/pn-design-assets/pn-assets/icons/angle_down.js","node_modules/pn-design-assets/pn-assets/icons/angle_up.js","src/components/profile/pn-customernumber-selector/translations.ts","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.scss?tag=pn-customernumber-selector","src/components/profile/pn-customernumber-selector/pn-customernumber-selector.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.707 16.707a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 1.414-1.414L12 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_down = icon;\nexport const angleDown = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M11.293 7.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1-1.414 1.414L12 9.414l-7.293 7.293a1 1 0 0 1-1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const angle_up = icon;\nexport const angleUp = icon;\n","export const translations = {\n sv: {\n toggleLinkTitleText: `Välj kundnummer`,\n },\n en: {\n toggleLinkTitleText: `Choose customernumber`,\n },\n da: {\n toggleLinkTitleText: `Vælg kundenummer`,\n },\n no: {\n toggleLinkTitleText: `Velg kundenummer`,\n },\n fi: {\n toggleLinkTitleText: `Valitse asiakasnumero`,\n },\n de: {\n toggleLinkTitleText: `Kundennummer auswählen`,\n },\n};\n","@import '../../../globals/main.scss';\n\npn-customernumber-selector {\n}\n\n.customernumber-container {\n position: relative;\n padding: 0;\n\n display: flex;\n flex-direction: column;\n border-radius: 0.8rem;\n border: 0.1rem solid $gray400;\n transition: border 0.15s ease;\n &:hover,\n pn-customernumber-selector[open] & {\n border-color: $blue700;\n }\n\n pn-customernumber-selector[open] & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n\n.customernumber-toggle {\n display: flex;\n z-index: 11;\n position: relative;\n margin: 0;\n border-radius: 0.8rem;\n padding: 1rem;\n border: 0;\n background: transparent;\n font-size: 1em;\n text-align: left;\n outline: 0;\n cursor: pointer;\n\n pn-icon {\n align-self: center;\n }\n}\n\n.customernumber-selected {\n flex-grow: 1;\n max-width: calc(100% - 2.4rem);\n overflow: hidden;\n}\n\n.customernumber-selected-title {\n color: $blue700;\n}\n\n.customernumber-selected-description {\n font-size: 0.875em;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.customernumber-options {\n position: absolute;\n z-index: 10;\n left: -0.1rem;\n right: -0.1rem;\n top: 100%;\n border: 0.1rem solid $blue700;\n border-bottom-left-radius: 0.8rem;\n border-bottom-right-radius: 0.8rem;\n\n pn-customernumber-selector[open] & {\n opacity: 1;\n transition-delay: 0s;\n max-height: 500rem;\n }\n max-height: 0;\n opacity: 0;\n transform-origin: top left;\n transition:\n transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s,\n opacity 0.1s linear,\n max-height 0.1s ease;\n overflow-y: auto;\n}\n","import { Component, Prop, h, State, Element, Listen, Watch, Host, Event, EventEmitter } from '@stencil/core';\nimport { translations } from './translations';\nimport { CustomernumberSelectori18n } from './pn-customernumber-selector-types';\nimport { MarketWebContextService } from '../../../globals/MarketWebContextService';\nimport { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';\nimport { angle_down, angle_up } from \"pn-design-assets/pn-assets/icons\";\n\n@Component({\n tag: 'pn-customernumber-selector',\n styleUrl: 'pn-customernumber-selector.scss',\n})\nexport class PnCustomernumberSelector {\n @Element() hostElement: Element;\n\n @Prop({ mutable: true, reflect: true }) language: string = 'sv';\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n @Prop() heading: string = '';\n @Prop() description: string = '';\n\n @State() i18n: CustomernumberSelectori18n = translations['en'];\n\n componentWillLoad() {\n this.init();\n }\n\n init() {\n this.setTranslations();\n }\n\n setTranslations() {\n if (this.language && translations[this.language]) {\n this.i18n = translations[this.language];\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"customernumber-container\">\n <button class=\"customernumber-toggle\" aria-label={this.i18n.toggleLinkTitleText} onClick={() => (this.open = !this.open)}>\n <div class=\"customernumber-selected\">\n <strong class=\"customernumber-selected-title\">{this.heading}</strong>\n <div class=\"customernumber-selected-description\">{this.description}</div>\n </div>\n <pn-icon icon={this.open ? angle_up : angle_down} small=\"false\" color=\"blue700\" />\n </button>\n <div class=\"customernumber-options\">\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-date-and-time.js CHANGED Viewed

@@ -11,11 +11,6 @@ const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class PnDateAndTime ext
         super();
         this.__registerHost();
         this.dateandtimerange = createEvent(this, "dateandtimerange", 7);
-        this.pnDatePicker = null;
-        this.pnTimeFromHourDropdown = null;
-        this.pnTimeFromMinuteDropdown = null;
-        this.pnTimeToHourDropdown = null;
-        this.pnTimeToMinuteDropdown = null;
         this.languageCode = null;
         this.dateAndTimeLabel = '';
         this.dateDaysFromToday = 0;
@@ -38,6 +33,13 @@ const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class PnDateAndTime ext
         this.firstValidDateString = '';
         this.lastValidDateString = '';
     }
+    get hostElement() { return this; }
+    pnDatePicker = null;
+    pnTimeFromHourDropdown = null;
+    pnTimeFromMinuteDropdown = null;
+    pnTimeToHourDropdown = null;
+    pnTimeToMinuteDropdown = null;
+    dateandtimerange;
     componentWillLoad() {
         this.setInitialValues();
     }
@@ -52,9 +54,8 @@ const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class PnDateAndTime ext
         this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);
     }
     setFirstValidDate() {
-        var _a;
         const date = new Date();
-        date.setDate((_a = date.getDate() + this.dateDaysFromToday) !== null && _a !== void 0 ? _a : 0);
+        date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);
         const year = date.getFullYear();
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
         const day = date.getDate().toString().padStart(2, '0');
@@ -95,11 +96,10 @@ const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class PnDateAndTime ext
         this.updateHiddenValue();
     }
     handleTimeChange() {
-        var _a, _b, _c, _d;
-        const fromHourString = (_a = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')) === null || _a === void 0 ? void 0 : _a.textContent;
-        const fromMinString = (_b = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')) === null || _b === void 0 ? void 0 : _b.textContent;
-        const toHourString = (_c = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')) === null || _c === void 0 ? void 0 : _c.textContent;
-        const toMinString = (_d = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')) === null || _d === void 0 ? void 0 : _d.textContent;
+        const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;
+        const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;
+        const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;
+        const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;
         this.selectedFromHour = parseInt(fromHourString);
         this.selectedFromMin = parseInt(fromMinString);
         this.selectedToHour = parseInt(toHourString);
@@ -141,10 +141,8 @@ const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class PnDateAndTime ext
         });
     }
     render() {
-        var _a, _b, _c, _d;
-        return (h(Host, { key: '6f7c0f1c403a98ceaadef017f6dfe94e4d09ab06' }, h("div", { key: 'c4f95d2e042277cd090fa8a8ce4dd6cd357943ad', class: "date-and-time-group" }, this.dateAndTimeLabel ? (h("div", { class: "date-and-time-row" }, h("label", null, this.dateAndTimeLabel))) : null, h("div", { key: '2c772ab7b24783c634a06879cfede0eaf05952d6', class: "date-and-time-row" }, h("pn-date-picker", { key: '6a427ea028bf55b067b0885e2d3b97a0349acdd3', ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": this.disableWeekends, "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.language, placeholder: this.datePlacehodler })), this.dateHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), h("div", { key: '7f74f041493bb4da72d070e90d24d38441c5ebb9', class: "date-and-time-group" }, h("div", { key: '7b7b4b4ba67f36cf03c4ee6b80a3cdd55a5c8380', class: "date-and-time-row" }, h("pn-select", { key: 'd5d6fe2b881a8770fc1aec24bce38754b6a17db0', ref: el => (this.pnTimeFromHourDropdown = el), name: "date-and-time-from-houre", placeholder: this.hourArr[8], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_a = this.hourArr) === null || _a === void 0 ? void 0 : _a.map((hour) => h("pn-option", { label: hour, value: hour }))), h("pn-select", { key: 'bb8dafe866a95e94e0e8a1e53ccff80d0729ec48', ref: el => (this.pnTimeFromMinuteDropdown = el), name: "date-and-time-from-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_b = this.minuteArr) === null || _b === void 0 ? void 0 : _b.map((minute) => h("pn-option", { label: minute, value: minute }))), h("div", { key: '8281bbfae49ca8ec35a1d651d61a1bd478b70c0a', class: "time-separator" }, h("span", { key: 'd7c895902ce3efac4816f21510444914012fca29' }, "-")), h("pn-select", { key: '5fa29d4fc4d01a804427bd2119969ec0d6346df6', ref: el => (this.pnTimeToHourDropdown = el), name: "date-and-time-to-hour", placeholder: this.hourArr[12], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_c = this.hourArr) === null || _c === void 0 ? void 0 : _c.map((hour) => h("pn-option", { label: hour, value: hour }))), h("pn-select", { key: '968f33b37cad6d2528a789abd63a89c163642c53', ref: el => (this.pnTimeToMinuteDropdown = el), name: "date-and-time-to-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_d = this.minuteArr) === null || _d === void 0 ? void 0 : _d.map((minute) => h("pn-option", { label: minute, value: minute })))), this.timeHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (h("small", { class: "date-and-time-row error-message" }, h("pn-icon", { icon: alert_info_circle, small: "false", color: "warning" }), this.errorMessage)) : null)));
+        return (h(Host, { key: '6f7c0f1c403a98ceaadef017f6dfe94e4d09ab06' }, h("div", { key: 'c4f95d2e042277cd090fa8a8ce4dd6cd357943ad', class: "date-and-time-group" }, this.dateAndTimeLabel ? (h("div", { class: "date-and-time-row" }, h("label", null, this.dateAndTimeLabel))) : null, h("div", { key: '2c772ab7b24783c634a06879cfede0eaf05952d6', class: "date-and-time-row" }, h("pn-date-picker", { key: '6a427ea028bf55b067b0885e2d3b97a0349acdd3', ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": this.disableWeekends, "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.language, placeholder: this.datePlacehodler })), this.dateHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), h("div", { key: '7f74f041493bb4da72d070e90d24d38441c5ebb9', class: "date-and-time-group" }, h("div", { key: '7b7b4b4ba67f36cf03c4ee6b80a3cdd55a5c8380', class: "date-and-time-row" }, h("pn-select", { key: 'd5d6fe2b881a8770fc1aec24bce38754b6a17db0', ref: el => (this.pnTimeFromHourDropdown = el), name: "date-and-time-from-houre", placeholder: this.hourArr[8], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.hourArr?.map((hour) => h("pn-option", { label: hour, value: hour }))), h("pn-select", { key: 'bb8dafe866a95e94e0e8a1e53ccff80d0729ec48', ref: el => (this.pnTimeFromMinuteDropdown = el), name: "date-and-time-from-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.minuteArr?.map((minute) => h("pn-option", { label: minute, value: minute }))), h("div", { key: '8281bbfae49ca8ec35a1d651d61a1bd478b70c0a', class: "time-separator" }, h("span", { key: 'd7c895902ce3efac4816f21510444914012fca29' }, "-")), h("pn-select", { key: '5fa29d4fc4d01a804427bd2119969ec0d6346df6', ref: el => (this.pnTimeToHourDropdown = el), name: "date-and-time-to-hour", placeholder: this.hourArr[12], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.hourArr?.map((hour) => h("pn-option", { label: hour, value: hour }))), h("pn-select", { key: '968f33b37cad6d2528a789abd63a89c163642c53', ref: el => (this.pnTimeToMinuteDropdown = el), name: "date-and-time-to-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, this.minuteArr?.map((minute) => h("pn-option", { label: minute, value: minute })))), this.timeHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (h("small", { class: "date-and-time-row error-message" }, h("pn-icon", { icon: alert_info_circle, small: "false", color: "warning" }), this.errorMessage)) : null)));
     }
-    get hostElement() { return this; }
     static get style() { return PnDateAndTimeStyle0; }
 }, [0, "pn-date-and-time", {
         "languageCode": [1, "language-code"],

package/components/pn-date-and-time.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-date-and-time.js","mappings":"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","names":["PnDateAndTime"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_info_circle.js","src/components/input/pn-date-and-time/pn-date-and-time.scss?tag=pn-date-and-time","src/components/input/pn-date-and-time/pn-date-and-time.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_info_circle = icon;\nexport const alertInfoCircle = icon;\n","@import '../../../globals/main.scss';\n\npn-date-and-time {\n label {\n color: $gray700;\n font-size: 1.4rem;\n }\n\n .time-separator {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .date-and-time-group {\n margin-bottom: 1rem;\n }\n .date-and-time-row {\n display: flex;\n gap: 1rem;\n }\n\n .helper-text {\n margin-top: 0.2rem;\n color: $gray700;\n display: block;\n }\n\n .error-message {\n color: #a70707;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Event, EventEmitter } from '@stencil/core';\nimport { alert_info_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-date-and-time',\n styleUrl: 'pn-date-and-time.scss',\n})\nexport class PnDateAndTime {\n @Element() hostElement: Element;\n pnDatePicker: HTMLElement = null;\n pnTimeFromHourDropdown: HTMLElement = null;\n pnTimeFromMinuteDropdown: HTMLElement = null;\n pnTimeToHourDropdown: HTMLElement = null;\n pnTimeToMinuteDropdown: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() dateAndTimeLabel: string = '';\n @Prop() dateDaysFromToday: number = 0;\n @Prop() validTimeRangeMinutes: number = 0;\n @Prop() errorMessage: string = '';\n @Prop() dateHelperText: string = '';\n @Prop() timeHelperText: string = '';\n @Prop() disableWeekends: boolean = false;\n @Prop() datePlacehodler: string = '';\n\n @State() language: string = null;\n @State() hourArr: string[] = null;\n @State() minuteArr: string[] = null;\n @State() formValue: string = null;\n @State() invalidTimespan: boolean = false;\n @State() selectedDate: string = null;\n @State() selectedFromHour: number = null;\n @State() selectedFromMin: number = null;\n @State() selectedToHour: number = null;\n @State() selectedToMin: number = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n\n @Event() dateandtimerange: EventEmitter<string>;\n\n componentWillLoad() {\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.setDefaultHiddenValue();\n this.addEventHandlers();\n }\n\n async setInitialValues() {\n this.setLangugaeCode();\n this.setFirstValidDate();\n\n this.hourArr = this.getNumbersAsStringArr(6, 22, 1);\n this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);\n }\n\n setFirstValidDate() {\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + 2;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n setLangugaeCode() {\n if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {\n this.language = document.querySelector('html').lang;\n } else {\n this.language = this.languageCode;\n }\n }\n\n setDefaultHiddenValue() {\n this.selectedFromHour = parseInt(this.hourArr[8]);\n this.selectedFromMin = 0;\n this.selectedToHour = parseInt(this.hourArr[12]);\n this.selectedToMin = 0;\n\n this.updateHiddenValue();\n }\n\n addEventHandlers() {\n this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));\n\n this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n }\n\n handleChange(e) {\n const target = e.target;\n\n if (target === this.pnDatePicker) {\n this.selectedDate = e.detail;\n }\n\n if (target === this.pnTimeFromHourDropdown \|\| target === this.pnTimeFromMinuteDropdown \|\| target === this.pnTimeToHourDropdown \|\| target === this.pnTimeToMinuteDropdown) {\n this.handleTimeChange();\n }\n\n this.updateHiddenValue();\n }\n\n handleTimeChange() {\n const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n\n this.selectedFromHour = parseInt(fromHourString);\n this.selectedFromMin = parseInt(fromMinString);\n this.selectedToHour = parseInt(toHourString);\n this.selectedToMin = parseInt(toMinString);\n }\n\n updateHiddenValue() {\n const date = new Date();\n const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);\n const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);\n this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());\n\n if (this.invalidTimespan \|\| !this.selectedDate) {\n this.formValue = '';\n } else {\n const fromMin = this.selectedFromMin.toString().padStart(2, '0');\n const toMin = this.selectedToMin.toString().padStart(2, '0');\n\n this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;\n }\n\n this.dateandtimerange.emit(this.formValue);\n }\n\n validateTimeRange(from: number, to: number) {\n let differenceValue = (to - from) / 1000;\n differenceValue /= 60;\n this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;\n }\n\n getNumbersAsStringArr(start: number, stop: number, step: number) {\n const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index: number) => start + index * step);\n const result: string[] = [];\n\n arr.forEach(item => {\n const itemAsString = item.toString().padStart(2, '0');\n result.push(itemAsString);\n });\n\n return result;\n }\n\n removePnOptionSelected() {\n const selectOptions = this.hostElement.querySelectorAll('pn-option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"date-and-time-group\">\n {this.dateAndTimeLabel ? (\n <div class=\"date-and-time-row\">\n <label>{this.dateAndTimeLabel}</label>\n </div>\n ) : null}\n <div class=\"date-and-time-row\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={this.disableWeekends}\n min-date={this.firstValidDateString}\n max-date={this.lastValidDateString}\n language={this.language}\n placeholder={this.datePlacehodler}\n ></pn-date-picker>\n </div>\n\n {this.dateHelperText ? <small class=\"date-and-time-row helper-text\">{this.dateHelperText}</small> : null}\n </div>\n <div class=\"date-and-time-group\">\n <div class=\"date-and-time-row\">\n <pn-select\n ref={el => (this.pnTimeFromHourDropdown = el as HTMLElement)}\n name=\"date-and-time-from-houre\"\n placeholder={this.hourArr[8]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-from-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLElement)}\n name=\"date-and-time-to-hour\"\n placeholder={this.hourArr[12]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-to-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n </div>\n {this.timeHelperText ? <small class=\"date-and-time-row helper-text\">{this.timeHelperText}</small> : null}\n\n {this.invalidTimespan && this.errorMessage ? (\n <small class=\"date-and-time-row error-message\">\n <pn-icon icon={alert_info_circle} small=\"false\" color=\"warning\" />\n {this.errorMessage}\n </small>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pn-date-and-time.js","mappings":"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","names":["PnDateAndTime"],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_info_circle.js","src/components/input/pn-date-and-time/pn-date-and-time.scss?tag=pn-date-and-time","src/components/input/pn-date-and-time/pn-date-and-time.tsx"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m1 2v4.5a1 1 0 1 1-2 0V12a1 1 0 1 1 2 0\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_info_circle = icon;\nexport const alertInfoCircle = icon;\n","@import '../../../globals/main.scss';\n\npn-date-and-time {\n label {\n color: $gray700;\n font-size: 1.4rem;\n }\n\n .time-separator {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .date-and-time-group {\n margin-bottom: 1rem;\n }\n .date-and-time-row {\n display: flex;\n gap: 1rem;\n }\n\n .helper-text {\n margin-top: 0.2rem;\n color: $gray700;\n display: block;\n }\n\n .error-message {\n color: #a70707;\n }\n}\n","import { Component, Prop, h, Element, State, Host, Event, EventEmitter } from '@stencil/core';\nimport { alert_info_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n tag: 'pn-date-and-time',\n styleUrl: 'pn-date-and-time.scss',\n})\nexport class PnDateAndTime {\n @Element() hostElement: Element;\n pnDatePicker: HTMLElement = null;\n pnTimeFromHourDropdown: HTMLElement = null;\n pnTimeFromMinuteDropdown: HTMLElement = null;\n pnTimeToHourDropdown: HTMLElement = null;\n pnTimeToMinuteDropdown: HTMLElement = null;\n\n @Prop() languageCode: string = null;\n @Prop() dateAndTimeLabel: string = '';\n @Prop() dateDaysFromToday: number = 0;\n @Prop() validTimeRangeMinutes: number = 0;\n @Prop() errorMessage: string = '';\n @Prop() dateHelperText: string = '';\n @Prop() timeHelperText: string = '';\n @Prop() disableWeekends: boolean = false;\n @Prop() datePlacehodler: string = '';\n\n @State() language: string = null;\n @State() hourArr: string[] = null;\n @State() minuteArr: string[] = null;\n @State() formValue: string = null;\n @State() invalidTimespan: boolean = false;\n @State() selectedDate: string = null;\n @State() selectedFromHour: number = null;\n @State() selectedFromMin: number = null;\n @State() selectedToHour: number = null;\n @State() selectedToMin: number = null;\n @State() firstValidDateString: string = '';\n @State() lastValidDateString: string = '';\n\n @Event() dateandtimerange: EventEmitter<string>;\n\n componentWillLoad() {\n this.setInitialValues();\n }\n\n componentDidLoad() {\n this.setDefaultHiddenValue();\n this.addEventHandlers();\n }\n\n async setInitialValues() {\n this.setLangugaeCode();\n this.setFirstValidDate();\n\n this.hourArr = this.getNumbersAsStringArr(6, 22, 1);\n this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);\n }\n\n setFirstValidDate() {\n const date = new Date();\n date.setDate(date.getDate() + this.dateDaysFromToday ?? 0);\n\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const endYear = year + 2;\n\n this.firstValidDateString = `${year.toString()}-${month}-${day}`;\n this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;\n }\n\n setLangugaeCode() {\n if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {\n this.language = document.querySelector('html').lang;\n } else {\n this.language = this.languageCode;\n }\n }\n\n setDefaultHiddenValue() {\n this.selectedFromHour = parseInt(this.hourArr[8]);\n this.selectedFromMin = 0;\n this.selectedToHour = parseInt(this.hourArr[12]);\n this.selectedToMin = 0;\n\n this.updateHiddenValue();\n }\n\n addEventHandlers() {\n this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));\n\n this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));\n }\n\n handleChange(e) {\n const target = e.target;\n\n if (target === this.pnDatePicker) {\n this.selectedDate = e.detail;\n }\n\n if (target === this.pnTimeFromHourDropdown \|\| target === this.pnTimeFromMinuteDropdown \|\| target === this.pnTimeToHourDropdown \|\| target === this.pnTimeToMinuteDropdown) {\n this.handleTimeChange();\n }\n\n this.updateHiddenValue();\n }\n\n handleTimeChange() {\n const fromHourString = this.pnTimeFromHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const fromMinString = this.pnTimeFromMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toHourString = this.pnTimeToHourDropdown.querySelector('[aria-selected=true]')?.textContent;\n const toMinString = this.pnTimeToMinuteDropdown.querySelector('[aria-selected=true]')?.textContent;\n\n this.selectedFromHour = parseInt(fromHourString);\n this.selectedFromMin = parseInt(fromMinString);\n this.selectedToHour = parseInt(toHourString);\n this.selectedToMin = parseInt(toMinString);\n }\n\n updateHiddenValue() {\n const date = new Date();\n const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);\n const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);\n this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());\n\n if (this.invalidTimespan \|\| !this.selectedDate) {\n this.formValue = '';\n } else {\n const fromMin = this.selectedFromMin.toString().padStart(2, '0');\n const toMin = this.selectedToMin.toString().padStart(2, '0');\n\n this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;\n }\n\n this.dateandtimerange.emit(this.formValue);\n }\n\n validateTimeRange(from: number, to: number) {\n let differenceValue = (to - from) / 1000;\n differenceValue /= 60;\n this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;\n }\n\n getNumbersAsStringArr(start: number, stop: number, step: number) {\n const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index: number) => start + index * step);\n const result: string[] = [];\n\n arr.forEach(item => {\n const itemAsString = item.toString().padStart(2, '0');\n result.push(itemAsString);\n });\n\n return result;\n }\n\n removePnOptionSelected() {\n const selectOptions = this.hostElement.querySelectorAll('pn-option');\n selectOptions.forEach(elm => {\n elm.removeAttribute('selected');\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"date-and-time-group\">\n {this.dateAndTimeLabel ? (\n <div class=\"date-and-time-row\">\n <label>{this.dateAndTimeLabel}</label>\n </div>\n ) : null}\n <div class=\"date-and-time-row\">\n <pn-date-picker\n ref={el => (this.pnDatePicker = el as HTMLElement)}\n range=\"false\"\n disable-weekends={this.disableWeekends}\n min-date={this.firstValidDateString}\n max-date={this.lastValidDateString}\n language={this.language}\n placeholder={this.datePlacehodler}\n ></pn-date-picker>\n </div>\n\n {this.dateHelperText ? <small class=\"date-and-time-row helper-text\">{this.dateHelperText}</small> : null}\n </div>\n <div class=\"date-and-time-group\">\n <div class=\"date-and-time-row\">\n <pn-select\n ref={el => (this.pnTimeFromHourDropdown = el as HTMLElement)}\n name=\"date-and-time-from-houre\"\n placeholder={this.hourArr[8]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-from-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLElement)}\n name=\"date-and-time-to-hour\"\n placeholder={this.hourArr[12]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.hourArr?.map((hour: string) => <pn-option label={hour} value={hour}></pn-option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLElement)}\n name=\"date-and-time-to-minute\"\n placeholder={this.minuteArr[0]}\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan}\n >\n {this.minuteArr?.map((minute: string) => <pn-option label={minute} value={minute}></pn-option>)}\n </pn-select>\n </div>\n {this.timeHelperText ? <small class=\"date-and-time-row helper-text\">{this.timeHelperText}</small> : null}\n\n {this.invalidTimespan && this.errorMessage ? (\n <small class=\"date-and-time-row error-message\">\n <pn-icon icon={alert_info_circle} small=\"false\" color=\"warning\" />\n {this.errorMessage}\n </small>\n ) : null}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pn-dropdown-choice-adds-row.js CHANGED Viewed

@@ -10,25 +10,8 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
         super();
         this.__registerHost();
         this.rowvalues = createEvent(this, "rowvalues", 7);
-        this.pnRowSelectDropdown = null;
-        this.tableHead = null;
-        this.tableBody = null;
-        this.formRowEvent = e => {
-            var _a;
-            const debouncedAddValue = debounce(this.updateHiddenFieldValue.bind(this), 500);
-            if (e.target.matches('input')) {
-                ['change', 'keyup'].forEach(eventName => {
-                    e.target.addEventListener(eventName, debouncedAddValue);
-                });
-            }
-            else {
-                const rowDropdown = (_a = e.target.closest('.generated-table-row')) === null || _a === void 0 ? void 0 : _a.querySelector('pn-select');
-                if (rowDropdown) {
-                    rowDropdown.addEventListener('selectOption', debouncedAddValue);
-                }
-            }
-        };
         this.dropdownData = null;
+        this.languageCode = null;
         this.addRowDropdownName = '';
         this.addRowDropdownPlaceholder = '';
         this.addRowDropdownLabel = '';
@@ -46,6 +29,12 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
         this.showWarning = false;
         this.formValue = null;
     }
+    get hostElement() { return this; }
+    pnRowSelectDropdown = null;
+    tableHead = null;
+    tableBody = null;
+    _dropdownData;
+    rowvalues;
     dropdownDataWatcher() {
         if (typeof this.dropdownData === 'string') {
             this._dropdownData = JSON.parse(this.dropdownData);
@@ -75,22 +64,35 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
             this.rowSelectDropdownArr.push(element.label);
         });
     }
+    formRowEvent = e => {
+        const debouncedAddValue = debounce(this.updateHiddenFieldValue.bind(this), 500);
+        if (e.target.matches('input')) {
+            ['change', 'keyup'].forEach(eventName => {
+                e.target.addEventListener(eventName, debouncedAddValue);
+            });
+        }
+        else {
+            const rowDropdown = e.target.closest('.generated-table-row')?.querySelector('pn-select');
+            if (rowDropdown) {
+                rowDropdown.addEventListener('selectOption', debouncedAddValue);
+            }
+        }
+    };
     updateHiddenFieldValue() {
         const allRows = [...this.tableBody.querySelectorAll('tr')];
         const columnValueCount = this.rowHasDropdown ? 3 : 2;
         const formValues = [];
         if (allRows.length) {
             allRows.forEach(elm => {
-                var _a, _b, _c;
                 const row = { row: [] };
                 const nameElm = elm.querySelector('.tr-name');
                 const dropdownElm = elm.querySelector('.tr-dropdown');
                 const inputElm = elm.querySelector('.tr-input');
-                const nameValue = { name: this.rowNameLabel, value: nameElm === null || nameElm === void 0 ? void 0 : nameElm.innerHTML };
+                const nameValue = { name: this.rowNameLabel, value: nameElm?.innerHTML };
                 row.row.push(nameValue);
                 const dropdown = dropdownElm.querySelector('.current-selection');
                 if (dropdown) {
-                    const dropdownSelection = (_a = dropdown.textContent) !== null && _a !== void 0 ? _a : '';
+                    const dropdownSelection = dropdown.textContent ?? '';
                     if (dropdownSelection.length) {
                         const dropdownValue = {
                             name: this.rowDropdownLabel,
@@ -106,7 +108,7 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
                     };
                     row.row.push(dropdownValue);
                 }
-                const inputValue = parseInt((_c = (_b = inputElm.querySelector('input')) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '0');
+                const inputValue = parseInt(inputElm.querySelector('input')?.value ?? '0');
                 if (inputValue > 0) {
                     const inputColumnValue = { name: this.rowInputLabel, value: inputValue.toString() };
                     row.row.push(inputColumnValue);
@@ -128,7 +130,7 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
     }
     addRowElement() {
         const selected = this.pnRowSelectDropdown.querySelector('[aria-selected=true]');
-        const selectedValue = selected === null || selected === void 0 ? void 0 : selected.textContent;
+        const selectedValue = selected?.textContent;
         const slotElm = this.tableBody;
         const newRow = document.createElement('tr');
         newRow.setAttribute('index', `${this.nextRowIndex}`);
@@ -161,14 +163,13 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
         const selectedOptionValues = [];
         const currentRow = this.getCurrentRow(selectedValue);
         currentRow.forEach(row => {
-            var _a, _b;
-            selectedOptionValues.push((_b = (_a = row.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.tr-dropdown [aria-selected=true]')) === null || _b === void 0 ? void 0 : _b.textContent);
+            selectedOptionValues.push(row.parentElement?.querySelector('.tr-dropdown [aria-selected=true]')?.textContent);
         });
         if (Array.isArray(selectedItem.values) && selectedItem.values.length) {
             const dropdown = document.createElement('pn-select');
             dropdown.setAttribute('name', `${selectedValue}-dropdown`);
             dropdown.setAttribute('placeholder', this.rowDropdownPlaceholder);
-            const filtereredValues = selectedItem.values.filter(item => !(selectedOptionValues === null || selectedOptionValues === void 0 ? void 0 : selectedOptionValues.includes(item.value)));
+            const filtereredValues = selectedItem.values.filter(item => !selectedOptionValues?.includes(item.value));
             filtereredValues.forEach(childItem => {
                 const childOption = document.createElement('pn-option');
                 childOption.setAttribute("label", childItem.label);
@@ -202,12 +203,11 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
     }
     updateRowSelectDropdown() {
         const rows = [].map.call(this.tableBody.querySelectorAll('.tr-name'), el => {
-            var _a, _b, _c;
-            const dropdownColumn = (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.tr-dropdown');
-            const dropdownPlaceholder = (_b = dropdownColumn === null || dropdownColumn === void 0 ? void 0 : dropdownColumn.querySelector('.pn-select-content span')) === null || _b === void 0 ? void 0 : _b.textContent;
+            const dropdownColumn = el?.parentElement?.querySelector('.tr-dropdown');
+            const dropdownPlaceholder = dropdownColumn?.querySelector('.pn-select-content span')?.textContent;
             const row = {
-                rowName: el === null || el === void 0 ? void 0 : el.innerHTML,
-                selectedValue: (_c = dropdownColumn === null || dropdownColumn === void 0 ? void 0 : dropdownColumn.querySelector('[aria-selected=true]')) === null || _c === void 0 ? void 0 : _c.textContent,
+                rowName: el?.innerHTML,
+                selectedValue: dropdownColumn?.querySelector('[aria-selected=true]')?.textContent,
                 placeholder: dropdownPlaceholder,
             };
             return row;
@@ -253,25 +253,23 @@ const pnDropdownChoiceAddsRow = /*@__PURE__*/ proxyCustomElement(class pnDropdow
         }
         let totalInput = 0;
         allRows.forEach(element => {
-            var _a;
             const inputField = element.querySelector('pn-marketweb-input');
             if (inputField.value) {
-                totalInput += (_a = parseInt(inputField.value)) !== null && _a !== void 0 ? _a : 0;
+                totalInput += parseInt(inputField.value) ?? 0;
             }
         });
         this.showWarning = totalInput > this.totalInputLimit ? true : false;
     }
     render() {
-        var _a;
-        return (h(Host, { key: 'e42637fdfbc059fe081da8fb8af2a2469f357d15' }, h("div", { key: 'da4240a50ed0be9b937bbcb998ca26569c1ffd8c', class: "dropdown-choice-form-row" }, h("pn-select", { key: '7b57bbef46778d4ce63b937e80b2df10501e36c5', ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, placeholder: this.addRowDropdownPlaceholder, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown", "empty-option": "true" }, (_a = this.rowSelectDropdownArr) === null || _a === void 0 ? void 0 : _a.map((value) => h("pn-option", { label: value, value: value })))), h("div", { key: 'ae290b0a39886fead6a6cf6cff9e7ff0329b0cf2', class: "dropdown-choice-form-row" }, h("table", { key: '1fac0a253d5ea42876bda4a32dd43db1223bd650', class: "pn-dropdown-choice-table" }, h("thead", { key: 'dc119ee9a215b433e480d3ace1a04fc4c093fe5a', ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (h("tr", null, h("th", { class: "table-header--name" }, h("label", null, this.rowNameLabel)), this.rowHasDropdown ? (h("th", { class: "table-header--dropdown" }, h("label", null, this.rowDropdownLabel))) : null, h("th", { class: "table-header--input" }, h("label", null, this.rowInputLabel)), h("th", { class: "table-header--delete" })))), h("tbody", { key: '334d8505ff7214e80cf26ae638134b8efedf1c6e', ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, h("slot", { key: '40463ee8d5959bb3c2fbf10d7256883699eaf5ca' })), h("tfoot", { key: '8bc7637282d2e5656096233a7b431ae6d9961972' }, this.showWarning ? (h("tr", null, h("td", { colSpan: this.columnCount }, h("pn-icon", { icon: alert_exclamation_circle, small: true, color: "warning" }), h("small", { class: "dropdown-choice-error-message" }, this.inputLimitWarning)))) : null)))));
+        return (h(Host, { key: 'a89919e962a274e3ad61e52821081cb3cc30e7d2' }, h("div", { key: 'a0c2b1338c64590db11bcdb550993dbecef5d3bb', class: "dropdown-choice-form-row" }, h("pn-select", { key: '3907fa6ea69ccb68462626a06804c5b72b6c44d8', ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, placeholder: this.addRowDropdownPlaceholder, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown", "empty-option": "true", language: this.languageCode }, this.rowSelectDropdownArr?.map((value) => h("pn-option", { label: value, value: value })))), h("div", { key: '85b44d5c44bf07ad9a775f052929b32803725e77', class: "dropdown-choice-form-row" }, h("table", { key: '4910bda32683fd621c9d78f3a24a206bb7f079a5', class: "pn-dropdown-choice-table" }, h("thead", { key: '7dea2804e6a1a1cb40be105a65cc3368e1e17ba6', ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (h("tr", null, h("th", { class: "table-header--name" }, h("label", null, this.rowNameLabel)), this.rowHasDropdown ? (h("th", { class: "table-header--dropdown" }, h("label", null, this.rowDropdownLabel))) : null, h("th", { class: "table-header--input" }, h("label", null, this.rowInputLabel)), h("th", { class: "table-header--delete" })))), h("tbody", { key: '71b7e0e23703179e3d922ad0045e9a0264b3253a', ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, h("slot", { key: '93b5dd3bfc2907bef2c68a48b4e8364088196f8b' })), h("tfoot", { key: '403dbbc82f349d5e3ece295f36ccc3e6242a968c' }, this.showWarning ? (h("tr", null, h("td", { colSpan: this.columnCount }, h("pn-icon", { icon: alert_exclamation_circle, small: true, color: "warning" }), h("small", { class: "dropdown-choice-error-message" }, this.inputLimitWarning)))) : null)))));
     }
-    get hostElement() { return this; }
     static get watchers() { return {
         "dropdownData": ["dropdownDataWatcher"]
     }; }
     static get style() { return PnDropdownChoiceAddsRowStyle0; }
 }, [4, "pn-dropdown-choice-adds-row", {
         "dropdownData": [1, "dropdown-data"],
+        "languageCode": [1, "language-code"],
         "addRowDropdownName": [1, "add-row-dropdown-name"],
         "addRowDropdownPlaceholder": [1, "add-row-dropdown-placeholder"],
         "addRowDropdownLabel": [1, "add-row-dropdown-label"],