npm - @designsystem-se/af - Versions diffs - 39.2.0 → 39.2.1-beta.1 - Mend

@designsystem-se/af 39.2.0 → 39.2.1-beta.1

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.

Files changed (2058) hide show

package/dist/cjs/digi-badge-notification.cjs.entry.js CHANGED Viewed

@@ -1,18 +1,18 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Cn1hHaSy.js');
+var badgeNotificationShape_enum = require('./badge-notification-shape.enum-CEyEo2G5.js');
-const index = require('./index-7a477838.js');
-const badgeNotificationShape_enum = require('./badge-notification-shape.enum-ff802554.js');
-const badgeNotificationCss = ".sc-digi-badge-notification-h{--digi--badge-notification--color--text:var(--digi--color--text--secondary);--digi--badge-notification--color--border:var(--digi--color--border--notification);--digi--badge-notification--background-color:var(--digi--color--background--notification);--digi--badge-notification--font-weight:var(--digi--global--typography--font-weight--semibold)}.sc-digi-badge-notification-h .digi-badge-notification.sc-digi-badge-notification{font-size:0.75rem;font-weight:var(--digi--badge-notification--font-weight);border-width:var(--digi--border-width--secondary);border-style:solid;color:var(--digi--badge-notification--color--text);background-color:var(--digi--badge-notification--background-color);border-color:var(--BORDER-COLOR)}.sc-digi-badge-notification-h .digi-badge-notification--circle.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:50%;height:1.25rem;width:1.25rem}.sc-digi-badge-notification-h .digi-badge-notification--oval.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:0.75rem;height:1.125rem;width:1.5625rem;padding-left:0.25rem;padding-right:0.25rem}.sc-digi-badge-notification-h .digi-badge-notification--pill.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:inline-block;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.75rem;height:1.125rem}";
-const DigiBadgeNotificationStyle0 = badgeNotificationCss;
+const badgeNotificationCss = () => `.sc-digi-badge-notification-h{--digi--badge-notification--color--text:var(--digi--color--text--secondary);--digi--badge-notification--color--border:var(--digi--color--border--notification);--digi--badge-notification--background-color:var(--digi--color--background--notification);--digi--badge-notification--font-weight:var(--digi--global--typography--font-weight--semibold)}.sc-digi-badge-notification-h .digi-badge-notification.sc-digi-badge-notification{font-size:0.75rem;font-weight:var(--digi--badge-notification--font-weight);border-width:var(--digi--border-width--secondary);border-style:solid;color:var(--digi--badge-notification--color--text);background-color:var(--digi--badge-notification--background-color);border-color:var(--BORDER-COLOR)}.sc-digi-badge-notification-h .digi-badge-notification--circle.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:50%;height:1.25rem;width:1.25rem}.sc-digi-badge-notification-h .digi-badge-notification--oval.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:0.75rem;height:1.125rem;width:1.5625rem;padding-left:0.25rem;padding-right:0.25rem}.sc-digi-badge-notification-h .digi-badge-notification--pill.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:inline-block;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.75rem;height:1.125rem}`;
 const BadgeNotification = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.afShape = badgeNotificationShape_enum.BadgeNotificationShape.PILL;
-        this.afAriaLabel = undefined;
+        /**
+         * Värdet som ska skrivas ut i notifieringen.
+         * @en The value to be displayed in the badge.
+         */
         this.afValue = '';
     }
     afValueChangeHandler() {
@@ -55,9 +55,11 @@ const BadgeNotification = class {
         return (index.h(index.Host, { key: '2a3f82fe0bf3d3b43ee858a0184fb7d0045656f7' }, index.h("div", { key: 'f652cc5b76bdc72b4778fd16a1a9d270fe2400ea', class: Object.assign({ 'digi-badge-notification': true }, this.cssModifiers), "aria-label": this.afAriaLabel }, index.h("div", { key: 'ece907bc0004e24eafd221ead41300f7acd803ea', class: `${this.afShape}` }, index.h("span", { key: 'c83210ebbbcad768073095e52b601adc80a0645d' }, this.afValue)))));
     }
     static get watchers() { return {
-        "afValue": ["afValueChangeHandler"]
+        "afValue": [{
+                "afValueChangeHandler": 0
+            }]
     }; }
 };
-BadgeNotification.style = DigiBadgeNotificationStyle0;
+BadgeNotification.style = badgeNotificationCss();
 exports.digi_badge_notification = BadgeNotification;

package/dist/cjs/digi-badge-status.cjs.entry.js CHANGED Viewed

@@ -1,21 +1,28 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Cn1hHaSy.js');
+var badgeStatusVariation_enum = require('./badge-status-variation.enum-XX8d--rj.js');
-const index = require('./index-7a477838.js');
-const badgeStatusVariation_enum = require('./badge-status-variation.enum-0a5adc21.js');
-const badgeStatusCss = ".sc-digi-badge-status-h{--digi--badge-status--color--primary:var(--digi--color--text--secondary);--digi--badge-status--color--secondary:var(--digi--color--text--primary);--digi--badge-status--background-color--approved--primary:var(--digi--color--background--sentiment--success--secondary);--digi--badge-status--background-color--approved--secondary:var(--digi--color--background--sentiment--success--tertiary);--digi--badge-status--background-color--denied--primary:var(--digi--color--background--sentiment--error--secondary);--digi--badge-status--background-color--denied--secondary:var(--digi--color--background--sentiment--error--tertiary);--digi--badge-status--background-color--missing--primary:var(--digi--color--background--sentiment--warning--secondary);--digi--badge-status--background-color--missing--secondary:var(--digi--color--background--sentiment--warning--tertiary);--digi--badge-status--color--missing:var(--digi--color--text--primary);--digi--badge-status--background-color--prompt--primary:var(--digi--color--background--sentiment--info--secondary);--digi--badge-status--background-color--prompt--secondary:var(--digi--color--background--sentiment--info--tertiary);--digi--badge-status--background-color--beta--primary:var(--digi--color--background--sentiment--beta--primary);--digi--badge-status--background-color--beta--secondary:var(--digi--color--background--sentiment--beta--secondary);--digi--badge-status--background-color--neutral--primary:var(--digi--color--background--sentiment--neutral--primary);--digi--badge-status--background-color--neutral--secondary:var(--digi--color--background--sentiment--neutral--secondary)}.sc-digi-badge-status-h .digi-badge-status.sc-digi-badge-status{display:inline-flex;align-items:center;height:1.5rem;border-radius:var(--digi--global--border-radius--base);padding-left:0.5rem;padding-right:0.5rem;font-size:var(--digi--global--typography--font-size--small);font-weight:600;border-width:var(--digi--border-width--secondary);border-style:solid;border-color:transparent;color:var(--COLOR);background-color:var(--BACKGROUND-COLOR);box-sizing:border-box}.sc-digi-badge-status-h .digi-badge-status--approved--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--approved--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--denied--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--denied--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--secondary);--COLOR:var(digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--missing--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--primary);--COLOR:var(--digi--grayscale-900)}.sc-digi-badge-status-h .digi-badge-status--missing--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--prompt--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--prompt--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--beta--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--beta--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--neutral--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--neutral--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status__text.sc-digi-badge-status{text-align:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-badge-status-h .digi-badge-status--small.sc-digi-badge-status{height:1.25rem;padding-left:0.4375rem;padding-right:0.4375rem;font-size:var(--digi--global--typography--font-size--smaller)}";
-const DigiBadgeStatusStyle0 = badgeStatusCss;
+const badgeStatusCss = () => `.sc-digi-badge-status-h{--digi--badge-status--color--primary:var(--digi--color--text--secondary);--digi--badge-status--color--secondary:var(--digi--color--text--primary);--digi--badge-status--background-color--approved--primary:var(--digi--color--background--sentiment--success--secondary);--digi--badge-status--background-color--approved--secondary:var(--digi--color--background--sentiment--success--tertiary);--digi--badge-status--background-color--denied--primary:var(--digi--color--background--sentiment--error--secondary);--digi--badge-status--background-color--denied--secondary:var(--digi--color--background--sentiment--error--tertiary);--digi--badge-status--background-color--missing--primary:var(--digi--color--background--sentiment--warning--secondary);--digi--badge-status--background-color--missing--secondary:var(--digi--color--background--sentiment--warning--tertiary);--digi--badge-status--color--missing:var(--digi--color--text--primary);--digi--badge-status--background-color--prompt--primary:var(--digi--color--background--sentiment--info--secondary);--digi--badge-status--background-color--prompt--secondary:var(--digi--color--background--sentiment--info--tertiary);--digi--badge-status--background-color--beta--primary:var(--digi--color--background--sentiment--beta--primary);--digi--badge-status--background-color--beta--secondary:var(--digi--color--background--sentiment--beta--secondary);--digi--badge-status--background-color--neutral--primary:var(--digi--color--background--sentiment--neutral--primary);--digi--badge-status--background-color--neutral--secondary:var(--digi--color--background--sentiment--neutral--secondary)}.sc-digi-badge-status-h .digi-badge-status.sc-digi-badge-status{display:inline-flex;align-items:center;height:1.5rem;border-radius:var(--digi--global--border-radius--base);padding-left:0.5rem;padding-right:0.5rem;font-size:var(--digi--global--typography--font-size--small);font-weight:600;border-width:var(--digi--border-width--secondary);border-style:solid;border-color:transparent;color:var(--COLOR);background-color:var(--BACKGROUND-COLOR);box-sizing:border-box}.sc-digi-badge-status-h .digi-badge-status--approved--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--approved--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--approved--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--denied--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--denied--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--denied--secondary);--COLOR:var(digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--missing--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--primary);--COLOR:var(--digi--grayscale-900)}.sc-digi-badge-status-h .digi-badge-status--missing--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--missing--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--prompt--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--prompt--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--prompt--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--beta--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--beta--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--beta--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status--neutral--primary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--primary);--COLOR:var(--digi--badge-status--color--primary)}.sc-digi-badge-status-h .digi-badge-status--neutral--secondary.sc-digi-badge-status{--BACKGROUND-COLOR:var(--digi--badge-status--background-color--neutral--secondary);--COLOR:var(--digi--badge-status--color--secondary)}.sc-digi-badge-status-h .digi-badge-status__text.sc-digi-badge-status{text-align:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-badge-status-h .digi-badge-status--small.sc-digi-badge-status{height:1.25rem;padding-left:0.4375rem;padding-right:0.4375rem;font-size:var(--digi--global--typography--font-size--smaller)}`;
 const BadgeStatus = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.afText = undefined;
+        /**
+         * Sätter attributet 'type'.
+         * @en Set status badge `type` attribute.
+         */
         this.afType = badgeStatusVariation_enum.BadgeStatusType.NEUTRAL;
+        /**
+         * Sätter storleken.
+         * @en Set status badge size
+         */
         this.afSize = badgeStatusVariation_enum.BadgeStatusSize.LARGE;
+        /**
+         * Sätter variation. Kan vara primär eller sekundär
+         * @en Set variation. Can be 'primary' or 'secondary'
+         */
         this.afVariation = badgeStatusVariation_enum.BadgeStatusVariation.PRIMARY;
-        this.afAriaLabel = undefined;
     }
     get cssModifiers() {
         return {
@@ -27,6 +34,6 @@ const BadgeStatus = class {
         return (index.h(index.Host, { key: '1d40b541fb0af83bd5a9556ea868bc3f0748dc3a' }, index.h("div", { key: 'ab8eeadaf141d519ac5816605bf0a6832579fce6', class: Object.assign({ 'digi-badge-status': true }, this.cssModifiers), "aria-label": this.afAriaLabel }, index.h("span", { key: '39d8f58959f911573668f14b9157f5408ac90b49', class: "digi-badge-status__text" }, this.afText))));
     }
 };
-BadgeStatus.style = DigiBadgeStatusStyle0;
+BadgeStatus.style = badgeStatusCss();
 exports.digi_badge_status = BadgeStatus;

package/dist/cjs/digi-bar-chart.cjs.entry.js CHANGED Viewed

@@ -1,15 +1,13 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-7a477838.js');
-const linear = require('./linear-86314cb2.js');
-const text = require('./text-65b1b58c.js');
-const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
-const barChartVariation_enum = require('./bar-chart-variation.enum-a4e866b6.js');
+var index = require('./index-Cn1hHaSy.js');
+var transform = require('./transform-DteoCOaq.js');
+var text = require('./text-Cu3CaHGj.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var barChartVariation_enum = require('./bar-chart-variation.enum-BZFN4377.js');
 function band() {
-  var scale = linear.ordinal().unknown(undefined),
+  var scale = transform.ordinal().unknown(undefined),
       domain = scale.domain,
       ordinalRange = scale.range,
       r0 = 0,
@@ -33,7 +31,7 @@ function band() {
     start += (stop - start - step * (n - paddingInner)) * align;
     bandwidth = step * (1 - paddingInner);
     if (round) start = Math.round(start), bandwidth = Math.round(bandwidth);
-    var values = linear.range(n).map(function(i) { return start + step * i; });
+    var values = transform.range(n).map(function(i) { return start + step * i; });
     return ordinalRange(reverse ? values.reverse() : values);
   }
@@ -85,15 +83,26 @@ function band() {
         .align(align);
   };
-  return linear.initRange.apply(rescale(), arguments);
+  return transform.initRange.apply(rescale(), arguments);
 }
-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;--MARGIN--BODY: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}";
-const DigiBarChartStyle0 = barChartCss;
+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;--MARGIN--BODY: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}`;
 const barChart = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Sätter orienteringen på diagrammet, kan vara vertikalt eller horisontellt, vertikalt är förvalt.
+         */
+        this.afVariation = barChartVariation_enum.BarChartVariation.Vertical;
+        /**
+         * En sträng med rubriknivån du vill ha i diagrammet, default är 'h3'
+         */
+        this.afHeadingLevel = 'h3';
+        /**
+         * (Frivillig) Om du vill att komponenten ska ha ett unikt ID, kan du skicka in detta här, annars genereras ett automatiskt
+         */
+        this.afId = randomIdGenerator_util.randomIdGenerator('tooltip');
         // States
         this.loading = false;
         this.placeholderTicks = ['0', '1', '2', '3', '4', '5', '6', '7'];
@@ -151,7 +160,7 @@ const barChart = class {
                     return this.evalColorVar('--digi--color--background--secondary-accent');
                 }
             });
-            linear.select(this.legendDiv)
+            transform.select(this.legendDiv)
                 .selectAll('.legendChip')
                 .transition('colorLegend')
                 .duration(150)
@@ -163,7 +172,7 @@ const barChart = class {
                 .transition('color')
                 .duration(150)
                 .attr('fill', (barData) => this.colorFunction(barData.serie));
-            linear.select(this.legendDiv)
+            transform.select(this.legendDiv)
                 .selectAll('.legendChip')
                 .transition('colorLegend')
                 .duration(150)
@@ -200,7 +209,7 @@ const barChart = class {
                 .style('filter', null);
             /*     this.barChartContainer.selectAll('.averageLineText').transition('avgLineText')
                   .duration(150).style('mix-blend-mode', null).style('filter', null) */
-            linear.select(this.legendDiv)
+            transform.select(this.legendDiv)
                 .selectAll('.legendChip')
                 .transition('colorLegend')
                 .duration(150)
@@ -331,10 +340,10 @@ const barChart = class {
                     : this.chartData.data.xValueNames, [this.margin.top, this.dims.height - this.margin.bottom])
                     .paddingOuter(0.1)
                     .paddingInner(0.1);
-                this.yAxis = linear.axisLeft(this.yScale);
+                this.yAxis = transform.axisLeft(this.yScale);
             }
             else {
-                this.yScale = linear.linear()
+                this.yScale = transform.linear()
                     .domain(empty ? [0, 10] : [this.minVal, this.maxVal])
                     .nice(((_b = (_a = this.chartData) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.numberOfReferenceLines)
                     ? (_c = this.chartData) === null || _c === void 0 ? void 0 : _c.meta.numberOfReferenceLines
@@ -343,14 +352,14 @@ const barChart = class {
                     this.dims.height - this.margin.bottom,
                     this.margin.top
                 ]);
-                this.yAxis = linear.axisLeft(this.yScale);
+                this.yAxis = transform.axisLeft(this.yScale);
             }
         };
         // Setting X-Scale
         this.setXScale = (empty) => {
             // Horizontal
             if (this.afVariation == barChartVariation_enum.BarChartVariation.Horizontal) {
-                this.xScale = linear.linear()
+                this.xScale = transform.linear()
                     .domain(empty ? [0, 10] : [this.minVal, this.maxVal])
                     .nice(3);
                 this.margin.right =
@@ -362,7 +371,7 @@ const barChart = class {
                     this.dims.width - this.margin.right - this.margin.left
                 ]);
                 // Initializing actual axis
-                this.xAxis = linear.axisBottom(this.xScale);
+                this.xAxis = transform.axisBottom(this.xScale);
                 this.tickWidth = this.getLargestText(this.xScale.ticks().map((tick) => tick.toLocaleString()));
             }
             else {
@@ -372,7 +381,7 @@ const barChart = class {
                     .range([0, this.dims.width - this.margin.right - this.margin.left])
                     .paddingOuter(0.1)
                     .paddingInner(0.1);
-                this.xAxis = linear.axisBottom(this.xScale);
+                this.xAxis = transform.axisBottom(this.xScale);
             }
         };
         // Stores all tick text sizes in an indexable array
@@ -560,10 +569,10 @@ const barChart = class {
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
             // Get title dimensions
-            const tempTitle = linear.select(this.titleDiv).node().getBoundingClientRect(), tempLegend = linear.select(this.legendDiv).node().getBoundingClientRect();
+            const tempTitle = transform.select(this.titleDiv).node().getBoundingClientRect(), tempLegend = transform.select(this.legendDiv).node().getBoundingClientRect();
             const prevHeight = this.dims.height;
             if (!onlyHeight)
-                this.dims = linear.select(this.chartDiv).node().getBoundingClientRect();
+                this.dims = transform.select(this.chartDiv).node().getBoundingClientRect();
             this.dims.height =
                 this.maxHeight - tempLegend.height - tempTitle.height - 1.75 * this.rem;
             // Making sure height and width are defined
@@ -792,7 +801,7 @@ const barChart = class {
         };
         // Highlight bar
         this.hover = (event) => {
-            linear.select(event.target)
+            transform.select(event.target)
                 .transition('color')
                 .duration(20)
                 .attr('fill', (d) => {
@@ -812,7 +821,7 @@ const barChart = class {
         };
         // Removing highlight from bar
         this.hoverOut = (event) => {
-            linear.select(event.target)
+            transform.select(event.target)
                 .transition('color')
                 .duration(this.defaultDuration)
                 .attr('fill', (d) => event.target.tagName === 'rect'
@@ -909,7 +918,7 @@ const barChart = class {
                 else {
                     const xStart = this.margin.left + this.tickPadding + this.yTickSize;
                     const translatePoint = this.xScale(data.key) + xStart + this.xScale.bandwidth() / 2;
-                    const yMax = linear.max(data.series.map((elem) => elem.value));
+                    const yMax = transform.max(data.series.map((elem) => elem.value));
                     // Creating adjustment for tooltip to not appear outside of chart
                     const spaceToSVGEdge = 5;
                     const inlineAdjustment = this.dims.width - spaceToSVGEdge < translatePoint + width / 2
@@ -944,8 +953,8 @@ const barChart = class {
             this.closeTooltip();
             this.barChartObserver.disconnect();
             this.status.innerHTML = '<p>Visas som tabell</p>';
-            linear.select(this.host).select('.tableButton').style('display', 'none');
-            linear.select(this.host).select('.chartButton').style('display', null);
+            transform.select(this.host).select('.tableButton').style('display', 'none');
+            transform.select(this.host).select('.chartButton').style('display', null);
             event.target.nextSibling.lastChild.focus();
             const duration = 150;
             this.svg
@@ -955,7 +964,7 @@ const barChart = class {
                 .attr('opacity', 0)
                 .on('end', () => {
                 this.svg.remove();
-                linear.select(this.legendDiv)
+                transform.select(this.legendDiv)
                     .select('.legend')
                     .selectAll('.legendChip')
                     .remove();
@@ -963,14 +972,14 @@ const barChart = class {
                 this.tableDiv.style['display'] = 'block';
                 this.setTableContent();
                 this.setTableDimensions();
-                linear.select(this.tableDiv)
+                transform.select(this.tableDiv)
                     .style('opacity', 0)
                     .transition('fadein')
                     .duration(duration)
                     .style('opacity', 1);
                 this.chartDiv.style['display'] = 'none';
             });
-            linear.select(this.legendDiv)
+            transform.select(this.legendDiv)
                 .style('opacity', 1)
                 .transition('fadeout')
                 .duration(duration)
@@ -979,10 +988,10 @@ const barChart = class {
         // Removes observer and calls init functions for line chart
         this.reInitChart = (event) => {
             this.status.innerHTML = '<p>Visas som diagram</p>';
-            linear.select(this.host).select('.tableButton').style('display', null);
-            linear.select(this.host).select('.chartButton').style('display', 'none');
+            transform.select(this.host).select('.tableButton').style('display', null);
+            transform.select(this.host).select('.chartButton').style('display', 'none');
             event.target.previousSibling.lastChild.focus();
-            const table = linear.select(this.tableDiv);
+            const table = transform.select(this.tableDiv);
             const duration = 150;
             table
                 .style('opacity', 1)
@@ -999,17 +1008,13 @@ const barChart = class {
                     .transition()
                     .duration(duration)
                     .attr('opacity', 1);
-                linear.select(this.legendDiv)
+                transform.select(this.legendDiv)
                     .style('opacity', 0)
                     .transition('fadeout')
                     .duration(duration)
                     .style('opacity', 1);
             });
         };
-        this.afVariation = barChartVariation_enum.BarChartVariation.Vertical;
-        this.afHeadingLevel = 'h3';
-        this.afId = randomIdGenerator_util.randomIdGenerator('tooltip');
-        this.afChartData = undefined;
     }
     afChartDataUpdate(data) {
         if ((typeof data === 'string' && Object.keys(JSON.parse(data)).length > 0) ||
@@ -1038,8 +1043,8 @@ const barChart = class {
                 ? 'compact'
                 : 'standard'
         };
-        linear.select(this.chartDiv).select('.chartSVG').remove();
-        this.maxHeight = (_g = linear.select(this.host)
+        transform.select(this.chartDiv).select('.chartSVG').remove();
+        this.maxHeight = (_g = transform.select(this.host)
             .node()
             .parentNode) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect().height;
         this.barChartObserver.observe(this.chartDiv);
@@ -1049,7 +1054,7 @@ const barChart = class {
         this.setMinMax();
         this.setMargins();
         // Appending svg
-        this.svg = linear.select(this.chartDiv)
+        this.svg = transform.select(this.chartDiv)
             .append('svg')
             .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
@@ -1064,7 +1069,7 @@ const barChart = class {
         const legendData = this.chartData.data.series.map((serie) => serie.title);
         if (this.chartData.data.averageLine)
             legendData.push(this.chartData.data.averageLine.text);
-        const legendChips = linear.select(this.legendDiv)
+        const legendChips = transform.select(this.legendDiv)
             .select('.legend')
             .style('margin-left', `${this.margin.left + this.tickPadding + this.yTickSize}px`)
             .style('margin-top', '0.5rem')
@@ -1115,7 +1120,7 @@ const barChart = class {
     }
     initToolTip() {
         // Getting handle for tooltip
-        this.tooltip = linear.select('#' + this.afId);
+        this.tooltip = transform.select('#' + this.afId);
         this.tooltip.select('.tooltipClose').on('click', this.closeTooltip);
         this.tooltip.selectAll('.tooltipHeading').remove();
         this.tooltip
@@ -1129,8 +1134,8 @@ const barChart = class {
         this.tooltip.style('display', 'none');
     }
     initEmpty() {
-        linear.select(this.chartDiv).select('.chartSVG').remove();
-        this.maxHeight = linear.select(this.host)
+        transform.select(this.chartDiv).select('.chartSVG').remove();
+        this.maxHeight = transform.select(this.host)
             .node()
             .parentNode.getBoundingClientRect().height;
         this.barChartObserver.observe(this.chartDiv);
@@ -1139,7 +1144,7 @@ const barChart = class {
         this.rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
         this.setMargins();
         // Appending svg
-        this.svg = linear.select(this.chartDiv)
+        this.svg = transform.select(this.chartDiv)
             .append('svg')
             .attr('class', 'chartSVG')
             .attr('aria-hidden', true)
@@ -1149,12 +1154,12 @@ const barChart = class {
             : 'Stapeldiagram')
             .attr('style', 'display: flex;min-width: 0;width: 100%;height: auto;');
         // Hide unusable components
-        linear.select(this.titleDiv)
+        transform.select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${text._t.loading}...`);
         this.initYAxis(true);
         this.initXAxis(true);
-        this.tooltip = linear.select('#' + this.afId);
+        this.tooltip = transform.select('#' + this.afId);
         this.tooltip.style('display', 'none');
         this.loadingState(true);
     }
@@ -1163,7 +1168,7 @@ const barChart = class {
         // close potentially open tooltip
         if (this.tooltip)
             this.closeTooltip();
-        linear.select(this.host).select('.tableButton').style('display', 'none');
+        transform.select(this.host).select('.tableButton').style('display', 'none');
         const newHeight = this.setDims();
         this.transitionTitle();
         this.xAxisHandle.selectAll('.tick').remove();
@@ -1175,14 +1180,14 @@ const barChart = class {
             ? 'Stapeldiagram om ' + this.chartData.title.toLowerCase()
             : 'Stapeldiagram');
         this.setMargins(true);
-        linear.select(this.titleDiv)
+        transform.select(this.titleDiv)
             .select(this.afHeadingLevel)
             .html(`${text._t.loading}...`);
         // Waiting with observing for changes until transition to regular bars is complete
         this.barChartContainer
             .transition('position')
             .duration(this.defaultDuration)
-            .ease(linear.polyInOut)
+            .ease(transform.polyInOut)
             .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
         // If there is a new height
         if (newHeight) {
@@ -1236,7 +1241,7 @@ const barChart = class {
                 .selectAll('.bar')
                 .transition('animateBar')
                 .duration(400)
-                .ease(linear.linear$1)
+                .ease(transform.linear$1)
                 .delay((...[, i]) => i * 150 + 400)
                 .attr('y', (d) => this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
                 ? this.yScale(d.key)
@@ -1252,7 +1257,7 @@ const barChart = class {
                 .selectAll('.bar')
                 .transition('animateBar')
                 .duration(200)
-                .ease(linear.linear$1)
+                .ease(transform.linear$1)
                 .attr('y', (d) => this.afVariation === barChartVariation_enum.BarChartVariation.Horizontal
                 ? this.yScale(d.key)
                 : this.dims.height - this.margin.bottom)
@@ -1273,13 +1278,13 @@ const barChart = class {
             flattenBars();
     }
     transitionTitle() {
-        const height = linear.select(this.titleDiv).style('height');
-        linear.select(this.titleDiv)
+        const height = transform.select(this.titleDiv).style('height');
+        transform.select(this.titleDiv)
             .style('height', this.prevHeight)
             .transition('adjust')
             .duration(400)
             .style('height', height)
-            .on('end', () => linear.select(this.titleDiv).style('height', null));
+            .on('end', () => transform.select(this.titleDiv).style('height', null));
     }
     initYAxis(empty) {
         this.setYScale(empty);
@@ -1298,15 +1303,15 @@ const barChart = class {
     // Sets the largest and smallest value from series 0, Should only be used when not loading
     setMinMax() {
         var _a, _b, _c, _d, _e, _f, _g;
-        const max = linear.max((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
-            ? linear.max((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
+        const max = transform.max((_a = this.chartData) === null || _a === void 0 ? void 0 : _a.data.series[0].yValues)
+            ? transform.max((_b = this.chartData) === null || _b === void 0 ? void 0 : _b.data.series[0].yValues)
             : 0;
-        const min = linear.min([0, linear.min((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
-            ? linear.min([0, linear.min((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
+        const min = transform.min([0, transform.min((_c = this.chartData) === null || _c === void 0 ? void 0 : _c.data.series[0].yValues)])
+            ? transform.min([0, transform.min((_d = this.chartData) === null || _d === void 0 ? void 0 : _d.data.series[0].yValues)])
             : 0;
         this.maxVal = max;
         this.minVal = min;
-        this.tempScale = linear.linear()
+        this.tempScale = transform.linear()
             .domain([this.minVal, this.maxVal])
             .nice(((_f = (_e = this.chartData) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.numberOfReferenceLines)
             ? (_g = this.chartData) === null || _g === void 0 ? void 0 : _g.meta.numberOfReferenceLines
@@ -1414,7 +1419,7 @@ const barChart = class {
         // Check whether we are in table mode or not
         if (this.tableDiv.style['display'] == 'block') {
             if (!this.chartData.title) {
-                linear.select(this.titleDiv)
+                transform.select(this.titleDiv)
                     .select(this.afHeadingLevel)
                     .html(`${text._t.loading}...`);
             }
@@ -1427,8 +1432,8 @@ const barChart = class {
         else {
             // displaying legend again
             if (this.loading) {
-                linear.select(this.host).select('.tableButton').style('display', null);
-                linear.select(this.legendDiv).style('display', null);
+                transform.select(this.host).select('.tableButton').style('display', null);
+                transform.select(this.legendDiv).style('display', null);
                 this.initToolTip();
                 this.initLegend();
             }
@@ -1445,7 +1450,7 @@ const barChart = class {
             this.barChartContainer
                 .transition('position')
                 .duration(this.defaultDuration)
-                .ease(linear.polyInOut)
+                .ease(transform.polyInOut)
                 .attr('transform', `translate(${this.margin.left + this.tickPadding + this.yTickSize},0)`);
             if (!this.loading)
                 this.barChartContainer.on('end', () => this.barChartObserver.observe(this.chartDiv));
@@ -1472,11 +1477,11 @@ const barChart = class {
                 : this.yScale.ticks().map((tick) => tick.toLocaleString()));
             this.setValueTicks(true);
             if (this.loading) {
-                linear.select(this.legendDiv)
+                transform.select(this.legendDiv)
                     .style('opacity', 0)
                     .transition()
                     .duration(400)
-                    .ease(linear.polyInOut)
+                    .ease(transform.polyInOut)
                     .style('opacity', 1);
                 this.margin.right =
                     this.getTextSize(this.xScale.domain()[1].toLocaleString()) / 2 +
@@ -1490,7 +1495,7 @@ const barChart = class {
                 this.setNamedTicks(true);
                 // Stop animation
                 this.barChartContainer.selectAll('.barGroup').on('end', null);
-                linear.select(this.titleDiv).select('.loadingHeader').remove();
+                transform.select(this.titleDiv).select('.loadingHeader').remove();
                 this.loading = false;
                 this.barChartContainer.selectAll('.bar').interrupt('animateBar');
                 this.barChartContainer
@@ -1608,7 +1613,7 @@ const barChart = class {
         this.barChartObserver.disconnect();
     }
     componentWillUpdate() {
-        this.prevHeight = linear.select(this.titleDiv).style('height');
+        this.prevHeight = transform.select(this.titleDiv).style('height');
     }
     componentDidUpdate() {
         if (this.tableDiv.style['display'] != 'block' &&
@@ -1629,7 +1634,7 @@ const barChart = class {
     // Returns pixelwidth of text given the current fontSize (costly function using .each)
     getTextSize(text) {
         const textWidth = [];
-        const svg = linear.select(this.chartDiv).append('svg');
+        const svg = transform.select(this.chartDiv).append('svg');
         svg
             .selectAll('dummyText')
             .data([text])
@@ -1649,7 +1654,7 @@ const barChart = class {
         this.tableDiv.innerHTML = `<digi-table af-size="small" style="width:100%" af-variation="primary"> <table><caption>${this.chartData.title}</caption><thead><tr>${this.headings()}</tr></thead><tbody>${this.tableBody()}</tbody></table></digi-table>`;
     }
     setTableDimensions() {
-        const table = linear.select(this.tableDiv);
+        const table = transform.select(this.tableDiv);
         table
             .style('display', 'flex')
             .style('height', '100%')
@@ -1696,9 +1701,11 @@ const barChart = class {
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "afChartData": ["afChartDataUpdate"]
+        "afChartData": [{
+                "afChartDataUpdate": 0
+            }]
     }; }
 };
-barChart.style = DigiBarChartStyle0;
+barChart.style = barChartCss();
 exports.digi_bar_chart = barChart;