@designsystem-se/af 34.1.0 → 34.2.0

package/dist/cjs/digi-card.cjs.entry.js

@@ -31,7 +31,7 @@ const Card = class {
         };
     }
     render() {
-        return (index.h("digi-typography", { key: 'c3cc369b200f7d3e6ea29893c242e07f47805f0c' }, index.h("div", { key: 'a87f2ba87ebf5f07e4369e06f248866829392f22', class: Object.assign({ 'digi-card': true }, this.cssModifiers) }, index.h("div", { key: '20355f0e3594ac4502436ed05fc6757c4dfb5bc1', class: "digi-card__content" }, index.h("slot", { key: 'a83d0125fae8343621013ff740cc3f3dec8e6b43' })), this.hasFooter && (index.h("div", { key: '1448a9159741893d2b3f2dd7e37f40be94d1e3a0', class: "digi-card__footer" }, index.h("slot", { key: 'bae8e6b9474498ed1fc7ca1870c8884e613113d8', name: "footer" }))))));
+        return (index.h("digi-typography", { key: '019a9fb9ff7c896cc079c711f5ba0b3b6fb3d75f' }, index.h("div", { key: '18128c050e6a02b5465daae9956f40f6fff8e2b9', class: Object.assign({ 'digi-card': true }, this.cssModifiers) }, index.h("div", { key: '4b3f760746084b69d8895b9207dbae275ac46294', class: "digi-card__content" }, index.h("slot", { key: '8f665921dce35b606fd3769b077b8847c6b1aadc' })), this.hasFooter && (index.h("div", { key: '7862d924f7c279ab6ef0175a0030b43964b7e238', class: "digi-card__footer" }, index.h("slot", { key: '892ad516407da32ec89b5151565be99644909ed4', name: "footer" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/digi-chart-line.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cfa8e9be.js');
-const text = require('./text-ca7e238b.js');
+const text = require('./text-3157012b.js');
 const linear = require('./linear-ac0c97a7.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
 
@@ -447,8 +447,6 @@ function constant(x) {
   };
 }
 
-const cos = Math.cos;
-const sin = Math.sin;
 const sqrt = Math.sqrt;
 const pi = Math.PI;
 const tau = 2 * pi;
@@ -578,41 +576,22 @@ const circle = {
   }
 };
 
-const tan30 = sqrt(1 / 3);
-const tan30_2 = tan30 * 2;
-
-const diamond = {
+const diamond2 = {
   draw(context, size) {
-    const y = sqrt(size / tan30_2);
-    const x = y * tan30;
-    context.moveTo(0, -y);
-    context.lineTo(x, 0);
-    context.lineTo(0, y);
-    context.lineTo(-x, 0);
+    const r = sqrt(size) * 0.62625;
+    context.moveTo(0, -r);
+    context.lineTo(r, 0);
+    context.lineTo(0, r);
+    context.lineTo(-r, 0);
     context.closePath();
   }
 };
 
-const ka = 0.89081309152928522810;
-const kr = sin(pi / 10) / sin(7 * pi / 10);
-const kx = sin(tau / 10) * kr;
-const ky = -cos(tau / 10) * kr;
-
-const star = {
+const square = {
   draw(context, size) {
-    const r = sqrt(size * ka);
-    const x = kx * r;
-    const y = ky * r;
-    context.moveTo(0, -r);
-    context.lineTo(x, y);
-    for (let i = 1; i < 5; ++i) {
-      const a = tau * i / 5;
-      const c = cos(a);
-      const s = sin(a);
-      context.lineTo(s * r, -c * r);
-      context.lineTo(c * x - s * y, s * x + c * y);
-    }
-    context.closePath();
+    const w = sqrt(size);
+    const x = -w / 2;
+    context.rect(x, x, w, w);
   }
 };
 
@@ -628,6 +607,30 @@ const triangle = {
   }
 };
 
+const c = -0.5;
+const s = sqrt(3) / 2;
+const k = 1 / sqrt(12);
+const a = (k / 2 + 1) * 3;
+
+const wye = {
+  draw(context, size) {
+    const r = sqrt(size / a);
+    const x0 = r / 2, y0 = r * k;
+    const x1 = x0, y1 = r * k + r;
+    const x2 = -x1, y2 = y1;
+    context.moveTo(x0, y0);
+    context.lineTo(x1, y1);
+    context.lineTo(x2, y2);
+    context.lineTo(c * x0 - s * y0, s * x0 + c * y0);
+    context.lineTo(c * x1 - s * y1, s * x1 + c * y1);
+    context.lineTo(c * x2 - s * y2, s * x2 + c * y2);
+    context.lineTo(c * x0 + s * y0, c * y0 - s * x0);
+    context.lineTo(c * x1 + s * y1, c * y1 - s * x1);
+    context.lineTo(c * x2 + s * y2, c * y2 - s * x2);
+    context.closePath();
+  }
+};
+
 function Symbol(type, size) {
   let context = null,
       path = withPath(symbol);
@@ -709,13 +712,16 @@ function basis(context) {
   return new Basis(context);
 }
 
-const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.chartTitle.sc-digi-chart-line{--digi--typography--h2--margin:0.5rem;--digi--typography--h3--margin:0.5rem;--digi--typography--h4--margin:0.5rem;--digi--typography--h5--margin:0.5rem;--digi--typography--h6--margin:0.5rem;display:flex;justify-content:flex-start;flex-direction:column;align-items:left;text-align:left;padding-bottom:1rem;flex-grow:2}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{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}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;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}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n    --digi--global--color--neutral--grayscale--darkest-3\n  )}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;margin-right:5px}.topWrapper.sc-digi-chart-line{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}";
+const chartLineCss = ".sc-digi-chart-line-h{display:block;height:100%;width:100%;position:relative}.sc-digi-chart-line-h .digi-chart-line.sc-digi-chart-line{color:var(--MY-PROP);height:100%;width:100%;min-height:fit-content}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.chartTitle.sc-digi-chart-line{--digi--typography--h2--margin:0.5rem;--digi--typography--h3--margin:0.5rem;--digi--typography--h4--margin:0.5rem;--digi--typography--h5--margin:0.5rem;--digi--typography--h6--margin:0.5rem;display:flex;justify-content:flex-start;flex-direction:column;align-items:left;text-align:left;padding-bottom:1rem;flex-grow:2}.close.sc-digi-chart-line{--digi--icon--color:rgb(245, 245, 245);cursor:pointer;margin-top:-5px}.legend.sc-digi-chart-line{display:flex;flex-direction:row;flex-wrap:no-wrap;gap:0.5rem;margin:0.5rem 0;margin-top:1.25rem;height:2.675rem;overflow-x:auto;overflow-y:hidden;cursor:default;max-width:100%}.chip.sc-digi-chart-line{box-sizing:border-box}.legend.sc-digi-chart-line::-webkit-scrollbar,.table.sc-digi-chart-line::-webkit-scrollbar{height:10px;width:10px}.legend.sc-digi-chart-line::-webkit-scrollbar-track,.table.sc-digi-chart-line::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.legend.sc-digi-chart-line::-webkit-scrollbar-thumb,.table.sc-digi-chart-line::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.chartTooltip.sc-digi-chart-line{box-sizing:border-box;position:absolute;background-color:rgba(10, 10, 10, 0.9);color:white;padding:5px 10px;padding-right:5px;border-radius:4px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;font-size:14px;display:none}.scChartStatus.sc-digi-chart-line{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}.table.sc-digi-chart-line{display:none;overflow-y:scroll;height:fit-content;border-radius:4px;padding:0.25rem;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}.tableIcon.sc-digi-chart-line{--digi--icon--color:var(--digi--global--color--neutral--grayscale--darker);width:26px;height:26px;pointer-events:none}.tableIcon.sc-digi-chart-line:hover{--digi--icon--color:var(\n    --digi--global--color--neutral--grayscale--darkest-3\n  )}.tooltipHead.sc-digi-chart-line{display:flex;width:100%;justify-content:space-between;margin-bottom:0.25rem;flex-direction:row}.tooltipBody.sc-digi-chart-line{display:flex;flex-direction:column;padding-right:5px;max-height:100px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(245, 245, 245) transparent}.topWrapper.sc-digi-chart-line{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}";
 const DigiChartLineStyle0 = chartLineCss;
 
 const ChartLine = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this._lineTypes = [null, '1.0, 7.0', '9.0, 7.0'];
+        this._lineTypes = [null, '18, 7', '8,7', '2,6'];
+        this._strokeWidth = 2.75;
+        this._lineCap = 'round';
+        this._strokeGlyphs = [circle, triangle, square, wye, diamond2];
         this._toggled = false;
         this._tickSize = 0;
         // Selection list from legend chips
@@ -734,8 +740,6 @@ const ChartLine = class {
         this.xPadding = 5;
         this.yPadding = 8;
         this.xTickSize = 5;
-        // How many line types that exists currently
-        this.lineTypes = 3;
         // Formats
         this.formatStyle = ',d';
         this.axisNumberFormat = {
@@ -859,7 +863,9 @@ const ChartLine = class {
             })
                 .on('click', this.togglePath)
                 .on('mouseover', this.highlightPath)
+                .on('focus', this.highlightPath)
                 .on('mouseleave', this.colorLines)
+                .on('blur', this.colorLines)
                 .datum((d) => d)
                 .insert('svg', 'span')
                 .attr('class', 'legendSvg')
@@ -868,23 +874,23 @@ const ChartLine = class {
                 .attr('height', 28)
                 .append('line')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 6)
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', 4)
                 .attr('stroke-dasharray', (d, i) => this.dashFunction(d, i))
                 .attr('x1', 3)
                 .attr('x2', 29)
                 .attr('y1', '50%')
                 .attr('y2', '50%');
             // Only if data contains many lines
-            if (this._chartData.data.series.length <= this.lineTypes)
+            if (this._chartData.data.series.length <= this._lineTypes.length)
                 return;
             container
                 .selectAll('.legendSvg')
                 .filter((...[, i]) => {
-                return i > 2;
+                return i > (this._lineTypes.length - 1);
             })
                 .append('path')
-                .attr('d', (...[, i]) => this.symbolType(i, 110))
+                .attr('d', (...[, i]) => this.symbolType(i, 70))
                 .attr('fill', (d) => this.colorFunction(d))
                 .attr('transform', 'translate(16,14)');
         };
@@ -905,6 +911,12 @@ const ChartLine = class {
                 }
                 else
                     return '#E3E3E3';
+            })
+                .attr('stroke-width', (d) => {
+                if (d.title === element.title)
+                    return this._strokeWidth * 1.25;
+                else
+                    return this._strokeWidth;
             });
             this._lineChartContainer
                 .selectAll('.symbolGroup')
@@ -978,7 +990,8 @@ const ChartLine = class {
                 .selectAll('.linePath')
                 .transition('highlight')
                 .duration(150)
-                .attr('stroke', (d) => this.colorFunction(d));
+                .attr('stroke', (d) => this.colorFunction(d))
+                .attr('stroke-width', this._strokeWidth);
             this._lineChartContainer
                 .selectAll('.symbolGroup')
                 .selectAll('.symbol')
@@ -1000,8 +1013,8 @@ const ChartLine = class {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('fill', 'none')
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -1029,7 +1042,9 @@ const ChartLine = class {
             // Remove all old symbols
             this._lineChartContainer
                 .selectAll('.symbolGroup')
-                .data(this.reshapeData(this._chartData.data.series.filter((...[, index]) => index > 2)))
+                .data(this.reshapeData(this._chartData.data.series.filter(
+            // Symbols are only needed, when we are out of line types
+            (...[, index]) => index > (this._lineTypes.length - 1))))
                 .join((enter) => {
                 if (!transition) {
                     enter
@@ -1091,6 +1106,7 @@ const ChartLine = class {
                         .selectAll('.symbol')
                         .data((d, i) => {
                         return d.line.map((num) => {
+                            console.log(d.title, i);
                             if (num[1] != null)
                                 return {
                                     val: num[1],
@@ -1157,20 +1173,11 @@ const ChartLine = class {
                 }
             }, (exit) => exit.remove());
         };
-        // Returns a symbol type given a index, currently we have support for 10 lines
+        // Returns a symbol type given a index
         this.symbolType = (index, size) => {
-            if (index < this.lineTypes)
-                return Symbol()
-                    .type(circle)
-                    .size(size ? size : 90)();
-            else if (index >= this.lineTypes && index < this.lineTypes * 2)
-                return Symbol()
-                    .type(diamond)
-                    .size(size ? size : 90)();
-            else
-                return Symbol()
-                    .type(star)
-                    .size(size ? size : 90)();
+            return Symbol()
+                .type(this._strokeGlyphs[Math.trunc(index / this._lineTypes.length)])
+                .size(size ? size : 60)();
         };
         // Setting dimension variable
         this.setDims = (onlyHeight = false) => {
@@ -1343,7 +1350,8 @@ const ChartLine = class {
             // Heading
             this._tooltip.style('display', 'flex');
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
+            const tooltipHead = this._tooltip.select('.tooltipHead');
+            tooltipHead
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem 0 0 ')
                 .html(() => {
@@ -1452,7 +1460,7 @@ const ChartLine = class {
             this._xAxisHandle.select('.domain').attr('display', 'none');
             this._xAxisHandle
                 .selectAll('line')
-                .attr('stroke-linecap', 'round')
+                .attr('stroke-linecap', this._lineCap)
                 .attr('stroke', getComputedStyle(document.documentElement)
                 .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
                 .trim()
@@ -1680,8 +1688,8 @@ const ChartLine = class {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
+            .selectAll('.tooltipHead')
+            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = linear.select(this._host)
@@ -1752,8 +1760,8 @@ const ChartLine = class {
             'h' + (parseInt(this.afHeadingLevel.replace(/\D/g, '')) + 1);
         // Add heading placeholder for heading
         this._tooltip
-            .selectAll('.tooltipBody')
-            .append(this._tooltipHeading) // increment heading level by one
+            .selectAll('.tooltipHead')
+            .insert(this._tooltipHeading, ':first-child') // increment heading level by one
             .style('margin', '0 0.75rem')
             .style('font-weight', '500');
         this._maxHeight = linear.select(this._host)
@@ -1834,8 +1842,8 @@ const ChartLine = class {
                 .join('path')
                 .attr('class', 'linePath')
                 .attr('stroke', 'lightgray')
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', 4)
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', this._strokeWidth)
                 .attr('fill', 'none')
                 .attr('d', (d) => LineFunc(d))
                 .transition()
@@ -1992,8 +2000,8 @@ const ChartLine = class {
                     .join('path')
                     .attr('class', 'linePath')
                     .attr('stroke', (d) => this.colorFunction(d))
-                    .attr('stroke-linecap', 'round')
-                    .attr('stroke-width', 4)
+                    .attr('stroke-linecap', this._lineCap)
+                    .attr('stroke-width', this._strokeWidth)
                     .attr('fill', 'none')
                     .attr('stroke-dasharray', this.dashFunction)
                     .attr('stroke-dashoffset', null)
@@ -2032,8 +2040,8 @@ const ChartLine = class {
                 .ease(linear.polyInOut)
                 .attr('class', 'linePath')
                 .attr('stroke', (d) => this.colorFunction(d))
-                .attr('stroke-linecap', 'round')
-                .attr('stroke-width', (d) => (d.length > 1 ? 4 : 6))
+                .attr('stroke-linecap', this._lineCap)
+                .attr('stroke-width', (d) => (d.length > 1 ? this._strokeWidth : 4))
                 .attr('fill', 'none')
                 .attr('stroke-dasharray', (d, i) => d.length > 1 ? this.dashFunction(d, i) : null)
                 .attr('d', (d) => this._LineFunc(d.line));
@@ -2063,7 +2071,8 @@ const ChartLine = class {
                 .attr('y1', this._yAxis(this._maxVal))
                 .attr('y2', this.dims.height - this.margin.bottom);
             const tooltipBody = this._tooltip.select('.tooltipBody');
-            tooltipBody
+            const tooltipHead = this._tooltip.select('.tooltipHead');
+            tooltipHead
                 .select(this._tooltipHeading)
                 .style('margin', '0 0.75rem')
                 .html(() => {
@@ -2302,7 +2311,7 @@ const ChartLine = class {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (index.h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, index.h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), index.h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, index.h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), index.h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), index.h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), index.h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (index.h("host", { key: '0658f0d7c104a950b8e93c0cc57a5899cc2e144e', ref: (el) => (this._host = el) }, index.h("div", { key: '89ec346d14d3c8b162c5eae7b741e237a4c1305c', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, index.h("digi-typography", { key: 'af1f2d126d40cb2ae39fa0e3b777a5086eda8e5a', class: "chartTitle", innerHTML: heading }), index.h("digi-button", { key: '42a3dd64d366b92fd6954182f3d96de25ff0c7d8', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-table", { key: '1951b88ba6d95e1a8111679b14e528f85d64ae9f', slot: "icon" }), "Visa tabell"), index.h("digi-button", { key: '12176baf97dd6d41554621fa67c40342f634defd', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, index.h("digi-icon-chart", { key: '2328aecb3ff6d0853e96e4d5a6c17a9331c41d20', slot: "icon" }), "Visa diagram"), index.h("div", { key: '156a8eb33d9fd0c45279277efd036c8ed270b4d8', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), index.h("div", { key: '862fa6309cf3b4aa67379b358fa67fedad34556f', class: "chartTooltip", id: this.afId }, index.h("div", { key: 'c5b96564be226b735150bb9f5130eee9842d1883', class: "tooltipHead" }, index.h("digi-icon-x", { key: '30905ec1fefc5e3e28b268d255f0d6dde7c87f62', class: "close" }), ' '), index.h("div", { key: 'eb35ac22dbd2f1f37b01c9b2753832c448a682fd', class: "tooltipBody" })), index.h("div", { key: '02bba9c0f0af9e105cbaaa76f2a60071d0dc9685', class: "chart", ref: (el) => (this._chartDiv = el) }), index.h("div", { key: '26514cab5bcc0b2d89a564542df4ced64b01a1b3', class: "legend", ref: (el) => (this._legendDiv = el) }), index.h("div", { key: 'dca2127b11fc2f963657cc7439cc29453c1465aa', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-code-block_3.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cfa8e9be.js');
 const codeExampleVariation_enum = require('./code-example-variation.enum-c6557727.js');
-const toolsFeedbackVariation_enum = require('./tools-feedback-variation.enum-b17e8f87.js');
+const typographyVariation_enum = require('./typography-variation.enum-cc2d8aef.js');
 const prismGit = require('./prism-git-df985529.js');
 require('./badge-notification-shape.enum-ff802554.js');
 require('./badge-status-variation.enum-0a5adc21.js');
@@ -14,17 +14,14 @@ const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./card-footer-border.enum-143982da.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
-require('./typography-variation.enum-f1d49c3a.js');
+require('./code-variation.enum-c4a4e6fd.js');
 require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
 require('./form-checkbox-variation.enum-d2ca879e.js');
-require('./form-file-upload-variation.enum-634cfae8.js');
-require('./form-input-search-variation.enum-c50239bc.js');
-require('./form-input-type.enum-9c8ee12a.js');
-require('./form-select-variation.enum-528c1bf0.js');
+require('./form-validation-message-variation.enum-c5ec3e2d.js');
+require('./form-input-type.enum-daf781ba.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
-require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
 require('./layout-container-max-width.enum-7e637f44.js');
@@ -55,7 +52,7 @@ require('./typography-heading-jumbo-variation.enum-8677e099.js');
 require('./typography-meta-variation.enum-13ac3538.js');
 require('./typography-time-variation.enum-bce1d87e.js');
 require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');
-const text = require('./text-ca7e238b.js');
+const text = require('./text-3157012b.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
 
 const codeBlockCss = "digi-code-block{--digi--code-block--background:var(--digi--color--background--primary);--digi--code-block--border-radius:0.3rem;--digi--code-block--border:1px solid var(--digi--color--border--neutral-3);display:block}digi-code-block .digi-code-block{border-radius:var(--digi--code-block--border-radius);border:var(--digi--code-block--border);overflow:hidden;position:relative}digi-code-block .digi-code-block pre{margin:0}digi-code-block .digi-code-block--light{}digi-code-block .digi-code-block--light code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{color:#545454;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}digi-code-block .digi-code-block--light pre[class*=language-]{padding:1em;overflow:auto}digi-code-block .digi-code-block--light :not(pre)>code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{background:#fefefe}digi-code-block .digi-code-block--light :not(pre)>code[class*=language-]{padding:0.1em;white-space:normal}digi-code-block .digi-code-block--light .token.comment,digi-code-block .digi-code-block--light .token.prolog,digi-code-block .digi-code-block--light .token.doctype,digi-code-block .digi-code-block--light .token.cdata{color:#696969}digi-code-block .digi-code-block--light .token.punctuation{color:#545454}digi-code-block .digi-code-block--light .token.property,digi-code-block .digi-code-block--light .token.tag,digi-code-block .digi-code-block--light .token.constant,digi-code-block .digi-code-block--light .token.symbol,digi-code-block .digi-code-block--light .token.deleted{color:#007faa}digi-code-block .digi-code-block--light .token.boolean,digi-code-block .digi-code-block--light .token.number{color:#008000}digi-code-block .digi-code-block--light .token.selector,digi-code-block .digi-code-block--light .token.attr-name,digi-code-block .digi-code-block--light .token.string,digi-code-block .digi-code-block--light .token.char,digi-code-block .digi-code-block--light .token.builtin,digi-code-block .digi-code-block--light .token.inserted{color:#aa5d00}digi-code-block .digi-code-block--light .token.operator,digi-code-block .digi-code-block--light .token.entity,digi-code-block .digi-code-block--light .token.url,digi-code-block .digi-code-block--light .language-css .token.string,digi-code-block .digi-code-block--light .style .token.string,digi-code-block .digi-code-block--light .token.variable{color:#008000}digi-code-block .digi-code-block--light .token.atrule,digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.function{color:#aa5d00}digi-code-block .digi-code-block--light .token.keyword{color:#d91e18}digi-code-block .digi-code-block--light .token.regex,digi-code-block .digi-code-block--light .token.important{color:#d91e18}digi-code-block .digi-code-block--light .token.important,digi-code-block .digi-code-block--light .token.bold{font-weight:bold}digi-code-block .digi-code-block--light .token.italic{font-style:italic}digi-code-block .digi-code-block--light .token.entity{cursor:help}@media screen and (-ms-high-contrast: active){digi-code-block .digi-code-block--light code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{color:windowText;background:window}digi-code-block .digi-code-block--light :not(pre)>code[class*=language-],digi-code-block .digi-code-block--light pre[class*=language-]{background:window}digi-code-block .digi-code-block--light .token.important{background:highlight;color:window;font-weight:normal}digi-code-block .digi-code-block--light .token.atrule,digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.function,digi-code-block .digi-code-block--light .token.keyword,digi-code-block .digi-code-block--light .token.operator,digi-code-block .digi-code-block--light .token.selector{font-weight:bold}digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.comment,digi-code-block .digi-code-block--light .token.doctype,digi-code-block .digi-code-block--light .token.function,digi-code-block .digi-code-block--light .token.keyword,digi-code-block .digi-code-block--light .token.operator,digi-code-block .digi-code-block--light .token.property,digi-code-block .digi-code-block--light .token.string{color:highlight}digi-code-block .digi-code-block--light .token.attr-value,digi-code-block .digi-code-block--light .token.url{font-weight:normal}}digi-code-block .digi-code-block--dark{}digi-code-block .digi-code-block--dark .digi-code-block__button{--digi--button--color--text--function--default:var(\n    --digi--color--text--inverted\n  );--digi--button--color--text--function--hover:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--default:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--hover:var(\n    --digi--color--text--inverted\n  );--digi--button--color--text--function--focus:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--focus:var(\n    --digi--color--text--inverted\n  )}digi-code-block .digi-code-block--dark code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{color:#f8f8f2;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre-wrap;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}digi-code-block .digi-code-block--dark pre[class*=language-]{padding:1em;overflow:auto}digi-code-block .digi-code-block--dark :not(pre)>code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{--digi--color--background--inverted-3:#272727;background:var(--digi--color--background--inverted-3)}digi-code-block .digi-code-block--dark :not(pre)>code[class*=language-]{padding:0.1em;white-space:normal}digi-code-block .digi-code-block--dark .token.comment,digi-code-block .digi-code-block--dark .token.prolog,digi-code-block .digi-code-block--dark .token.doctype,digi-code-block .digi-code-block--dark .token.cdata{color:#d4d0ab}digi-code-block .digi-code-block--dark .token.punctuation{color:#fefefe}digi-code-block .digi-code-block--dark .token.property,digi-code-block .digi-code-block--dark .token.tag,digi-code-block .digi-code-block--dark .token.constant,digi-code-block .digi-code-block--dark .token.symbol,digi-code-block .digi-code-block--dark .token.deleted{color:#ffa07a}digi-code-block .digi-code-block--dark .token.boolean,digi-code-block .digi-code-block--dark .token.number{color:#00e0e0}digi-code-block .digi-code-block--dark .token.selector,digi-code-block .digi-code-block--dark .token.attr-name,digi-code-block .digi-code-block--dark .token.string,digi-code-block .digi-code-block--dark .token.char,digi-code-block .digi-code-block--dark .token.builtin,digi-code-block .digi-code-block--dark .token.inserted{color:#abe338}digi-code-block .digi-code-block--dark .token.operator,digi-code-block .digi-code-block--dark .token.entity,digi-code-block .digi-code-block--dark .token.url,digi-code-block .digi-code-block--dark .language-css .token.string,digi-code-block .digi-code-block--dark .style .token.string,digi-code-block .digi-code-block--dark .token.variable{color:#00e0e0}digi-code-block .digi-code-block--dark .token.atrule,digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.function{color:#ffd700}digi-code-block .digi-code-block--dark .token.keyword{color:#00e0e0}digi-code-block .digi-code-block--dark .token.regex,digi-code-block .digi-code-block--dark .token.important{color:#ffd700}digi-code-block .digi-code-block--dark .token.important,digi-code-block .digi-code-block--dark .token.bold{font-weight:bold}digi-code-block .digi-code-block--dark .token.italic{font-style:italic}digi-code-block .digi-code-block--dark .token.entity{cursor:help}@media screen and (-ms-high-contrast: active){digi-code-block .digi-code-block--dark code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{color:windowText;background:window}digi-code-block .digi-code-block--dark :not(pre)>code[class*=language-],digi-code-block .digi-code-block--dark pre[class*=language-]{background:window}digi-code-block .digi-code-block--dark .token.important{background:highlight;color:window;font-weight:normal}digi-code-block .digi-code-block--dark .token.atrule,digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.function,digi-code-block .digi-code-block--dark .token.keyword,digi-code-block .digi-code-block--dark .token.operator,digi-code-block .digi-code-block--dark .token.selector{font-weight:bold}digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.comment,digi-code-block .digi-code-block--dark .token.doctype,digi-code-block .digi-code-block--dark .token.function,digi-code-block .digi-code-block--dark .token.keyword,digi-code-block .digi-code-block--dark .token.operator,digi-code-block .digi-code-block--dark .token.property,digi-code-block .digi-code-block--dark .token.string{color:highlight}digi-code-block .digi-code-block--dark .token.attr-value,digi-code-block .digi-code-block--dark .token.url{font-weight:normal}}digi-code-block .digi-code-block__toolbar{padding-bottom:0.5rem;display:flex;justify-content:flex-end;position:absolute;bottom:0;width:100%}digi-code-block .digi-code-block__button{margin-right:var(--digi--margin--smaller)}";
@@ -67,7 +64,7 @@ const CodeBlock = class {
         this.highlightedCode = undefined;
         this.afCode = undefined;
         this.afVariation = codeExampleVariation_enum.CodeBlockVariation.DARK;
-        this.afLanguage = toolsFeedbackVariation_enum.CodeBlockLanguage.HTML;
+        this.afLanguage = typographyVariation_enum.CodeBlockLanguage.HTML;
         this.afLang = 'en';
         this.afHideToolbar = false;
     }
@@ -93,7 +90,7 @@ const CodeBlock = class {
         };
     }
     render() {
-        return (index.h("div", { key: '385c9c75770f6b60ff9c5c27779ed9e11ad62d51', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, index.h("pre", { key: 'a8c0219048cc68bf85369c4c33b31dd335d1e8a4', class: `digi-code-block__pre language-${this.afLanguage}` }, index.h("code", { key: '18777a1701ee21ad028641bcf91e1109599eb584', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (index.h("div", { key: 'dc7fa59933a94e8fb3b54d286a031fc493398450', class: "digi-code-block__toolbar" }, index.h("digi-button", { key: 'b2ea60085745ca58f249108ae12d7d4d80ba460c', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: buttonVariation_enum.ButtonVariation.FUNCTION, afSize: buttonSize_enum.ButtonSize.SMALL }, index.h("digi-icon-copy", { key: 'd38cd2ff9c688fe582d903c33f2bf9f183047658', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), text._t.code.copy)))));
+        return (index.h("div", { key: '89eeba2f225ccdf39a3273c1b0f3209297eddfb6', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, index.h("pre", { key: '13084512e719315d911b0ac7366f01602a5ea874', class: `digi-code-block__pre language-${this.afLanguage}` }, index.h("code", { key: '0645588eb95b929e8146d410bf5ed3e1a7c05320', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (index.h("div", { key: '06f8bd21a0cd952bef0aa652a1a16d9975dfe3ee', class: "digi-code-block__toolbar" }, index.h("digi-button", { key: '32b469f4c7857c41dc0ddcde2ced8e15b1bb567a', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: buttonVariation_enum.ButtonVariation.FUNCTION, afSize: buttonSize_enum.ButtonSize.SMALL }, index.h("digi-icon-copy", { key: '900972f6ccfc677ebc30febef7d4fb17f1327c10', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), text._t.code.copy)))));
     }
     static get watchers() { return {
         "afCode": ["formatCode"]
@@ -113,7 +110,7 @@ const FormFieldset = class {
         this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-fieldset');
     }
     render() {
-        return (index.h("fieldset", { key: '1e640820584a609c6ac925c31be698c77eb07822', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (index.h("legend", { key: '0ae1c575b18a93f1ddc0117b2508f0d641fc16e1', class: "digi-form-fieldset__legend" }, this.afLegend)), index.h("slot", { key: 'e2a572ff848a2ce042ca39cab7efd6bab7351320' })));
+        return (index.h("fieldset", { key: 'a9bfef15b7b9ef65460f3aeff1c7b83abe7de378', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (index.h("legend", { key: '4beefd78aa50fda47137b611e0df24cf2bd0ba87', class: "digi-form-fieldset__legend" }, this.afLegend)), index.h("slot", { key: '8b36400f2d0870c744e4b8fa2a30ec262e192074' })));
     }
 };
 FormFieldset.style = DigiFormFieldsetStyle0;
@@ -135,8 +132,8 @@ const FormRadiobutton = class {
         this.dirty = false;
         this.touched = false;
         this.afLabel = undefined;
-        this.afVariation = toolsFeedbackVariation_enum.FormRadiobuttonVariation.PRIMARY;
-        this.afLayout = toolsFeedbackVariation_enum.FormRadiobuttonLayout.INLINE;
+        this.afVariation = typographyVariation_enum.FormRadiobuttonVariation.PRIMARY;
+        this.afLayout = typographyVariation_enum.FormRadiobuttonLayout.INLINE;
         this.afName = undefined;
         this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-radiobutton');
         this.afRequired = undefined;
@@ -176,9 +173,9 @@ const FormRadiobutton = class {
     }
     get cssModifiers() {
         return {
-            'digi-form-radiobutton--error': this.afValidation === toolsFeedbackVariation_enum.FormRadiobuttonValidation.ERROR,
-            'digi-form-radiobutton--primary': this.afVariation === toolsFeedbackVariation_enum.FormRadiobuttonVariation.PRIMARY,
-            'digi-form-radiobutton--secondary': this.afVariation === toolsFeedbackVariation_enum.FormRadiobuttonVariation.SECONDARY,
+            'digi-form-radiobutton--error': this.afValidation === typographyVariation_enum.FormRadiobuttonValidation.ERROR,
+            'digi-form-radiobutton--primary': this.afVariation === typographyVariation_enum.FormRadiobuttonVariation.PRIMARY,
+            'digi-form-radiobutton--secondary': this.afVariation === typographyVariation_enum.FormRadiobuttonVariation.SECONDARY,
             [`digi-form-radiobutton--layout-${this.afLayout}`]: !!this.afLayout
         };
     }
@@ -206,9 +203,9 @@ const FormRadiobutton = class {
         this.afOnInput.emit(e);
     }
     render() {
-        return (index.h("div", { key: 'f1527cff067181bc4b22e4c47b59526136a9e4e7', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, index.h("input", { key: '3a16dd4de203e9607dd5583bb46e1695bd6c8298', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === toolsFeedbackVariation_enum.FormRadiobuttonValidation.ERROR
+        return (index.h("div", { key: 'a278c2bb0620bcb7e7bffd35d39c349c20e43b68', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, index.h("input", { key: 'f09031b1d967366812972e7e0c97d70471e5dd65', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === typographyVariation_enum.FormRadiobuttonValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), index.h("label", { key: '9b1ba6f7b3bc98fae2db06ade0e2712241f2fa64', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, index.h("span", { key: 'a19ad55d9c0f12428c650bbd6dcea15a9f757c64', class: "digi-form-radiobutton__circle" }), this.afLabel)));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), index.h("label", { key: '34119108a8d9ad719eb2e3c34fad462ae7a5546b', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, index.h("span", { key: '37269fc42a16629258e653eb34165e527f69fd7d', class: "digi-form-radiobutton__circle" }), this.afLabel)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-code-example.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-cfa8e9be.js');
 const codeExampleVariation_enum = require('./code-example-variation.enum-c6557727.js');
 const buttonSize_enum = require('./button-size.enum-7921c01e.js');
 const buttonVariation_enum = require('./button-variation.enum-bc521499.js');
-const text = require('./text-ca7e238b.js');
+const text = require('./text-3157012b.js');
 const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
 
 const codeExampleCss = ".digi--util--fs--xs.sc-digi-code-example{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-code-example{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-code-example{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-code-example{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-code-example{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-code-example{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-code-example{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-code-example{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-code-example{padding-top:5rem !important}.digi--util--pb--1.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-code-example{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-code-example{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-code-example{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-code-example{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-code-example{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-code-example{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-code-example{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-code-example{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-code-example{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-code-example{padding:2.5rem !important}.digi--util--p--60.sc-digi-code-example{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-code-example{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-code-example{padding:4.5rem !important}.digi--util--p--90.sc-digi-code-example{padding:5rem !important}.digi--util--ptb--1.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-code-example{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-code-example{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-code-example{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-code-example{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-code-example{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-code-example{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-code-example{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-code-example{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-code-example{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-code-example{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-code-example{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-code-example{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-code-example{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-code-example{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden.sc-digi-code-example{display:none}.sc-digi-code-example-h{--digi--code-example--background:var(--digi--color--background--primary);--digi--code-example--controls--width:16.25rem;display:block}.digi-code-example.sc-digi-code-example{background-size:20px 20px;background-position:0 0, 0 10px, 10px -10px, -10px 0px;border:var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);height:100%;display:flex;flex-direction:row;border-radius:0.3rem;position:relative}@media (max-width: 35.9375rem){.digi-code-example.sc-digi-code-example{min-width:360px}}.digi-code-example--light.sc-digi-code-example{background-color:#ffffff;background-image:linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%)}.digi-code-example--dark.sc-digi-code-example{background-color:#787777;background-image:linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%)}.digi-code-example__container.sc-digi-code-example{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1;position:relative}.digi-code-example--no-controls.sc-digi-code-example{flex-direction:column}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button.sc-digi-code-example{margin-top:0;align-self:flex-end;margin-bottom:0.2rem;z-index:1;position:absolute;bottom:0;right:0}.digi-code-example--no-controls.sc-digi-code-example .digi-code-example__copy-button--dark.sc-digi-code-example{--digi--button--color--text--function--default:var(\n    --digi--color--text--inverted\n  );--digi--button--color--text--function--hover:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--default:var(\n    --digi--color--text--inverted\n  );--digi--button--color--icon--function--hover:var(\n    --digi--color--text--inverted\n  )}.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--largest-2);overflow-x:auto}@media (max-width: 48rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--medium)}}@media (max-width: 35.9375rem){.digi-code-example__example.sc-digi-code-example{padding:var(--digi--padding--small)}}.digi-code-example__copy-button.sc-digi-code-example{align-self:start;margin-top:var(--digi--padding--large);margin-right:var(--digi--padding--small)}.digi-code-example__codeblock.sc-digi-code-example digi-code-block.sc-digi-code-example{--digi--code-block--border-radius:0;--digi--code-block--border:none}.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--medium);background:var(--digi--color--background--neutral-6);display:flex;flex:0 var(--digi--code-example--controls--width);flex-direction:column;align-self:stretch;flex-shrink:0;justify-content:space-between;gap:var(--digi--gutter--medium)}@media (max-width: 48rem){.digi-code-example__controls.sc-digi-code-example{padding:var(--digi--padding--smaller)}}.digi-code-example__controls[hidden].sc-digi-code-example{display:none}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__code.sc-digi-code-example{display:flex;flex-direction:column;flex-grow:1}.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{flex-grow:1;height:64px;overflow-y:hidden;position:relative}.digi-code-example__code-expand.sc-digi-code-example{display:flex;align-items:center;justify-content:center;gap:var(--digi--gutter--icon);width:100%;padding:0.875rem 0;background:#272727;color:var(--digi--color--text--inverted);font-size:var(--digi--typography--body--font-size--desktop);font-family:var(--digi--global--typography--font-family--default);cursor:pointer;border:none}.digi-code-example__code-expand.sc-digi-code-example:hover{background:var(--digi--color--background--inverted-3);text-decoration:underline}.digi-code-example__code-expand.sc-digi-code-example:focus-visible{outline:2px solid black;outline-offset:-3px;box-shadow:0px 0px 0px 5px inset white}.digi-code-example--no-controls.digi-code-example--inactive.sc-digi-code-example .digi-code-example__codeblock.sc-digi-code-example{height:64px}.digi-code-example__copy-button.sc-digi-code-example{--digi--button--padding--small:0;--digi--button--padding--medium:0;--digi--button--padding--large:0}.digi-code-example__code-expand-icon.sc-digi-code-example{--digi--icon--color:var(--digi--color--text--inverted);transition:ease-in-out var(--digi--animation--duration--base) all}.digi-code-example__code-expand-icon--open.sc-digi-code-example{transform:rotate(180deg)}.digi-code-example__fade.sc-digi-code-example{position:absolute;width:100%;bottom:0;height:var(--digi--padding--largest-2)}.digi-code-example__fade--light.sc-digi-code-example{background-image:linear-gradient(0deg, white, transparent)}.digi-code-example__fade--dark.sc-digi-code-example{--digi--color--background--inverted-3:#272727;background-image:linear-gradient(0deg, var(--digi--color--background--inverted-3), transparent)}.slot__controls.sc-digi-code-example{margin-bottom:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls{display:flex;flex-direction:column;gap:var(--digi--padding--smaller)}.sc-digi-code-example-s .slot__controls[hidden]{display:none}.sc-digi-code-example-s .slot__controls digi-form-fieldset,.sc-digi-code-example-s .slot__controls digi-form-select,.sc-digi-code-example-s .slot__controls digi-form-fieldset+digi-form-checkbox,.sc-digi-code-example-s .slot__controls .divider{display:block;border-bottom:1px solid var(--digi--color--border--neutral-2);padding-bottom:var(--digi--padding--smaller);margin-bottom:var(--digi--padding--medium)}";
@@ -137,17 +137,17 @@ const CodeExample = class {
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (index.h("div", { key: '1fc09f95af1e8f599b593ddad279743574ded843', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, index.h("div", { key: '696edf1c732923293a2406393207eecd921b17de', class: {
+        return (index.h("div", { key: '603ebe1a3504155b2766dea1096072c54f519862', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, index.h("div", { key: '9ffaf18a274b43e1287f6d23c32b4b31d799ca25', class: {
                 'digi-code-example__container': true
-            } }, index.h("div", { key: '9cc7fa9e045bbeda26fa4b8d9f96efebc24da263', class: "digi-code-example__example" }, index.h("slot", { key: '01a468003e94818b1459b62b90a83a8304acaaa8' })), !this.afHideCode && (index.h("div", { key: '565f2d91029c63a867e3f80c12c736e5b03deec9', class: "digi-code-example__code" }, this.showMoreButton && (index.h("button", { key: '3cea8c377900e8244bc164318875b3e2b8c0b1a3', class: "digi-code-example__code-expand", "aria-label": this.isActive ? text._t.code.show_less : text._t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? text._t.code.show_less : text._t.code.show_more, ' ', index.h("digi-icon-chevron-down", { key: '1b2260b6ba50e105d1cf7cfbd77b6506904ad138', class: {
+            } }, index.h("div", { key: '584b0b51094503b895a4d54dad15ce8fdfcd363a', class: "digi-code-example__example" }, index.h("slot", { key: '877772e56f694c7a42228b8c5207e508024b61dd' })), !this.afHideCode && (index.h("div", { key: '5c5405a83e851d1a9ed72ead2bbdfef9ff2b5802', class: "digi-code-example__code" }, this.showMoreButton && (index.h("button", { key: 'ab8d2d0f42c51a4dd5b69d5f5cd4f22375412697', class: "digi-code-example__code-expand", "aria-label": this.isActive ? text._t.code.show_less : text._t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? text._t.code.show_less : text._t.code.show_more, ' ', index.h("digi-icon-chevron-down", { key: '95f28b0a1afa91d8b6203f5d455c7902d1fc2b48', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), index.h("div", { key: '5d3fc7f0415d1c7bf698d7275d3d04ca0f5fd4c5', class: {
+            }, "aria-hidden": "true" }))), index.h("div", { key: '7112ab4271640b008598c59cb29420a847436212', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, index.h("digi-code-block", { key: 'c1caedb22bf5d4ebe05cb060e1500b9c25bb0865', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (index.h("div", { class: {
+            } }, index.h("digi-code-block", { key: 'd3a6ef16e27fc4f614b20b7a98d552e46d858f52', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (index.h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'

package/dist/cjs/digi-code.cjs.entry.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cfa8e9be.js');
+const codeVariation_enum = require('./code-variation.enum-c4a4e6fd.js');
+const prismGit = require('./prism-git-df985529.js');
+
+const codeCss = "digi-code{--digi--code--background:var(--digi--color--background--primary)}digi-code .digi-code{border-radius:0.3em;border:var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);padding:0 0.5em;display:inline-block}digi-code .digi-code--light{background:#fefefe;}digi-code .digi-code--light code[class*=language-]{color:#545454;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}digi-code .digi-code--light code[class*=language-]{white-space:normal}digi-code .digi-code--light .token.comment,digi-code .digi-code--light .token.prolog,digi-code .digi-code--light .token.doctype,digi-code .digi-code--light .token.cdata{color:#696969}digi-code .digi-code--light .token.punctuation{color:#545454}digi-code .digi-code--light .token.property,digi-code .digi-code--light .token.tag,digi-code .digi-code--light .token.constant,digi-code .digi-code--light .token.symbol,digi-code .digi-code--light .token.deleted{color:#007faa}digi-code .digi-code--light .token.boolean,digi-code .digi-code--light .token.number{color:#008000}digi-code .digi-code--light .token.selector,digi-code .digi-code--light .token.attr-name,digi-code .digi-code--light .token.string,digi-code .digi-code--light .token.char,digi-code .digi-code--light .token.builtin,digi-code .digi-code--light .token.inserted{color:#aa5d00}digi-code .digi-code--light .token.operator,digi-code .digi-code--light .token.entity,digi-code .digi-code--light .token.url,digi-code .digi-code--light .language-css .token.string,digi-code .digi-code--light .style .token.string,digi-code .digi-code--light .token.variable{color:#008000}digi-code .digi-code--light .token.atrule,digi-code .digi-code--light .token.attr-value,digi-code .digi-code--light .token.function{color:#aa5d00}digi-code .digi-code--light .token.keyword{color:#d91e18}digi-code .digi-code--light .token.regex,digi-code .digi-code--light .token.important{color:#d91e18}digi-code .digi-code--light .token.important,digi-code .digi-code--light .token.bold{font-weight:bold}digi-code .digi-code--light .token.italic{font-style:italic}digi-code .digi-code--light .token.entity{cursor:help}@media screen and (-ms-high-contrast: active){digi-code .digi-code--light code[class*=language-]{color:windowText;background:window}digi-code .digi-code--light code[class*=language-]{background:window}digi-code .digi-code--light .token.important{background:highlight;color:window;font-weight:normal}digi-code .digi-code--light .token.atrule,digi-code .digi-code--light .token.attr-value,digi-code .digi-code--light .token.function,digi-code .digi-code--light .token.keyword,digi-code .digi-code--light .token.operator,digi-code .digi-code--light .token.selector{font-weight:bold}digi-code .digi-code--light .token.attr-value,digi-code .digi-code--light .token.comment,digi-code .digi-code--light .token.doctype,digi-code .digi-code--light .token.function,digi-code .digi-code--light .token.keyword,digi-code .digi-code--light .token.operator,digi-code .digi-code--light .token.property,digi-code .digi-code--light .token.string{color:highlight}digi-code .digi-code--light .token.attr-value,digi-code .digi-code--light .token.url{font-weight:normal}}digi-code .digi-code--dark{--digi--color--background--inverted-3:#272727;background:var(--digi--color--background--inverted-3);}digi-code .digi-code--dark code[class*=language-]{color:#f8f8f2;background:none;font-family:var(--digi--global--typography--font-family--mono);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}digi-code .digi-code--dark code[class*=language-]{white-space:normal}digi-code .digi-code--dark .token.comment,digi-code .digi-code--dark .token.prolog,digi-code .digi-code--dark .token.doctype,digi-code .digi-code--dark .token.cdata{color:#d4d0ab}digi-code .digi-code--dark .token.punctuation{color:#fefefe}digi-code .digi-code--dark .token.property,digi-code .digi-code--dark .token.tag,digi-code .digi-code--dark .token.constant,digi-code .digi-code--dark .token.symbol,digi-code .digi-code--dark .token.deleted{color:#ffa07a}digi-code .digi-code--dark .token.boolean,digi-code .digi-code--dark .token.number{color:#00e0e0}digi-code .digi-code--dark .token.selector,digi-code .digi-code--dark .token.attr-name,digi-code .digi-code--dark .token.string,digi-code .digi-code--dark .token.char,digi-code .digi-code--dark .token.builtin,digi-code .digi-code--dark .token.inserted{color:#abe338}digi-code .digi-code--dark .token.operator,digi-code .digi-code--dark .token.entity,digi-code .digi-code--dark .token.url,digi-code .digi-code--dark .language-css .token.string,digi-code .digi-code--dark .style .token.string,digi-code .digi-code--dark .token.variable{color:#00e0e0}digi-code .digi-code--dark .token.atrule,digi-code .digi-code--dark .token.attr-value,digi-code .digi-code--dark .token.function{color:#ffd700}digi-code .digi-code--dark .token.keyword{color:#00e0e0}digi-code .digi-code--dark .token.regex,digi-code .digi-code--dark .token.important{color:#ffd700}digi-code .digi-code--dark .token.important,digi-code .digi-code--dark .token.bold{font-weight:bold}digi-code .digi-code--dark .token.italic{font-style:italic}digi-code .digi-code--dark .token.entity{cursor:help}@media screen and (-ms-high-contrast: active){digi-code .digi-code--dark code[class*=language-]{color:windowText;background:window}digi-code .digi-code--dark code[class*=language-]{background:window}digi-code .digi-code--dark .token.important{background:highlight;color:window;font-weight:normal}digi-code .digi-code--dark .token.atrule,digi-code .digi-code--dark .token.attr-value,digi-code .digi-code--dark .token.function,digi-code .digi-code--dark .token.keyword,digi-code .digi-code--dark .token.operator,digi-code .digi-code--dark .token.selector{font-weight:bold}digi-code .digi-code--dark .token.attr-value,digi-code .digi-code--dark .token.comment,digi-code .digi-code--dark .token.doctype,digi-code .digi-code--dark .token.function,digi-code .digi-code--dark .token.keyword,digi-code .digi-code--dark .token.operator,digi-code .digi-code--dark .token.property,digi-code .digi-code--dark .token.string{color:highlight}digi-code .digi-code--dark .token.attr-value,digi-code .digi-code--dark .token.url{font-weight:normal}}";
+const DigiCodeStyle0 = codeCss;
+
+const Code = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.highlightedCode = undefined;
+        this.afCode = undefined;
+        this.afVariation = codeVariation_enum.CodeVariation.LIGHT;
+        this.afLanguage = codeVariation_enum.CodeLanguage.HTML;
+        this.afLang = 'en';
+    }
+    componentWillLoad() {
+        prismGit.Prism.manual = true;
+        this.formatCode();
+    }
+    formatCode() {
+        if (this.afCode && this.afLanguage) {
+            this.highlightedCode = prismGit.Prism.highlight(this.afCode, prismGit.Prism.languages[this.afLanguage], this.afLanguage);
+        }
+    }
+    get cssModifiers() {
+        return {
+            'digi-code--light': this.afVariation === codeVariation_enum.CodeVariation.LIGHT,
+            'digi-code--dark': this.afVariation === codeVariation_enum.CodeVariation.DARK
+        };
+    }
+    render() {
+        return (index.h("span", { key: '034c2c4595c7bac40ba96fa75b9f13863473e9f1', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, index.h("code", { key: '88a6cef2ed4bb86079b66e93b115de8e2aee66be', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+    }
+    static get watchers() { return {
+        "afCode": ["formatCode"]
+    }; }
+};
+Code.style = DigiCodeStyle0;
+
+exports.digi_code = Code;