@postnord/pn-marketweb-components 2.0.133 → 2.0.135
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.
- package/cjs/pn-chart.cjs.entry.js +4 -4
- package/cjs/pn-charts-card.cjs.entry.js +2 -2
- package/cjs/pn-quote-card.cjs.entry.js +1 -1
- package/collection/components/cards/pn-quote-card/pn-quote-card.css +12 -2
- package/collection/components/charts/pn-chart/pn-chart-helper.js +3 -2
- package/collection/components/charts/pn-chart/pn-chart.css +14 -3
- package/collection/components/charts/pn-chart/pn-chart.js +0 -1
- package/collection/components/charts/pn-charts-card/pn-charts-card.css +52 -17
- package/collection/components/charts/pn-charts-card/pn-charts-card.js +5 -2
- package/collection/components/charts/pn-charts-card/pn-charts-card.stories.js +1 -1
- package/custom-elements/index.js +7 -7
- package/esm/pn-chart.entry.js +4 -4
- package/esm/pn-charts-card.entry.js +2 -2
- package/esm/pn-quote-card.entry.js +1 -1
- package/esm-es5/pn-chart.entry.js +1 -1
- package/esm-es5/pn-charts-card.entry.js +1 -1
- package/esm-es5/pn-quote-card.entry.js +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/p-67887512.system.js +1 -1
- package/pn-market-web-components/p-76b89b6c.system.entry.js +1 -0
- package/pn-market-web-components/p-95e1e2bc.system.entry.js +1 -0
- package/pn-market-web-components/{p-10f3dd3f.entry.js → p-b60a151b.entry.js} +1 -1
- package/pn-market-web-components/p-b71074a8.entry.js +1 -0
- package/pn-market-web-components/{p-5a487f97.system.entry.js → p-c7d886d7.system.entry.js} +1 -1
- package/pn-market-web-components/p-df746d8d.entry.js +1 -0
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/types/components/charts/pn-chart/pn-chart-helper.d.ts +2 -0
- package/umd/pn-marketweb-init.js +1 -1
- package/umd/pn-marketweb-salesforce.js +2 -2
- package/pn-market-web-components/p-16ddb9b7.system.entry.js +0 -1
- package/pn-market-web-components/p-7c335b6f.entry.js +0 -1
- package/pn-market-web-components/p-82fd814d.system.entry.js +0 -1
- package/pn-market-web-components/p-b398832a.entry.js +0 -1
|
@@ -21842,11 +21842,12 @@ const chartCfg = (dataChartType, data) => {
|
|
|
21842
21842
|
data: data,
|
|
21843
21843
|
options: {
|
|
21844
21844
|
responsive: true,
|
|
21845
|
-
maintainAspectRatio:
|
|
21845
|
+
maintainAspectRatio: false,
|
|
21846
|
+
aspectRatio: 1,
|
|
21846
21847
|
legend: {
|
|
21847
21848
|
display: true,
|
|
21848
21849
|
position: 'bottom',
|
|
21849
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
21850
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
21850
21851
|
},
|
|
21851
21852
|
tooltip: {
|
|
21852
21853
|
enabled: true,
|
|
@@ -21889,7 +21890,7 @@ const dataSetProps = (set, dataChartType) => {
|
|
|
21889
21890
|
return Object.assign(Object.assign({}, set), variant);
|
|
21890
21891
|
};
|
|
21891
21892
|
|
|
21892
|
-
const pnChartCss = "pn-chart{display:-ms-flexbox;display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:
|
|
21893
|
+
const pnChartCss = "pn-chart{display:-ms-flexbox;display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:100vw;height:30vh;padding:1.6rem 0}@media screen and (min-width: 1640px){pn-chart .chart-wrapper{padding:2.4rem 0}}pn-chart canvas.pnChart{width:100% !important}pn-chart[data-chart-type=bar] .chart-wrapper,pn-chart[data-chart-type=line] .chart-wrapper{min-height:100%;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.fullwidth pn-chart{-ms-flex-pack:center;justify-content:center}}@media screen and (min-width: 768px){.fullwidth pn-chart .chart-wrapper{height:40vh;width:30vw}}";
|
|
21893
21894
|
|
|
21894
21895
|
let PnChart = class {
|
|
21895
21896
|
constructor(hostRef) {
|
|
@@ -21908,7 +21909,6 @@ let PnChart = class {
|
|
|
21908
21909
|
componentDidLoad() {
|
|
21909
21910
|
this.myChartCtxRef = this.element.querySelector('#chart-canvas');
|
|
21910
21911
|
this.myChart = new Chart.Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data));
|
|
21911
|
-
this.myChartCtxRef.height = this.myChartCtxRef.width / 2;
|
|
21912
21912
|
}
|
|
21913
21913
|
render() {
|
|
21914
21914
|
return (index.h(index.Host, null, index.h("div", { class: "chart-wrapper" }, index.h("canvas", { id: "chart-canvas", class: "pnChart" }))));
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-e3e27c79.js');
|
|
6
6
|
|
|
7
|
-
const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#EFFBFF;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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:
|
|
7
|
+
const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#EFFBFF;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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%;-ms-flex-positive:1;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#00A0D6;color:#FFFFFF;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:140%;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem}}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: 1200px){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: 1200px){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: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{-ms-flex-pack:start;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 768px){.fullwidth pn-charts-card .pn-charts-card__content__wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.fullwidth pn-charts-card .pn-charts-card__text__container{-ms-flex-pack:center;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:-ms-flexbox;display:flex}@media screen and (min-width: 768px){.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: 768px){.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:-ms-flexbox;display:flex}}@media screen and (min-width: 768px){.fullwidth pn-charts-card .pn-charts-card__preamble{-ms-flex-positive:0;flex-grow:0;font-size:2rem}}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}";
|
|
8
8
|
|
|
9
9
|
let PnChartsCard = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -12,7 +12,7 @@ let PnChartsCard = class {
|
|
|
12
12
|
this.openInNewWindow = false;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h(index.Host, null, index.h("slot", { name: "clickable-block-wrapper" }), index.h("div", { class: "pn-charts-card__wrapper" }, index.h("div", { class: "pn-charts-card__heading__wrapper" }, index.h("div", { class: "pn-charts-card__heading" }, this.header), index.h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), index.h("div", { class: "pn-charts-card__content__wrapper" }, index.h("slot", { name: "chart" }), index.h("div", { class: "pn-charts-card__text__container" }, index.h("span", { class: "pn-charts-card__preamble" }, this.preamble), index.h("div", { class: "pn-charts-card__text__wrapper" }, index.h("div", { class: "pn-charts-card__source" }, index.h("label", null, this.label), index.h("h3",
|
|
15
|
+
return (index.h(index.Host, null, index.h("slot", { name: "clickable-block-wrapper" }), index.h("div", { class: "pn-charts-card__wrapper" }, index.h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, index.h("div", { class: "pn-charts-card__heading" }, this.header), index.h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), index.h("div", { class: "pn-charts-card__content__wrapper" }, index.h("slot", { name: "chart" }), index.h("div", { class: "pn-charts-card__text__container" }, index.h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, index.h("div", { class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), index.h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), index.h("span", { class: "pn-charts-card__preamble" }, this.preamble), index.h("div", { class: "pn-charts-card__text__wrapper" }, index.h("div", { class: "pn-charts-card__source" }, index.h("label", null, this.label), index.h("h3", { class: "pn-chart-card__text__heading" }, this.source), index.h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null }, "Read the report ", index.h("pn-icon", { symbol: "arrow-right" }, " ")))))))));
|
|
16
16
|
}
|
|
17
17
|
get hostElement() { return index.getElement(this); }
|
|
18
18
|
};
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-e3e27c79.js');
|
|
6
6
|
|
|
7
|
-
const pnQuoteCardCss = "pn-quote-card .pn-quote-card__container{margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;min-height:262px;padding:0 2.4rem}pn-quote-card .pn-quote-card__quote__container{padding:0 3.2rem}pn-quote-card .pn-quote-card__quote{position:relative;font-weight:400;font-size:2rem;line-height:140%;margin:0}pn-quote-card .pn-quote-card__quote svg{position:absolute;left:-3.2rem;top:0.2rem}pn-quote-card .pn-quote-card__reference__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;gap:1.6rem;-ms-flex-align:center;align-items:center}pn-quote-card .pn-quote-card__reference__name{display:block;font-weight:400;font-size:2.4rem;line-height:2.9rem}pn-quote-card .pn-quote-card__reference__occupation{display:block;font-weight:400;font-size:1.4rem;line-height:1.7rem}pn-quote-card [slot=illustration]{padding:0}pn-quote-card [slot=illustration-big]{padding:0.8rem 0}pn-quote-card [slot=illustration],pn-quote-card [slot=illustration-big]{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture,pn-quote-card [slot=illustration-big] picture{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture img,pn-quote-card [slot=illustration-big] picture img{-webkit-clip-path:circle(50%);clip-path:circle(50%)}pn-quote-card[data-line-orientation=horizontal] [slot=horizontal-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-orientation=horizontal] [slot=vertical-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=horizontal-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=vertical-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-color=white] .pn-quote-card__section{background-color:#00A0D6;color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-line-shape__line,pn-quote-card[data-line-color=white] .pn-line-shape__dot{border-color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-quote-card__quote svg>path{fill:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-quote-card__section{background-color:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-line-shape__line,pn-quote-card[data-line-color=blue] .pn-line-shape__dot{border-color:#00A0D6}pn-quote-card[data-line-color=blue] .pn-quote-card__quote svg>path{fill:#00A0D6}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:100%;margin:0 auto}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:70%}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:60%}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container{min-height:unset}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;gap:3.2rem;padding
|
|
7
|
+
const pnQuoteCardCss = "pn-quote-card .pn-quote-card__container{margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;min-height:262px;padding:0 2.4rem}pn-quote-card .pn-quote-card__quote__container{padding:0 3.2rem}pn-quote-card .pn-quote-card__quote{position:relative;font-weight:400;font-size:2rem;line-height:140%;margin:0}pn-quote-card .pn-quote-card__quote svg{position:absolute;left:-3.2rem;top:0.2rem}pn-quote-card .pn-quote-card__reference__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;gap:1.6rem;-ms-flex-align:center;align-items:center}pn-quote-card .pn-quote-card__reference__name{display:block;font-weight:400;font-size:2.4rem;line-height:2.9rem}pn-quote-card .pn-quote-card__reference__occupation{display:block;font-weight:400;font-size:1.4rem;line-height:1.7rem}pn-quote-card [slot=illustration]{padding:0}pn-quote-card [slot=illustration-big]{padding:0.8rem 0}pn-quote-card [slot=illustration],pn-quote-card [slot=illustration-big]{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture,pn-quote-card [slot=illustration-big] picture{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture img,pn-quote-card [slot=illustration-big] picture img{-webkit-clip-path:circle(50%);clip-path:circle(50%)}pn-quote-card[data-line-orientation=horizontal] [slot=horizontal-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-orientation=horizontal] [slot=vertical-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=horizontal-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=vertical-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-color=white] .pn-quote-card__section{background-color:#00A0D6;color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-line-shape__line,pn-quote-card[data-line-color=white] .pn-line-shape__dot{border-color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-quote-card__quote svg>path{fill:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-quote-card__section{background-color:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-line-shape__line,pn-quote-card[data-line-color=blue] .pn-line-shape__dot{border-color:#00A0D6}pn-quote-card[data-line-color=blue] .pn-quote-card__quote svg>path{fill:#00A0D6}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:100%;margin:0 auto}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:70%}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:60%}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container{min-height:unset;padding:0}@media screen and (min-width: 768px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container{padding:0 2.4rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;gap:3.2rem;padding:2.4rem 1.6rem 1.6rem 1.6rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container{padding:2.4rem 3.2rem 1.6rem 3.2rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote{font-size:1.6rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote{font-size:2rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote svg{display:block;margin-bottom:0.8rem;position:relative;top:0;left:0}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__container [slot=illustration] picture img{height:60px;width:60px}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__container [slot=illustration] picture img{height:90px;width:90px}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__name{font-size:1.6rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__name{font-size:2.4rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__occupation{font-size:1.2rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__occupation{font-size:1.4rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__large-photo{display:none}pn-quote-card[data-card-style=startpage] .pn-quote-card__section{width:100%;margin:0 auto;padding-top:4rem;padding-bottom:4rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__section{padding-bottom:0}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=startpage] .pn-quote-card__section{padding-top:10rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__container{min-height:10rem;padding-bottom:0}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:90%;width:100%;}}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:768px;width:100%;}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:1140px;width:100%;padding:0 5.6rem;}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:1440px;width:100%;padding:0 12rem;}}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote__container{padding-bottom:0;padding-left:0;padding-right:0}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote__container{padding-left:2.4rem;padding-right:2.4rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{font-size:2rem;padding-left:2.4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:-0.8rem;top:0.2rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{padding-left:4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:0}}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{font-size:2.4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:0;top:0.4rem;scale:1.3}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{padding-left:0;font-size:3.2rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:-4.8rem;top:1rem;scale:1.4}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{font-size:4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:-6.4rem;top:1.6rem;scale:1.8}}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}pn-quote-card[data-card-style=startpage] [slot=illustration] picture>img{max-width:6rem;max-height:6rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] [slot=illustration] picture>img{max-width:10rem;max-height:10rem}}@media screen and (min-width: 1140px){pn-quote-card[data-card-style=startpage] [slot=illustration]{display:none}}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference{text-align:right}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{display:block;font-size:1.4rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{font-size:1.6rem}}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{font-size:2rem}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{font-size:3.2rem;margin-bottom:1rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation{display:block;font-size:1.2rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation{font-size:1.4rem}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation{font-size:2rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo{display:none}@media screen and (min-width: 1140px){pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo{display:block}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big]{width:18rem;height:18rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big] picture>img{width:18rem;height:18rem}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo{display:block;width:24rem;height:24rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big]{width:24rem;height:24rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big]>picture>img{width:24rem;height:24rem}}";
|
|
8
8
|
|
|
9
9
|
let PnQuoteCard = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -111,14 +111,24 @@ pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section {
|
|
|
111
111
|
}
|
|
112
112
|
pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container {
|
|
113
113
|
min-height: unset;
|
|
114
|
+
padding: 0;
|
|
115
|
+
}
|
|
116
|
+
@media screen and (min-width: 768px) {
|
|
117
|
+
pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container {
|
|
118
|
+
padding: 0 2.4rem;
|
|
119
|
+
}
|
|
114
120
|
}
|
|
115
121
|
pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container {
|
|
116
122
|
display: flex;
|
|
117
123
|
flex-direction: column;
|
|
118
124
|
justify-content: space-between;
|
|
119
125
|
gap: 3.2rem;
|
|
120
|
-
padding
|
|
121
|
-
|
|
126
|
+
padding: 2.4rem 1.6rem 1.6rem 1.6rem;
|
|
127
|
+
}
|
|
128
|
+
@media screen and (min-width: 768px) {
|
|
129
|
+
pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container {
|
|
130
|
+
padding: 2.4rem 3.2rem 1.6rem 3.2rem;
|
|
131
|
+
}
|
|
122
132
|
}
|
|
123
133
|
pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote {
|
|
124
134
|
font-size: 1.6rem;
|
|
@@ -4,11 +4,12 @@ export const chartCfg = (dataChartType, data) => {
|
|
|
4
4
|
data: data,
|
|
5
5
|
options: {
|
|
6
6
|
responsive: true,
|
|
7
|
-
maintainAspectRatio:
|
|
7
|
+
maintainAspectRatio: false,
|
|
8
|
+
aspectRatio: 1,
|
|
8
9
|
legend: {
|
|
9
10
|
display: true,
|
|
10
11
|
position: 'bottom',
|
|
11
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
12
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
12
13
|
},
|
|
13
14
|
tooltip: {
|
|
14
15
|
enabled: true,
|
|
@@ -8,10 +8,15 @@ pn-chart .chart-wrapper {
|
|
|
8
8
|
justify-content: center;
|
|
9
9
|
align-items: center;
|
|
10
10
|
position: relative;
|
|
11
|
-
width:
|
|
12
|
-
height:
|
|
11
|
+
width: 100vw;
|
|
12
|
+
height: 30vh;
|
|
13
13
|
padding: 1.6rem 0;
|
|
14
14
|
}
|
|
15
|
+
@media screen and (min-width: 1640px) {
|
|
16
|
+
pn-chart .chart-wrapper {
|
|
17
|
+
padding: 2.4rem 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
15
20
|
pn-chart canvas.pnChart {
|
|
16
21
|
width: 100% !important;
|
|
17
22
|
}
|
|
@@ -22,6 +27,12 @@ pn-chart[data-chart-type=bar] .chart-wrapper, pn-chart[data-chart-type=line] .ch
|
|
|
22
27
|
}
|
|
23
28
|
@media screen and (min-width: 768px) {
|
|
24
29
|
.fullwidth pn-chart {
|
|
25
|
-
|
|
30
|
+
justify-content: center;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
@media screen and (min-width: 768px) {
|
|
34
|
+
.fullwidth pn-chart .chart-wrapper {
|
|
35
|
+
height: 40vh;
|
|
36
|
+
width: 30vw;
|
|
26
37
|
}
|
|
27
38
|
}
|
|
@@ -17,7 +17,6 @@ export class PnChart {
|
|
|
17
17
|
componentDidLoad() {
|
|
18
18
|
this.myChartCtxRef = this.element.querySelector('#chart-canvas');
|
|
19
19
|
this.myChart = new Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data));
|
|
20
|
-
this.myChartCtxRef.height = this.myChartCtxRef.width / 2;
|
|
21
20
|
}
|
|
22
21
|
render() {
|
|
23
22
|
return (h(Host, null,
|
|
@@ -27,7 +27,7 @@ pn-charts-card .pn-charts-card__heading {
|
|
|
27
27
|
font-size: 2.4rem;
|
|
28
28
|
line-height: 110%;
|
|
29
29
|
}
|
|
30
|
-
@media screen and (min-width:
|
|
30
|
+
@media screen and (min-width: 1640px) {
|
|
31
31
|
pn-charts-card .pn-charts-card__heading {
|
|
32
32
|
font-size: 3.2rem;
|
|
33
33
|
}
|
|
@@ -38,7 +38,7 @@ pn-charts-card .pn-charts-card__heading__highlight {
|
|
|
38
38
|
line-height: 110%;
|
|
39
39
|
color: #005D92;
|
|
40
40
|
}
|
|
41
|
-
@media screen and (min-width:
|
|
41
|
+
@media screen and (min-width: 1640px) {
|
|
42
42
|
pn-charts-card .pn-charts-card__heading__highlight {
|
|
43
43
|
font-size: 3.2rem;
|
|
44
44
|
}
|
|
@@ -54,6 +54,9 @@ pn-charts-card .pn-charts-card__text__container {
|
|
|
54
54
|
justify-content: space-between;
|
|
55
55
|
height: 100%;
|
|
56
56
|
}
|
|
57
|
+
pn-charts-card .pn-charts-card__heading__wrapper--horizontal {
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
57
60
|
pn-charts-card .pn-charts-card__text__wrapper {
|
|
58
61
|
display: flex;
|
|
59
62
|
flex-direction: column;
|
|
@@ -70,7 +73,7 @@ pn-charts-card .pn-charts-card__preamble {
|
|
|
70
73
|
flex-grow: 1;
|
|
71
74
|
margin-bottom: 1.6rem;
|
|
72
75
|
}
|
|
73
|
-
@media screen and (min-width:
|
|
76
|
+
@media screen and (min-width: 1640px) {
|
|
74
77
|
pn-charts-card .pn-charts-card__preamble {
|
|
75
78
|
font-size: 2rem;
|
|
76
79
|
}
|
|
@@ -96,14 +99,15 @@ pn-charts-card .pn-charts-card__source label {
|
|
|
96
99
|
font-size: 1.2rem;
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
|
-
pn-charts-card .pn-charts-card__source
|
|
102
|
+
pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading {
|
|
100
103
|
font-weight: 400;
|
|
101
104
|
font-size: 1.6rem;
|
|
102
105
|
line-height: 140%;
|
|
103
106
|
color: #005D92;
|
|
107
|
+
margin-bottom: 0;
|
|
104
108
|
}
|
|
105
109
|
@media screen and (min-width: 1200px) {
|
|
106
|
-
pn-charts-card .pn-charts-card__source
|
|
110
|
+
pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading {
|
|
107
111
|
font-size: 2rem;
|
|
108
112
|
}
|
|
109
113
|
}
|
|
@@ -131,36 +135,67 @@ pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after {
|
|
|
131
135
|
display: none;
|
|
132
136
|
}
|
|
133
137
|
|
|
134
|
-
.fullwidth .pn-charts-card__wrapper {
|
|
138
|
+
.fullwidth pn-charts-card .pn-charts-card__wrapper {
|
|
135
139
|
padding: 4rem;
|
|
136
140
|
}
|
|
137
|
-
.fullwidth .pn-charts-card__heading__wrapper {
|
|
141
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper {
|
|
138
142
|
margin-bottom: 3.2rem;
|
|
143
|
+
gap: 1.6rem;
|
|
139
144
|
}
|
|
140
|
-
|
|
141
|
-
.fullwidth .pn-charts-
|
|
142
|
-
|
|
145
|
+
@media screen and (min-width: 768px) {
|
|
146
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper {
|
|
147
|
+
justify-content: flex-start;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
.fullwidth pn-charts-card .pn-charts-card__heading,
|
|
151
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__highlight {
|
|
152
|
+
font-size: 2.4rem;
|
|
153
|
+
}
|
|
154
|
+
@media screen and (min-width: 768px) {
|
|
155
|
+
.fullwidth pn-charts-card .pn-charts-card__heading,
|
|
156
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__highlight {
|
|
157
|
+
font-size: 3.2rem;
|
|
158
|
+
}
|
|
143
159
|
}
|
|
144
|
-
.fullwidth .pn-charts-card__content__wrapper {
|
|
160
|
+
.fullwidth pn-charts-card .pn-charts-card__content__wrapper {
|
|
145
161
|
display: flex;
|
|
146
162
|
flex-direction: column;
|
|
147
163
|
justify-content: space-between;
|
|
148
164
|
}
|
|
149
165
|
@media screen and (min-width: 768px) {
|
|
150
|
-
.fullwidth .pn-charts-card__content__wrapper {
|
|
166
|
+
.fullwidth pn-charts-card .pn-charts-card__content__wrapper {
|
|
151
167
|
flex-direction: row-reverse;
|
|
152
168
|
}
|
|
153
169
|
}
|
|
154
|
-
.fullwidth .pn-charts-card__text__container {
|
|
170
|
+
.fullwidth pn-charts-card .pn-charts-card__text__container {
|
|
155
171
|
justify-content: center;
|
|
156
172
|
}
|
|
157
173
|
@media screen and (min-width: 768px) {
|
|
158
|
-
.fullwidth .pn-charts-card__text__container {
|
|
159
|
-
|
|
174
|
+
.fullwidth pn-charts-card .pn-charts-card__text__container {
|
|
175
|
+
width: 100%;
|
|
160
176
|
}
|
|
161
177
|
}
|
|
162
|
-
.fullwidth .pn-charts-
|
|
163
|
-
|
|
178
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--vertical {
|
|
179
|
+
display: flex;
|
|
180
|
+
}
|
|
181
|
+
@media screen and (min-width: 768px) {
|
|
182
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--vertical {
|
|
183
|
+
display: none;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal {
|
|
187
|
+
display: none;
|
|
188
|
+
}
|
|
189
|
+
@media screen and (min-width: 768px) {
|
|
190
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal {
|
|
191
|
+
display: flex;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
@media screen and (min-width: 768px) {
|
|
195
|
+
.fullwidth pn-charts-card .pn-charts-card__preamble {
|
|
196
|
+
flex-grow: 0;
|
|
197
|
+
font-size: 2rem;
|
|
198
|
+
}
|
|
164
199
|
}
|
|
165
200
|
|
|
166
201
|
pn-charts-card[data-chart-color=coral] > .pn-charts-card__wrapper {
|
|
@@ -7,17 +7,20 @@ export class PnChartsCard {
|
|
|
7
7
|
return (h(Host, null,
|
|
8
8
|
h("slot", { name: "clickable-block-wrapper" }),
|
|
9
9
|
h("div", { class: "pn-charts-card__wrapper" },
|
|
10
|
-
h("div", { class: "pn-charts-card__heading__wrapper" },
|
|
10
|
+
h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" },
|
|
11
11
|
h("div", { class: "pn-charts-card__heading" }, this.header),
|
|
12
12
|
h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)),
|
|
13
13
|
h("div", { class: "pn-charts-card__content__wrapper" },
|
|
14
14
|
h("slot", { name: "chart" }),
|
|
15
15
|
h("div", { class: "pn-charts-card__text__container" },
|
|
16
|
+
h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" },
|
|
17
|
+
h("div", { class: "pn-charts-card__heading pn-charts-card__heading" }, this.header),
|
|
18
|
+
h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)),
|
|
16
19
|
h("span", { class: "pn-charts-card__preamble" }, this.preamble),
|
|
17
20
|
h("div", { class: "pn-charts-card__text__wrapper" },
|
|
18
21
|
h("div", { class: "pn-charts-card__source" },
|
|
19
22
|
h("label", null, this.label),
|
|
20
|
-
h("h3",
|
|
23
|
+
h("h3", { class: "pn-chart-card__text__heading" }, this.source),
|
|
21
24
|
h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null },
|
|
22
25
|
"Read the report ",
|
|
23
26
|
h("pn-icon", { symbol: "arrow-right" }, " ")))))))));
|
|
@@ -24,7 +24,7 @@ const TemplateChartsCardOne = ({ ...args }) => {
|
|
|
24
24
|
open-in-new-window="${args.openInNewWindow}"
|
|
25
25
|
data-chart-color="blue"
|
|
26
26
|
>
|
|
27
|
-
<pn-chart data-chart-type="
|
|
27
|
+
<pn-chart data-chart-type="bar" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }]'></pn-chart>
|
|
28
28
|
|
|
29
29
|
</pn-charts-card>
|
|
30
30
|
</div>
|
package/custom-elements/index.js
CHANGED
|
@@ -22021,11 +22021,12 @@ const chartCfg = (dataChartType, data) => {
|
|
|
22021
22021
|
data: data,
|
|
22022
22022
|
options: {
|
|
22023
22023
|
responsive: true,
|
|
22024
|
-
maintainAspectRatio:
|
|
22024
|
+
maintainAspectRatio: false,
|
|
22025
|
+
aspectRatio: 1,
|
|
22025
22026
|
legend: {
|
|
22026
22027
|
display: true,
|
|
22027
22028
|
position: 'bottom',
|
|
22028
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
22029
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
22029
22030
|
},
|
|
22030
22031
|
tooltip: {
|
|
22031
22032
|
enabled: true,
|
|
@@ -22068,7 +22069,7 @@ const dataSetProps = (set, dataChartType) => {
|
|
|
22068
22069
|
return Object.assign(Object.assign({}, set), variant);
|
|
22069
22070
|
};
|
|
22070
22071
|
|
|
22071
|
-
const pnChartCss = "pn-chart{display:-ms-flexbox;display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:
|
|
22072
|
+
const pnChartCss = "pn-chart{display:-ms-flexbox;display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:100vw;height:30vh;padding:1.6rem 0}@media screen and (min-width: 1640px){pn-chart .chart-wrapper{padding:2.4rem 0}}pn-chart canvas.pnChart{width:100% !important}pn-chart[data-chart-type=bar] .chart-wrapper,pn-chart[data-chart-type=line] .chart-wrapper{min-height:100%;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.fullwidth pn-chart{-ms-flex-pack:center;justify-content:center}}@media screen and (min-width: 768px){.fullwidth pn-chart .chart-wrapper{height:40vh;width:30vw}}";
|
|
22072
22073
|
|
|
22073
22074
|
let PnChart$1 = class extends HTMLElement {
|
|
22074
22075
|
constructor() {
|
|
@@ -22088,7 +22089,6 @@ let PnChart$1 = class extends HTMLElement {
|
|
|
22088
22089
|
componentDidLoad() {
|
|
22089
22090
|
this.myChartCtxRef = this.element.querySelector('#chart-canvas');
|
|
22090
22091
|
this.myChart = new Chart.Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data));
|
|
22091
|
-
this.myChartCtxRef.height = this.myChartCtxRef.width / 2;
|
|
22092
22092
|
}
|
|
22093
22093
|
render() {
|
|
22094
22094
|
return (h(Host, null, h("div", { class: "chart-wrapper" }, h("canvas", { id: "chart-canvas", class: "pnChart" }))));
|
|
@@ -22097,7 +22097,7 @@ let PnChart$1 = class extends HTMLElement {
|
|
|
22097
22097
|
static get style() { return pnChartCss; }
|
|
22098
22098
|
};
|
|
22099
22099
|
|
|
22100
|
-
const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#EFFBFF;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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:
|
|
22100
|
+
const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#EFFBFF;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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%;-ms-flex-positive:1;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#00A0D6;color:#FFFFFF;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:140%;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem}}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: 1200px){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: 1200px){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: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{-ms-flex-pack:start;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 768px){.fullwidth pn-charts-card .pn-charts-card__content__wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.fullwidth pn-charts-card .pn-charts-card__text__container{-ms-flex-pack:center;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:-ms-flexbox;display:flex}@media screen and (min-width: 768px){.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: 768px){.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:-ms-flexbox;display:flex}}@media screen and (min-width: 768px){.fullwidth pn-charts-card .pn-charts-card__preamble{-ms-flex-positive:0;flex-grow:0;font-size:2rem}}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}";
|
|
22101
22101
|
|
|
22102
22102
|
let PnChartsCard$1 = class extends HTMLElement {
|
|
22103
22103
|
constructor() {
|
|
@@ -22106,7 +22106,7 @@ let PnChartsCard$1 = class extends HTMLElement {
|
|
|
22106
22106
|
this.openInNewWindow = false;
|
|
22107
22107
|
}
|
|
22108
22108
|
render() {
|
|
22109
|
-
return (h(Host, null, h("slot", { name: "clickable-block-wrapper" }), h("div", { class: "pn-charts-card__wrapper" }, h("div", { class: "pn-charts-card__heading__wrapper" }, h("div", { class: "pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("div", { class: "pn-charts-card__content__wrapper" }, h("slot", { name: "chart" }), h("div", { class: "pn-charts-card__text__container" }, h("span", { class: "pn-charts-card__preamble" }, this.preamble), h("div", { class: "pn-charts-card__text__wrapper" }, h("div", { class: "pn-charts-card__source" }, h("label", null, this.label), h("h3",
|
|
22109
|
+
return (h(Host, null, h("slot", { name: "clickable-block-wrapper" }), h("div", { class: "pn-charts-card__wrapper" }, h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, h("div", { class: "pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("div", { class: "pn-charts-card__content__wrapper" }, h("slot", { name: "chart" }), h("div", { class: "pn-charts-card__text__container" }, h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, h("div", { class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("span", { class: "pn-charts-card__preamble" }, this.preamble), h("div", { class: "pn-charts-card__text__wrapper" }, h("div", { class: "pn-charts-card__source" }, h("label", null, this.label), h("h3", { class: "pn-chart-card__text__heading" }, this.source), h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null }, "Read the report ", h("pn-icon", { symbol: "arrow-right" }, " ")))))))));
|
|
22110
22110
|
}
|
|
22111
22111
|
get hostElement() { return this; }
|
|
22112
22112
|
static get style() { return pnChartsCardCss; }
|
|
@@ -28440,7 +28440,7 @@ let PnQuickCta$1 = class extends HTMLElement {
|
|
|
28440
28440
|
static get style() { return pnQuickCtaCss; }
|
|
28441
28441
|
};
|
|
28442
28442
|
|
|
28443
|
-
const pnQuoteCardCss = "pn-quote-card .pn-quote-card__container{margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;min-height:262px;padding:0 2.4rem}pn-quote-card .pn-quote-card__quote__container{padding:0 3.2rem}pn-quote-card .pn-quote-card__quote{position:relative;font-weight:400;font-size:2rem;line-height:140%;margin:0}pn-quote-card .pn-quote-card__quote svg{position:absolute;left:-3.2rem;top:0.2rem}pn-quote-card .pn-quote-card__reference__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;gap:1.6rem;-ms-flex-align:center;align-items:center}pn-quote-card .pn-quote-card__reference__name{display:block;font-weight:400;font-size:2.4rem;line-height:2.9rem}pn-quote-card .pn-quote-card__reference__occupation{display:block;font-weight:400;font-size:1.4rem;line-height:1.7rem}pn-quote-card [slot=illustration]{padding:0}pn-quote-card [slot=illustration-big]{padding:0.8rem 0}pn-quote-card [slot=illustration],pn-quote-card [slot=illustration-big]{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture,pn-quote-card [slot=illustration-big] picture{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture img,pn-quote-card [slot=illustration-big] picture img{-webkit-clip-path:circle(50%);clip-path:circle(50%)}pn-quote-card[data-line-orientation=horizontal] [slot=horizontal-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-orientation=horizontal] [slot=vertical-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=horizontal-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=vertical-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-color=white] .pn-quote-card__section{background-color:#00A0D6;color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-line-shape__line,pn-quote-card[data-line-color=white] .pn-line-shape__dot{border-color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-quote-card__quote svg>path{fill:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-quote-card__section{background-color:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-line-shape__line,pn-quote-card[data-line-color=blue] .pn-line-shape__dot{border-color:#00A0D6}pn-quote-card[data-line-color=blue] .pn-quote-card__quote svg>path{fill:#00A0D6}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:100%;margin:0 auto}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:70%}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:60%}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container{min-height:unset}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;gap:3.2rem;padding
|
|
28443
|
+
const pnQuoteCardCss = "pn-quote-card .pn-quote-card__container{margin:0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;min-height:262px;padding:0 2.4rem}pn-quote-card .pn-quote-card__quote__container{padding:0 3.2rem}pn-quote-card .pn-quote-card__quote{position:relative;font-weight:400;font-size:2rem;line-height:140%;margin:0}pn-quote-card .pn-quote-card__quote svg{position:absolute;left:-3.2rem;top:0.2rem}pn-quote-card .pn-quote-card__reference__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;gap:1.6rem;-ms-flex-align:center;align-items:center}pn-quote-card .pn-quote-card__reference__name{display:block;font-weight:400;font-size:2.4rem;line-height:2.9rem}pn-quote-card .pn-quote-card__reference__occupation{display:block;font-weight:400;font-size:1.4rem;line-height:1.7rem}pn-quote-card [slot=illustration]{padding:0}pn-quote-card [slot=illustration-big]{padding:0.8rem 0}pn-quote-card [slot=illustration],pn-quote-card [slot=illustration-big]{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture,pn-quote-card [slot=illustration-big] picture{aspect-ratio:1/1}pn-quote-card [slot=illustration] picture img,pn-quote-card [slot=illustration-big] picture img{-webkit-clip-path:circle(50%);clip-path:circle(50%)}pn-quote-card[data-line-orientation=horizontal] [slot=horizontal-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-orientation=horizontal] [slot=vertical-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=horizontal-line]{display:none}pn-quote-card[data-line-orientation=vertical] [slot=vertical-line]{display:-ms-flexbox;display:flex}pn-quote-card[data-line-color=white] .pn-quote-card__section{background-color:#00A0D6;color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-line-shape__line,pn-quote-card[data-line-color=white] .pn-line-shape__dot{border-color:#FFFFFF}pn-quote-card[data-line-color=white] .pn-quote-card__quote svg>path{fill:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-quote-card__section{background-color:#FFFFFF}pn-quote-card[data-line-color=blue] .pn-line-shape__line,pn-quote-card[data-line-color=blue] .pn-line-shape__dot{border-color:#00A0D6}pn-quote-card[data-line-color=blue] .pn-quote-card__quote svg>path{fill:#00A0D6}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:100%;margin:0 auto}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:70%}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__section{max-width:60%}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container{min-height:unset;padding:0}@media screen and (min-width: 768px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__container{padding:0 2.4rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;gap:3.2rem;padding:2.4rem 1.6rem 1.6rem 1.6rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote__container{padding:2.4rem 3.2rem 1.6rem 3.2rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote{font-size:1.6rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote{font-size:2rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__quote svg{display:block;margin-bottom:0.8rem;position:relative;top:0;left:0}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__container [slot=illustration] picture img{height:60px;width:60px}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__container [slot=illustration] picture img{height:90px;width:90px}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__name{font-size:1.6rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__name{font-size:2.4rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__occupation{font-size:1.2rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__reference__occupation{font-size:1.4rem}}pn-quote-card[data-card-style=requestquotepage] .pn-quote-card__large-photo{display:none}pn-quote-card[data-card-style=startpage] .pn-quote-card__section{width:100%;margin:0 auto;padding-top:4rem;padding-bottom:4rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__section{padding-bottom:0}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=startpage] .pn-quote-card__section{padding-top:10rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__container{min-height:10rem;padding-bottom:0}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:90%;width:100%;}}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:768px;width:100%;}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:1140px;width:100%;padding:0 5.6rem;}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__container{max-width:1440px;width:100%;padding:0 12rem;}}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote__container{padding-bottom:0;padding-left:0;padding-right:0}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote__container{padding-left:2.4rem;padding-right:2.4rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{font-size:2rem;padding-left:2.4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:-0.8rem;top:0.2rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{padding-left:4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:0}}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{font-size:2.4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:0;top:0.4rem;scale:1.3}}@media screen and (min-width: 1200px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{padding-left:0;font-size:3.2rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:-4.8rem;top:1rem;scale:1.4}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__quote{font-size:4rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg{left:-6.4rem;top:1.6rem;scale:1.8}}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}pn-quote-card[data-card-style=startpage] [slot=illustration] picture>img{max-width:6rem;max-height:6rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] [slot=illustration] picture>img{max-width:10rem;max-height:10rem}}@media screen and (min-width: 1140px){pn-quote-card[data-card-style=startpage] [slot=illustration]{display:none}}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference{text-align:right}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{display:block;font-size:1.4rem}@media screen and (min-width: 768px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{font-size:1.6rem}}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{font-size:2rem}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name{font-size:3.2rem;margin-bottom:1rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation{display:block;font-size:1.2rem}@media screen and (min-width: 992px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation{font-size:1.4rem}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation{font-size:2rem}}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo{display:none}@media screen and (min-width: 1140px){pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo{display:block}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big]{width:18rem;height:18rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big] picture>img{width:18rem;height:18rem}}@media screen and (min-width: 1640px){pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo{display:block;width:24rem;height:24rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big]{width:24rem;height:24rem}pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo>[slot=illustration-big]>picture>img{width:24rem;height:24rem}}";
|
|
28444
28444
|
|
|
28445
28445
|
let PnQuoteCard$1 = class extends HTMLElement {
|
|
28446
28446
|
constructor() {
|
package/esm/pn-chart.entry.js
CHANGED
|
@@ -21838,11 +21838,12 @@ const chartCfg = (dataChartType, data) => {
|
|
|
21838
21838
|
data: data,
|
|
21839
21839
|
options: {
|
|
21840
21840
|
responsive: true,
|
|
21841
|
-
maintainAspectRatio:
|
|
21841
|
+
maintainAspectRatio: false,
|
|
21842
|
+
aspectRatio: 1,
|
|
21842
21843
|
legend: {
|
|
21843
21844
|
display: true,
|
|
21844
21845
|
position: 'bottom',
|
|
21845
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
21846
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
21846
21847
|
},
|
|
21847
21848
|
tooltip: {
|
|
21848
21849
|
enabled: true,
|
|
@@ -21885,7 +21886,7 @@ const dataSetProps = (set, dataChartType) => {
|
|
|
21885
21886
|
return Object.assign(Object.assign({}, set), variant);
|
|
21886
21887
|
};
|
|
21887
21888
|
|
|
21888
|
-
const pnChartCss = "pn-chart{display:-ms-flexbox;display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:
|
|
21889
|
+
const pnChartCss = "pn-chart{display:-ms-flexbox;display:flex;height:100%;width:100%}pn-chart .chart-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:100vw;height:30vh;padding:1.6rem 0}@media screen and (min-width: 1640px){pn-chart .chart-wrapper{padding:2.4rem 0}}pn-chart canvas.pnChart{width:100% !important}pn-chart[data-chart-type=bar] .chart-wrapper,pn-chart[data-chart-type=line] .chart-wrapper{min-height:100%;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.fullwidth pn-chart{-ms-flex-pack:center;justify-content:center}}@media screen and (min-width: 768px){.fullwidth pn-chart .chart-wrapper{height:40vh;width:30vw}}";
|
|
21889
21890
|
|
|
21890
21891
|
let PnChart = class {
|
|
21891
21892
|
constructor(hostRef) {
|
|
@@ -21904,7 +21905,6 @@ let PnChart = class {
|
|
|
21904
21905
|
componentDidLoad() {
|
|
21905
21906
|
this.myChartCtxRef = this.element.querySelector('#chart-canvas');
|
|
21906
21907
|
this.myChart = new Chart.Chart(this.myChartCtxRef, chartCfg(this.dataChartType, this.data));
|
|
21907
|
-
this.myChartCtxRef.height = this.myChartCtxRef.width / 2;
|
|
21908
21908
|
}
|
|
21909
21909
|
render() {
|
|
21910
21910
|
return (h(Host, null, h("div", { class: "chart-wrapper" }, h("canvas", { id: "chart-canvas", class: "pnChart" }))));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, a as Host, g as getElement } from './index-5397620b.js';
|
|
2
2
|
|
|
3
|
-
const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#EFFBFF;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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:
|
|
3
|
+
const pnChartsCardCss = "pn-charts-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-charts-card .pn-charts-card__wrapper{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#EFFBFF;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}pn-charts-card .pn-charts-card__text__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;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%;-ms-flex-positive:1;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-charts-card .pn-charts-card__source label{background-color:#00A0D6;color:#FFFFFF;border-radius:0.4rem;font-weight:400;font-size:1rem;line-height:140%;text-transform:uppercase;padding:0.4rem;margin-bottom:0.6rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (min-width: 1200px){pn-charts-card .pn-charts-card__source label{font-size:1.2rem}}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: 1200px){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: 1200px){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: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{-ms-flex-pack:start;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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 768px){.fullwidth pn-charts-card .pn-charts-card__content__wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.fullwidth pn-charts-card .pn-charts-card__text__container{-ms-flex-pack:center;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:-ms-flexbox;display:flex}@media screen and (min-width: 768px){.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: 768px){.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal{display:-ms-flexbox;display:flex}}@media screen and (min-width: 768px){.fullwidth pn-charts-card .pn-charts-card__preamble{-ms-flex-positive:0;flex-grow:0;font-size:2rem}}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}";
|
|
4
4
|
|
|
5
5
|
let PnChartsCard = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -8,7 +8,7 @@ let PnChartsCard = class {
|
|
|
8
8
|
this.openInNewWindow = false;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h(Host, null, h("slot", { name: "clickable-block-wrapper" }), h("div", { class: "pn-charts-card__wrapper" }, h("div", { class: "pn-charts-card__heading__wrapper" }, h("div", { class: "pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("div", { class: "pn-charts-card__content__wrapper" }, h("slot", { name: "chart" }), h("div", { class: "pn-charts-card__text__container" }, h("span", { class: "pn-charts-card__preamble" }, this.preamble), h("div", { class: "pn-charts-card__text__wrapper" }, h("div", { class: "pn-charts-card__source" }, h("label", null, this.label), h("h3",
|
|
11
|
+
return (h(Host, null, h("slot", { name: "clickable-block-wrapper" }), h("div", { class: "pn-charts-card__wrapper" }, h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--vertical" }, h("div", { class: "pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("div", { class: "pn-charts-card__content__wrapper" }, h("slot", { name: "chart" }), h("div", { class: "pn-charts-card__text__container" }, h("div", { class: "pn-charts-card__heading__wrapper pn-charts-card__heading__wrapper--horizontal" }, h("div", { class: "pn-charts-card__heading pn-charts-card__heading" }, this.header), h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)), h("span", { class: "pn-charts-card__preamble" }, this.preamble), h("div", { class: "pn-charts-card__text__wrapper" }, h("div", { class: "pn-charts-card__source" }, h("label", null, this.label), h("h3", { class: "pn-chart-card__text__heading" }, this.source), h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null }, "Read the report ", h("pn-icon", { symbol: "arrow-right" }, " ")))))))));
|
|
12
12
|
}
|
|
13
13
|
get hostElement() { return getElement(this); }
|
|
14
14
|
};
|