@postnord/pn-marketweb-components 2.0.134 → 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 +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 +42 -14
- 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-67887512.system.js +1 -1
- package/pn-market-web-components/p-76b89b6c.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-b71074a8.entry.js +1 -0
- 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: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", { 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
|
}
|
|
@@ -132,42 +135,67 @@ pn-charts-card .pn-charts-card__source a[target=_blank]:not(.pn-button):after {
|
|
|
132
135
|
display: none;
|
|
133
136
|
}
|
|
134
137
|
|
|
135
|
-
.fullwidth .pn-charts-card__wrapper {
|
|
138
|
+
.fullwidth pn-charts-card .pn-charts-card__wrapper {
|
|
136
139
|
padding: 4rem;
|
|
137
140
|
}
|
|
138
|
-
.fullwidth .pn-charts-card__heading__wrapper {
|
|
141
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper {
|
|
139
142
|
margin-bottom: 3.2rem;
|
|
143
|
+
gap: 1.6rem;
|
|
144
|
+
}
|
|
145
|
+
@media screen and (min-width: 768px) {
|
|
146
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__wrapper {
|
|
147
|
+
justify-content: flex-start;
|
|
148
|
+
}
|
|
140
149
|
}
|
|
141
|
-
.fullwidth .pn-charts-card__heading,
|
|
142
|
-
.fullwidth .pn-charts-card__heading__highlight {
|
|
150
|
+
.fullwidth pn-charts-card .pn-charts-card__heading,
|
|
151
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__highlight {
|
|
143
152
|
font-size: 2.4rem;
|
|
144
153
|
}
|
|
145
154
|
@media screen and (min-width: 768px) {
|
|
146
|
-
.fullwidth .pn-charts-card__heading,
|
|
147
|
-
.fullwidth .pn-charts-card__heading__highlight {
|
|
155
|
+
.fullwidth pn-charts-card .pn-charts-card__heading,
|
|
156
|
+
.fullwidth pn-charts-card .pn-charts-card__heading__highlight {
|
|
148
157
|
font-size: 3.2rem;
|
|
149
158
|
}
|
|
150
159
|
}
|
|
151
|
-
.fullwidth .pn-charts-card__content__wrapper {
|
|
160
|
+
.fullwidth pn-charts-card .pn-charts-card__content__wrapper {
|
|
152
161
|
display: flex;
|
|
153
162
|
flex-direction: column;
|
|
154
163
|
justify-content: space-between;
|
|
155
164
|
}
|
|
156
165
|
@media screen and (min-width: 768px) {
|
|
157
|
-
.fullwidth .pn-charts-card__content__wrapper {
|
|
166
|
+
.fullwidth pn-charts-card .pn-charts-card__content__wrapper {
|
|
158
167
|
flex-direction: row-reverse;
|
|
159
168
|
}
|
|
160
169
|
}
|
|
161
|
-
.fullwidth .pn-charts-card__text__container {
|
|
170
|
+
.fullwidth pn-charts-card .pn-charts-card__text__container {
|
|
162
171
|
justify-content: center;
|
|
163
172
|
}
|
|
164
173
|
@media screen and (min-width: 768px) {
|
|
165
|
-
.fullwidth .pn-charts-card__text__container {
|
|
166
|
-
|
|
174
|
+
.fullwidth pn-charts-card .pn-charts-card__text__container {
|
|
175
|
+
width: 100%;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
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;
|
|
167
192
|
}
|
|
168
193
|
}
|
|
169
|
-
|
|
170
|
-
|
|
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
|
+
}
|
|
171
199
|
}
|
|
172
200
|
|
|
173
201
|
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: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", { 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: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", { 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
|
};
|