@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/components/pn-charts-card.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as arrow_right } from './arrow_right.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$1 = /*@__PURE__*/ proxyCustomElement(class PnChartsCard extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"pn-charts-card.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,s+JAAs+J,CAAC;AAC//J,2BAAe,eAAe;;MCMjBA,cAAY;;;;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":["PnChartsCard"],"sources":["src/components/charts/pn-charts-card/pn-charts-card.scss?tag=pn-charts-card","src/components/charts/pn-charts-card/pn-charts-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-charts-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-charts-card__wrapper {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    border-radius: 2.4rem;\n    padding: 2.4rem;\n\n    @media screen and (min-width: $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}
+{"file":"pn-charts-card.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,+yKAA+yK,CAAC;AACx0K,2BAAe,eAAe;;MCMjBA,cAAY;;;;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":["PnChartsCard"],"sources":["src/components/charts/pn-charts-card/pn-charts-card.scss?tag=pn-charts-card","src/components/charts/pn-charts-card/pn-charts-card.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-charts-card {\n  width: 100%;\n  height: 100%;\n  display: flex;\n\n  .pn-charts-card__wrapper {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n\n    border-radius: 2.4rem;\n    padding: 2.4rem;\n\n    @media screen and (min-width: $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/components/pn-chat-message.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnChatMessage extends Components.PnChatMessage, HTMLElement {}
+export const PnChatMessage: {
+    prototype: PnChatMessage;
+    new (): PnChatMessage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-chat-message.js

@@ -0,0 +1,8 @@
+import { P as PnChatMessage$1, d as defineCustomElement$1 } from './pn-chat-message2.js';
+
+const PnChatMessage = PnChatMessage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnChatMessage, defineCustomElement };
+
+//# sourceMappingURL=pn-chat-message.js.map

package/components/pn-chat-message.js.map

@@ -0,0 +1 @@
+{"file":"pn-chat-message.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/pn-chat-message2.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class PnChatMessage extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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' })))));
+    }
+    static get style() { return PnChatMessageStyle0; }
+}, [4, "pn-chat-message", {
+        "category": [1],
+        "customerSegment": [1, "customer-segment"],
+        "agentName": [1, "agent-name"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-chat-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-chat-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnChatMessage);
+            }
+            break;
+    } });
+}
+
+export { PnChatMessage as P, defineCustomElement as d };
+
+//# sourceMappingURL=pn-chat-message2.js.map

package/components/pn-chat-message2.js.map

@@ -0,0 +1 @@
+{"file":"pn-chat-message2.js","mappings":";;AAAA,MAAM,IAAI,GAAG,w0BAAw0B,CAAC;AAC/0B,MAAM,GAAG,GAAG,IAAI;;ACDvB,MAAM,gBAAgB,GAAG,i8FAAi8F,CAAC;AAC39F,4BAAe,gBAAgB;;MCQlB,aAAa;;;;;;;;IAIhB,SAAS,GAAW,uwDAAuwD,CAAC;IAEpyD,OAAO;QACL,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,QAAQ,IAAI,CAAC,QAAQ;YACnB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,GAAG,CAAC;SACd;QAED,OAAO,IAAI,CAAC;KACb;IAED,eAAe;QACb,QAAQ,IAAI,CAAC,QAAQ;YACnB,KAAK,gBAAgB;gBACnB,OAAO,gBAAgB,CAAC;YAC1B,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,SAAS,CAAC;SACpB;KACF;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QACzD,QACE,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,eAAe,EAAE,IAClC,4DAAK,KAAK,EAAE,qBAAqB,aAAa,EAAE,IAC7C,IAAI,CAAC,OAAO,EAAE,KACb,6DAAM,KAAK,EAAC,UAAU,IACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,iBAAc,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW,CACpI,CACR,EACD,6DAAM,KAAK,EAAE,WAAW,YAAY,EAAE,IACpC,8DAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","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"],"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\"> <!-- 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>';\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"],"version":3}

package/components/pn-chat.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnChat extends Components.PnChat, HTMLElement {}
+export const PnChat: {
+    prototype: PnChat;
+    new (): PnChat;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;