@postnord/pn-marketweb-components 2.0.134 → 2.0.136
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 +3 -3
- package/cjs/pn-charts-card.cjs.entry.js +2 -2
- package/collection/components/charts/pn-chart/pn-chart-helper.js +2 -2
- package/collection/components/charts/pn-chart/pn-chart.css +9 -3
- package/collection/components/charts/pn-charts-card/pn-charts-card.css +47 -18
- package/collection/components/charts/pn-charts-card/pn-charts-card.js +4 -1
- package/collection/components/charts/pn-charts-card/pn-charts-card.stories.js +1 -1
- package/custom-elements/index.js +5 -5
- package/esm/pn-chart.entry.js +3 -3
- package/esm/pn-charts-card.entry.js +2 -2
- package/esm-es5/pn-chart.entry.js +1 -1
- package/esm-es5/pn-charts-card.entry.js +1 -1
- package/package.json +1 -1
- package/pn-market-web-components/p-0a39eae9.entry.js +1 -0
- package/pn-market-web-components/p-67887512.system.js +1 -1
- package/pn-market-web-components/p-b16eaf7c.system.entry.js +1 -0
- package/pn-market-web-components/{p-8d6b3816.entry.js → p-b60a151b.entry.js} +1 -1
- package/pn-market-web-components/{p-e1430363.system.entry.js → p-c7d886d7.system.entry.js} +1 -1
- package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
- package/umd/pn-marketweb-init.js +1 -1
- package/umd/pn-marketweb-salesforce.js +2 -2
- package/pn-market-web-components/p-02cb0adc.entry.js +0 -1
- package/pn-market-web-components/p-8e1e604d.system.entry.js +0 -1
|
@@ -21842,12 +21842,12 @@ const chartCfg = (dataChartType, data) => {
|
|
|
21842
21842
|
data: data,
|
|
21843
21843
|
options: {
|
|
21844
21844
|
responsive: true,
|
|
21845
|
-
maintainAspectRatio:
|
|
21845
|
+
maintainAspectRatio: false,
|
|
21846
21846
|
aspectRatio: 1,
|
|
21847
21847
|
legend: {
|
|
21848
21848
|
display: true,
|
|
21849
21849
|
position: 'bottom',
|
|
21850
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
21850
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
21851
21851
|
},
|
|
21852
21852
|
tooltip: {
|
|
21853
21853
|
enabled: true,
|
|
@@ -21890,7 +21890,7 @@ const dataSetProps = (set, dataChartType) => {
|
|
|
21890
21890
|
return Object.assign(Object.assign({}, set), variant);
|
|
21891
21891
|
};
|
|
21892
21892
|
|
|
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:
|
|
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}}";
|
|
21894
21894
|
|
|
21895
21895
|
let PnChart = class {
|
|
21896
21896
|
constructor(hostRef) {
|
|
@@ -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: 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__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:
|
|
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:1;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: 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: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", { 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" }, " ")))))))));
|
|
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,12 +4,12 @@ export const chartCfg = (dataChartType, data) => {
|
|
|
4
4
|
data: data,
|
|
5
5
|
options: {
|
|
6
6
|
responsive: true,
|
|
7
|
-
maintainAspectRatio:
|
|
7
|
+
maintainAspectRatio: false,
|
|
8
8
|
aspectRatio: 1,
|
|
9
9
|
legend: {
|
|
10
10
|
display: true,
|
|
11
11
|
position: 'bottom',
|
|
12
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
12
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
13
13
|
},
|
|
14
14
|
tooltip: {
|
|
15
15
|
enabled: true,
|
|
@@ -8,8 +8,8 @@ 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
15
|
@media screen and (min-width: 1640px) {
|
|
@@ -27,6 +27,12 @@ pn-chart[data-chart-type=bar] .chart-wrapper, pn-chart[data-chart-type=line] .ch
|
|
|
27
27
|
}
|
|
28
28
|
@media screen and (min-width: 768px) {
|
|
29
29
|
.fullwidth pn-chart {
|
|
30
|
-
|
|
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;
|
|
31
37
|
}
|
|
32
38
|
}
|
|
@@ -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
|
}
|
|
@@ -85,15 +88,16 @@ pn-charts-card .pn-charts-card__source label {
|
|
|
85
88
|
border-radius: 0.4rem;
|
|
86
89
|
font-weight: 400;
|
|
87
90
|
font-size: 1rem;
|
|
88
|
-
line-height:
|
|
91
|
+
line-height: 1;
|
|
89
92
|
text-transform: uppercase;
|
|
90
93
|
padding: 0.4rem;
|
|
91
94
|
margin-bottom: 0.6rem;
|
|
92
95
|
width: fit-content;
|
|
93
96
|
}
|
|
94
|
-
@media screen and (min-width:
|
|
97
|
+
@media screen and (min-width: 1640px) {
|
|
95
98
|
pn-charts-card .pn-charts-card__source label {
|
|
96
99
|
font-size: 1.2rem;
|
|
100
|
+
padding: 0.6rem;
|
|
97
101
|
}
|
|
98
102
|
}
|
|
99
103
|
pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading {
|
|
@@ -103,7 +107,7 @@ pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading {
|
|
|
103
107
|
color: #005D92;
|
|
104
108
|
margin-bottom: 0;
|
|
105
109
|
}
|
|
106
|
-
@media screen and (min-width:
|
|
110
|
+
@media screen and (min-width: 1640px) {
|
|
107
111
|
pn-charts-card .pn-charts-card__source .pn-chart-card__text__heading {
|
|
108
112
|
font-size: 2rem;
|
|
109
113
|
}
|
|
@@ -120,7 +124,7 @@ pn-charts-card .pn-charts-card__source a {
|
|
|
120
124
|
pn-charts-card .pn-charts-card__source a:hover {
|
|
121
125
|
text-decoration: underline;
|
|
122
126
|
}
|
|
123
|
-
@media screen and (min-width:
|
|
127
|
+
@media screen and (min-width: 1640px) {
|
|
124
128
|
pn-charts-card .pn-charts-card__source a {
|
|
125
129
|
font-size: 2rem;
|
|
126
130
|
}
|
|
@@ -132,42 +136,67 @@ pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after {
|
|
|
132
136
|
display: none;
|
|
133
137
|
}
|
|
134
138
|
|
|
135
|
-
.fullwidth .pn-charts-card__wrapper {
|
|
139
|
+
.fullwidth pn-charts-card .pn-charts-card__wrapper {
|
|
136
140
|
padding: 4rem;
|
|
137
141
|
}
|
|
138
|
-
.fullwidth .pn-charts-card__heading__wrapper {
|
|
142
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper {
|
|
139
143
|
margin-bottom: 3.2rem;
|
|
144
|
+
gap: 1.6rem;
|
|
145
|
+
}
|
|
146
|
+
@media screen and (min-width: 768px) {
|
|
147
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper {
|
|
148
|
+
justify-content: flex-start;
|
|
149
|
+
}
|
|
140
150
|
}
|
|
141
|
-
.fullwidth .pn-charts-card__heading,
|
|
142
|
-
.fullwidth .pn-charts-card__heading__highlight {
|
|
151
|
+
.fullwidth pn-charts-card .pn-charts-card__heading,
|
|
152
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__highlight {
|
|
143
153
|
font-size: 2.4rem;
|
|
144
154
|
}
|
|
145
155
|
@media screen and (min-width: 768px) {
|
|
146
|
-
.fullwidth .pn-charts-card__heading,
|
|
147
|
-
.fullwidth .pn-charts-card__heading__highlight {
|
|
156
|
+
.fullwidth pn-charts-card .pn-charts-card__heading,
|
|
157
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__highlight {
|
|
148
158
|
font-size: 3.2rem;
|
|
149
159
|
}
|
|
150
160
|
}
|
|
151
|
-
.fullwidth .pn-charts-card__content__wrapper {
|
|
161
|
+
.fullwidth pn-charts-card .pn-charts-card__content__wrapper {
|
|
152
162
|
display: flex;
|
|
153
163
|
flex-direction: column;
|
|
154
164
|
justify-content: space-between;
|
|
155
165
|
}
|
|
156
166
|
@media screen and (min-width: 768px) {
|
|
157
|
-
.fullwidth .pn-charts-card__content__wrapper {
|
|
167
|
+
.fullwidth pn-charts-card .pn-charts-card__content__wrapper {
|
|
158
168
|
flex-direction: row-reverse;
|
|
159
169
|
}
|
|
160
170
|
}
|
|
161
|
-
.fullwidth .pn-charts-card__text__container {
|
|
171
|
+
.fullwidth pn-charts-card .pn-charts-card__text__container {
|
|
162
172
|
justify-content: center;
|
|
163
173
|
}
|
|
164
174
|
@media screen and (min-width: 768px) {
|
|
165
|
-
.fullwidth .pn-charts-card__text__container {
|
|
166
|
-
|
|
175
|
+
.fullwidth pn-charts-card .pn-charts-card__text__container {
|
|
176
|
+
width: 100%;
|
|
167
177
|
}
|
|
168
178
|
}
|
|
169
|
-
.fullwidth .pn-charts-
|
|
170
|
-
|
|
179
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--vertical {
|
|
180
|
+
display: flex;
|
|
181
|
+
}
|
|
182
|
+
@media screen and (min-width: 768px) {
|
|
183
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--vertical {
|
|
184
|
+
display: none;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal {
|
|
188
|
+
display: none;
|
|
189
|
+
}
|
|
190
|
+
@media screen and (min-width: 768px) {
|
|
191
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper--horizontal {
|
|
192
|
+
display: flex;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
@media screen and (min-width: 768px) {
|
|
196
|
+
.fullwidth pn-charts-card .pn-charts-card__preamble {
|
|
197
|
+
flex-grow: 0;
|
|
198
|
+
font-size: 2rem;
|
|
199
|
+
}
|
|
171
200
|
}
|
|
172
201
|
|
|
173
202
|
pn-charts-card[data-chart-color=coral] > .pn-charts-card__wrapper {
|
|
@@ -7,12 +7,15 @@ 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" },
|
|
@@ -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,12 +22021,12 @@ const chartCfg = (dataChartType, data) => {
|
|
|
22021
22021
|
data: data,
|
|
22022
22022
|
options: {
|
|
22023
22023
|
responsive: true,
|
|
22024
|
-
maintainAspectRatio:
|
|
22024
|
+
maintainAspectRatio: false,
|
|
22025
22025
|
aspectRatio: 1,
|
|
22026
22026
|
legend: {
|
|
22027
22027
|
display: true,
|
|
22028
22028
|
position: 'bottom',
|
|
22029
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
22029
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
22030
22030
|
},
|
|
22031
22031
|
tooltip: {
|
|
22032
22032
|
enabled: true,
|
|
@@ -22069,7 +22069,7 @@ const dataSetProps = (set, dataChartType) => {
|
|
|
22069
22069
|
return Object.assign(Object.assign({}, set), variant);
|
|
22070
22070
|
};
|
|
22071
22071
|
|
|
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:
|
|
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}}";
|
|
22073
22073
|
|
|
22074
22074
|
let PnChart$1 = class extends HTMLElement {
|
|
22075
22075
|
constructor() {
|
|
@@ -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: 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__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:
|
|
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:1;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: 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: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", { 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" }, " ")))))))));
|
|
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; }
|
package/esm/pn-chart.entry.js
CHANGED
|
@@ -21838,12 +21838,12 @@ const chartCfg = (dataChartType, data) => {
|
|
|
21838
21838
|
data: data,
|
|
21839
21839
|
options: {
|
|
21840
21840
|
responsive: true,
|
|
21841
|
-
maintainAspectRatio:
|
|
21841
|
+
maintainAspectRatio: false,
|
|
21842
21842
|
aspectRatio: 1,
|
|
21843
21843
|
legend: {
|
|
21844
21844
|
display: true,
|
|
21845
21845
|
position: 'bottom',
|
|
21846
|
-
labels: { boxWidth: 20, fontFamily: '
|
|
21846
|
+
labels: { boxWidth: 20, fontFamily: 'sans-serif' },
|
|
21847
21847
|
},
|
|
21848
21848
|
tooltip: {
|
|
21849
21849
|
enabled: true,
|
|
@@ -21886,7 +21886,7 @@ const dataSetProps = (set, dataChartType) => {
|
|
|
21886
21886
|
return Object.assign(Object.assign({}, set), variant);
|
|
21887
21887
|
};
|
|
21888
21888
|
|
|
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:
|
|
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}}";
|
|
21890
21890
|
|
|
21891
21891
|
let PnChart = class {
|
|
21892
21892
|
constructor(hostRef) {
|
|
@@ -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: 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__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:
|
|
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:1;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: 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: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", { 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" }, " ")))))))));
|
|
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
|
};
|