npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.2 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.2 → 4.0.0

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

package/esm/pn-charts-card.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, g as getElement, h, d as Host } from './index-51d67461.js';
+import { r as registerInstance, g as getElement, h, d as Host } from './index-c311acd6.js';
 import { a as arrow_right } from './arrow_right-f4852d04.js';
-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 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 PnChartsCardStyle0 = pnChartsCardCss;
 const PnChartsCard = class {

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

	@@ -1 +1 @@
1	- {"file":"pn-charts-card.entry.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,QACE,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,GAAG,gCAAgC,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,GAAG,QAAQ,GAAG,IAAI,IAChK,IAAI,CAAC,WAAW,OAAE,eAAS,IAAI,EAAE,WAAW,QAAa,CACxD,EACJ;SACH;QACD,OAAO,IAAI,CAAC;KACb,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,MAAM;aAER,4DAAK,KAAK,EAAC,6EAA6E,IACtF,2DAAI,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAM,EACtD,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEH,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,4DAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,MAAM;aAER,4DAAK,KAAK,EAAC,+EAA+E,IACxF,2DAAI,KAAK,EAAC,iDAAiD,IAAE,IAAI,CAAC,MAAM,CAAM,EAC9E,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEH,6DAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC7D,4DAAK,KAAK,EAAC,+BAA+B,IACxC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1B,IAAI,CAAC,MAAM,GAAG,SAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,MAAM,CAAK,GAAG,IAAI,EAC9E,IAAI,CAAC,eAAe,EAAE,CACnB,CACF,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;","names":[],"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.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,QACE,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,GAAG,gCAAgC,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,GAAG,QAAQ,GAAG,IAAI,IAChK,IAAI,CAAC,WAAW,OAAE,eAAS,IAAI,EAAE,WAAW,QAAa,CACxD,EACJ;SACH;QACD,OAAO,IAAI,CAAC;KACb,CAAC;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG,EACvC,4DAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,MAAM;aAER,4DAAK,KAAK,EAAC,6EAA6E,IACtF,2DAAI,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAM,EACtD,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEH,4DAAK,KAAK,EAAC,kCAAkC,IAC3C,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,4DAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,MAAM;aAER,4DAAK,KAAK,EAAC,+EAA+E,IACxF,2DAAI,KAAK,EAAC,iDAAiD,IAAE,IAAI,CAAC,MAAM,CAAM,EAC9E,4DAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,SAAS,CAAO,CAClE,CACP,EAEH,6DAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAC7D,4DAAK,KAAK,EAAC,+BAA+B,IACxC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1B,IAAI,CAAC,MAAM,GAAG,SAAG,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,MAAM,CAAK,GAAG,IAAI,EAC9E,IAAI,CAAC,eAAe,EAAE,CACnB,CACF,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;","names":[],"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/esm/pn-chat-message_2.entry.js ADDED Viewed

@@ -0,0 +1,341 @@
+import { r as registerInstance, h, d as Host, g as getElement } from './index-c311acd6.js';
+import { a as arrow_left } from './arrow_left-2c8d8857.js';
+import { a as arrow_right } from './arrow_right-f4852d04.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="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10c-.97 0-1.908-.138-2.797-.397-1.242-.36-2.352-.61-3.409-.464l-2.095.29A1 1 0 0 1 2.572 20.3l.289-2.095c.146-1.057-.103-2.167-.464-3.41A10 10 0 0 1 2 12m10-8a8 8 0 0 0-7.683 10.239c.364 1.252.734 2.724.525 4.24l-.108.788.787-.11c1.516-.208 2.988.162 4.24.526.71.206 1.46.317 2.239.317a8 8 0 1 0 0-16m-.034 4.5c-.445 0-.84.285-.981.707l-.037.11a1 1 0 0 1-1.897-.633l.037-.11A3.03 3.03 0 0 1 11.966 6.5h.18C13.734 6.5 15 7.807 15 9.371a2.83 2.83 0 0 1-1.553 2.523.81.81 0 0 0-.447.724V13a1 1 0 1 1-2 0v-.382c0-1.064.6-2.037 1.553-2.512A.83.83 0 0 0 13 9.37a.87.87 0 0 0-.854-.871zm.034 6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>';
+const faq = icon;
+const pnChatMessageCss = "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-chat-message{display:flex;text-align:left}pn-chat-message.user,pn-chat-message.buttonresponse{justify-content:flex-end}pn-chat-message.system-message{text-align:center;justify-content:center}pn-chat-message .message-container{border-radius:0.8rem;display:flex;gap:1rem;max-width:75%;overflow-x:hidden}pn-chat-message .message-container .category{width:2.6rem}pn-chat-message .message-container.bot .message,pn-chat-message .message-container.agent .message{background-color:#f3f2f2}pn-chat-message .message-container.link{flex-basis:100%}pn-chat-message .message-container.link .message{background-color:#effbff;box-shadow:0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);transition:box-shadow ease-in-out 0.5s;padding:0}pn-chat-message .message-container.link .message:hover{box-shadow:0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.2), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.23)}pn-chat-message .message-container.link .message a{color:#000000;display:flex;justify-content:space-between;padding:1rem 1.6rem;text-decoration:none}pn-chat-message .message-container.link .business.message{background-color:#fdefee}pn-chat-message .message-container.button{flex-basis:100%;text-align:center;max-width:unset}pn-chat-message .message-container.button .message{padding:0}pn-chat-message .message-container.card{border:solid 1px #d3cecb;border-radius:1.6rem;flex-basis:100%;max-width:100%}pn-chat-message .message-container.card .message{display:flex;flex-direction:column;gap:0.8rem;padding:1.6rem}pn-chat-message .message-container.card .card-heading{font-size:1.6rem;line-height:2.4rem;font-weight:700}pn-chat-message .message-container.card .cta{display:flex;flex-direction:row;gap:0.5rem}pn-chat-message .message-container.card .read-more{align-self:flex-start;margin-top:auto}pn-chat-message .message-container.user .message,pn-chat-message .message-container.buttonresponse .message{background-color:#e0f8ff;color:#2d2013;border-radius:0.8rem 0.8rem 0 0.8rem}pn-chat-message .message-container .message{border-radius:0 0.8rem 0.8rem 0.8rem;display:inline-block;flex:1 1 auto;font-size:1.4rem;line-height:2rem;padding:1rem 1.6rem;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;word-break:break-word}@media (max-width: 767px){pn-chat-message .message-container .message{font-size:1.6rem}}pn-chat-message .message-container.agent .category .pn-icon{background-color:#00a0d6;color:#ffffff;text-align:center;border-radius:50%;display:inline-block;width:2.5rem;height:2.5rem;font-weight:500;font-size:1.2rem;line-height:2.6rem}pn-chat-message[data-card]{height:100%}";
+const PnChatMessageStyle0 = pnChatMessageCss;
+const PnChatMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.category = undefined;
+        this.customerSegment = undefined;
+        this.agentName = undefined;
+    }
+    robotIcon = '<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 20"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id="clippath"> <rect class="st0" width="20" height="20"/> </clipPath> </defs> <g class="st5"> <g> <path class="st2" d="M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z"/> <path class="st3" d="M10.5,4h-.5v2.8h.5v-2.8Z"/> <path class="st3" d="M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st3" d="M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z"/> <path class="st4" d="M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z"/> <path d="M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z"/> <path class="st4" d="M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z"/> <path class="st4" d="M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z"/> <path class="st3" d="M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z"/> <path class="st6" d="M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z"/> <path class="st1" d="M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st1" d="M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path d="M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z"/> </g> </g> </svg>';
+    getIcon() {
+        let icon = null;
+        switch (this.category) {
+            case 'Bot':
+                return this.robotIcon;
+            case 'Agent':
+                return this.agentName;
+            case 'Link':
+                return faq;
+        }
+        return icon;
+    }
+    getMessageClass() {
+        switch (this.category) {
+            case 'ButtonResponse':
+                return 'buttonresponse';
+            case 'User':
+                return 'user';
+            case 'System':
+                return 'system-message';
+            default:
+                return undefined;
+        }
+    }
+    render() {
+        const segmentClass = this.customerSegment?.toLowerCase() || '';
+        const categoryClass = this.category?.toLowerCase() || '';
+        return (h(Host, { key: 'b6d8b3fbaa4aa9fff3b73f5551ecc1f3d55d4e6c', class: this.getMessageClass() }, h("div", { key: '196dfe9d041e5aa3c0f22c74cf15bdf7c99db8b1', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: '333d599b29fbed5b5483cbf23860cdf91cb9c645', class: "category" }, h("pn-icon", { key: '922332436e444a7bd95aaf985ad7e15202c7b5a1', icon: this.getIcon(), color: this.category === 'User' ? 'blue700' : 'blue700', "aria-hidden": "true", role: "presentation" }))), h("span", { key: 'd5c36c5445ec13b4713a133db6c9c7e75c5cd717', class: `message ${segmentClass}` }, h("slot", { key: 'b49928b152d6d7e07f80abc3e86beb53b7f27441' })))));
+    }
+};
+PnChatMessage.style = PnChatMessageStyle0;
+const pnMarketwebCarouselCss = "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-marketweb-carousel{display:inline-block}pn-marketweb-carousel .pn-marketweb-carousel .slider-wrapper{margin:1rem;overflow:hidden;position:relative;touch-action:pan-y pinch-zoom}pn-marketweb-carousel .pn-marketweb-carousel .slides-container{display:flex;width:100%;list-style:none;margin:0;padding:0;overflow:hidden;position:relative;touch-action:none;transition:transform 0.5s ease-in-out;user-select:none}pn-marketweb-carousel .pn-marketweb-carousel .slides-container[data-partial=false] .slide{width:100%}pn-marketweb-carousel .pn-marketweb-carousel [data-slide]{flex:0 0 auto;transition:transform 0.5s ease-in-out}pn-marketweb-carousel .pn-marketweb-carousel .nav-button{cursor:pointer;display:flex;position:absolute;top:0;bottom:0;transform:translateY(-50%);height:2rem;margin:auto;padding:0;opacity:0.85;transition:opacity 200ms;z-index:1}pn-marketweb-carousel .pn-marketweb-carousel .nav-button.invisible{opacity:0}pn-marketweb-carousel .pn-marketweb-carousel .nav-button[data-show=false]{display:none}pn-marketweb-carousel .pn-marketweb-carousel .nav-button:hover,pn-marketweb-carousel .pn-marketweb-carousel .nav-button:focus{opacity:1}pn-marketweb-carousel .pn-marketweb-carousel [data-nav-button-prev]{left:1.75rem;border-radius:0 2rem 2rem 0}pn-marketweb-carousel .pn-marketweb-carousel [data-nav-button-next]{right:1.75rem;border-radius:2rem 0 0 2rem}@media (prefers-reduced-motion: reduce){pn-marketweb-carousel .slides-container{transition:none}pn-marketweb-carousel [data-slide]{transition:none}}";
+const PnMarketwebCarouselStyle0 = pnMarketwebCarouselCss;
+const PnMarketwebCarousel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.previousButtonLabel = undefined;
+        this.nextButtonLabel = undefined;
+        this.ariaNavigationLabel = undefined;
+        this.source = undefined;
+        this.slidesToShow = 1;
+        this.showCarouselButtons = true;
+        this.showFirstSlidePrevButton = false;
+        this.showLastSlideNextButton = false;
+        this.slidesData = [];
+        this.currentSlide = 0;
+        this.isDragging = false;
+        this.slideWidth = 0;
+    }
+    static DEFAULTS = {
+        SWIPE_THRESHOLD_PX: 50,
+        ANIMATION_DURATION_MS: 300,
+        OVERSCROLL_LIMIT_PERCENT: 30,
+    };
+    get hostElement() { return getElement(this); }
+    slides = null;
+    slidesContainer = null;
+    totalSlides = 0;
+    prevButton = null;
+    nextButton = null;
+    dragStartX = 0;
+    listeners = [];
+    memoizedSlideWidth = null;
+    componentWillLoad() {
+        this.setInitialValues();
+    }
+    componentDidLoad() {
+        this.setupCarousel();
+        window.addEventListener('resize', this.handleResize);
+    }
+    disconnectedCallback() {
+        this.cleanup();
+        window.removeEventListener('resize', this.handleResize);
+    }
+    async goToSlide(index) {
+        if (index >= 0 && index < this.totalSlides) {
+            this.currentSlide = index;
+            this.moveSlides();
+            this.updateNavButtons();
+        }
+    }
+    async getCurrentSlide() {
+        return this.currentSlide;
+    }
+    handleSourceChange(newValue) {
+        if (newValue) {
+            this.setInitialValues();
+        }
+    }
+    setInitialValues() {
+        if (!this.source?.trim()) {
+            console.warn('No source provided for carousel');
+            return;
+        }
+        try {
+            const parsedData = JSON.parse(this.source);
+            if (!parsedData?.slides) {
+                throw new Error('Invalid slides data structure');
+            }
+            if (Array.isArray(parsedData.slides)) {
+                this.slidesData = parsedData.slides;
+                this.showCarouselButtons = this.slidesData.length > 1;
+            }
+            else {
+                throw new Error('Slides data is not an array');
+            }
+        }
+        catch (error) {
+            console.error('Error parsing carousel source:', error instanceof Error ? error.message : 'Unknown error');
+            this.slidesData = [];
+        }
+    }
+    setupCarousel() {
+        this.initializeElements();
+        this.attachEventListeners();
+        this.updateNavButtons();
+    }
+    initializeElements() {
+        this.slidesContainer = this.hostElement.querySelector('[data-slides-container]');
+        this.slides = this.hostElement.querySelectorAll('[data-slide]');
+        this.totalSlides = this.slides?.length ?? 0;
+        if (this.showCarouselButtons) {
+            this.prevButton = this.hostElement.querySelector('[data-nav-button-prev]');
+            this.nextButton = this.hostElement.querySelector('[data-nav-button-next]');
+        }
+        this.slideWidth = 100 / this.slidesToShow;
+    }
+    attachEventListeners() {
+        if (!this.slidesContainer)
+            return;
+        const addListener = (element, event, handler, options) => {
+            element.addEventListener(event, handler, options);
+            this.listeners.push({ element, event, handler });
+        };
+        // Touch events
+        addListener(this.slidesContainer, 'touchstart', this.handleTouchStart, { passive: true });
+        addListener(this.slidesContainer, 'touchmove', this.handleTouchMove, { passive: false });
+        addListener(this.slidesContainer, 'touchend', this.handleTouchEnd, { passive: true });
+        // Mouse events
+        addListener(this.slidesContainer, 'mousedown', this.handleTouchStart);
+        addListener(this.slidesContainer, 'mousemove', this.handleTouchMove);
+        addListener(this.slidesContainer, 'mouseup', this.handleTouchEnd);
+        addListener(this.slidesContainer, 'mouseleave', this.handleTouchEnd);
+        if (this.showCarouselButtons) {
+            this.nextButton && addListener(this.nextButton, 'click', this.handleNextClick);
+            this.prevButton && addListener(this.prevButton, 'click', this.handlePrevClick);
+        }
+    }
+    cleanup() {
+        this.listeners.forEach(({ element, event, handler }) => {
+            element.removeEventListener(event, handler);
+        });
+        this.listeners = [];
+    }
+    handleResize = () => {
+        this.memoizedSlideWidth = null;
+    };
+    getSlideWidth() {
+        if (!this.memoizedSlideWidth && this.slidesContainer) {
+            this.memoizedSlideWidth = this.slidesContainer.offsetWidth;
+        }
+        return this.memoizedSlideWidth ?? 0;
+    }
+    handleNextClick = (e) => {
+        e.stopPropagation();
+        this.nextSlide();
+    };
+    handlePrevClick = (e) => {
+        e.stopPropagation();
+        this.prevSlide();
+    };
+    handleTouchStart = (e) => {
+        if (e.target.classList.contains('nav-button'))
+            return;
+        this.isDragging = true;
+        this.dragStartX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+    };
+    handleTouchMove = (e) => {
+        if (!this.isDragging)
+            return;
+        if ('touches' in e) {
+            e.preventDefault();
+        }
+        const currentPosition = 'touches' in e ? e.touches[0].clientX : e.clientX;
+        const diff = currentPosition - this.dragStartX;
+        const percentMove = (diff / this.getSlideWidth()) * 100;
+        this.moveSlides(percentMove);
+    };
+    handleTouchEnd = (e) => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        const currentPosition = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;
+        const diff = currentPosition - this.dragStartX;
+        if (Math.abs(diff) > PnMarketwebCarousel.DEFAULTS.SWIPE_THRESHOLD_PX) {
+            if (diff > 0 && this.currentSlide > 0) {
+                this.currentSlide--;
+            }
+            else if (diff < 0 && this.currentSlide < this.totalSlides - 1) {
+                this.currentSlide++;
+            }
+        }
+        this.moveSlides();
+        this.updateNavButtons();
+    };
+    calculateProportionalTranslation() {
+        // Calculate proportional translation based on slidesToShow
+        return -200 + (this.slidesToShow - 1) * 100;
+    }
+    moveSlides(extraTranslate = 0) {
+        if (!this.slides || !this.slidesContainer) {
+            return;
+        }
+        try {
+            this.slides.forEach((slide, index) => {
+                if (slide) {
+                    // Set each slide's width
+                    slide.style.width = `${this.slideWidth}%`;
+                    let translation = 0;
+                    if (this.slidesToShow === 1) {
+                        // Full slide view
+                        translation = -100 * this.currentSlide;
+                    }
+                    else {
+                        // Partial slide view
+                        if (this.totalSlides === 2) {
+                            // Special case for 2 slides
+                            if (this.currentSlide === 1) {
+                                translation = -50; // Both slides move by -50%
+                            }
+                        }
+                        else {
+                            // 3 or more slides
+                            if (this.currentSlide === 1) {
+                                // Second slide showing - all slides move -100%
+                                translation = -100;
+                            }
+                            else if (this.currentSlide === 2) {
+                                // Third slide showing
+                                if (index === 0) {
+                                    translation = -100; // First slide stays at -100%
+                                }
+                                else {
+                                    // Calculate proportional translation
+                                    translation = this.calculateProportionalTranslation();
+                                }
+                            }
+                        }
+                    }
+                    // Add any extra translation from dragging
+                    translation += extraTranslate;
+                    slide.style.transform = `translateX(${translation}%)`;
+                    slide.style.position = 'relative';
+                    // Update visibility for screen readers
+                    let isVisible;
+                    if (this.slidesToShow === 1) {
+                        isVisible = index === this.currentSlide;
+                    }
+                    else {
+                        isVisible =
+                            this.currentSlide === 0 || // First slide showing
+                                this.totalSlides === 2 || // Two slides - both visible
+                                (this.currentSlide === 1 && translation === -100) || // Second slide showing
+                                (this.currentSlide === 2 &&
+                                    ((index === 0 && translation === -100) || // First slide still visible
+                                        index > 0)); // Second and third slides visible
+                    }
+                    slide.setAttribute('aria-hidden', (!isVisible).toString());
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error moving slides:', error);
+        }
+    }
+    updateNavButtons() {
+        if (!this.showCarouselButtons)
+            return;
+        const isFirstSlide = this.currentSlide === 0;
+        const isLastSlide = this.currentSlide === this.totalSlides - 1;
+        if (this.prevButton) {
+            this.prevButton.classList.toggle('invisible', isFirstSlide && !this.showFirstSlidePrevButton);
+            this.prevButton.dataset.show = isFirstSlide ? `${this.showFirstSlidePrevButton}` : 'true';
+        }
+        if (this.nextButton) {
+            this.nextButton.classList.toggle('invisible', isLastSlide && !this.showLastSlideNextButton);
+            this.nextButton.dataset.show = isLastSlide ? `${this.showLastSlideNextButton}` : 'true';
+        }
+    }
+    nextSlide() {
+        if (this.currentSlide >= this.totalSlides - 1) {
+            this.currentSlide = 0;
+        }
+        else {
+            this.currentSlide++;
+        }
+        this.moveSlides();
+        this.updateNavButtons();
+    }
+    prevSlide() {
+        if (this.currentSlide <= 0) {
+            this.currentSlide = this.totalSlides - 1;
+        }
+        else {
+            this.currentSlide--;
+        }
+        this.moveSlides();
+        this.updateNavButtons();
+    }
+    render() {
+        return (h(Host, { key: 'c80db60a09f02cfeec55338910211c5a27ebedab' }, h("div", { key: '836a9635ebfbadddadfececd8e7f1f94f355f89b', class: "pn-marketweb-carousel" }, h("section", { key: '838b05eb1e8db65b84011b16ba7409dcf23b5eb3', class: "slider-wrapper" }, this.showCarouselButtons && (h("div", { key: '3a3fe23b4a586f047b5391b5b8406e02884d1620', class: "nav-buttons", role: "group", "aria-label": this.ariaNavigationLabel }, h("pn-button", { key: '9d47e97795ad23bf118b54e2e72730e1819b9d3b', appearance: "light", icon: arrow_left, "icon-only": "true", tooltip: this.previousButtonLabel, class: `nav-button ${this.currentSlide === 0 && !this.showFirstSlidePrevButton ? 'invisible' : ''}`, "data-nav-button-prev": true, "area-label": this.previousButtonLabel, "aria-disabled": this.currentSlide === 0 && !this.showFirstSlidePrevButton }), h("pn-button", { key: '58e1c0363129d693f052ec59bd1a3b427db9bc56', appearance: "light", icon: arrow_right, "icon-only": "true", tooltip: this.nextButtonLabel, class: "nav-button", "data-nav-button-next": true, "area-label": this.nextButtonLabel, "aria-disabled": this.currentSlide === this.totalSlides - 1 && !this.showLastSlideNextButton }))), this.slidesData && (h("ul", { key: '1c942f7d043a65e1b73a1bec69fbfdc3691c92f7', class: "slides-container", "data-slides-container": true, "data-partial": this.slidesToShow === 1 ? 'false' : 'true', "aria-live": "polite", style: { display: 'flex', transform: 'none' } }, this.slidesData.map((slide, index) => (h("li", { class: "slide", "data-slide": true, innerHTML: slide, style: { width: this.slideWidth + '%' }, "aria-hidden": index !== this.currentSlide })))))))));
+    }
+    static get watchers() { return {
+        "source": ["handleSourceChange"]
+    }; }
+};
+PnMarketwebCarousel.style = PnMarketwebCarouselStyle0;
+export { PnChatMessage as pn_chat_message, PnMarketwebCarousel as pn_marketweb_carousel };
+//# sourceMappingURL=pn-chat-message_2.entry.js.map

package/esm/pn-chat-message_2.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"pn-chat-message.pn-marketweb-carousel.entry.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/faq.js","src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.scss?tag=pn-chat-message","src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx","src/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.scss?tag=pn-marketweb-carousel","src/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.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=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10c-.97 0-1.908-.138-2.797-.397-1.242-.36-2.352-.61-3.409-.464l-2.095.29A1 1 0 0 1 2.572 20.3l.289-2.095c.146-1.057-.103-2.167-.464-3.41A10 10 0 0 1 2 12m10-8a8 8 0 0 0-7.683 10.239c.364 1.252.734 2.724.525 4.24l-.108.788.787-.11c1.516-.208 2.988.162 4.24.526.71.206 1.46.317 2.239.317a8 8 0 1 0 0-16m-.034 4.5c-.445 0-.84.285-.981.707l-.037.11a1 1 0 0 1-1.897-.633l.037-.11A3.03 3.03 0 0 1 11.966 6.5h.18C13.734 6.5 15 7.807 15 9.371a2.83 2.83 0 0 1-1.553 2.523.81.81 0 0 0-.447.724V13a1 1 0 1 1-2 0v-.382c0-1.064.6-2.037 1.553-2.512A.83.83 0 0 0 13 9.37a.87.87 0 0 0-.854-.871zm.034 6a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\" clip-rule=\"evenodd\"/></svg>';\nexport const faq = icon;\n","@import '../../../../globals/main.scss';\n$userChatMessageBackgroundColor: $blue50;\n$userChatMessageTextColor: $gray900;\n$privateChatMessageLinkColor: $blue25;\n$businessChatMessageLinkColor: $coral50;\n\n$message-padding: 1rem 1.6rem;\n\npn-chat-message {\n display: flex;\n text-align: left;\n\n &.user,\n &.buttonresponse {\n justify-content: flex-end;\n }\n\n &.system-message {\n text-align: center;\n justify-content: center;\n }\n\n .message-container {\n border-radius: 0.8rem;\n display: flex;\n gap: 1rem;\n max-width: 75%;\n overflow-x: hidden;\n\n .category {\n width: 2.6rem;\n }\n\n &.bot,\n &.agent {\n .message {\n background-color: $gray50;\n }\n }\n\n &.link {\n flex-basis: 100%;\n\n .message {\n $box-shadow-offset-x: 0px 0.6px 1.8px 0px;\n $box-shadow-offset-y: 0px 3.2px 7.2px 0px;\n\n background-color: $privateChatMessageLinkColor;\n box-shadow: $box-shadow-offset-x rgba(0, 0, 0, 0.10), $box-shadow-offset-y rgba(0, 0, 0, 0.13);\n transition: box-shadow ease-in-out 0.5s;\n\n &:hover {\n box-shadow: $box-shadow-offset-x rgba(0, 0, 0, 0.2), $box-shadow-offset-y rgba(0, 0, 0, 0.23);\n }\n\n padding: 0;\n\n a {\n color: $black;\n display: flex;\n justify-content: space-between;\n padding: $message-padding;\n text-decoration: none;\n }\n }\n }\n\n &.link .business.message {\n background-color: $businessChatMessageLinkColor;\n }\n\n &.button {\n flex-basis: 100%;\n text-align: center;\n max-width: unset;\n\n .message {\n padding: 0;\n }\n }\n\n &.card {\n border: solid 1px $gray200;\n border-radius: 1.6rem;\n flex-basis: 100%;\n max-width: 100%;\n\n .message {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n padding: 1.6rem;\n }\n\n .card-heading {\n font-size: 1.6rem;\n line-height: 2.4rem;\n font-weight: 700;\n }\n\n .cta {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n }\n\n .read-more {\n align-self: flex-start;\n margin-top: auto;\n }\n }\n\n &.user,\n &.buttonresponse {\n .message {\n background-color: $userChatMessageBackgroundColor;\n color: $userChatMessageTextColor;\n border-radius: 0.8rem 0.8rem 0 0.8rem;\n }\n }\n\n .message {\n border-radius: 0 0.8rem 0.8rem 0.8rem;\n display: inline-block;\n flex: 1 1 auto;\n font-size: 1.4rem;\n line-height: 2rem;\n padding: $message-padding;\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n word-break: break-word;\n\n @media (max-width: 767px) {\n font-size: 1.6rem;\n }\n }\n\n &.agent {\n .category .pn-icon {\n background-color: $blue400;\n color: $white;\n text-align: center;\n border-radius: 50%;\n display: inline-block;\n width: 2.5rem;\n height: 2.5rem;\n font-weight: 500;\n font-size: 1.2rem;\n line-height: 2.6rem;\n }\n }\n }\n\n &[data-card] {\n height: 100%;\n }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport { faq, user } from 'pn-design-assets/pn-assets/icons.js';\n\nimport { AgentMessage, CustomerSegment, MessageCategory } from '../types';\n\n@Component({\n tag: 'pn-chat-message',\n styleUrl: 'pn-chat-message.scss',\n})\nexport class PnChatMessage {\n @Prop() category!: MessageCategory;\n @Prop() customerSegment!: CustomerSegment;\n @Prop() agentName: string;\n private robotIcon: string = '<?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 20 20\">  <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id=\"clippath\"> <rect class=\"st0\" width=\"20\" height=\"20\"/> </clipPath> </defs> <g class=\"st5\"> <g> <path class=\"st2\" d=\"M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z\"/> <path class=\"st3\" d=\"M10.5,4h-.5v2.8h.5v-2.8Z\"/> <path class=\"st3\" d=\"M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st3\" d=\"M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z\"/> <path class=\"st4\" d=\"M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z\"/> <path d=\"M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z\"/> <path class=\"st4\" d=\"M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z\"/> <path class=\"st4\" d=\"M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z\"/> <path class=\"st3\" d=\"M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z\"/> <path class=\"st6\" d=\"M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z\"/> <path class=\"st1\" d=\"M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st1\" d=\"M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path d=\"M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z\"/> </g> </g> </svg>';\n\n getIcon() {\n let icon = null;\n \n switch (this.category) {\n case 'Bot':\n return this.robotIcon;\n case 'Agent':\n return this.agentName;\n case 'Link':\n return faq;\n }\n\n return icon;\n }\n\n getMessageClass(): string {\n switch (this.category) {\n case 'ButtonResponse':\n return 'buttonresponse';\n case 'User':\n return 'user';\n case 'System':\n return 'system-message';\n default: \n return undefined;\n }\n }\n\n render() {\n const segmentClass = this.customerSegment?.toLowerCase() || '';\n const categoryClass = this.category?.toLowerCase() || '';\n return (\n <Host class={ this.getMessageClass() }>\n <div class={`message-container ${categoryClass}`}>\n {this.getIcon() && (\n <span class=\"category\">\n <pn-icon icon={this.getIcon()} color={this.category === 'User' ? 'blue700' : 'blue700'} aria-hidden=\"true\" role=\"presentation\"></pn-icon>\n </span>\n )}\n <span class={`message ${segmentClass}`}>\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n","@import '../../../globals/main.scss';\n\npn-marketweb-carousel {\n display: inline-block;\n\n .pn-marketweb-carousel {\n .slider-wrapper {\n margin: 1rem;\n overflow: hidden;\n position: relative;\n touch-action: pan-y pinch-zoom;\n }\n\n .slides-container {\n display: flex;\n width: 100%;\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n position: relative;\n touch-action: none;\n transition: transform 0.5s ease-in-out;\n user-select: none;\n\n &[data-partial='false'] .slide {\n width: 100%;\n }\n }\n\n [data-slide] {\n flex: 0 0 auto;\n transition: transform 0.5s ease-in-out;\n }\n\n .nav-button {\n cursor: pointer;\n display: flex;\n position: absolute;\n top: 0;\n bottom: 0;\n transform: translateY(-50%);\n height: 2rem;\n margin: auto;\n padding: 0;\n opacity: 0.85;\n transition: opacity 200ms;\n z-index: 1;\n\n &.invisible {\n opacity: 0;\n }\n\n &[data-show='false'] {\n display: none;\n }\n\n &:hover,\n &:focus {\n opacity: 1;\n }\n }\n\n [data-nav-button-prev] {\n left: 1.75rem;\n border-radius: 0 2rem 2rem 0;\n }\n\n [data-nav-button-next] {\n right: 1.75rem;\n border-radius: 2rem 0 0 2rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .slides-container {\n transition: none;\n }\n\n [data-slide] {\n transition: none;\n }\n }\n}\n","import { Component, Host, Prop, Element, State, h, Watch, Method } from '@stencil/core';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\ninterface CarouselData {\n slides: string[];\n}\n\ninterface EventListenerConfig {\n element: HTMLElement;\n event: string;\n handler: EventListener;\n}\n\n@Component({\n tag: 'pn-marketweb-carousel',\n styleUrl: 'pn-marketweb-carousel.scss',\n})\nexport class PnMarketwebCarousel {\n private static readonly DEFAULTS = {\n SWIPE_THRESHOLD_PX: 50,\n ANIMATION_DURATION_MS: 300,\n OVERSCROLL_LIMIT_PERCENT: 30,\n } as const;\n\n @Element() private hostElement!: HTMLElement;\n\n @Prop() previousButtonLabel!: string;\n @Prop() nextButtonLabel!: string;\n @Prop() ariaNavigationLabel!: string;\n @Prop() source!: string;\n @Prop() slidesToShow: number = 1;\n @Prop() showCarouselButtons: boolean = true;\n @Prop() showFirstSlidePrevButton: boolean = false;\n @Prop() showLastSlideNextButton: boolean = false;\n\n @State() private slidesData: string[] = [];\n @State() private currentSlide: number = 0;\n @State() private isDragging: boolean = false;\n @State() private slideWidth: number = 0;\n\n private slides: NodeListOf<HTMLElement> | null = null;\n private slidesContainer: HTMLElement | null = null;\n private totalSlides: number = 0;\n private prevButton: HTMLElement | null = null;\n private nextButton: HTMLElement | null = null;\n private dragStartX: number = 0;\n private listeners: EventListenerConfig[] = [];\n private memoizedSlideWidth: number | null = null;\n\n componentWillLoad(): void {\n this.setInitialValues();\n }\n\n componentDidLoad(): void {\n this.setupCarousel();\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback(): void {\n this.cleanup();\n window.removeEventListener('resize', this.handleResize);\n }\n\n @Method()\n async goToSlide(index: number): Promise<void> {\n if (index >= 0 && index < this.totalSlides) {\n this.currentSlide = index;\n this.moveSlides();\n this.updateNavButtons();\n }\n }\n\n @Method()\n async getCurrentSlide(): Promise<number> {\n return this.currentSlide;\n }\n\n @Watch('source')\n handleSourceChange(newValue: string): void {\n if (newValue) {\n this.setInitialValues();\n }\n }\n\n private setInitialValues(): void {\n if (!this.source?.trim()) {\n console.warn('No source provided for carousel');\n return;\n }\n\n try {\n const parsedData = JSON.parse(this.source) as CarouselData;\n\n if (!parsedData?.slides) {\n throw new Error('Invalid slides data structure');\n }\n\n if (Array.isArray(parsedData.slides)) {\n this.slidesData = parsedData.slides;\n this.showCarouselButtons = this.slidesData.length > 1;\n } else {\n throw new Error('Slides data is not an array');\n }\n } catch (error) {\n console.error('Error parsing carousel source:', error instanceof Error ? error.message : 'Unknown error');\n this.slidesData = [];\n }\n }\n\n private setupCarousel(): void {\n this.initializeElements();\n this.attachEventListeners();\n this.updateNavButtons();\n }\n\n private initializeElements(): void {\n this.slidesContainer = this.hostElement.querySelector<HTMLElement>('[data-slides-container]');\n this.slides = this.hostElement.querySelectorAll<HTMLElement>('[data-slide]');\n this.totalSlides = this.slides?.length ?? 0;\n\n if (this.showCarouselButtons) {\n this.prevButton = this.hostElement.querySelector<HTMLElement>('[data-nav-button-prev]');\n this.nextButton = this.hostElement.querySelector<HTMLElement>('[data-nav-button-next]');\n }\n\n this.slideWidth = 100 / this.slidesToShow;\n }\n\n private attachEventListeners(): void {\n if (!this.slidesContainer) return;\n\n const addListener = (element: HTMLElement, event: string, handler: EventListener, options?: AddEventListenerOptions) => {\n element.addEventListener(event, handler, options);\n this.listeners.push({ element, event, handler });\n };\n\n // Touch events\n addListener(this.slidesContainer, 'touchstart', this.handleTouchStart as EventListener, { passive: true });\n addListener(this.slidesContainer, 'touchmove', this.handleTouchMove as EventListener, { passive: false });\n addListener(this.slidesContainer, 'touchend', this.handleTouchEnd as EventListener, { passive: true });\n\n // Mouse events\n addListener(this.slidesContainer, 'mousedown', this.handleTouchStart as EventListener);\n addListener(this.slidesContainer, 'mousemove', this.handleTouchMove as EventListener);\n addListener(this.slidesContainer, 'mouseup', this.handleTouchEnd as EventListener);\n addListener(this.slidesContainer, 'mouseleave', this.handleTouchEnd as EventListener);\n\n if (this.showCarouselButtons) {\n this.nextButton && addListener(this.nextButton, 'click', this.handleNextClick);\n this.prevButton && addListener(this.prevButton, 'click', this.handlePrevClick);\n }\n }\n\n private cleanup(): void {\n this.listeners.forEach(({ element, event, handler }) => {\n element.removeEventListener(event, handler);\n });\n this.listeners = [];\n }\n\n private handleResize = (): void => {\n this.memoizedSlideWidth = null;\n };\n\n private getSlideWidth(): number {\n if (!this.memoizedSlideWidth && this.slidesContainer) {\n this.memoizedSlideWidth = this.slidesContainer.offsetWidth;\n }\n return this.memoizedSlideWidth ?? 0;\n }\n\n private handleNextClick = (e: Event): void => {\n e.stopPropagation();\n this.nextSlide();\n };\n\n private handlePrevClick = (e: Event): void => {\n e.stopPropagation();\n this.prevSlide();\n };\n\n private handleTouchStart = (e: TouchEvent | MouseEvent): void => {\n if ((e.target as HTMLElement).classList.contains('nav-button')) return;\n\n this.isDragging = true;\n this.dragStartX = 'touches' in e ? e.touches[0].clientX : e.clientX;\n };\n\n private handleTouchMove = (e: TouchEvent | MouseEvent): void => {\n if (!this.isDragging) return;\n\n if ('touches' in e) {\n e.preventDefault();\n }\n\n const currentPosition = 'touches' in e ? e.touches[0].clientX : e.clientX;\n const diff = currentPosition - this.dragStartX;\n const percentMove = (diff / this.getSlideWidth()) * 100;\n\n this.moveSlides(percentMove);\n };\n\n private handleTouchEnd = (e: TouchEvent | MouseEvent): void => {\n if (!this.isDragging) return;\n\n this.isDragging = false;\n\n const currentPosition = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;\n const diff = currentPosition - this.dragStartX;\n\n if (Math.abs(diff) > PnMarketwebCarousel.DEFAULTS.SWIPE_THRESHOLD_PX) {\n if (diff > 0 && this.currentSlide > 0) {\n this.currentSlide--;\n } else if (diff < 0 && this.currentSlide < this.totalSlides - 1) {\n this.currentSlide++;\n }\n }\n\n this.moveSlides();\n this.updateNavButtons();\n };\n\n private calculateProportionalTranslation(): number {\n // Calculate proportional translation based on slidesToShow\n return -200 + (this.slidesToShow - 1) * 100;\n }\n\n private moveSlides(extraTranslate: number = 0): void {\n if (!this.slides || !this.slidesContainer) {\n return;\n }\n\n try {\n this.slides.forEach((slide, index) => {\n if (slide) {\n // Set each slide's width\n slide.style.width = `${this.slideWidth}%`;\n\n let translation = 0;\n\n if (this.slidesToShow === 1) {\n // Full slide view\n translation = -100 * this.currentSlide;\n } else {\n // Partial slide view\n if (this.totalSlides === 2) {\n // Special case for 2 slides\n if (this.currentSlide === 1) {\n translation = -50; // Both slides move by -50%\n }\n } else {\n // 3 or more slides\n if (this.currentSlide === 1) {\n // Second slide showing - all slides move -100%\n translation = -100;\n } else if (this.currentSlide === 2) {\n // Third slide showing\n if (index === 0) {\n translation = -100; // First slide stays at -100%\n } else {\n // Calculate proportional translation\n translation = this.calculateProportionalTranslation();\n }\n }\n }\n }\n\n // Add any extra translation from dragging\n translation += extraTranslate;\n\n slide.style.transform = `translateX(${translation}%)`;\n slide.style.position = 'relative';\n\n // Update visibility for screen readers\n let isVisible;\n\n if (this.slidesToShow === 1) {\n isVisible = index === this.currentSlide;\n } else {\n isVisible =\n this.currentSlide === 0 || // First slide showing\n this.totalSlides === 2 || // Two slides - both visible\n (this.currentSlide === 1 && translation === -100) || // Second slide showing\n (this.currentSlide === 2 &&\n ((index === 0 && translation === -100) || // First slide still visible\n index > 0)); // Second and third slides visible\n }\n\n slide.setAttribute('aria-hidden', (!isVisible).toString());\n }\n });\n } catch (error) {\n console.error('Error moving slides:', error);\n }\n }\n\n private updateNavButtons(): void {\n if (!this.showCarouselButtons) return;\n\n const isFirstSlide = this.currentSlide === 0;\n const isLastSlide = this.currentSlide === this.totalSlides - 1;\n\n if (this.prevButton) {\n this.prevButton.classList.toggle('invisible', isFirstSlide && !this.showFirstSlidePrevButton);\n this.prevButton.dataset.show = isFirstSlide ? `${this.showFirstSlidePrevButton}` : 'true';\n }\n\n if (this.nextButton) {\n this.nextButton.classList.toggle('invisible', isLastSlide && !this.showLastSlideNextButton);\n this.nextButton.dataset.show = isLastSlide ? `${this.showLastSlideNextButton}` : 'true';\n }\n }\n\n private nextSlide(): void {\n if (this.currentSlide >= this.totalSlides - 1) {\n this.currentSlide = 0;\n } else {\n this.currentSlide++;\n }\n this.moveSlides();\n this.updateNavButtons();\n }\n\n private prevSlide(): void {\n if (this.currentSlide <= 0) {\n this.currentSlide = this.totalSlides - 1;\n } else {\n this.currentSlide--;\n }\n this.moveSlides();\n this.updateNavButtons();\n }\n\n render() {\n return (\n <Host>\n <div class=\"pn-marketweb-carousel\">\n <section class=\"slider-wrapper\">\n {this.showCarouselButtons && (\n <div class=\"nav-buttons\" role=\"group\" aria-label={this.ariaNavigationLabel}>\n <pn-button\n appearance=\"light\"\n icon={arrow_left}\n icon-only=\"true\"\n tooltip={this.previousButtonLabel}\n class={`nav-button ${this.currentSlide === 0 && !this.showFirstSlidePrevButton ? 'invisible' : ''}`}\n data-nav-button-prev\n area-label={this.previousButtonLabel}\n aria-disabled={this.currentSlide === 0 && !this.showFirstSlidePrevButton}>\n </pn-button>\n <pn-button\n appearance=\"light\"\n icon={arrow_right}\n icon-only=\"true\"\n tooltip={this.nextButtonLabel}\n class=\"nav-button\"\n data-nav-button-next\n area-label={this.nextButtonLabel}\n aria-disabled={this.currentSlide === this.totalSlides - 1 && !this.showLastSlideNextButton}>\n </pn-button>\n </div>\n )}\n {this.slidesData && (\n <ul\n class=\"slides-container\"\n data-slides-container\n data-partial={this.slidesToShow === 1 ? 'false' : 'true'}\n aria-live=\"polite\"\n style={{ display: 'flex', transform: 'none' }}\n >\n {this.slidesData.map((slide, index) => (\n <li class=\"slide\" data-slide innerHTML={slide} style={{ width: this.slideWidth + '%' }} aria-hidden={index !== this.currentSlide}></li>\n ))}\n </ul>\n )}\n </section>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}