@designsystem-se/af 32.2.0 → 32.2.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/digi-bar-chart.js +4 -4
- package/components/digi-chart-line.js +3 -2
- package/dist/cjs/digi-bar-chart.cjs.entry.js +4 -4
- package/dist/cjs/digi-chart-line.cjs.entry.js +3 -2
- package/dist/collection/components/_chart/bar-chart/bar-chart.js +4 -4
- package/dist/collection/components/_chart/chart-line/chart-line.js +3 -2
- package/dist/digi-arbetsformedlingen/design-tokens/components/_navigation-context-menu.variables.scss +0 -8
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-02d906aa.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-803b1d3e.entry.js → p-e1a945a1.entry.js} +1 -1
- package/dist/esm/digi-bar-chart.entry.js +4 -4
- package/dist/esm/digi-chart-line.entry.js +3 -2
- package/hydrate/index.js +7 -6
- package/hydrate/index.mjs +7 -6
- package/package.json +1 -1
- package/dist/digi-arbetsformedlingen/p-cbfe2f1b.entry.js +0 -1
|
@@ -603,7 +603,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
603
603
|
adjustment = Math.ceil((newSize - mSize) / (size / d.length));
|
|
604
604
|
}
|
|
605
605
|
// Slicing the text up, saving atleast 3 characters
|
|
606
|
-
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)) + '...');
|
|
606
|
+
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
|
|
607
607
|
}));
|
|
608
608
|
}
|
|
609
609
|
else {
|
|
@@ -624,13 +624,13 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
624
624
|
const mSize = this._margin.left;
|
|
625
625
|
if (size < mSize)
|
|
626
626
|
return d;
|
|
627
|
-
const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
|
|
627
|
+
const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)).trim() + '...');
|
|
628
628
|
let adjustment = 0;
|
|
629
629
|
if (newSize > mSize) {
|
|
630
630
|
adjustment = Math.ceil((newSize - mSize) / (size / d.length));
|
|
631
631
|
}
|
|
632
632
|
// Slicing the text up, saving atleast 3 characters
|
|
633
|
-
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)) + '...');
|
|
633
|
+
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
|
|
634
634
|
}));
|
|
635
635
|
}
|
|
636
636
|
}
|
|
@@ -1476,7 +1476,7 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
|
1476
1476
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
|
|
1477
1477
|
<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
|
|
1478
1478
|
}
|
|
1479
|
-
return (h(Host, { key: '
|
|
1479
|
+
return (h(Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
1480
1480
|
}
|
|
1481
1481
|
get hostElement() { return this; }
|
|
1482
1482
|
static get watchers() { return {
|
|
@@ -2163,9 +2163,10 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
|
|
|
2163
2163
|
.data([text])
|
|
2164
2164
|
.join('text')
|
|
2165
2165
|
.attr('font-size', this.fontSize)
|
|
2166
|
+
.attr('font-family', 'sans-serif')
|
|
2166
2167
|
.text((d) => d)
|
|
2167
2168
|
.each((...[, i, nodelist]) => {
|
|
2168
|
-
const thisWidth = nodelist[i].getComputedTextLength();
|
|
2169
|
+
const thisWidth = nodelist[i].getComputedTextLength() + 30; // 15 pixel padding on each side
|
|
2169
2170
|
textWidth.push(thisWidth);
|
|
2170
2171
|
nodelist[i].remove();
|
|
2171
2172
|
});
|
|
@@ -2301,7 +2302,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
|
|
|
2301
2302
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
|
|
2302
2303
|
else
|
|
2303
2304
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
|
|
2304
|
-
return (h("host", { key: '
|
|
2305
|
+
return (h("host", { key: 'f21b013a8b60400e177357d970b9bf06c9f3cf4e', ref: (el) => (this._host = el) }, h("div", { key: 'a2eb77c9af10a36c7e90297e706a75f5f876e307', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '617328a73c5773b51487ca89c4940f1f09ad67eb', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '53ab51dcf6678dfac487afeafa4df02308fb5e16', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '953029ce0933912c1cddadac92fcb5c568914b48', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a8720c0331ee8171d1dc99184bd59d8e35108d5c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '7098aef34252ce4bb986cc84e941ad089f66315d', slot: "icon" }), "Visa diagram"), h("div", { key: '9db08924008b91bb11a792250282f56f288de210', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'f3acb5aab0e706ac7888f5ea82751e7410a08443', class: "chartTooltip", id: this.afId }, h("div", { key: '9dba5fcd563591a8ee71a2078378857ff6ac2241', class: "tooltipBody" }), h("digi-icon-x", { key: 'b09afdfbac4100be8e3fb6c3daac2aecfd8c6fd4', class: "close" }), ' '), h("div", { key: 'a552c93544509354d578478b1883320c875895ed', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'bec7f0c712446eaeeeec8da293a9e40ed7607784', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '40474802d2acfafd937270da9c5523f330b6133c', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
2305
2306
|
}
|
|
2306
2307
|
get element() { return this; }
|
|
2307
2308
|
static get watchers() { return {
|
|
@@ -599,7 +599,7 @@ const barChart = class {
|
|
|
599
599
|
adjustment = Math.ceil((newSize - mSize) / (size / d.length));
|
|
600
600
|
}
|
|
601
601
|
// Slicing the text up, saving atleast 3 characters
|
|
602
|
-
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)) + '...');
|
|
602
|
+
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
|
|
603
603
|
}));
|
|
604
604
|
}
|
|
605
605
|
else {
|
|
@@ -620,13 +620,13 @@ const barChart = class {
|
|
|
620
620
|
const mSize = this._margin.left;
|
|
621
621
|
if (size < mSize)
|
|
622
622
|
return d;
|
|
623
|
-
const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
|
|
623
|
+
const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)).trim() + '...');
|
|
624
624
|
let adjustment = 0;
|
|
625
625
|
if (newSize > mSize) {
|
|
626
626
|
adjustment = Math.ceil((newSize - mSize) / (size / d.length));
|
|
627
627
|
}
|
|
628
628
|
// Slicing the text up, saving atleast 3 characters
|
|
629
|
-
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)) + '...');
|
|
629
|
+
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
|
|
630
630
|
}));
|
|
631
631
|
}
|
|
632
632
|
}
|
|
@@ -1472,7 +1472,7 @@ const barChart = class {
|
|
|
1472
1472
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
|
|
1473
1473
|
<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
|
|
1474
1474
|
}
|
|
1475
|
-
return (index.h(index.Host, { key: '
|
|
1475
|
+
return (index.h(index.Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, index.h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), index.h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, index.h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), index.h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", null)) : (index.h("digi-icon-caret-down", null))), index.h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), index.h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
1476
1476
|
}
|
|
1477
1477
|
get hostElement() { return index.getElement(this); }
|
|
1478
1478
|
static get watchers() { return {
|
|
@@ -2161,9 +2161,10 @@ const ChartLine = class {
|
|
|
2161
2161
|
.data([text])
|
|
2162
2162
|
.join('text')
|
|
2163
2163
|
.attr('font-size', this.fontSize)
|
|
2164
|
+
.attr('font-family', 'sans-serif')
|
|
2164
2165
|
.text((d) => d)
|
|
2165
2166
|
.each((...[, i, nodelist]) => {
|
|
2166
|
-
const thisWidth = nodelist[i].getComputedTextLength();
|
|
2167
|
+
const thisWidth = nodelist[i].getComputedTextLength() + 30; // 15 pixel padding on each side
|
|
2167
2168
|
textWidth.push(thisWidth);
|
|
2168
2169
|
nodelist[i].remove();
|
|
2169
2170
|
});
|
|
@@ -2299,7 +2300,7 @@ const ChartLine = class {
|
|
|
2299
2300
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
|
|
2300
2301
|
else
|
|
2301
2302
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
|
|
2302
|
-
return (index.h("host", { key: '
|
|
2303
|
+
return (index.h("host", { key: 'f21b013a8b60400e177357d970b9bf06c9f3cf4e', ref: (el) => (this._host = el) }, index.h("div", { key: 'a2eb77c9af10a36c7e90297e706a75f5f876e307', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: '617328a73c5773b51487ca89c4940f1f09ad67eb', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '53ab51dcf6678dfac487afeafa4df02308fb5e16', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '953029ce0933912c1cddadac92fcb5c568914b48', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: 'a8720c0331ee8171d1dc99184bd59d8e35108d5c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '7098aef34252ce4bb986cc84e941ad089f66315d', slot: "icon" }), "Visa diagram"), index.h("div", { key: '9db08924008b91bb11a792250282f56f288de210', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: 'f3acb5aab0e706ac7888f5ea82751e7410a08443', class: "chartTooltip", id: this.afId }, index.h("div", { key: '9dba5fcd563591a8ee71a2078378857ff6ac2241', class: "tooltipBody" }), index.h("digi-icon-x", { key: 'b09afdfbac4100be8e3fb6c3daac2aecfd8c6fd4', class: "close" }), ' '), index.h("div", { key: 'a552c93544509354d578478b1883320c875895ed', class: "chart", ref: (el) => (this._chartDiv = el) }), index.h("div", { key: 'bec7f0c712446eaeeeec8da293a9e40ed7607784', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: '40474802d2acfafd937270da9c5523f330b6133c', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
2303
2304
|
}
|
|
2304
2305
|
get element() { return index.getElement(this); }
|
|
2305
2306
|
static get watchers() { return {
|
|
@@ -521,7 +521,7 @@ export class barChart {
|
|
|
521
521
|
adjustment = Math.ceil((newSize - mSize) / (size / d.length));
|
|
522
522
|
}
|
|
523
523
|
// Slicing the text up, saving atleast 3 characters
|
|
524
|
-
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)) + '...');
|
|
524
|
+
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
|
|
525
525
|
}));
|
|
526
526
|
}
|
|
527
527
|
else {
|
|
@@ -542,13 +542,13 @@ export class barChart {
|
|
|
542
542
|
const mSize = this._margin.left;
|
|
543
543
|
if (size < mSize)
|
|
544
544
|
return d;
|
|
545
|
-
const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)) + '...');
|
|
545
|
+
const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)).trim() + '...');
|
|
546
546
|
let adjustment = 0;
|
|
547
547
|
if (newSize > mSize) {
|
|
548
548
|
adjustment = Math.ceil((newSize - mSize) / (size / d.length));
|
|
549
549
|
}
|
|
550
550
|
// Slicing the text up, saving atleast 3 characters
|
|
551
|
-
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)) + '...');
|
|
551
|
+
return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
|
|
552
552
|
}));
|
|
553
553
|
}
|
|
554
554
|
}
|
|
@@ -1399,7 +1399,7 @@ export class barChart {
|
|
|
1399
1399
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
|
|
1400
1400
|
<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
|
|
1401
1401
|
}
|
|
1402
|
-
return (h(Host, { key: '
|
|
1402
|
+
return (h(Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
1403
1403
|
}
|
|
1404
1404
|
static get is() { return "digi-bar-chart"; }
|
|
1405
1405
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1477,9 +1477,10 @@ export class ChartLine {
|
|
|
1477
1477
|
.data([text])
|
|
1478
1478
|
.join('text')
|
|
1479
1479
|
.attr('font-size', this.fontSize)
|
|
1480
|
+
.attr('font-family', 'sans-serif')
|
|
1480
1481
|
.text((d) => d)
|
|
1481
1482
|
.each((...[, i, nodelist]) => {
|
|
1482
|
-
const thisWidth = nodelist[i].getComputedTextLength();
|
|
1483
|
+
const thisWidth = nodelist[i].getComputedTextLength() + 30; // 15 pixel padding on each side
|
|
1483
1484
|
textWidth.push(thisWidth);
|
|
1484
1485
|
nodelist[i].remove();
|
|
1485
1486
|
});
|
|
@@ -1615,7 +1616,7 @@ export class ChartLine {
|
|
|
1615
1616
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
|
|
1616
1617
|
else
|
|
1617
1618
|
heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
|
|
1618
|
-
return (h("host", { key: '
|
|
1619
|
+
return (h("host", { key: 'f21b013a8b60400e177357d970b9bf06c9f3cf4e', ref: (el) => (this._host = el) }, h("div", { key: 'a2eb77c9af10a36c7e90297e706a75f5f876e307', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '617328a73c5773b51487ca89c4940f1f09ad67eb', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '53ab51dcf6678dfac487afeafa4df02308fb5e16', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '953029ce0933912c1cddadac92fcb5c568914b48', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a8720c0331ee8171d1dc99184bd59d8e35108d5c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '7098aef34252ce4bb986cc84e941ad089f66315d', slot: "icon" }), "Visa diagram"), h("div", { key: '9db08924008b91bb11a792250282f56f288de210', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'f3acb5aab0e706ac7888f5ea82751e7410a08443', class: "chartTooltip", id: this.afId }, h("div", { key: '9dba5fcd563591a8ee71a2078378857ff6ac2241', class: "tooltipBody" }), h("digi-icon-x", { key: 'b09afdfbac4100be8e3fb6c3daac2aecfd8c6fd4', class: "close" }), ' '), h("div", { key: 'a552c93544509354d578478b1883320c875895ed', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'bec7f0c712446eaeeeec8da293a9e40ed7607784', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '40474802d2acfafd937270da9c5523f330b6133c', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
|
|
1619
1620
|
}
|
|
1620
1621
|
static get is() { return "digi-chart-line"; }
|
|
1621
1622
|
static get encapsulation() { return "scoped"; }
|
|
@@ -109,12 +109,4 @@
|
|
|
109
109
|
* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
|
|
110
110
|
* @prop --digi--navigation-context-menu--items--margin: 0;
|
|
111
111
|
* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
|
|
112
|
-
*/ont-size--desktop: var(--digi--typography--body--font-size--desktop-large);
|
|
113
|
-
* @prop --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
|
|
114
|
-
* @prop --digi--navigation-context-menu--item--display: flex;
|
|
115
|
-
* @prop --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
|
|
116
|
-
* @prop --digi--navigation-context-menu--item--font-wight--selected: 600;
|
|
117
|
-
* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
|
|
118
|
-
* @prop --digi--navigation-context-menu--items--margin: 0;
|
|
119
|
-
* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
|
|
120
112
|
*/
|