@designsystem-se/af 35.3.1 → 35.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/digi-bar-chart.js +1 -1
- package/components/digi-chart-line.js +1 -1
- package/components/digi-code-block.js +1 -1
- package/components/digi-code-example.js +1 -1
- package/components/digi-info-card.js +1 -1
- package/components/digi-link-button.js +3 -1
- package/components/p-472bc7d3.js +129 -0
- package/custom-elements.json +6 -2
- package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
- package/dist/cjs/digi-bar-chart.cjs.entry.js +1 -1
- package/dist/cjs/digi-chart-line.cjs.entry.js +1 -1
- package/dist/cjs/digi-code-block_3.cjs.entry.js +1 -1
- package/dist/cjs/digi-info-card.cjs.entry.js +1 -1
- package/dist/cjs/digi-link-button.cjs.entry.js +2 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/_chart/bar-chart/bar-chart.css +13 -19
- package/dist/collection/components/_chart/chart-line/chart-line.css +19 -23
- package/dist/collection/components/_code/code-block/code-block.css +2 -2
- package/dist/collection/components/_info-card/info-card/info-card.js +5 -5
- package/dist/collection/components/_link/link-button/link-button.js +24 -1
- package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
- package/dist/digi-arbetsformedlingen/p-07fd5ccf.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/p-5aae7437.entry.js +1 -0
- package/dist/digi-arbetsformedlingen/{p-c04b06a2.entry.js → p-5ac3d7a9.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-f1a6524e.entry.js → p-83b3f053.entry.js} +1 -1
- package/dist/digi-arbetsformedlingen/{p-0c271457.entry.js → p-cb8e7e0a.entry.js} +1 -1
- package/dist/esm/digi-arbetsformedlingen.js +1 -1
- package/dist/esm/digi-bar-chart.entry.js +1 -1
- package/dist/esm/digi-chart-line.entry.js +1 -1
- package/dist/esm/digi-code-block_3.entry.js +1 -1
- package/dist/esm/digi-info-card.entry.js +1 -1
- package/dist/esm/digi-link-button.entry.js +2 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/_info-card/info-card/info-card.d.ts +4 -4
- package/dist/types/components/_link/link-button/link-button.d.ts +5 -0
- package/dist/types/components.d.ts +18 -8
- package/hydrate/index.js +7 -5
- package/hydrate/index.mjs +7 -5
- package/package.json +1 -1
- package/components/p-2bc16106.js +0 -129
- package/dist/digi-arbetsformedlingen/p-bd6e0b22.entry.js +0 -1
- package/dist/digi-arbetsformedlingen/p-d8b9b535.entry.js +0 -1
|
@@ -91,7 +91,7 @@ function band() {
|
|
|
91
91
|
return initRange.apply(rescale(), arguments);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
const barChartCss = ".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 .chartTitle.sc-digi-bar-chart
|
|
94
|
+
const barChartCss = ".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 .topWrapper.sc-digi-bar-chart,.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart .digi-typography.sc-digi-bar-chart{display:flex;flex-direction:column;gap:0.75rem}.sc-digi-bar-chart-h .topWrapper.sc-digi-bar-chart{margin-bottom:0.75rem}.sc-digi-bar-chart-h .chartTitle.sc-digi-bar-chart{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.sc-digi-bar-chart-h .buttonWrapper.sc-digi-bar-chart{--digi--button--padding--medium:4px 4px 0.8125rem 0}.sc-digi-bar-chart-h .chartTooltip.sc-digi-bar-chart{box-sizing:border-box;position:absolute;background-color:rgba(250, 250, 250, 0.98);color:black;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.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;font-size:0.875rem;display:none}.sc-digi-bar-chart-h .close.sc-digi-bar-chart{--digi--icon--color:black;cursor:pointer;margin-top:-5px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar{height:10px;width:10px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-track,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-track{background:whitesmoke;border-radius:4px}.sc-digi-bar-chart-h .legend.sc-digi-bar-chart::-webkit-scrollbar-thumb,.sc-digi-bar-chart-h .table.sc-digi-bar-chart::-webkit-scrollbar-thumb{background-color:lightgray;border-radius:4px;border:0}.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: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}";
|
|
95
95
|
const DigiBarChartStyle0 = barChartCss;
|
|
96
96
|
|
|
97
97
|
const barChart = /*@__PURE__*/ proxyCustomElement(class barChart extends H {
|
|
@@ -713,7 +713,7 @@ function basis(context) {
|
|
|
713
713
|
return new Basis(context);
|
|
714
714
|
}
|
|
715
715
|
|
|
716
|
-
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}.
|
|
716
|
+
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}.chart.sc-digi-chart-line{box-sizing:content-box;width:auto}.topWrapper.sc-digi-chart-line,.chartTitle.sc-digi-chart-line .digi-typography.sc-digi-chart-line{display:flex;flex-direction:column;gap:0.75rem}.topWrapper.sc-digi-chart-line{margin-bottom:0.75rem}.chartTitle.sc-digi-chart-line{--MARGIN--HEADING-2:0;--MARGIN--HEADING-3:0;--MARGIN--HEADING-4:0;--MARGIN--HEADING-5:0;--MARGIN--HEADING-6:0}.buttonWrapper.sc-digi-chart-line{--digi--button--padding--medium:0 0 0.75rem 0}.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}";
|
|
717
717
|
const DigiChartLineStyle0 = chartLineCss;
|
|
718
718
|
|
|
719
719
|
const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
|
|
@@ -4,7 +4,7 @@ import { b as ButtonVariation, B as ButtonSize } from './p-f518a4cf.js';
|
|
|
4
4
|
import { _ as _t } from './p-08cf2c0e.js';
|
|
5
5
|
import { r as randomIdGenerator } from './p-ffe5c0e8.js';
|
|
6
6
|
import { d as defineCustomElement$7 } from './p-e8fc33ed.js';
|
|
7
|
-
import { d as defineCustomElement$6 } from './p-
|
|
7
|
+
import { d as defineCustomElement$6 } from './p-472bc7d3.js';
|
|
8
8
|
import { d as defineCustomElement$5 } from './p-cfa81e91.js';
|
|
9
9
|
import { d as defineCustomElement$4 } from './p-cf527784.js';
|
|
10
10
|
import { d as defineCustomElement$3 } from './p-a90980f7.js';
|
|
@@ -67,7 +67,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends H {
|
|
|
67
67
|
};
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (h("div", { key: '
|
|
70
|
+
return (h("div", { key: 'b87aaf790c4736075233c8cf0d15e16e757e67f1', class: Object.assign({ 'digi-info-card': true }, this.cssModifiers) }, h("div", { key: '4f645a39d73a782d44ce58d6027805daa07ce6b6', class: "digi-info-card__content" }, h("div", { key: '3c0e7f91e3ac681c051eb24688c88fb28a1cf6bf', class: "digi-info-card__icon" }, this.hasListIcon && (h("span", { key: '53ddc991ebbd95b6a2076f491187a4c8de274b58', class: "digi-info-card__icon" }, h("slot", { key: '182ee887c37e7dea4a4ab98189ea08af15418944', name: "icon" })))), h(this.afHeadingLevel, { key: '8a2b1fbd4cf78cc706daf2fc74157587c16e43b8', class: "digi-info-card__heading" }, this.afHeading), h("digi-typography", { key: '6c0ccbf7115dd68e2f7e6e0b55daac41d9285c2d' }, h("slot", { key: '34f5f0b4526721271edd8095ae78e8812142ea10' })), this.shouldRenderInternalLink && (h("digi-link-internal", { key: 'c4f3442b1b6c22ecc6d0cd12f37af5f4707244b1', class: "digi-info-card__link", afHref: this.afLinkHref, onAfOnClick: (e) => this.clickLinkHandler(e), hideVisitedColor: this.hideVisitedColor }, this.afLinkText)))));
|
|
71
71
|
}
|
|
72
72
|
get hostElement() { return this; }
|
|
73
73
|
static get watchers() { return {
|
|
@@ -11,6 +11,7 @@ const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends H {
|
|
|
11
11
|
this.__registerHost();
|
|
12
12
|
this.afOnClick = createEvent(this, "afOnClick", 7);
|
|
13
13
|
this.afHref = undefined;
|
|
14
|
+
this.afAriaLabel = undefined;
|
|
14
15
|
this.afVariation = LinkButtonVariation.PRIMARY;
|
|
15
16
|
this.afOverrideLink = false;
|
|
16
17
|
this.afLinkContainer = false;
|
|
@@ -54,12 +55,13 @@ const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends H {
|
|
|
54
55
|
};
|
|
55
56
|
}
|
|
56
57
|
render() {
|
|
57
|
-
return (h(Host, { key: '
|
|
58
|
+
return (h(Host, { key: '75f43380c8844ae0337b29691feed99b0acba6ed', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '384b103cdda3806ceebf6c3d0c3e2e35b1979fce', href: this.afHref, "aria-label": this.afAriaLabel, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, h("span", { key: '55c1523b696faef38a4b4e00f2b9d64bd52cd2f1', class: "digi-link-button__text" }, h("slot", { key: 'e516eadc702eca45be24e04d5f9d0c436dd6ef9a' })), this.hasNotification && h("slot", { key: '0d4fc47c6a63ef621f0e5b06a5704f78a6988835', name: "notification" }), h("digi-icon-chevron-right", { key: 'b7c058a116d956771ef1f992a82cf2735c1230e4', class: "digi-link-button__icon" }))), this.afLinkContainer && (h(Fragment, { key: 'f8483003f9702cb3fe573079bedda82267e710fb' }, h("slot", { key: '04f83d58576061d3db853e4bb678ffd6177ba871' }), this.hasNotification && h("slot", { key: 'b4629a7a5e7c491c6c1dc9704aaab949370cc801', name: "notification" })))));
|
|
58
59
|
}
|
|
59
60
|
get hostElement() { return this; }
|
|
60
61
|
static get style() { return DigiLinkButtonStyle0; }
|
|
61
62
|
}, [6, "digi-link-button", {
|
|
62
63
|
"afHref": [1, "af-href"],
|
|
64
|
+
"afAriaLabel": [1, "af-aria-label"],
|
|
63
65
|
"afVariation": [1, "af-variation"],
|
|
64
66
|
"afOverrideLink": [4, "af-override-link"],
|
|
65
67
|
"afLinkContainer": [4, "af-link-container"],
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
|
|
2
|
+
import { b as CodeBlockVariation, a as CodeBlockLanguage } from './p-5a256d98.js';
|
|
3
|
+
import { P as Prism } from './p-f25f9ca8.js';
|
|
4
|
+
import './p-717306ef.js';
|
|
5
|
+
import './p-a4a001e1.js';
|
|
6
|
+
import { b as ButtonVariation, B as ButtonSize } from './p-f518a4cf.js';
|
|
7
|
+
import './p-7e32c40b.js';
|
|
8
|
+
import './p-dcdffb3c.js';
|
|
9
|
+
import './p-5d21a361.js';
|
|
10
|
+
import './p-ad16c7a1.js';
|
|
11
|
+
import './p-f40f4b2a.js';
|
|
12
|
+
import './p-1f68d501.js';
|
|
13
|
+
import './p-ee88e3f1.js';
|
|
14
|
+
import './p-8142cc73.js';
|
|
15
|
+
import './p-905ccb30.js';
|
|
16
|
+
import './p-bc3d2778.js';
|
|
17
|
+
import './p-c8429245.js';
|
|
18
|
+
import './p-06625463.js';
|
|
19
|
+
import './p-f447b984.js';
|
|
20
|
+
import './p-9c5a93d8.js';
|
|
21
|
+
import './p-7933b555.js';
|
|
22
|
+
import './p-0f6c0360.js';
|
|
23
|
+
import './p-814ca2ad.js';
|
|
24
|
+
import './p-d8a98b3b.js';
|
|
25
|
+
import './p-07303cb5.js';
|
|
26
|
+
import './p-5f8dc01a.js';
|
|
27
|
+
import './p-2a023831.js';
|
|
28
|
+
import './p-5ba6737a.js';
|
|
29
|
+
import './p-e4a9f8f0.js';
|
|
30
|
+
import './p-f2a6768b.js';
|
|
31
|
+
import './p-40657c82.js';
|
|
32
|
+
import './p-f600576a.js';
|
|
33
|
+
import './p-3b20ec86.js';
|
|
34
|
+
import './p-9dd5d6c8.js';
|
|
35
|
+
import './p-77a93845.js';
|
|
36
|
+
import './p-06f939ab.js';
|
|
37
|
+
import './p-8cd2d6dd.js';
|
|
38
|
+
import './p-484a1d6d.js';
|
|
39
|
+
import './p-0f3fbb1e.js';
|
|
40
|
+
import './p-820e795b.js';
|
|
41
|
+
import './p-46cbbcb5.js';
|
|
42
|
+
import './p-d74742b8.js';
|
|
43
|
+
import './p-6e383896.js';
|
|
44
|
+
import './p-4bad4fb0.js';
|
|
45
|
+
import './p-d1886fff.js';
|
|
46
|
+
import './p-a6ca40fc.js';
|
|
47
|
+
import './p-b0e88537.js';
|
|
48
|
+
import './p-cdcaf0eb.js';
|
|
49
|
+
import { _ as _t } from './p-08cf2c0e.js';
|
|
50
|
+
import { d as defineCustomElement$2 } from './p-e8fc33ed.js';
|
|
51
|
+
import { d as defineCustomElement$1 } from './p-1440ff46.js';
|
|
52
|
+
|
|
53
|
+
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--grayscale--900);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:break-word;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(--digi--color--text--secondary);--digi--button--color--text--function--hover:var(--digi--color--text--secondary);--digi--button--color--icon--function--default:var(--digi--color--text--secondary);--digi--button--color--icon--function--hover:var(--digi--color--text--secondary);--digi--button--color--text--function--focus:var(--digi--color--text--secondary);--digi--button--color--icon--function--focus:var(--digi--color--text--secondary)}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:break-word;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-]{background:#272727}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)}";
|
|
54
|
+
const DigiCodeBlockStyle0 = codeBlockCss;
|
|
55
|
+
|
|
56
|
+
const CodeBlock = /*@__PURE__*/ proxyCustomElement(class CodeBlock extends H {
|
|
57
|
+
constructor() {
|
|
58
|
+
super();
|
|
59
|
+
this.__registerHost();
|
|
60
|
+
this.highlightedCode = undefined;
|
|
61
|
+
this.afCode = undefined;
|
|
62
|
+
this.afVariation = CodeBlockVariation.DARK;
|
|
63
|
+
this.afLanguage = CodeBlockLanguage.HTML;
|
|
64
|
+
this.afLang = 'en';
|
|
65
|
+
this.afHideToolbar = false;
|
|
66
|
+
}
|
|
67
|
+
componentWillLoad() {
|
|
68
|
+
Prism.manual = true;
|
|
69
|
+
this.formatCode();
|
|
70
|
+
}
|
|
71
|
+
formatCode() {
|
|
72
|
+
this.highlightedCode = Prism.highlight(this.afCode, Prism.languages[this.afLanguage], this.afLanguage);
|
|
73
|
+
}
|
|
74
|
+
copyButtonClickHandler() {
|
|
75
|
+
navigator.clipboard.writeText(this.afCode).then(() => {
|
|
76
|
+
// console.log('hurra!');
|
|
77
|
+
}, (err) => {
|
|
78
|
+
// console.log('åh nej!', err);
|
|
79
|
+
console.error(err);
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
get cssModifiers() {
|
|
83
|
+
return {
|
|
84
|
+
'digi-code-block--light': this.afVariation === CodeBlockVariation.LIGHT,
|
|
85
|
+
'digi-code-block--dark': this.afVariation === CodeBlockVariation.DARK
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
render() {
|
|
89
|
+
return (h("div", { key: 'efc4eab4b814bc5ec01559f89d951d694ed695e1', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: '85b42423a9f62a227739e3107972251f9a825a97', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: '266c28f90184f60eab0fc1febf743a53f46aab3b', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: '6230d33b96b03f7ea584d3b93efff81f636bad18', class: "digi-code-block__toolbar" }, h("digi-button", { key: 'b54ad1cc57faafeb0f82cc0de0865cf3e585fddf', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: 'f223bd2e83be5d853c78c0322d69c7fe34cd257a', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
|
|
90
|
+
}
|
|
91
|
+
static get watchers() { return {
|
|
92
|
+
"afCode": ["formatCode"]
|
|
93
|
+
}; }
|
|
94
|
+
static get style() { return DigiCodeBlockStyle0; }
|
|
95
|
+
}, [0, "digi-code-block", {
|
|
96
|
+
"afCode": [1, "af-code"],
|
|
97
|
+
"afVariation": [1, "af-variation"],
|
|
98
|
+
"afLanguage": [1, "af-language"],
|
|
99
|
+
"afLang": [1, "af-lang"],
|
|
100
|
+
"afHideToolbar": [4, "af-hide-toolbar"],
|
|
101
|
+
"highlightedCode": [32]
|
|
102
|
+
}, undefined, {
|
|
103
|
+
"afCode": ["formatCode"]
|
|
104
|
+
}]);
|
|
105
|
+
function defineCustomElement() {
|
|
106
|
+
if (typeof customElements === "undefined") {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
const components = ["digi-code-block", "digi-button", "digi-icon-copy"];
|
|
110
|
+
components.forEach(tagName => { switch (tagName) {
|
|
111
|
+
case "digi-code-block":
|
|
112
|
+
if (!customElements.get(tagName)) {
|
|
113
|
+
customElements.define(tagName, CodeBlock);
|
|
114
|
+
}
|
|
115
|
+
break;
|
|
116
|
+
case "digi-button":
|
|
117
|
+
if (!customElements.get(tagName)) {
|
|
118
|
+
defineCustomElement$2();
|
|
119
|
+
}
|
|
120
|
+
break;
|
|
121
|
+
case "digi-icon-copy":
|
|
122
|
+
if (!customElements.get(tagName)) {
|
|
123
|
+
defineCustomElement$1();
|
|
124
|
+
}
|
|
125
|
+
break;
|
|
126
|
+
} });
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export { CodeBlock as C, defineCustomElement as d };
|
package/custom-elements.json
CHANGED
|
@@ -6607,7 +6607,7 @@
|
|
|
6607
6607
|
"attributes": [
|
|
6608
6608
|
{
|
|
6609
6609
|
"name": "af-border-position",
|
|
6610
|
-
"description": "Sätter
|
|
6610
|
+
"description": "Sätter position för kantlinjen. Kan vara 'top' eller 'left'. Detta har endast genomslag om 'af-type' är 'related'."
|
|
6611
6611
|
},
|
|
6612
6612
|
{
|
|
6613
6613
|
"name": "af-heading",
|
|
@@ -6627,7 +6627,7 @@
|
|
|
6627
6627
|
},
|
|
6628
6628
|
{
|
|
6629
6629
|
"name": "af-size",
|
|
6630
|
-
"description": "Sätter storlek på kortet. Kan vara '
|
|
6630
|
+
"description": "Sätter storlek på kortet. Kan vara 'Standard'."
|
|
6631
6631
|
},
|
|
6632
6632
|
{
|
|
6633
6633
|
"name": "af-svg-aria-hidden",
|
|
@@ -6840,6 +6840,10 @@
|
|
|
6840
6840
|
"value": ""
|
|
6841
6841
|
},
|
|
6842
6842
|
"attributes": [
|
|
6843
|
+
{
|
|
6844
|
+
"name": "af-aria-label",
|
|
6845
|
+
"description": "Sätter attributet 'aria-label'."
|
|
6846
|
+
},
|
|
6843
6847
|
{
|
|
6844
6848
|
"name": "af-fullwidth",
|
|
6845
6849
|
"description": "Fullbredd."
|