@designsystem-se/af 35.4.1-beta.8 → 35.4.1-beta.9

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.
@@ -1003,8 +1003,8 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
1003
1003
  .on('mouseenter', (_event, serie) => this.highlightBars(serie))
1004
1004
  .on('mouseleave', this.resetBarColor);
1005
1005
  legendChips.append('svg')
1006
- .attr('width', rectSize)
1007
- .attr('height', rectSize)
1006
+ .attr('width', rectSize + 1)
1007
+ .attr('height', rectSize + 1)
1008
1008
  .append('rect')
1009
1009
  .attr('x', 0)
1010
1010
  .attr('y', 0)
@@ -1584,21 +1584,18 @@ const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
1584
1584
  return body;
1585
1585
  }
1586
1586
  render() {
1587
- var _a, _b, _c, _d, _e;
1587
+ var _a, _b, _c, _d;
1588
1588
  // Setting header
1589
1589
  let heading = '';
1590
1590
  if (this.chartData) {
1591
1591
  if (!this.chartData.subTitle)
1592
1592
  heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}>`;
1593
- else {
1594
- if (!this.chartData.infoText)
1595
- heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
1596
- else
1597
- heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${(_a = this.chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
1598
- <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>`;
1599
- }
1593
+ else
1594
+ heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
1595
+ if (this.chartData.infoText)
1596
+ heading = `${heading}<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>`;
1600
1597
  }
1601
- return (h(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1598
+ return (h(Host, { key: 'bf35d7e9a6879cd90cd8cef33c9319cfc9e45afe', ref: (el) => (this.host = el) }, h("svg", { key: 'd77703db16cf0fbcffef18175b9d96279c8bdc32', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'c5cd241c72b0efb58f7746d4bc211cfba84409d0' }, h("pattern", { key: '14470e18a1a1d32c69bc2512f50c1bfb2cd49322', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '24adb8419e0117952429e7d5458e776520a688fe', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'ae0863278d3e2786a1ef341aa10a2b883a7e612d', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'e31729aacfaf8b66cf9a0c5c3aa10898ffe27aa8', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '7be7d85ef07cafdde1480049b8691b12448c5171', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '60071e2ba5f3d51438d7cc78caf927267ad9068a', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'c868c8249f6ed7c0096d4f2992a450c37ba237c0', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'de1d50a63bd5168d3304a80da7aa84fdf03ab4d6', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '5badaeb98f5143f51504d513be0dfaf443093475', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'e2dfdb5d22cea55bbd5c3b9a554ce3f1822dbf7b', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '0cc782d340251e0e9bca696998d060a4b8e7a82d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '8dbd682e8075ae8f12297470902cfa3177c87ef0', slot: "icon" }), "Visa diagram"), h("div", { key: 'c061002dc1211107a2818ce9ea9865b3879ecfe2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'fe45b5c1f236afe7580c8282e65297c0b7947959', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '5ab4b92e57550749cbcb5b907822bb1667977f92', class: "chartTooltip", id: this.afId }, h("div", { key: 'c50de4c3e1bb7c91a3d7fdfc6bc164ea1723009d', class: "tooltipHead" }, h("digi-icon-x", { key: 'bd01968b5813363fcc1d2bea85b9591bf7236e92', class: "tooltipClose" })), h("div", { key: 'c82d100e89c092c584e84bb64029eea0c27e81b1', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'eb4d4df19ebf89ce3aefbe99b9bb52a28c3facef', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'fdee4a771e7d431dea5e60f894d4f14f69e041c8', class: "legend" })), h("div", { key: '24e8e60c89d419426e64864ad79fb72bfaa61132', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1602
1599
  }
1603
1600
  get hostElement() { return this; }
1604
1601
  static get watchers() { return {
@@ -1045,8 +1045,8 @@ const barChart = class {
1045
1045
  .on('mouseenter', (_event, serie) => this.highlightBars(serie))
1046
1046
  .on('mouseleave', this.resetBarColor);
1047
1047
  legendChips.append('svg')
1048
- .attr('width', rectSize)
1049
- .attr('height', rectSize)
1048
+ .attr('width', rectSize + 1)
1049
+ .attr('height', rectSize + 1)
1050
1050
  .append('rect')
1051
1051
  .attr('x', 0)
1052
1052
  .attr('y', 0)
@@ -1626,21 +1626,18 @@ const barChart = class {
1626
1626
  return body;
1627
1627
  }
1628
1628
  render() {
1629
- var _a, _b, _c, _d, _e;
1629
+ var _a, _b, _c, _d;
1630
1630
  // Setting header
1631
1631
  let heading = '';
1632
1632
  if (this.chartData) {
1633
1633
  if (!this.chartData.subTitle)
1634
1634
  heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}>`;
1635
- else {
1636
- if (!this.chartData.infoText)
1637
- heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
1638
- else
1639
- heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${(_a = this.chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
1640
- <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>`;
1641
- }
1635
+ else
1636
+ heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
1637
+ if (this.chartData.infoText)
1638
+ heading = `${heading}<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>`;
1642
1639
  }
1643
- return (index.h(index.Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, index.h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, index.h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, index.h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, index.h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), index.h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), index.h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1640
+ return (index.h(index.Host, { key: 'bf35d7e9a6879cd90cd8cef33c9319cfc9e45afe', ref: (el) => (this.host = el) }, index.h("svg", { key: 'd77703db16cf0fbcffef18175b9d96279c8bdc32', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, index.h("defs", { key: 'c5cd241c72b0efb58f7746d4bc211cfba84409d0' }, index.h("pattern", { key: '14470e18a1a1d32c69bc2512f50c1bfb2cd49322', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '24adb8419e0117952429e7d5458e776520a688fe', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), index.h("pattern", { key: 'ae0863278d3e2786a1ef341aa10a2b883a7e612d', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: 'e31729aacfaf8b66cf9a0c5c3aa10898ffe27aa8', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), index.h("pattern", { key: '7be7d85ef07cafdde1480049b8691b12448c5171', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, index.h("line", { key: '60071e2ba5f3d51438d7cc78caf927267ad9068a', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), index.h("div", { key: 'c868c8249f6ed7c0096d4f2992a450c37ba237c0', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, index.h("digi-typography", { key: 'de1d50a63bd5168d3304a80da7aa84fdf03ab4d6', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '5badaeb98f5143f51504d513be0dfaf443093475', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: 'e2dfdb5d22cea55bbd5c3b9a554ce3f1822dbf7b', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '0cc782d340251e0e9bca696998d060a4b8e7a82d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '8dbd682e8075ae8f12297470902cfa3177c87ef0', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'c061002dc1211107a2818ce9ea9865b3879ecfe2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), index.h("div", { key: 'fe45b5c1f236afe7580c8282e65297c0b7947959', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, index.h("div", { key: '5ab4b92e57550749cbcb5b907822bb1667977f92', class: "chartTooltip", id: this.afId }, index.h("div", { key: 'c50de4c3e1bb7c91a3d7fdfc6bc164ea1723009d', class: "tooltipHead" }, index.h("digi-icon-x", { key: 'bd01968b5813363fcc1d2bea85b9591bf7236e92', class: "tooltipClose" })), index.h("div", { key: 'c82d100e89c092c584e84bb64029eea0c27e81b1', class: "tooltipBody" }), this.afVariation === typographyVariation_enum.BarChartVariation.Horizontal ? (index.h("digi-icon-caret-up", { class: "caret" })) : (index.h("digi-icon-caret-down", { class: "caret" })))), index.h("div", { key: 'eb4d4df19ebf89ce3aefbe99b9bb52a28c3facef', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, index.h("div", { key: 'fdee4a771e7d431dea5e60f894d4f14f69e041c8', class: "legend" })), index.h("div", { key: '24e8e60c89d419426e64864ad79fb72bfaa61132', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1644
1641
  }
1645
1642
  get hostElement() { return index.getElement(this); }
1646
1643
  static get watchers() { return {
@@ -923,8 +923,8 @@ export class barChart {
923
923
  .on('mouseenter', (_event, serie) => this.highlightBars(serie))
924
924
  .on('mouseleave', this.resetBarColor);
925
925
  legendChips.append('svg')
926
- .attr('width', rectSize)
927
- .attr('height', rectSize)
926
+ .attr('width', rectSize + 1)
927
+ .attr('height', rectSize + 1)
928
928
  .append('rect')
929
929
  .attr('x', 0)
930
930
  .attr('y', 0)
@@ -1507,21 +1507,18 @@ export class barChart {
1507
1507
  return body;
1508
1508
  }
1509
1509
  render() {
1510
- var _a, _b, _c, _d, _e;
1510
+ var _a, _b, _c, _d;
1511
1511
  // Setting header
1512
1512
  let heading = '';
1513
1513
  if (this.chartData) {
1514
1514
  if (!this.chartData.subTitle)
1515
1515
  heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}>`;
1516
- else {
1517
- if (!this.chartData.infoText)
1518
- heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
1519
- else
1520
- heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${(_a = this.chartData) === null || _a === void 0 ? void 0 : _a.subTitle}
1521
- <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>`;
1522
- }
1516
+ else
1517
+ heading = `<${this.afHeadingLevel}>${this.chartData.title}</${this.afHeadingLevel}><p>${this.chartData.subTitle}</p>`;
1518
+ if (this.chartData.infoText)
1519
+ heading = `${heading}<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>`;
1523
1520
  }
1524
- return (h(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, h("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, h("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '910f5e7e9ea22daaa024867b24aabd76309ae3f8', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title) ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '02dd552bd8d5e642c937b5a28b6f19d18be9e463', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title) ? (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), h("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, h("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, h("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), h("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), h("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1521
+ return (h(Host, { key: 'bf35d7e9a6879cd90cd8cef33c9319cfc9e45afe', ref: (el) => (this.host = el) }, h("svg", { key: 'd77703db16cf0fbcffef18175b9d96279c8bdc32', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'c5cd241c72b0efb58f7746d4bc211cfba84409d0' }, h("pattern", { key: '14470e18a1a1d32c69bc2512f50c1bfb2cd49322', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '24adb8419e0117952429e7d5458e776520a688fe', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: 'ae0863278d3e2786a1ef341aa10a2b883a7e612d', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'e31729aacfaf8b66cf9a0c5c3aa10898ffe27aa8', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '7be7d85ef07cafdde1480049b8691b12448c5171', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '60071e2ba5f3d51438d7cc78caf927267ad9068a', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'c868c8249f6ed7c0096d4f2992a450c37ba237c0', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: 'de1d50a63bd5168d3304a80da7aa84fdf03ab4d6', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '5badaeb98f5143f51504d513be0dfaf443093475', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.title) ? (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: 'e2dfdb5d22cea55bbd5c3b9a554ce3f1822dbf7b', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '0cc782d340251e0e9bca696998d060a4b8e7a82d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.title) ? (_d = this.chartData) === null || _d === void 0 ? void 0 : _d.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '8dbd682e8075ae8f12297470902cfa3177c87ef0', slot: "icon" }), "Visa diagram"), h("div", { key: 'c061002dc1211107a2818ce9ea9865b3879ecfe2', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'fe45b5c1f236afe7580c8282e65297c0b7947959', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '5ab4b92e57550749cbcb5b907822bb1667977f92', class: "chartTooltip", id: this.afId }, h("div", { key: 'c50de4c3e1bb7c91a3d7fdfc6bc164ea1723009d', class: "tooltipHead" }, h("digi-icon-x", { key: 'bd01968b5813363fcc1d2bea85b9591bf7236e92', class: "tooltipClose" })), h("div", { key: 'c82d100e89c092c584e84bb64029eea0c27e81b1', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: 'eb4d4df19ebf89ce3aefbe99b9bb52a28c3facef', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: 'fdee4a771e7d431dea5e60f894d4f14f69e041c8', class: "legend" })), h("div", { key: '24e8e60c89d419426e64864ad79fb72bfaa61132', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1525
1522
  }
1526
1523
  static get is() { return "digi-bar-chart"; }
1527
1524
  static get encapsulation() { return "scoped"; }
@@ -1,17 +1,20 @@
1
- @mixin digi-title-logo--variables() {
2
- --digi--title-logo-text-color: var(--digi--color--text--primary);
3
- --digi--title-logo-font-weight: var(--digi--global--typography--font-weight--bold);
4
- --digi--title-logo-font-size: var(--digi--typography--title-logo--font-size--mobile);
5
- --digi--title-logo-font-size-small: var(--digi--global--typography--font-size--large);
6
- --digi--title-logo-line-height-small: 1.25rem;
7
- --digi--title-logo-symbol-color: var(--digi--color--logotype-color);
8
- --digi--title-logo-symbol-width: 36px;
9
- --digi--title-logo-symbol-height: 36px;
10
- --digi--title-logo-symbol-width-mobile: 44px;
11
- --digi--title-logo-symbol-height-mobile: 44px;
12
- --digi--title-logo-text-height: 40px;
13
- --digi--title-logo-border-width: var(--digi--global--border-width--base);
14
- --digi--title-logo-vertical-padding: 1.375rem;
15
- --digi--title-logo-gap: 9px;
16
- }color--text--secondary);
1
+ @use '../../../../../../styles/src/digi-styles.utils' as *;
2
+
3
+ @mixin digi-logo--variables() {
4
+ --digi--logo--img--min-width: #{rem(256)};
5
+ --digi--logo--img--max-width:#{rem(292)};
6
+ --digi--logo--img--max-width--large: #{rem(368)};
7
+ --digi--logo--img--max-width--system: #{rem(44)};
8
+
9
+ --digi--logo--padding: 1.375rem;
10
+ --digi--logo--padding--wide: var(--digi--gutter--larger);
11
+ --digi--logo--padding--large: var(--digi--gutter--medium);
12
+ --digi--logo--padding--large--wide: var(--digi--gutter--larger);
13
+
14
+ --digi--logo--logotype-color: var(--digi--color--logotype-color);
15
+ --digi--logo--color--primary: var(--digi--color--text--interactive--brand-primary);
16
+ --digi--logo--color--secondary: var(--digi--color--text--secondary);
17
+
18
+ --digi--logo--color--border--primary: var(--digi--color--text--primary);
19
+ --digi--logo--color--border--secondary: var(--digi--color--text--secondary);
17
20
  }