@designsystem-se/af 35.4.1-beta.6 → 35.4.1-beta.7

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.
@@ -130,7 +130,7 @@ function band() {
130
130
  return initRange.apply(rescale(), arguments);
131
131
  }
132
132
 
133
- const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
133
+ const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
134
134
  const DigiBarChartStyle0 = barChartCss;
135
135
 
136
136
  const barChart = class {
@@ -386,7 +386,7 @@ const barChart = class {
386
386
  this.barGroupID = (key) => {
387
387
  return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
388
388
  };
389
- this.updateBars = (fromLoading) => {
389
+ this.updateBars = () => {
390
390
  this.barSelection = this.barChartContainer.select('.interactiveElements')
391
391
  .selectAll('.barGroup')
392
392
  .data(this.mappedData)
@@ -410,9 +410,6 @@ const barChart = class {
410
410
  .on('mouseenter', this.hover)
411
411
  .on('mouseleave', this.hoverOut)
412
412
  .on('click', this.openTooltip);
413
- if (fromLoading) {
414
- this.initLegend();
415
- }
416
413
  this.barSelection = this.barChartContainer.selectAll('.barGroup');
417
414
  this.textSelection = this.barChartContainer.selectAll('.barText');
418
415
  };
@@ -847,7 +844,7 @@ const barChart = class {
847
844
  this.tooltip
848
845
  .select('digi-icon-caret-up')
849
846
  .style('position', 'absolute')
850
- .style('top', '-12px')
847
+ .style('top', '-11px')
851
848
  .style('left', '0')
852
849
  .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
853
850
  }
@@ -870,7 +867,16 @@ const barChart = class {
870
867
  }
871
868
  else {
872
869
  if (this.afVariation === BarChartVariation.Horizontal) {
873
- console.log('helloo');
870
+ this.tooltip
871
+ .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
872
+ );
873
+ this.tooltip
874
+ .select('digi-icon-caret-up')
875
+ .style('position', 'absolute')
876
+ .style('top', '-11px')
877
+ .style('left', '0')
878
+ .style('transform', `translate(50%,0)`);
879
+ //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
874
880
  }
875
881
  else {
876
882
  const xStart = this.margin.left + this.tickPadding + this.yTickSize;
@@ -970,7 +976,7 @@ const barChart = class {
970
976
  this.afChartData = undefined;
971
977
  }
972
978
  afChartDataUpdate(data) {
973
- if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
979
+ if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
974
980
  if (typeof data != 'string')
975
981
  this.chartData = data;
976
982
  else
@@ -1072,6 +1078,7 @@ const barChart = class {
1072
1078
  .select('.tooltipHead')
1073
1079
  .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
1074
1080
  .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
1081
+ .style('text-wrap', 'wrap')
1075
1082
  .style('font-size', '1rem')
1076
1083
  .style('margin', '0 0.75rem 0.25rem 0 ')
1077
1084
  .style('font-weight', '500');
@@ -1098,8 +1105,7 @@ const barChart = class {
1098
1105
  : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
1099
1106
  // Hide unusable components
1100
1107
  select(this.titleDiv)
1101
- .append(this.afHeadingLevel)
1102
- .attr('class', 'loadingHeader')
1108
+ .select(this.afHeadingLevel)
1103
1109
  .html(`${_t.loading}...`);
1104
1110
  this.initYAxis(true);
1105
1111
  this.initXAxis(true);
@@ -1373,6 +1379,7 @@ const barChart = class {
1373
1379
  select(this.host).select('.tableButton').style('display', null);
1374
1380
  select(this.legendDiv).style('display', null);
1375
1381
  this.initToolTip();
1382
+ this.initLegend();
1376
1383
  }
1377
1384
  // Disconnect resize observer while adjusting things
1378
1385
  this.barChartObserver.disconnect();
@@ -1442,9 +1449,12 @@ const barChart = class {
1442
1449
  ? this.yScale(d.key)
1443
1450
  : this.dims.height - this.margin.bottom)
1444
1451
  .attr('height', () => 0)
1445
- .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
1446
- ? this.updateBars(true)
1447
- : null);
1452
+ .on('end', (...[, i]) => {
1453
+ if (i === this.placeholderTicks.length - 1) {
1454
+ this.updateBars();
1455
+ this.barChartObserver.observe(this.chartDiv);
1456
+ }
1457
+ });
1448
1458
  this.setTickInteraction();
1449
1459
  }
1450
1460
  else {
@@ -1626,7 +1636,7 @@ const barChart = class {
1626
1636
  <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>`;
1627
1637
  }
1628
1638
  }
1629
- return (h(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, h("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, h("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, h("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), h("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), h("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, h("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), h("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, h("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), h("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), h("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, h("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, h("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, h("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), h("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", { class: "caret" })) : (h("digi-icon-caret-down", { class: "caret" })))), h("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, h("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), h("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
1639
+ 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) }, ' ')));
1630
1640
  }
1631
1641
  get hostElement() { return getElement(this); }
1632
1642
  static get watchers() { return {
package/hydrate/index.js CHANGED
@@ -35686,7 +35686,7 @@ class UtilResizeObserver {
35686
35686
  }; }
35687
35687
  }
35688
35688
 
35689
- const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
35689
+ const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
35690
35690
  var DigiBarChartStyle0 = barChartCss;
35691
35691
 
35692
35692
  /**
@@ -35948,7 +35948,7 @@ class barChart {
35948
35948
  this.barGroupID = (key) => {
35949
35949
  return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
35950
35950
  };
35951
- this.updateBars = (fromLoading) => {
35951
+ this.updateBars = () => {
35952
35952
  this.barSelection = this.barChartContainer.select('.interactiveElements')
35953
35953
  .selectAll('.barGroup')
35954
35954
  .data(this.mappedData)
@@ -35972,9 +35972,6 @@ class barChart {
35972
35972
  .on('mouseenter', this.hover)
35973
35973
  .on('mouseleave', this.hoverOut)
35974
35974
  .on('click', this.openTooltip);
35975
- if (fromLoading) {
35976
- this.initLegend();
35977
- }
35978
35975
  this.barSelection = this.barChartContainer.selectAll('.barGroup');
35979
35976
  this.textSelection = this.barChartContainer.selectAll('.barText');
35980
35977
  };
@@ -36409,7 +36406,7 @@ class barChart {
36409
36406
  this.tooltip
36410
36407
  .select('digi-icon-caret-up')
36411
36408
  .style('position', 'absolute')
36412
- .style('top', '-12px')
36409
+ .style('top', '-11px')
36413
36410
  .style('left', '0')
36414
36411
  .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
36415
36412
  }
@@ -36432,7 +36429,16 @@ class barChart {
36432
36429
  }
36433
36430
  else {
36434
36431
  if (this.afVariation === BarChartVariation.Horizontal) {
36435
- console.log('helloo');
36432
+ this.tooltip
36433
+ .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
36434
+ );
36435
+ this.tooltip
36436
+ .select('digi-icon-caret-up')
36437
+ .style('position', 'absolute')
36438
+ .style('top', '-11px')
36439
+ .style('left', '0')
36440
+ .style('transform', `translate(50%,0)`);
36441
+ //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
36436
36442
  }
36437
36443
  else {
36438
36444
  const xStart = this.margin.left + this.tickPadding + this.yTickSize;
@@ -36532,7 +36538,7 @@ class barChart {
36532
36538
  this.afChartData = undefined;
36533
36539
  }
36534
36540
  afChartDataUpdate(data) {
36535
- if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
36541
+ if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
36536
36542
  if (typeof data != 'string')
36537
36543
  this.chartData = data;
36538
36544
  else
@@ -36634,6 +36640,7 @@ class barChart {
36634
36640
  .select('.tooltipHead')
36635
36641
  .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
36636
36642
  .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
36643
+ .style('text-wrap', 'wrap')
36637
36644
  .style('font-size', '1rem')
36638
36645
  .style('margin', '0 0.75rem 0.25rem 0 ')
36639
36646
  .style('font-weight', '500');
@@ -36660,8 +36667,7 @@ class barChart {
36660
36667
  : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
36661
36668
  // Hide unusable components
36662
36669
  select(this.titleDiv)
36663
- .append(this.afHeadingLevel)
36664
- .attr('class', 'loadingHeader')
36670
+ .select(this.afHeadingLevel)
36665
36671
  .html(`${_t.loading}...`);
36666
36672
  this.initYAxis(true);
36667
36673
  this.initXAxis(true);
@@ -36935,6 +36941,7 @@ class barChart {
36935
36941
  select(this.host).select('.tableButton').style('display', null);
36936
36942
  select(this.legendDiv).style('display', null);
36937
36943
  this.initToolTip();
36944
+ this.initLegend();
36938
36945
  }
36939
36946
  // Disconnect resize observer while adjusting things
36940
36947
  this.barChartObserver.disconnect();
@@ -37004,9 +37011,12 @@ class barChart {
37004
37011
  ? this.yScale(d.key)
37005
37012
  : this.dims.height - this.margin.bottom)
37006
37013
  .attr('height', () => 0)
37007
- .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
37008
- ? this.updateBars(true)
37009
- : null);
37014
+ .on('end', (...[, i]) => {
37015
+ if (i === this.placeholderTicks.length - 1) {
37016
+ this.updateBars();
37017
+ this.barChartObserver.observe(this.chartDiv);
37018
+ }
37019
+ });
37010
37020
  this.setTickInteraction();
37011
37021
  }
37012
37022
  else {
@@ -37188,7 +37198,7 @@ class barChart {
37188
37198
  <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>`;
37189
37199
  }
37190
37200
  }
37191
- return (hAsync(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, hAsync("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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() : ''}` }, hAsync("digi-icon-table", { key: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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() : ''}` }, hAsync("digi-icon-chart", { key: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), hAsync("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), hAsync("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
37201
+ return (hAsync(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, hAsync("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), hAsync("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() : ''}` }, hAsync("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), hAsync("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() : ''}` }, hAsync("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), hAsync("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), hAsync("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
37192
37202
  }
37193
37203
  get hostElement() { return getElement(this); }
37194
37204
  static get watchers() { return {
package/hydrate/index.mjs CHANGED
@@ -35682,7 +35682,7 @@ class UtilResizeObserver {
35682
35682
  }; }
35683
35683
  }
35684
35684
 
35685
- const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
35685
+ const barChartCss = ".sc-digi-bar-chart-h{width:100%;display:flex;flex-direction:column;min-width:0}.sc-digi-bar-chart-h .digi-bar-chart.sc-digi-bar-chart{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-bar-chart-h .svgWrap.sc-digi-bar-chart{position:relative;display:flex;min-height:20px;min-width:20px;width:100%;height:100%}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:0 0 0.75rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{top:-5px;position:absolute;background-color:var(--digi--color--background--primary);color:black;padding:5px 10px;padding-right:5px;border-radius:4px;display:block;width:max-content;white-space:nowrap;filter:drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 1px);font-size:0.875rem}.sc-digi-bar-chart-h .tooltipBody.sc-digi-bar-chart{display:inline-block}.sc-digi-bar-chart-h .tooltipHead.sc-digi-bar-chart{display:flex;flex-direction:row;justify-content:space-between}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart{display:inline-block;vertical-align:top;--digi--color--icon--primary:#333;cursor:pointer}.sc-digi-bar-chart-h .tooltipClose.sc-digi-bar-chart:hover{--digi--color--icon--primary:gray}.sc-digi-bar-chart-h .legendWrap.sc-digi-bar-chart{display:grid}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart{display:flex;flex-direction:row;gap:1rem;min-width:0;overflow-x:auto;scrollbar-gutter:stable}.sc-digi-bar-chart-h .caret.sc-digi-bar-chart{--digi--icon--color:var(--digi--color--background--primary)}.sc-digi-bar-chart-h .scChartStatus.sc-digi-bar-chart{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-bar-chart-h .table.sc-digi-bar-chart{display:none;overflow-y:auto;height:auto;border-radius:4px;background:linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;background-repeat:no-repeat;background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;background-attachment:local, local, scroll, scroll}";
35686
35686
  var DigiBarChartStyle0 = barChartCss;
35687
35687
 
35688
35688
  /**
@@ -35944,7 +35944,7 @@ class barChart {
35944
35944
  this.barGroupID = (key) => {
35945
35945
  return 'barGroup' + key.replace(/[^A-Z0-9]+/gi, '');
35946
35946
  };
35947
- this.updateBars = (fromLoading) => {
35947
+ this.updateBars = () => {
35948
35948
  this.barSelection = this.barChartContainer.select('.interactiveElements')
35949
35949
  .selectAll('.barGroup')
35950
35950
  .data(this.mappedData)
@@ -35968,9 +35968,6 @@ class barChart {
35968
35968
  .on('mouseenter', this.hover)
35969
35969
  .on('mouseleave', this.hoverOut)
35970
35970
  .on('click', this.openTooltip);
35971
- if (fromLoading) {
35972
- this.initLegend();
35973
- }
35974
35971
  this.barSelection = this.barChartContainer.selectAll('.barGroup');
35975
35972
  this.textSelection = this.barChartContainer.selectAll('.barText');
35976
35973
  };
@@ -36405,7 +36402,7 @@ class barChart {
36405
36402
  this.tooltip
36406
36403
  .select('digi-icon-caret-up')
36407
36404
  .style('position', 'absolute')
36408
- .style('top', '-12px')
36405
+ .style('top', '-11px')
36409
36406
  .style('left', '0')
36410
36407
  .style('transform', `translate(${diff > 0 ? width / 2 - 10 : this.xScale(data.value) / 2}px,0)`);
36411
36408
  }
@@ -36428,7 +36425,16 @@ class barChart {
36428
36425
  }
36429
36426
  else {
36430
36427
  if (this.afVariation === BarChartVariation.Horizontal) {
36431
- console.log('helloo');
36428
+ this.tooltip
36429
+ .style('transform', `translate(${this.tickPadding}px, ${this.yScale(data.key) + this.series.length * this.yScale.bandwidth() + 5}px )` // 5 is for half caret size
36430
+ );
36431
+ this.tooltip
36432
+ .select('digi-icon-caret-up')
36433
+ .style('position', 'absolute')
36434
+ .style('top', '-11px')
36435
+ .style('left', '0')
36436
+ .style('transform', `translate(50%,0)`);
36437
+ //this.yScale(data.key) + ((this.yScale.bandwidth() / this.dataWidth) * i + (this.barGap * i))
36432
36438
  }
36433
36439
  else {
36434
36440
  const xStart = this.margin.left + this.tickPadding + this.yTickSize;
@@ -36528,7 +36534,7 @@ class barChart {
36528
36534
  this.afChartData = undefined;
36529
36535
  }
36530
36536
  afChartDataUpdate(data) {
36531
- if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || Object.keys(data).length > 0) {
36537
+ if (typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0 || typeof data !== 'string' && Object.keys(data).length > 0) {
36532
36538
  if (typeof data != 'string')
36533
36539
  this.chartData = data;
36534
36540
  else
@@ -36630,6 +36636,7 @@ class barChart {
36630
36636
  .select('.tooltipHead')
36631
36637
  .insert('h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1), ':first-child') // increment heading level by one
36632
36638
  .attr('class', 'tooltipHeading') // Adding class to try to dodge global css classes
36639
+ .style('text-wrap', 'wrap')
36633
36640
  .style('font-size', '1rem')
36634
36641
  .style('margin', '0 0.75rem 0.25rem 0 ')
36635
36642
  .style('font-weight', '500');
@@ -36656,8 +36663,7 @@ class barChart {
36656
36663
  : 'Stapeldiagram').attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
36657
36664
  // Hide unusable components
36658
36665
  select(this.titleDiv)
36659
- .append(this.afHeadingLevel)
36660
- .attr('class', 'loadingHeader')
36666
+ .select(this.afHeadingLevel)
36661
36667
  .html(`${_t.loading}...`);
36662
36668
  this.initYAxis(true);
36663
36669
  this.initXAxis(true);
@@ -36931,6 +36937,7 @@ class barChart {
36931
36937
  select(this.host).select('.tableButton').style('display', null);
36932
36938
  select(this.legendDiv).style('display', null);
36933
36939
  this.initToolTip();
36940
+ this.initLegend();
36934
36941
  }
36935
36942
  // Disconnect resize observer while adjusting things
36936
36943
  this.barChartObserver.disconnect();
@@ -37000,9 +37007,12 @@ class barChart {
37000
37007
  ? this.yScale(d.key)
37001
37008
  : this.dims.height - this.margin.bottom)
37002
37009
  .attr('height', () => 0)
37003
- .on('end', (...[, i]) => i === this.placeholderTicks.length - 1
37004
- ? this.updateBars(true)
37005
- : null);
37010
+ .on('end', (...[, i]) => {
37011
+ if (i === this.placeholderTicks.length - 1) {
37012
+ this.updateBars();
37013
+ this.barChartObserver.observe(this.chartDiv);
37014
+ }
37015
+ });
37006
37016
  this.setTickInteraction();
37007
37017
  }
37008
37018
  else {
@@ -37184,7 +37194,7 @@ class barChart {
37184
37194
  <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>`;
37185
37195
  }
37186
37196
  }
37187
- return (hAsync(Host, { key: '2e011f2838668e9d58a6b4442e2832b6e1bac21b', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'a91c7bc7ed311fd10f0014d382daf46d97524087', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'b28ad4ff2f0029eecd3a7b220d97ae81c646f6d0' }, hAsync("pattern", { key: '2bb838607089932d089c05fdb568e06782cd6ef6', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '4eca3d7dbb9cd2d47bc6367a8f07808ba3767902', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '87585e674cc45c2496650eb5309f4eee34f89b3a', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '42bfe1a59192f618e60486105e919b2569fef753', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '2ab36682ad76783cda635db815fc9f5f542fab21', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: 'd5b93bf96f259cdf093a3e61c38ef61bbfd565ba', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: 'f94c18afa372d176500c2d3844212df29c83f16b', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: '68dca23f7fd92f024f0b3d7eebc7b7214e636090', class: "chartTitle", innerHTML: heading }), hAsync("digi-button", { key: '98d6ade579584a998a1d3e246168f42b19bd277f', 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() : ''}` }, hAsync("digi-icon-table", { key: '36d1e6f12b90215ba6ce00b814573616772820e7', slot: "icon" }), "Visa tabell"), hAsync("digi-button", { key: 'c94200814deba4524301e7f2c07ad57e94b6381d', 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() : ''}` }, hAsync("digi-icon-chart", { key: 'ba94cf5a4ad7e4272d78f1965cd63eee99eb9f8f', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'be79a632683428a30d01a96bf41f1e446b019061', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'd3644914ab02ae8cb8a054a1d4c90dc854fdaede', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '6cb1113d71b8cd9ec156d351dc4ea402cdf3f372', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '0c601e94970dd3563bec5bfe070a3e02fd339124', class: "tooltipHead" }, hAsync("digi-icon-x", { key: 'a478d1013f6630767b03029f4491222bc35dc118', class: "tooltipClose" })), hAsync("div", { key: '04de1b3898023ef79ec8c69e501d107d8039351d', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '335550b9c1d64cadc9d72b14af008a2cffcfe58e', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: '1bd30ebd1a5c1c6342f102f7adc131c6f85bc8d8', class: "legend" })), hAsync("div", { key: '69ddb91b0befa23212d518c27ed018f8c8912c06', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
37197
+ return (hAsync(Host, { key: '9831c62ff3d90f45a07e70af75dd84be96db33b9', ref: (el) => (this.host = el) }, hAsync("svg", { key: 'b8f79471bead222318336cc7054b33641a238d60', xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0" }, hAsync("defs", { key: 'f7ff28fcdaa190138722f269eb003e88951b3069' }, hAsync("pattern", { key: 'db8b09311be9ad0311d61e334a225adbf60e7875', id: "prognosis", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '1ba55d47f9ce13b688d941c5aad17fb977899f74', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar(this.colorPalettes[0]), "stroke-width": "8" })), hAsync("pattern", { key: '0822d197957d12f7b10641c3091b2767418798b6', id: "prognosisInactive", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '588e4e2eef4e47883f3bd0921f06af0431542fbd', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.evalColorVar('--digi--color--background--secondary-accent'), "stroke-width": "8" })), hAsync("pattern", { key: '874c0a3bf86d50fde9f1391b3e6aff9505fae0a4', id: "prognosisHighlight", patternUnits: "userSpaceOnUse", width: "8", height: "8", patternTransform: "rotate(45)" }, hAsync("line", { key: '3a2caa855d1f9b1e46b0e6261a0ec44e0ccd0eb4', x1: "0", y: "0", x2: "0", y2: "12", stroke: this.adjustColor(this.colorFunction(0), 50), "stroke-width": "8" })))), hAsync("div", { key: '421f2daa00a316cb8d58efc3ab1e87fd1eb9adc6', class: "topWrapper", ref: (el) => (this.titleDiv = el) }, hAsync("digi-typography", { key: 'df08ae5f563fa186570a0807e7fe394b88739d3f', class: "chartTitle", innerHTML: heading }), hAsync("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() : ''}` }, hAsync("digi-icon-table", { key: '5d455b0801afb981a70a6edea9e7b70d08fdfc2d', slot: "icon" }), "Visa tabell"), hAsync("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() : ''}` }, hAsync("digi-icon-chart", { key: 'c5f23473e37dfced6db806472e6a1bb78eab42ed', slot: "icon" }), "Visa diagram"), hAsync("div", { key: 'a00b4c14917d63a1ec821cd83c4357fcd3ea7237', class: "scChartStatus", role: "status", ref: (el) => (this.status = el) })), hAsync("div", { key: 'c5df03e7f9a4f206e30e7688f45de825f006ca48', class: "svgWrap", ref: (el) => (this.chartDiv = el) }, hAsync("div", { key: '2fc9d94d36120cf26dbb0a4ecbe9e1d3b9312761', class: "chartTooltip", id: this.afId }, hAsync("div", { key: '975934290e072ccc342325866d7b5412306734a6', class: "tooltipHead" }, hAsync("digi-icon-x", { key: '9360ecc6854dc77302e39be05d3d87c9b12fc5dc', class: "tooltipClose" })), hAsync("div", { key: '2f116ec7969d7828ef4123681ad839b3bd531fc9', class: "tooltipBody" }), this.afVariation === BarChartVariation.Horizontal ? (hAsync("digi-icon-caret-up", { class: "caret" })) : (hAsync("digi-icon-caret-down", { class: "caret" })))), hAsync("div", { key: '7679e9f3f2c1054d170990b6b451591b7ea43543', class: "legendWrap", ref: (el) => (this.legendDiv = el) }, hAsync("div", { key: 'e9098a071e54162ac4f923ee4578eee21944e114', class: "legend" })), hAsync("div", { key: '9da8f97848ece4ef3190388e9f939e2c7187f4a1', class: "table", ref: (el) => (this.tableDiv = el) }, ' ')));
37188
37198
  }
37189
37199
  get hostElement() { return getElement(this); }
37190
37200
  static get watchers() { return {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@designsystem-se/af",
3
3
  "author": "Arbetsförmedlingen",
4
- "version": "35.4.1-beta.6",
4
+ "version": "35.4.1-beta.7",
5
5
  "description": "Web Components for Digi Designsystem",
6
6
  "license": "Apache-2.0",
7
7
  "main": "./dist/index.cjs.js",