npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.2 → 4.0.4-test - Mend

@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

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 (1163) hide show

package/dist/cjs/pn-charts-card.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
+const index = require('./index-34e1c673.js');
 const arrow_right = require('./arrow_right-66958158.js');
-const pnChartsCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-charts-card{width:100%;height:100%;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:flex;flex-direction:column;border-radius:2.4rem;padding:2.4rem}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__wrapper{padding:3.2rem}}pn-charts-card .pn-charts-card__heading__wrapper{display:flex;flex-direction:row;justify-content:space-between;gap:0.8rem}pn-charts-card .pn-charts-card__heading{font-weight:700;font-size:2.4rem;line-height:110%}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading{font-size:3.2rem}}pn-charts-card .pn-charts-card__heading__highlight{font-weight:700;font-size:2.4rem;line-height:110%;color:#005d92}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}pn-charts-card .pn-charts-card__content__wrapper{display:flex;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:flex;flex-direction:column;justify-content:space-between;height:100%}pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}pn-charts-card .pn-charts-card__text__wrapper{display:flex;flex-direction:column;justify-content:space-between}pn-charts-card .pn-charts-card__text__wrapper span{display:block;margin-bottom:5.4rem}pn-charts-card .pn-charts-card__preamble{font-weight:400;font-size:1.6rem;line-height:140%;flex-grow:1;margin-bottom:1.6rem}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__preamble{font-size:2rem}}pn-charts-card .pn-charts-card__source{display:flex;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#005d92;color:#ffffff;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:1;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:fit-content}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem;padding:0.6rem}}pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-weight:400;font-size:1.6rem;line-height:140%;color:#005d92;margin-bottom:0}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-size:2rem}}pn-charts-card .pn-charts-card__source a{text-decoration:none;color:#005d92;font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92;font-weight:400}pn-charts-card .pn-charts-card__source a:hover{text-decoration:underline}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source a{font-size:2rem}}pn-charts-card .pn-charts-card__source a pn-icon svg path{fill:#005d92}pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after{display:none}.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:2.4rem}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:4rem}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{margin-bottom:3.2rem;gap:1.6rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{justify-content:flex-start}}.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{flex-direction:row-reverse;gap:5.6rem}}@media screen and (min-width: 1200px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:4rem}}@media screen and (min-width: 1640px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__text__container{justify-content:center}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__text__container{width:100%}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:flex}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:none}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:flex}}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__preamble{flex-grow:0;font-size:2rem}}pn-charts-card[data-chart-color=blue]>.pn-charts-card__wrapper{background-color:#effbff}pn-charts-card[data-chart-color=coral]>.pn-charts-card__wrapper{background-color:#fdefee}pn-charts-card[data-chart-color=green]>.pn-charts-card__wrapper{background-color:#dcf6e7}pn-charts-card[data-chart-color=white]>.pn-charts-card__wrapper{background-color:#ffffff}pn-charts-card[data-chart-color=gray]>.pn-charts-card__wrapper{background-color:#f9f8f8}";
+const pnChartsCardCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-charts-card{width:100%;height:100%;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:flex;flex-direction:column;border-radius:2.4rem;padding:2.4rem}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__wrapper{padding:3.2rem}}pn-charts-card .pn-charts-card__heading__wrapper{display:flex;flex-direction:row;justify-content:space-between;gap:0.8rem}pn-charts-card .pn-charts-card__heading{font-weight:700;font-size:2.4rem;line-height:110%}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading{font-size:3.2rem}}pn-charts-card .pn-charts-card__heading__highlight{font-weight:700;font-size:2.4rem;line-height:110%;color:#005d92}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}pn-charts-card .pn-charts-card__content__wrapper{display:flex;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:flex;flex-direction:column;justify-content:space-between;height:100%}pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}pn-charts-card .pn-charts-card__text__wrapper{display:flex;flex-direction:column;justify-content:space-between}pn-charts-card .pn-charts-card__text__wrapper span{display:block;margin-bottom:5.4rem}pn-charts-card .pn-charts-card__preamble{font-weight:400;font-size:1.6rem;line-height:140%;flex-grow:1;margin-bottom:1.6rem}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__preamble{font-size:2rem}}pn-charts-card .pn-charts-card__source{display:flex;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#005d92;color:#ffffff;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:1;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:fit-content}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem;padding:0.6rem}}pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-weight:400;font-size:1.6rem;line-height:140%;color:#005d92;margin-bottom:0}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading{font-size:2rem}}pn-charts-card .pn-charts-card__source a{text-decoration:none;color:#005d92;font-weight:500;font-size:1.6rem;text-decoration:none;color:#005d92;font-weight:400}pn-charts-card .pn-charts-card__source a:hover{text-decoration:underline}@media screen and (min-width: 1640px){pn-charts-card .pn-charts-card__source a{font-size:2rem}}pn-charts-card .pn-charts-card__source a pn-icon svg path{fill:#005d92}pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after{display:none}.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:2.4rem}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__wrapper{padding:4rem}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{margin-bottom:3.2rem;gap:1.6rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper{justify-content:flex-start}}.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:2.4rem}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__heading,.fullwidth>pn-charts-card .pn-charts-card__heading__highlight{font-size:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{flex-direction:row-reverse;gap:5.6rem}}@media screen and (min-width: 1200px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:4rem}}@media screen and (min-width: 1640px){.fullwidth>pn-charts-card .pn-charts-card__content__wrapper{gap:3.2rem}}.fullwidth>pn-charts-card .pn-charts-card__text__container{justify-content:center}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__text__container{width:100%}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:flex}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--vertical{display:none}}.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:none}@media screen and (min-width: 992px){.fullwidth>pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:flex}}@media screen and (min-width: 768px){.fullwidth>pn-charts-card .pn-charts-card__preamble{flex-grow:0;font-size:2rem}}pn-charts-card[data-chart-color=blue]>.pn-charts-card__wrapper{background-color:#effbff}pn-charts-card[data-chart-color=coral]>.pn-charts-card__wrapper{background-color:#fdefee}pn-charts-card[data-chart-color=green]>.pn-charts-card__wrapper{background-color:#dcf6e7}pn-charts-card[data-chart-color=white]>.pn-charts-card__wrapper{background-color:#ffffff}pn-charts-card[data-chart-color=gray]>.pn-charts-card__wrapper{background-color:#f9f8f8}";
 const PnChartsCardStyle0 = pnChartsCardCss;
 const PnChartsCard = class {

package/dist/cjs/pn-charts-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-charts-card.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG~~,+yKAA~~+yK,CAAC;~~AACx0K~~,2BAAe,eAAe;;MCMjB,YAAY;;;sBAGE,IAAI;;;;;;;+BAOM,KAAK;;;IAExC,eAAe,GAAG;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,QACEA,eAAG,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,OAAEA,qBAAS,IAAI,EAAEC,uBAAW,QAAa,CACxD,EACJ;SACH;QACD,OAAO,IAAI,CAAC;KACb,CAAC;IAEF,MAAM;QACJ,QACED,QAACE,UAAI,uDACHF,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,MAAM;aAERA,kEAAK,KAAK,EAAC,6EAA6E,IACtFA,iEAAI,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAM,EACtDA,kEAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEHA,kEAAK,KAAK,EAAC,kCAAkC,IAC3CA,mEAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,kEAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,MAAM;aAERA,kEAAK,KAAK,EAAC,+EAA+E,IACxFA,iEAAI,KAAK,EAAC,iDAAiD,IAAE,IAAI,CAAC,MAAM,CAAM,EAC9EA,kEAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEHA,mEAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC7DA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,sEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1B,IAAI,CAAC,MAAM,GAAGA,eAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,MAAM,CAAK,GAAG,IAAI,EAC9E,IAAI,CAAC,eAAe,EAAE,CACnB,CACF,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","arrow_right","Host"],"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: $min-width-xl) {\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $blue700;\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $min-width-lg) {\n padding: 4rem;\n }\n }\n\n .pn-charts-card__heading__wrapper {\n margin-bottom: 3.2rem;\n @media screen and (min-width: $min-width-md) {\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: $min-width-md) {\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: $min-width-lg) {\n flex-direction: row-reverse;\n gap: 5.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n gap: 4rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n gap: 3.2rem;\n }\n }\n\n .pn-charts-card__text__container {\n justify-content: center;\n @media screen and (min-width: $min-width-md) {\n width: 100%;\n }\n }\n\n .pn-charts-card__heading__wrapper--vertical {\n display: flex;\n\n @media screen and (min-width: $min-width-lg) {\n display: none;\n }\n }\n\n .pn-charts-card__heading__wrapper--horizontal {\n display: none;\n @media screen and (min-width: $min-width-lg) {\n display: flex;\n }\n }\n\n .pn-charts-card__preamble {\n @media screen and (min-width: $min-width-md) {\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 = null;\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 {this.header &&\n (\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical\">\n <h2 class=\"pn-charts-card__heading\">{this.header}</h2>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n )\n }\n <div class=\"pn-charts-card__content__wrapper\">\n <slot name=\"chart\"></slot>\n <div class=\"pn-charts-card__text__container\">\n {this.header &&\n (\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal\">\n <h2 class=\"pn-charts-card__heading pn-charts-card__heading\">{this.header}</h2>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n )\n }\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 {this.source ? <p class=\"pn-chart-card__text__heading\">{this.source}</p> : null}\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.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,s+JAAs+J,CAAC;AAC//J,2BAAe,eAAe;;MCMjB,YAAY;;;sBAGE,IAAI;;;;;;;+BAOM,KAAK;;;IAExC,eAAe,GAAG;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,QACEA,eAAG,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,OAAEA,qBAAS,IAAI,EAAEC,uBAAW,QAAa,CACxD,EACJ;SACH;QACD,OAAO,IAAI,CAAC;KACb,CAAC;IAEF,MAAM;QACJ,QACED,QAACE,UAAI,uDACHF,mEAAM,IAAI,EAAC,yBAAyB,GAAG,EACvCA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,MAAM;aAERA,kEAAK,KAAK,EAAC,6EAA6E,IACtFA,iEAAI,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAM,EACtDA,kEAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEHA,kEAAK,KAAK,EAAC,kCAAkC,IAC3CA,mEAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,kEAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,MAAM;aAERA,kEAAK,KAAK,EAAC,+EAA+E,IACxFA,iEAAI,KAAK,EAAC,iDAAiD,IAAE,IAAI,CAAC,MAAM,CAAM,EAC9EA,kEAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEHA,mEAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC7DA,kEAAK,KAAK,EAAC,+BAA+B,IACxCA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,sEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1B,IAAI,CAAC,MAAM,GAAGA,eAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,MAAM,CAAK,GAAG,IAAI,EAC9E,IAAI,CAAC,eAAe,EAAE,CACnB,CACF,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;","names":["h","arrow_right","Host"],"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: $min-width-xl) {\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $blue700;\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $min-width-xxl) {\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: $min-width-lg) {\n padding: 4rem;\n }\n }\n\n .pn-charts-card__heading__wrapper {\n margin-bottom: 3.2rem;\n @media screen and (min-width: $min-width-md) {\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: $min-width-md) {\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: $min-width-lg) {\n flex-direction: row-reverse;\n gap: 5.6rem;\n }\n\n @media screen and (min-width: $min-width-xl) {\n gap: 4rem;\n }\n\n @media screen and (min-width: $min-width-xxl) {\n gap: 3.2rem;\n }\n }\n\n .pn-charts-card__text__container {\n justify-content: center;\n @media screen and (min-width: $min-width-md) {\n width: 100%;\n }\n }\n\n .pn-charts-card__heading__wrapper--vertical {\n display: flex;\n\n @media screen and (min-width: $min-width-lg) {\n display: none;\n }\n }\n\n .pn-charts-card__heading__wrapper--horizontal {\n display: none;\n @media screen and (min-width: $min-width-lg) {\n display: flex;\n }\n }\n\n .pn-charts-card__preamble {\n @media screen and (min-width: $min-width-md) {\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 = null;\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 {this.header &&\n (\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical\">\n <h2 class=\"pn-charts-card__heading\">{this.header}</h2>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n )\n }\n <div class=\"pn-charts-card__content__wrapper\">\n <slot name=\"chart\"></slot>\n <div class=\"pn-charts-card__text__container\">\n {this.header &&\n (\n <div class=\"pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal\">\n <h2 class=\"pn-charts-card__heading pn-charts-card__heading\">{this.header}</h2>\n <div class=\"pn-charts-card__heading__highlight\">{this.highlight}</div>\n </div>\n )\n }\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 {this.source ? <p class=\"pn-chart-card__text__heading\">{this.source}</p> : null}\n {this.showCtaLinkText()}\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/pn-choice-button.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
+const index = require('./index-34e1c673.js');
-const pnChoiceButtonCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-choice-button{user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:flex;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #d3cecb;color:#005d92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;transition:box-shadow 0.1s, background 0.2s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#e0f8ff;color:#005d92;border-color:#005d92;box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#ffffff;color:#005d92}pn-choice-button>input:hover+label.pn-choice-button{background:#e0f8ff}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-choice-button>input:active+label.pn-choice-button{background:#8eddf9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#d3cecb}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8eddf9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8eddf9;border:0.1rem solid #00a0d6}";
+const pnChoiceButtonCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-choice-button{user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:flex;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #d3cecb;color:#005d92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;transition:box-shadow 0.1s, background 0.2s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#e0f8ff;color:#005d92;border-color:#005d92;box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#ffffff;color:#005d92}pn-choice-button>input:hover+label.pn-choice-button{background:#e0f8ff}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-choice-button>input:active+label.pn-choice-button{background:#8eddf9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#d3cecb}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8eddf9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8eddf9;border:0.1rem solid #00a0d6}";
 const PnChoiceButtonStyle0 = pnChoiceButtonCss;
 const PnChoiceButton = class {

package/dist/cjs/pn-choice-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-choice-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,~~wyDAAwyD,~~CAAC;~~AACn0D~~,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,QACEA,QAACC,UAAI,uDACHD,oEAAO,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,EAClJA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACrDA,oEAAQ,CACF,CACH,EACP;KACH;;;;;;","names":["h","Host"],"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-button.entry.cjs.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,QACEA,QAACC,UAAI,uDACHD,oEAAO,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,EAClJA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACrDA,oEAAQ,CACF,CACH,EACP;KACH;;;;;;","names":["h","Host"],"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/dist/cjs/pn-cta-block.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
+const index = require('./index-34e1c673.js');
-const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#effbff}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#fdefee}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#f9f8f8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#edfbf3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{flex-direction:row;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:flex;flex:1;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem;text-wrap:balance}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005d92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
+const pnCtaBlockCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-cta-block{display:flex;justify-content:center}pn-cta-block .cta-block{display:flex;justify-content:space-between;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#effbff}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#fdefee}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#f9f8f8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#edfbf3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{align-items:center;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{flex-direction:row;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:flex;flex:1;flex-direction:column;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem;text-wrap:balance}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:flex;flex-direction:column;row-gap:1.6rem;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{align-items:flex-end;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005d92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{transition:transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005d92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover{color:#0d234b;text-decoration:underline}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{transition:transform 0.3s ease-in-out;transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#0d234b}";
 const PnCtaBlockStyle0 = pnCtaBlockCss;
 const PnCtaBlock = class {

package/dist/cjs/pn-cta-block.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-cta-block.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,~~gwJAAgwJ~~,CAAC;~~AACvxJ~~,yBAAe,aAAa;;MCKf,UAAU;;;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,QACEA,QAACC,UAAI,uDACHD,yFAA0B,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;YACRA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,kBAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEfA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,CAAC,IAAI,CAAC,OAAO,IAAIA,gBAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC1E,CAAC,IAAI,CAAC,QAAQ,IAAIA,eAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,GAAG,IAAI,CACpE,GACJ,UAAU;YACVA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;","names":["h","Host"],"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: $min-width-md) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: $max-width-xl) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: $max-width-xxl) {\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: $min-width-md) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: $min-width-md) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:$min-width-lg) {\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:$min-width-md) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: $min-width-md) {\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: $min-width-md) {\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: $min-width-md) {\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:$min-width-md) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: $min-width-lg) {\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: $min-width-md) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width: $min-width-md) {\n max-width: 74rem;\n text-wrap: balance;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\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:$min-width-md) {\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 color: $blue900;\n text-decoration: underline;\n \n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue900;\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 <div class=\"cta-block__content\">\n {(this.heading) ? <h2 class=\"cta-block__heading\">{this.heading}</h2> : null}\n {(this.bodyText) ? <p class=\"cta-block__text\">{this.bodyText}</p> : null}\n </div>\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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,u7IAAu7I,CAAC;AAC98I,yBAAe,aAAa;;MCKf,UAAU;;;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,QACEA,QAACC,UAAI,uDACHD,yFAA0B,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;YACRA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,kBAAM,IAAI,EAAC,cAAc,GAAG,CACxB,GAAG,IAAI,GAEfA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,CAAC,IAAI,CAAC,OAAO,IAAIA,gBAAI,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,OAAO,CAAM,GAAG,IAAI,EAC1E,CAAC,IAAI,CAAC,QAAQ,IAAIA,eAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAK,GAAG,IAAI,CACpE,GACJ,UAAU;YACVA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,kBAAM,IAAI,EAAC,aAAa,GAAG,CACvB,GAAG,IAAI,EAEX,CACD,EACP;KACH;;;;;;","names":["h","Host"],"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: $min-width-md) {\n flex-direction: row;\n padding: 2.4rem;\n }\n\n @media screen and (min-width: $max-width-xl) {\n margin-right: auto;\n margin-left: auto;\n max-width: 95%;\n }\n\n @media screen and (min-width: $max-width-xxl) {\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: $min-width-md) {\n font-size: 3.6rem;\n }\n }\n\n .cta-block__text {\n @media screen and (min-width: $min-width-md) {\n font-size: 2rem;\n }\n }\n }\n\n .cta-block--small {\n width: auto;\n\n @media screen and (min-width:$min-width-lg) {\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:$min-width-md) {\n gap: 2.4rem;\n padding: 3.2rem;\n }\n\n .cta-block__content {\n @media screen and (min-width: $min-width-md) {\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: $min-width-md) {\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: $min-width-md) {\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:$min-width-md) {\n display: none;\n max-width: 20%;\n }\n\n @media screen and (min-width: $min-width-lg) {\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: $min-width-md) {\n padding-right: 2.4rem;\n }\n\n .cta-block__heading,\n .cta-block__text {\n @media screen and (min-width: $min-width-md) {\n max-width: 74rem;\n text-wrap: balance;\n }\n }\n\n .cta-block__text {\n margin-bottom: 2.4rem;\n\n @media screen and (min-width: $min-width-md) {\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:$min-width-md) {\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 color: $blue900;\n text-decoration: underline;\n \n pn-icon svg {\n transition: transform 0.3s ease-in-out;\n transform: translateX(0.3rem);\n\n path {\n fill: $blue900;\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 <div class=\"cta-block__content\">\n {(this.heading) ? <h2 class=\"cta-block__heading\">{this.heading}</h2> : null}\n {(this.bodyText) ? <p class=\"cta-block__text\">{this.bodyText}</p> : null}\n </div>\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/dist/cjs/pn-customernumber-selector-option.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
+const index = require('./index-34e1c673.js');
-const pnCustomernumberSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-customernumber-selector-option{display:flex;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#ffffff;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#e0f8ff;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2d2013}.customernumberoption-title{display:block;font-size:1em;color:#005d92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5e554a;font-weight:normal}";
+const pnCustomernumberSelectorOptionCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-customernumber-selector-option{display:flex;flex-direction:column;width:100%;overflow:hidden}pn-customernumber-selector-option:last-of-type{border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem}.customernumberoption{overflow:hidden;max-width:100%;text-decoration:none;background:#ffffff;transition:background 0.15s ease;padding:1.6rem 1rem}.customernumberoption:hover,.customernumberoption:focus,.customernumberoption:active{background:#e0f8ff;text-decoration:none}.customernumberoption-text{font-weight:700;color:#2d2013}.customernumberoption-title{display:block;font-size:1em;color:#005d92;font-weight:700}.customernumberoption-description{font-size:0.75em;color:#5e554a;font-weight:normal}";
 const PnCustomernumberSelectorOptionStyle0 = pnCustomernumberSelectorOptionCss;
 const PnProfileSelectorOption = class {
@@ -16,7 +16,7 @@ const PnProfileSelectorOption = class {
     }
     get hostElement() { return index.getElement(this); }
     render() {
-        return (index.h(index.Host, { key: 'a94e11a5d9dcbbb3bf34859580e1558bc60d792b' }, index.h("a", { key: 'ee1ce3a458cc9d1183b54b0a3a4dd4e25ec00d50', class: "customernumberoption", href: this.url }, index.h("span", { key: 'a18d09b415c74f9620db5c17123c70cdab2e802f', class: "customernumberoption-text" }, index.h("span", { key: 'c81c2ffa9b370d571d538895b290c8e88a0efaff', class: "customernumberoption-title" }, this.heading), index.h("span", { key: 'd857c919e31d13dfe542f95a5f3251578b9ffa47', class: "customernumberoption-description" }, this.description), index.h("slot", { key: 'd5feb780cf0e638667975a81de5e90f4c0c793a8' })))));
+        return (index.h(index.Host, { key: 'd0aa3dffdfed44d609a37b9dd566f092b36808f8' }, index.h("a", { key: '968d1eef084a71f813f840dd3574768fc90aeca6', class: "customernumberoption", href: this.url }, index.h("span", { key: 'cdf8fa316075821a579a967aa16316dec75643f4', class: "customernumberoption-text" }, index.h("span", { key: '4eab480ea560ae5eedb2a26df6854604c5c1e7be', class: "customernumberoption-title" }, this.heading), index.h("span", { key: '6194c352124efdf08c34dc83a807ecc37cbafba4', class: "customernumberoption-description" }, this.description), index.h("slot", { key: '2d8936f96d18b9f7f75a9e07038c6011dfc21bdc' })))));
     }
 };
 PnProfileSelectorOption.style = PnCustomernumberSelectorOptionStyle0;

package/dist/cjs/pn-customernumber-selector-option.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-customernumber-selector-option.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iCAAiC,GAAG,~~8lCAA8lC~~,CAAC;~~AACzoC~~,6CAAe,iCAAiC;;MCInC,uBAAuB;;;uBAGR,EAAE;2BACE,EAAE;mBACV,EAAE;;;IAExB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,gEAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5CA,mEAAM,KAAK,EAAC,2BAA2B,IACrCA,mEAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC9DA,mEAAM,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,WAAW,CAAQ,EACxEA,oEAAQ,CACH,CACL,CACC,EACP;KACH;;;;;;","names":["h","Host"],"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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iCAAiC,GAAG,qxBAAqxB,CAAC;AACh0B,6CAAe,iCAAiC;;MCInC,uBAAuB;;;uBAGR,EAAE;2BACE,EAAE;mBACV,EAAE;;;IAExB,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,gEAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAC5CA,mEAAM,KAAK,EAAC,2BAA2B,IACrCA,mEAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC9DA,mEAAM,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,WAAW,CAAQ,EACxEA,oEAAQ,CACH,CACL,CACC,EACP;KACH;;;;;;","names":["h","Host"],"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/dist/cjs/pn-customernumber-selector.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
-const angle_up = require('./angle_up-049ec1d8.js');
+const index = require('./index-34e1c673.js');
+const icon$1 = '<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>';
+const angle_down = icon$1;
+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>';
+const angle_up = icon;
 const translations = {
     sv: {
@@ -26,7 +31,7 @@ const translations = {
     },
 };
-const pnCustomernumberSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.customernumber-container{position:relative;padding:0;display:flex;flex-direction:column;border-radius:0.8rem;border:0.1rem solid #969087;transition:border 0.15s ease}.customernumber-container:hover,pn-customernumber-selector[open] .customernumber-container{border-color:#005d92}pn-customernumber-selector[open] .customernumber-container{border-bottom-left-radius:0;border-bottom-right-radius:0}.customernumber-toggle{display:flex;z-index:11;position:relative;margin:0;border-radius:0.8rem;padding:1rem;border:0;background:transparent;font-size:1em;text-align:left;outline:0;cursor:pointer}.customernumber-toggle pn-icon{align-self:center}.customernumber-selected{flex-grow:1;max-width:calc(100% - 2.4rem);overflow:hidden}.customernumber-selected-title{color:#005d92}.customernumber-selected-description{font-size:0.875em;width:100%;overflow:hidden;text-overflow:ellipsis}.customernumber-options{position:absolute;z-index:10;left:-0.1rem;right:-0.1rem;top:100%;border:0.1rem solid #005d92;border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem;max-height:0;opacity:0;transform-origin:top left;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, opacity 0.1s linear, max-height 0.1s ease;overflow-y:auto}pn-customernumber-selector[open] .customernumber-options{opacity:1;transition-delay:0s;max-height:500rem}";
+const pnCustomernumberSelectorCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.customernumber-container{position:relative;padding:0;display:flex;flex-direction:column;border-radius:0.8rem;border:0.1rem solid #969087;transition:border 0.15s ease}.customernumber-container:hover,pn-customernumber-selector[open] .customernumber-container{border-color:#005d92}pn-customernumber-selector[open] .customernumber-container{border-bottom-left-radius:0;border-bottom-right-radius:0}.customernumber-toggle{display:flex;z-index:11;position:relative;margin:0;border-radius:0.8rem;padding:1rem;border:0;background:transparent;font-size:1em;text-align:left;outline:0;cursor:pointer}.customernumber-toggle pn-icon{align-self:center}.customernumber-selected{flex-grow:1;max-width:calc(100% - 2.4rem);overflow:hidden}.customernumber-selected-title{color:#005d92}.customernumber-selected-description{font-size:0.875em;width:100%;overflow:hidden;text-overflow:ellipsis}.customernumber-options{position:absolute;z-index:10;left:-0.1rem;right:-0.1rem;top:100%;border:0.1rem solid #005d92;border-bottom-left-radius:0.8rem;border-bottom-right-radius:0.8rem;max-height:0;opacity:0;transform-origin:top left;transition:transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s, opacity 0.1s linear, max-height 0.1s ease;overflow-y:auto}pn-customernumber-selector[open] .customernumber-options{opacity:1;transition-delay:0s;max-height:500rem}";
 const PnCustomernumberSelectorStyle0 = pnCustomernumberSelectorCss;
 const PnCustomernumberSelector = class {
@@ -51,7 +56,7 @@ const PnCustomernumberSelector = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a41ce27f21fc0a16c0b6576c6af95b20ba5bdbd3' }, index.h("div", { key: 'faa8c7c3659d0a0b72c84a287330bb6988dc3bf5', class: "customernumber-container" }, index.h("button", { key: 'e538a91434e961b2b9b6d6f89ce70656bbc3b538', class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => (this.open = !this.open) }, index.h("div", { key: '18446ed1324b90543dc1edc3a016aec0f37d8d73', class: "customernumber-selected" }, index.h("strong", { key: '9979f4f6d3701f577adef74b8273a2ac9709c03d', class: "customernumber-selected-title" }, this.heading), index.h("div", { key: '454f058daf095418f5fee28e061363c035e9ae62', class: "customernumber-selected-description" }, this.description)), index.h("pn-icon", { key: '69b6614740bbadad07deb3a3fe9227aa2025fb2c', icon: this.open ? angle_up.angle_up : angle_up.angle_down, small: "false", color: "blue700" })), index.h("div", { key: 'b7aec42dc18e95235f546120f00f826af2542603', class: "customernumber-options" }, index.h("slot", { key: 'e369c5409b3cbcc9ab7ed2370ce77f7b080dc546' })))));
+        return (index.h(index.Host, { key: 'cdd03a497e3429223233ffa10a007419af9f96e2' }, index.h("div", { key: 'd64d582414a677fc76a3ffa4c5382990c9914fa6', class: "customernumber-container" }, index.h("button", { key: 'db049a3a059697841bef663945cbbb6627dee11e', class: "customernumber-toggle", "aria-label": this.i18n.toggleLinkTitleText, onClick: () => (this.open = !this.open) }, index.h("div", { key: '0ded400b9241a2d5e6055601cf2cf07b3637cecc', class: "customernumber-selected" }, index.h("strong", { key: 'c8911dc054609431bf55bc375ef34d2a382a7b26', class: "customernumber-selected-title" }, this.heading), index.h("div", { key: '0d00e94067c33420bc6284a571223cf8e48ce29d', class: "customernumber-selected-description" }, this.description)), index.h("pn-icon", { key: 'c81ca98a7e5835272fca2a4c1c1994574e1ca05a', icon: this.open ? angle_up : angle_down, small: "false", color: "blue700" })), index.h("div", { key: '8f92456d5903e82b64e128b914a0d843a7f71f50', class: "customernumber-options" }, index.h("slot", { key: 'ad04547ed0a55429e375b577a77eae960448948b' })))));
     }
 };
 PnCustomernumberSelector.style = PnCustomernumberSelectorStyle0;

package/dist/cjs/pn-customernumber-selector.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-customernumber-selector.entry.cjs.js","mappings":"~~;;;;;;;AAAO~~,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,~~4sDAA4sD~~,CAAC;~~AACjvD~~,uCAAe,2BAA2B;;MCU7B,wBAAwB;;;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,~~QACEA~~,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,qEAAQ,KAAK,EAAC,uBAAuB,gBAAa,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACtHA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,qEAAQ,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,OAAO,CAAU,EACrEA,kEAAK,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,WAAW,CAAO,CACrE,EACNA,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,~~GAAGE~~,~~iBAAQ~~,~~GAAGC~~,~~mBAAU~~,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC3E,~~EACTH~~,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host","~~angle_up~~","angle_down"],"~~sources~~":["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":["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.entry.cjs.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;;MCU7B,wBAAwB;;;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,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,qEAAQ,KAAK,EAAC,uBAAuB,gBAAa,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IACtHA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,qEAAQ,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,OAAO,CAAU,EACrEA,kEAAK,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,WAAW,CAAO,CACrE,EACNA,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAC3E,EACTA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,oEAAQ,CACJ,CACF,CACD,EACP;KACH;;;;;;","names":["icon","h","Host"],"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/dist/cjs/pn-date-and-time.cjs.entry.js CHANGED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
+const index = require('./index-34e1c673.js');
 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>';
 const alert_info_circle = icon;
-const pnDateAndTimeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-date-and-time pn-date-picker .pn-date-picker{container-type:normal}pn-date-and-time label{color:#5e554a;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5e554a;display:block}pn-date-and-time .error-message{color:#a70707}";
+const pnDateAndTimeCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-date-and-time pn-date-picker .pn-date-picker{container-type:normal}pn-date-and-time label{color:#5e554a;font-size:1.4rem}pn-date-and-time .time-separator{margin-top:auto;margin-bottom:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5e554a;display:block}pn-date-and-time .error-message{color:#a70707}";
 const PnDateAndTimeStyle0 = pnDateAndTimeCss;
 const PnDateAndTime = class {

package/dist/cjs/pn-date-and-time.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-date-and-time.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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 pn-date-picker .pn-date-picker {\n container-type: normal;\n }\n\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\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}","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: HTMLSelectElement = null;\n pnTimeFromMinuteDropdown: HTMLSelectElement = null;\n pnTimeToHourDropdown: HTMLSelectElement = null;\n pnTimeToMinuteDropdown: HTMLSelectElement = 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() disabledDates: string = null;\n @Prop() datePlaceholder: string = '';\n @Prop() minFromHour: number;\n @Prop() maxToHour: number;\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;\n @State() selectedFromMin: number;\n @State() selectedToHour: number;\n @State() selectedToMin: number;\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 setInitialValues() {\n this.setLanguageCode();\n this.setFirstValidDate();\n\n if (!this.minFromHour) {\n this.minFromHour = 14;\n }\n\n if (!this.maxToHour) {\n this.maxToHour = 17;\n }\n\n this.hourArr = this.getNumbersAsStringArr(this.minFromHour, this.maxToHour, 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);\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 setLanguageCode() {\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[0]);\n this.selectedFromMin = parseInt(this.minuteArr[0]);\n this.selectedToHour = parseInt(this.hourArr[this.hourArr.length -1]);\n this.selectedToMin = parseInt(this.minuteArr[this.minuteArr.length -1 ]);\n\n this.updateHiddenValue();\n }\n\naddEventHandlers() {\n const boundHandleChange = this.handleChange.bind(this);\n\n this.pnDatePicker.addEventListener('dateselection', boundHandleChange);\n this.pnTimeFromHourDropdown.addEventListener('change', boundHandleChange);\n this.pnTimeFromMinuteDropdown.addEventListener('change', boundHandleChange);\n this.pnTimeToHourDropdown.addEventListener('change', boundHandleChange);\n this.pnTimeToMinuteDropdown.addEventListener('change', boundHandleChange);\n}\n\n\nhandleChange(e: CustomEvent) {\n\n if (e.target === this.pnDatePicker) {\n this.selectedDate = e.detail.start;\n }\n\n const target = e.target as HTMLSelectElement;\n\n const value = target.value;\n\n if (target.name === this.pnTimeFromHourDropdown.name) {\n this.selectedFromHour = parseInt(value);\n } else if (target.name === this.pnTimeFromMinuteDropdown.name) {\n this.selectedFromMin = parseInt(value);\n } else if (target.name === this.pnTimeToHourDropdown.name) {\n this.selectedToHour = parseInt(value);\n } else if (target.name === this.pnTimeToMinuteDropdown.name) {\n this.selectedToMin = parseInt(value);\n }\n\n this.updateHiddenValue();\n}\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 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('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 HTMLInputElement)}\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.datePlaceholder}\n disabled-dates={this.disabledDates}\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 HTMLSelectElement)}\n name=\"date-and-time-from-hour\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === 0}>{hour}</option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLSelectElement)}\n name=\"date-and-time-from-minute\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === 0}>{minute}</option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLSelectElement)}\n name=\"date-and-time-to-hour\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === this.hourArr.length -1}>{hour}</option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLSelectElement)}\n name=\"date-and-time-to-minute\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === this.minuteArr.length -1}>{minute}</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.entry.cjs.js","mappings":"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","names":["h","Host","index"],"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 pn-date-picker .pn-date-picker {\n container-type: normal;\n }\n\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\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}","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: HTMLSelectElement = null;\n pnTimeFromMinuteDropdown: HTMLSelectElement = null;\n pnTimeToHourDropdown: HTMLSelectElement = null;\n pnTimeToMinuteDropdown: HTMLSelectElement = 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() disabledDates: string = null;\n @Prop() datePlaceholder: string = '';\n @Prop() minFromHour: number;\n @Prop() maxToHour: number;\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;\n @State() selectedFromMin: number;\n @State() selectedToHour: number;\n @State() selectedToMin: number;\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 setInitialValues() {\n this.setLanguageCode();\n this.setFirstValidDate();\n\n if (!this.minFromHour) {\n this.minFromHour = 14;\n }\n\n if (!this.maxToHour) {\n this.maxToHour = 17;\n }\n\n this.hourArr = this.getNumbersAsStringArr(this.minFromHour, this.maxToHour, 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);\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 setLanguageCode() {\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[0]);\n this.selectedFromMin = parseInt(this.minuteArr[0]);\n this.selectedToHour = parseInt(this.hourArr[this.hourArr.length -1]);\n this.selectedToMin = parseInt(this.minuteArr[this.minuteArr.length -1 ]);\n\n this.updateHiddenValue();\n }\n\naddEventHandlers() {\n const boundHandleChange = this.handleChange.bind(this);\n\n this.pnDatePicker.addEventListener('dateselection', boundHandleChange);\n this.pnTimeFromHourDropdown.addEventListener('change', boundHandleChange);\n this.pnTimeFromMinuteDropdown.addEventListener('change', boundHandleChange);\n this.pnTimeToHourDropdown.addEventListener('change', boundHandleChange);\n this.pnTimeToMinuteDropdown.addEventListener('change', boundHandleChange);\n}\n\n\nhandleChange(e: CustomEvent) {\n\n if (e.target === this.pnDatePicker) {\n this.selectedDate = e.detail.start;\n }\n\n const target = e.target as HTMLSelectElement;\n\n const value = target.value;\n\n if (target.name === this.pnTimeFromHourDropdown.name) {\n this.selectedFromHour = parseInt(value);\n } else if (target.name === this.pnTimeFromMinuteDropdown.name) {\n this.selectedFromMin = parseInt(value);\n } else if (target.name === this.pnTimeToHourDropdown.name) {\n this.selectedToHour = parseInt(value);\n } else if (target.name === this.pnTimeToMinuteDropdown.name) {\n this.selectedToMin = parseInt(value);\n }\n\n this.updateHiddenValue();\n}\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 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('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 HTMLInputElement)}\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.datePlaceholder}\n disabled-dates={this.disabledDates}\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 HTMLSelectElement)}\n name=\"date-and-time-from-hour\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === 0}>{hour}</option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeFromMinuteDropdown = el as HTMLSelectElement)}\n name=\"date-and-time-from-minute\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === 0}>{minute}</option>)}\n </pn-select>\n <div class=\"time-separator\">\n <span>-</span>\n </div>\n <pn-select\n ref={el => (this.pnTimeToHourDropdown = el as HTMLSelectElement)}\n name=\"date-and-time-to-hour\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.hourArr?.map((hour: string, index: number) => <option label={hour} value={hour} selected={index === this.hourArr.length -1}>{hour}</option>)}\n </pn-select>\n <pn-select\n ref={el => (this.pnTimeToMinuteDropdown = el as HTMLSelectElement)}\n name=\"date-and-time-to-minute\"\n class=\"date-and-time-dropdown--time\"\n invalid={this.invalidTimespan} >\n {this.minuteArr?.map((minute: string, index: number) => <option label={minute} value={minute} selected={index === this.minuteArr.length -1}>{minute}</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/dist/cjs/pn-dropdown-choice-adds-row.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-b02670c2.js');
+const index = require('./index-34e1c673.js');
 const index$1 = require('./index-61ff1b55.js');
-const pnDropdownChoiceAddsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn-dropdown-choice-adds-row{display:block;width:80rem}pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:50%;margin-bottom:1rem}@media only screen and (max-width: 640px){pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:100%}}pn-dropdown-choice-adds-row .pn-dropdown-choice-table{width:100%;border-spacing:0rem;border:none !important}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th{text-align:left;padding:1rem 0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th label{color:#5e554a;font-size:1.4rem;font-weight:400}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .generated-table-row{display:flex;margin-bottom:2rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header{display:flex;margin:2rem 0 3rem 0;font-weight:500}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name{padding-right:0.5rem;width:35%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name pn-select{width:95%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input{width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input pn-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input pn-input{width:100%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-delete,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-delete{margin:1rem;width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody td{padding:0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody tr:nth-child(even){background-color:#effbff}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody .tr-delete{text-align:center}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td small{color:#a70707;vertical-align:middle}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td pn-icon{margin-right:0.25em;vertical-align:middle}";
+const pnDropdownChoiceAddsRowCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-dropdown-choice-adds-row{display:block;width:80rem}pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:50%;margin-bottom:1rem}@media only screen and (max-width: 640px){pn-dropdown-choice-adds-row .pn-row-select-dropdown{width:100%}}pn-dropdown-choice-adds-row .pn-dropdown-choice-table{width:100%;border-spacing:0rem;border:none !important}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th{text-align:left;padding:1rem 0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table thead th label{color:#5e554a;font-size:1.4rem;font-weight:400}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .generated-table-row{display:flex;margin-bottom:2rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header{display:flex;margin:2rem 0 3rem 0;font-weight:500}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name{padding-right:0.5rem;width:35%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-name pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-dropdown pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-column pn-select,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-name pn-select{width:95%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input{width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-input pn-input,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-input pn-input{width:100%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table .table-header-delete,pn-dropdown-choice-adds-row .pn-dropdown-choice-table .tr-delete{margin:1rem;width:15%}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody td{padding:0.5rem}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody tr:nth-child(even){background-color:#effbff}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tbody .tr-delete{text-align:center}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td small{color:#a70707;vertical-align:middle}pn-dropdown-choice-adds-row .pn-dropdown-choice-table tfoot td pn-icon{margin-right:0.25em;vertical-align:middle}";
 const PnDropdownChoiceAddsRowStyle0 = pnDropdownChoiceAddsRowCss;
 const pnDropdownChoiceAddsRow = class {
@@ -92,14 +92,12 @@ const pnDropdownChoiceAddsRow = class {
                 this.rowvalues.emit('');
                 return;
             }
-            let allRowsValid = true;
             const formValues = allRows.map(row => {
                 const nameElm = row.querySelector('.tr-name');
                 const dropdownElm = row.querySelector('.tr-dropdown');
                 const inputElm = row.querySelector('.tr-input');
                 if (!nameElm || !inputElm) {
-                    allRowsValid = false;
-                    return null;
+                    throw new Error('Required elements missing from row');
                 }
                 const rowData = {
                     row: [
@@ -109,14 +107,11 @@ const pnDropdownChoiceAddsRow = class {
                         }
                     ]
                 };
-                if (dropdownElm && dropdownElm.querySelector('pn-select')) {
+                if (dropdownElm) {
                     const pnSelect = dropdownElm.querySelector('pn-select');
                     const nativeSelect = pnSelect?.querySelector('select');
                     const dropdownSelection = nativeSelect?.value || '';
-                    if (!dropdownSelection) {
-                        allRowsValid = false;
-                    }
-                    else {
+                    if (dropdownSelection) {
                         rowData.row.push({
                             name: this.rowDropdownLabel,
                             value: dropdownSelection
@@ -131,22 +126,16 @@ const pnDropdownChoiceAddsRow = class {
                         value: inputValue.toString()
                     });
                 }
-                else {
-                    allRowsValid = false;
-                }
                 return rowData;
             });
-            if (!allRowsValid || !formValues.length || formValues.includes(null)) {
+            if (!formValues.length || formValues.length !== allRows.length) {
                 this.formValue = '';
-                this.rowvalues.emit('');
                 return;
             }
             this.formValue = `PN-JSON|${JSON.stringify(formValues)}`;
             if (this.validateInputs()) {
                 this.rowvalues.emit(this.formValue);
-            }
-            else {
-                this.rowvalues.emit('');
+                return;
             }
         }
         catch (error) {
@@ -194,7 +183,6 @@ const pnDropdownChoiceAddsRow = class {
         this.tableBody.appendChild(newRow);
         this.updateRowSelectDropdown();
         this.nextRowIndex++;
-        selectedElement.value = '';
     }
     getCurrentRow(selectedValue) {
         return this.hostElement.querySelectorAll(`.tr-name[data-name='${selectedValue}'`);
@@ -333,7 +321,7 @@ const pnDropdownChoiceAddsRow = class {
         return true;
     }
     render() {
-        return (index.h(index.Host, { key: '4d75a1a804885406d9bf70647ee031b283001316' }, index.h("div", { key: '4db2eab15b25d322bd8081f22fa0dfb4e40ff1d8', class: "dropdown-choice-form-row" }, index.h("pn-select", { key: '34479df6fd80391a95628b34a9d3d4007a43700a', ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown", language: this.languageCode }, index.h("option", { key: 'c445488973b9c7127a55f0f83cfb46276f3a165e', value: "", selected: true, disabled: true }, this.addRowDropdownPlaceholder), this.rowSelectDropdownArr?.map((value) => index.h("option", { label: value, value: value }, value)))), index.h("div", { key: '15abdc5dae3056d3e81069c01e67245aacba5c59', class: "dropdown-choice-form-row" }, index.h("div", { key: '2386cfc37b14b5769e095596f191054b2fb3e0af', class: "pn-dropdown-choice-table" }, index.h("div", { key: '123b39e0fc0dba53aa35da0dea41178f77633c76', ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (index.h("div", { class: "table-header" }, index.h("div", { class: "table-header-name" }, index.h("label", null, this.rowNameLabel)), index.h("div", { class: "table-header-dropdown" }, index.h("label", null, this.rowDropdownLabel)), index.h("div", { class: "table-header-input" }, index.h("label", null, this.rowInputLabel)), index.h("div", { class: "table-header-delete" })))), index.h("div", { key: '8d6e932979cd2065cbf77a70e74e30d087351b24', ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, index.h("slot", { key: '8957b9b3b30d090c51bc993ff4676f91a2846a15' }))))));
+        return (index.h(index.Host, { key: 'fd91d96d714f89cab04d27588c78c933e4758a29' }, index.h("div", { key: '3c8c900cc143afe7331b5717649d0ceef3fb1b97', class: "dropdown-choice-form-row" }, index.h("pn-select", { key: '42cf006bfd234c61e115bb3fd90d8fa5bc9b937f', ref: el => (this.pnRowSelectDropdown = el), name: this.addRowDropdownName, label: this.addRowDropdownLabel, class: "pn-row-select-dropdown", language: this.languageCode }, index.h("option", { key: 'aa923ce23c5e94ac3ee98701b33a83461cdd40d9', value: "", selected: true, disabled: true }, this.addRowDropdownPlaceholder), this.rowSelectDropdownArr?.map((value) => index.h("option", { label: value, value: value }, value)))), index.h("div", { key: '41cd6fc5cca7544033bbb7e811da28a92f631f44', class: "dropdown-choice-form-row" }, index.h("div", { key: 'a76149b35b83be8964ac9e0177d5677f7bdb9c39', class: "pn-dropdown-choice-table" }, index.h("div", { key: '417b71529a5491b4e8900b800bbbf89fe2ef0c6d', ref: el => (this.tableHead = el) }, this.nextRowIndex === 0 ? null : (index.h("div", { class: "table-header" }, index.h("div", { class: "table-header-name" }, index.h("label", null, this.rowNameLabel)), index.h("div", { class: "table-header-dropdown" }, index.h("label", null, this.rowDropdownLabel)), index.h("div", { class: "table-header-input" }, index.h("label", null, this.rowInputLabel)), index.h("div", { class: "table-header-delete" })))), index.h("div", { key: '7ff98dc256a4aa7a613ac06474b18fc7f9458aeb', ref: el => (this.tableBody = el), class: "pn-dropdown-choice-table-slot" }, index.h("slot", { key: '659095efebf6f2b123b4586b2d2913431b1cc6c2' }))))));
     }
     static get watchers() { return {
         "dropdownData": ["dropdownDataWatcher"]