@politiet/sheriff-web-components 0.6.5 → 1.0.0-rc.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/dist/sds-icon/sds-icon-loader.d.ts +16 -3
- package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon-loader.js +27 -10
- package/dist/sds-icon/sds-icon-loader.js.map +1 -1
- package/dist/sds-icon/sds-icon.d.ts +3 -3
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.js +6 -32
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sheriff-web-components.js +30 -19
- package/package.json +130 -126
|
@@ -1,7 +1,20 @@
|
|
|
1
1
|
export type IconPromise = (iconName: string) => Promise<string>;
|
|
2
|
+
export declare const loadCdnIcon: IconPromise;
|
|
3
|
+
export declare const LocalIconProvider: IconPromise;
|
|
4
|
+
export declare const CdnIconProvider: IconPromise;
|
|
2
5
|
export declare class SDSIconLoader {
|
|
3
|
-
private readonly cache;
|
|
4
|
-
resolver
|
|
5
|
-
|
|
6
|
+
private static readonly cache;
|
|
7
|
+
private static resolver;
|
|
8
|
+
/**
|
|
9
|
+
* Registers a custom icon resolver.
|
|
10
|
+
* @param resolver - The custom icon resolver.
|
|
11
|
+
*/
|
|
12
|
+
static registerResolver(resolver: IconPromise): void;
|
|
13
|
+
/**
|
|
14
|
+
* Resolves an icon by its name using the registered resolver.
|
|
15
|
+
* @param name - The name of the icon to resolve.
|
|
16
|
+
* @returns A promise that resolves to the SVG content.
|
|
17
|
+
*/
|
|
18
|
+
static resolve(name: string): Promise<string>;
|
|
6
19
|
}
|
|
7
20
|
//# sourceMappingURL=sds-icon-loader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAGhE,eAAO,MAAM,WAAW,EAAE,WAMvB,CAAC;AAGJ,eAAO,MAAM,iBAAiB,EAAE,WACwD,CAAC;AAGzF,eAAO,MAAM,eAAe,EAAE,WAAyB,CAAC;AAExD,qBAAa,aAAa;IACzB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAA6B;IAC1D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAgC;IAEvD;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAIpD;;;;OAIG;IACH,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;CAgB7C"}
|
|
@@ -1,17 +1,33 @@
|
|
|
1
|
-
//
|
|
2
|
-
const
|
|
1
|
+
// Default resolver: Fetch from CDN
|
|
2
|
+
export const loadCdnIcon = async (name) => await fetch(`https://unpkg.com/@politiet/sheriff-icons/dist/${name}.svg`).then((response) => {
|
|
3
|
+
if (!response.ok) {
|
|
4
|
+
throw new TypeError(`Sheriff: unknown icon: '${name}'`);
|
|
5
|
+
}
|
|
6
|
+
return response.text();
|
|
7
|
+
});
|
|
8
|
+
// Local resolver: Import from local node_modules
|
|
9
|
+
export const LocalIconProvider = async (name) => await import(`@politiet/sheriff-icons/dist/${name}.js`).then(({ default: svg }) => svg);
|
|
10
|
+
// CDN resolver
|
|
11
|
+
export const CdnIconProvider = loadCdnIcon;
|
|
3
12
|
export class SDSIconLoader {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Registers a custom icon resolver.
|
|
15
|
+
* @param resolver - The custom icon resolver.
|
|
16
|
+
*/
|
|
17
|
+
static registerResolver(resolver) {
|
|
18
|
+
this.resolver = resolver;
|
|
7
19
|
}
|
|
8
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Resolves an icon by its name using the registered resolver.
|
|
22
|
+
* @param name - The name of the icon to resolve.
|
|
23
|
+
* @returns A promise that resolves to the SVG content.
|
|
24
|
+
*/
|
|
25
|
+
static resolve(name) {
|
|
9
26
|
const cached = this.cache.get(name);
|
|
10
27
|
if (cached != null) {
|
|
11
|
-
|
|
12
|
-
return;
|
|
28
|
+
return Promise.resolve(cached);
|
|
13
29
|
}
|
|
14
|
-
|
|
30
|
+
return this.resolver(name)
|
|
15
31
|
.catch((error) => {
|
|
16
32
|
console.error(`Failed to fetch icon '${name}':`, error);
|
|
17
33
|
return '';
|
|
@@ -20,7 +36,8 @@ export class SDSIconLoader {
|
|
|
20
36
|
this.cache.set(name, svg);
|
|
21
37
|
return svg;
|
|
22
38
|
});
|
|
23
|
-
void fetchIcon.then(onResolved);
|
|
24
39
|
}
|
|
25
40
|
}
|
|
41
|
+
SDSIconLoader.cache = new Map();
|
|
42
|
+
SDSIconLoader.resolver = CdnIconProvider;
|
|
26
43
|
//# sourceMappingURL=sds-icon-loader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,mCAAmC;AACnC,MAAM,CAAC,MAAM,WAAW,GAAgB,KAAK,EAAE,IAAY,EAAE,EAAE,CAC9D,MAAM,KAAK,CAAC,kDAAkD,IAAI,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;IAC3F,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QAClB,MAAM,IAAI,SAAS,CAAC,2BAA2B,IAAI,GAAG,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;AACxB,CAAC,CAAC,CAAC;AAEJ,iDAAiD;AACjD,MAAM,CAAC,MAAM,iBAAiB,GAAgB,KAAK,EAAE,IAAY,EAAE,EAAE,CACpE,MAAM,MAAM,CAAC,gCAAgC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;AAEzF,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAgB,WAAW,CAAC;AAExD,MAAM,OAAO,aAAa;IAIzB;;;OAGG;IACH,MAAM,CAAC,gBAAgB,CAAC,QAAqB;QAC5C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1B,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,OAAO,CAAC,IAAY;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACpC,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACpB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAChC,CAAC;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;aACxB,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YAChB,OAAO,CAAC,KAAK,CAAC,yBAAyB,IAAI,IAAI,EAAE,KAAK,CAAC,CAAC;YACxD,OAAO,EAAE,CAAC;QACX,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAC1B,OAAO,GAAG,CAAC;QACZ,CAAC,CAAC,CAAC;IACL,CAAC;;AA/BuB,mBAAK,GAAG,IAAI,GAAG,EAAkB,CAAC;AAC3C,sBAAQ,GAAgB,eAAe,CAAC","sourcesContent":["export type IconPromise = (iconName: string) => Promise<string>;\n\n// Default resolver: Fetch from CDN\nexport const loadCdnIcon: IconPromise = async (name: string) =>\n\tawait fetch(`https://unpkg.com/@politiet/sheriff-icons/dist/${name}.svg`).then((response) => {\n\t\tif (!response.ok) {\n\t\t\tthrow new TypeError(`Sheriff: unknown icon: '${name}'`);\n\t\t}\n\t\treturn response.text();\n\t});\n\n// Local resolver: Import from local node_modules\nexport const LocalIconProvider: IconPromise = async (name: string) =>\n\tawait import(`@politiet/sheriff-icons/dist/${name}.js`).then(({ default: svg }) => svg);\n\n// CDN resolver\nexport const CdnIconProvider: IconPromise = loadCdnIcon;\n\nexport class SDSIconLoader {\n\tprivate static readonly cache = new Map<string, string>();\n\tprivate static resolver: IconPromise = CdnIconProvider;\n\n\t/**\n\t * Registers a custom icon resolver.\n\t * @param resolver - The custom icon resolver.\n\t */\n\tstatic registerResolver(resolver: IconPromise): void {\n\t\tthis.resolver = resolver;\n\t}\n\n\t/**\n\t * Resolves an icon by its name using the registered resolver.\n\t * @param name - The name of the icon to resolve.\n\t * @returns A promise that resolves to the SVG content.\n\t */\n\tstatic resolve(name: string): Promise<string> {\n\t\tconst cached = this.cache.get(name);\n\t\tif (cached != null) {\n\t\t\treturn Promise.resolve(cached);\n\t\t}\n\n\t\treturn this.resolver(name)\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(`Failed to fetch icon '${name}':`, error);\n\t\t\t\treturn '';\n\t\t\t})\n\t\t\t.then((svg) => {\n\t\t\t\tthis.cache.set(name, svg);\n\t\t\t\treturn svg;\n\t\t\t});\n\t}\n}\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { type IconPromise } from './sds-icon-loader';
|
|
3
2
|
import { type IconType } from './sds-icon.icon-types';
|
|
4
3
|
import { type ColorType } from './sds-icon.color-types';
|
|
5
4
|
type IconSize = 's' | 'm';
|
|
@@ -13,13 +12,14 @@ interface SDSIconProps {
|
|
|
13
12
|
}
|
|
14
13
|
export declare class SDSIcon extends LitElement {
|
|
15
14
|
static styles: import("lit").CSSResult[];
|
|
16
|
-
private static readonly iconLoader;
|
|
17
|
-
static registerResolver(resolver: IconPromise): void;
|
|
18
15
|
name: IconTypes;
|
|
19
16
|
size: IconSize;
|
|
20
17
|
color: IconColors;
|
|
21
18
|
label: string;
|
|
22
19
|
private svg;
|
|
20
|
+
/**
|
|
21
|
+
* Fetches the icon SVG content and updates the component state.
|
|
22
|
+
*/
|
|
23
23
|
private fetchIcon;
|
|
24
24
|
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
25
25
|
render(): import("lit").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AAC1B,KAAK,SAAS,GAAG,QAAQ,GAAG,EAAE,CAAC;AAC/B,KAAK,UAAU,GAAG,SAAS,GAAG,EAAE,CAAC;AAEjC,UAAU,YAAY;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,SAAS,CAAM;IACrB,IAAI,EAAE,QAAQ,CAAO;IACrB,KAAK,EAAE,UAAU,CAAM;IACvB,KAAK,EAAE,MAAM,CAAM;IAErD,OAAO,CAAC,GAAG,CAAc;IAElC;;OAEG;YACW,SAAS;IAcd,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQxE,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;IAGD,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,UAAU,EAAE,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;SACnG;KACD;CACD"}
|
|
@@ -4,14 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
var SDSIcon_1;
|
|
8
7
|
import { LitElement, html } from 'lit';
|
|
9
8
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
10
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
10
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
12
11
|
import { SDSIconLoader } from './sds-icon-loader';
|
|
13
12
|
import { styles } from './sds-icon.styles';
|
|
14
|
-
let SDSIcon =
|
|
13
|
+
let SDSIcon = class SDSIcon extends LitElement {
|
|
15
14
|
constructor() {
|
|
16
15
|
super(...arguments);
|
|
17
16
|
this.name = '';
|
|
@@ -20,19 +19,16 @@ let SDSIcon = SDSIcon_1 = class SDSIcon extends LitElement {
|
|
|
20
19
|
this.label = '';
|
|
21
20
|
this.svg = '';
|
|
22
21
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Fetches the icon SVG content and updates the component state.
|
|
24
|
+
*/
|
|
26
25
|
async fetchIcon() {
|
|
27
26
|
if (!this.name) {
|
|
28
27
|
this.svg = '';
|
|
29
28
|
return;
|
|
30
29
|
}
|
|
31
30
|
try {
|
|
32
|
-
|
|
33
|
-
SDSIcon_1.iconLoader.resolve(this.name, resolve);
|
|
34
|
-
});
|
|
35
|
-
this.svg = svg;
|
|
31
|
+
this.svg = await SDSIconLoader.resolve(this.name);
|
|
36
32
|
}
|
|
37
33
|
catch (error) {
|
|
38
34
|
console.error(`Failed to fetch SVG for icon '${this.name}':`, error);
|
|
@@ -60,7 +56,6 @@ let SDSIcon = SDSIcon_1 = class SDSIcon extends LitElement {
|
|
|
60
56
|
};
|
|
61
57
|
// Styling
|
|
62
58
|
SDSIcon.styles = [styles];
|
|
63
|
-
SDSIcon.iconLoader = new SDSIconLoader();
|
|
64
59
|
__decorate([
|
|
65
60
|
property({ type: String, reflect: true })
|
|
66
61
|
], SDSIcon.prototype, "name", void 0);
|
|
@@ -76,29 +71,8 @@ __decorate([
|
|
|
76
71
|
__decorate([
|
|
77
72
|
state()
|
|
78
73
|
], SDSIcon.prototype, "svg", void 0);
|
|
79
|
-
SDSIcon =
|
|
74
|
+
SDSIcon = __decorate([
|
|
80
75
|
customElement('sds-icon')
|
|
81
76
|
], SDSIcon);
|
|
82
77
|
export { SDSIcon };
|
|
83
|
-
/*
|
|
84
|
-
// Angular
|
|
85
|
-
declare module '@angular/core' {
|
|
86
|
-
interface IntrinsicElements {
|
|
87
|
-
'sds-icon': SDSIconProps;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Vue
|
|
92
|
-
declare module 'vue' {
|
|
93
|
-
export interface GlobalComponents {
|
|
94
|
-
'sds-icon': SDSIconProps;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Svelte
|
|
99
|
-
declare namespace svelteHTML {
|
|
100
|
-
interface HTMLAttributes<T> {
|
|
101
|
-
'sds-icon'?: SDSIconProps;
|
|
102
|
-
}
|
|
103
|
-
} */
|
|
104
78
|
//# sourceMappingURL=sds-icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sds-icon.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAiBpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIqC,SAAI,GAAc,EAAE,CAAC;QACrB,SAAI,GAAa,GAAG,CAAC;QACrB,UAAK,GAAe,EAAE,CAAC;QACvB,UAAK,GAAW,EAAE,CAAC;QAE7C,QAAG,GAAW,EAAE,CAAC;IAuCnC,CAAC;IArCA;;OAEG;IACK,KAAK,CAAC,SAAS;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,IAAI,CAAC;YACJ,IAAI,CAAC,GAAG,GAAG,MAAM,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,iCAAiC,IAAI,CAAC,IAAI,IAAI,EAAE,KAAK,CAAC,CAAC;YACrE,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;QACf,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChD,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;WAEF,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;YACxC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;iBACpD,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;KAEjC,IAAI,CAAC,IAAI;YACV,CAAC,CAAC,IAAI,CAAA,4BAA4B,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS;YAC/D,CAAC,CAAC,IAAI,CAAA,kCAAkC;SACnC,CAAC;IACT,CAAC;;AA9CD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAsB;AACrB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAsB;AACrB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwB;AACvB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAoB;AAE7C;IAAhB,KAAK,EAAE;oCAA0B;AATtB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAgDnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { SDSIconLoader } from './sds-icon-loader';\nimport { styles } from './sds-icon.styles';\n\n// Types\nimport { type IconType } from './sds-icon.icon-types';\nimport { type ColorType } from './sds-icon.color-types';\ntype IconSize = 's' | 'm';\ntype IconTypes = IconType | '';\ntype IconColors = ColorType | '';\n\ninterface SDSIconProps {\n\tname?: IconTypes;\n\tsize?: IconSize;\n\tcolor?: IconColors;\n\tlabel?: string;\n}\n\n@customElement('sds-icon')\nexport class SDSIcon extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) name: IconTypes = '';\n\t@property({ type: String, reflect: true }) size: IconSize = 'm';\n\t@property({ type: String, reflect: true }) color: IconColors = '';\n\t@property({ type: String, reflect: true }) label: string = '';\n\n\t@state() private svg: string = '';\n\n\t/**\n\t * Fetches the icon SVG content and updates the component state.\n\t */\n\tprivate async fetchIcon() {\n\t\tif (!this.name) {\n\t\t\tthis.svg = '';\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tthis.svg = await SDSIconLoader.resolve(this.name);\n\t\t} catch (error) {\n\t\t\tconsole.error(`Failed to fetch SVG for icon '${this.name}':`, error);\n\t\t\tthis.svg = '';\n\t\t}\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('name') && this.name) {\n\t\t\tvoid this.fetchIcon();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`<div\n\t\t\tclass=\"sds-icon\"\n\t\t\trole=\"${ifDefined(this.label ? 'img' : undefined)}\"\n\t\t\tstyle=\"${ifDefined(this.color ? `color:${this.color}` : undefined)}\"\n\t\t\taria-label=\"${ifDefined(this.label)}\"\n\t\t>\n\t\t\t${this.name\n\t\t\t\t? html`<slot aria-hidden=\"true\">${unsafeHTML(this.svg)}</slot>`\n\t\t\t\t: html`<slot aria-hidden=\"true\"></slot>`}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\t// HTML\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-icon': SDSIcon;\n\t}\n\n\t// React\n\tnamespace JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t'sds-icon': SDSIconProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;\n\t\t}\n\t}\n}\n"]}
|
|
@@ -1209,28 +1209,43 @@ class e extends i {
|
|
|
1209
1209
|
}
|
|
1210
1210
|
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
1211
1211
|
const o = e$2(e);
|
|
1212
|
-
const
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
this.cache = /* @__PURE__ */ new Map();
|
|
1216
|
-
this.resolver = loadIcon;
|
|
1212
|
+
const loadCdnIcon = async (name) => await fetch(`https://unpkg.com/@politiet/sheriff-icons/dist/${name}.svg`).then((response) => {
|
|
1213
|
+
if (!response.ok) {
|
|
1214
|
+
throw new TypeError(`Sheriff: unknown icon: '${name}'`);
|
|
1217
1215
|
}
|
|
1218
|
-
|
|
1216
|
+
return response.text();
|
|
1217
|
+
});
|
|
1218
|
+
const CdnIconProvider = loadCdnIcon;
|
|
1219
|
+
const _SDSIconLoader = class _SDSIconLoader {
|
|
1220
|
+
/**
|
|
1221
|
+
* Registers a custom icon resolver.
|
|
1222
|
+
* @param resolver - The custom icon resolver.
|
|
1223
|
+
*/
|
|
1224
|
+
static registerResolver(resolver) {
|
|
1225
|
+
this.resolver = resolver;
|
|
1226
|
+
}
|
|
1227
|
+
/**
|
|
1228
|
+
* Resolves an icon by its name using the registered resolver.
|
|
1229
|
+
* @param name - The name of the icon to resolve.
|
|
1230
|
+
* @returns A promise that resolves to the SVG content.
|
|
1231
|
+
*/
|
|
1232
|
+
static resolve(name) {
|
|
1219
1233
|
const cached = this.cache.get(name);
|
|
1220
1234
|
if (cached != null) {
|
|
1221
|
-
|
|
1222
|
-
return;
|
|
1235
|
+
return Promise.resolve(cached);
|
|
1223
1236
|
}
|
|
1224
|
-
|
|
1237
|
+
return this.resolver(name).catch((error) => {
|
|
1225
1238
|
console.error(`Failed to fetch icon '${name}':`, error);
|
|
1226
1239
|
return "";
|
|
1227
1240
|
}).then((svg) => {
|
|
1228
1241
|
this.cache.set(name, svg);
|
|
1229
1242
|
return svg;
|
|
1230
1243
|
});
|
|
1231
|
-
void fetchIcon.then(onResolved);
|
|
1232
1244
|
}
|
|
1233
|
-
}
|
|
1245
|
+
};
|
|
1246
|
+
_SDSIconLoader.cache = /* @__PURE__ */ new Map();
|
|
1247
|
+
_SDSIconLoader.resolver = CdnIconProvider;
|
|
1248
|
+
let SDSIconLoader = _SDSIconLoader;
|
|
1234
1249
|
const styles$e = i$4`
|
|
1235
1250
|
:host {
|
|
1236
1251
|
--icon-size: var(--sds-icon-size-m);
|
|
@@ -1263,19 +1278,16 @@ let SDSIcon = class extends r$2 {
|
|
|
1263
1278
|
this.label = "";
|
|
1264
1279
|
this.svg = "";
|
|
1265
1280
|
}
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1281
|
+
/**
|
|
1282
|
+
* Fetches the icon SVG content and updates the component state.
|
|
1283
|
+
*/
|
|
1269
1284
|
async fetchIcon() {
|
|
1270
1285
|
if (!this.name) {
|
|
1271
1286
|
this.svg = "";
|
|
1272
1287
|
return;
|
|
1273
1288
|
}
|
|
1274
1289
|
try {
|
|
1275
|
-
|
|
1276
|
-
SDSIcon.iconLoader.resolve(this.name, resolve);
|
|
1277
|
-
});
|
|
1278
|
-
this.svg = svg;
|
|
1290
|
+
this.svg = await SDSIconLoader.resolve(this.name);
|
|
1279
1291
|
} catch (error) {
|
|
1280
1292
|
console.error(`Failed to fetch SVG for icon '${this.name}':`, error);
|
|
1281
1293
|
this.svg = "";
|
|
@@ -1299,7 +1311,6 @@ let SDSIcon = class extends r$2 {
|
|
|
1299
1311
|
}
|
|
1300
1312
|
};
|
|
1301
1313
|
SDSIcon.styles = [styles$e];
|
|
1302
|
-
SDSIcon.iconLoader = new SDSIconLoader();
|
|
1303
1314
|
__decorateClass$f([
|
|
1304
1315
|
n2({ type: String, reflect: true })
|
|
1305
1316
|
], SDSIcon.prototype, "name", 2);
|
package/package.json
CHANGED
|
@@ -1,128 +1,132 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
2
|
+
"name": "@politiet/sheriff-web-components",
|
|
3
|
+
"version": "1.0.0-rc.0",
|
|
4
|
+
"description": "Sheriff Design System Web Components Library",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"./dist/",
|
|
11
|
+
"./README.md"
|
|
12
|
+
],
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"import": "./dist/index.js",
|
|
16
|
+
"require": "./dist/index.js",
|
|
17
|
+
"types": "./dist/index.d.ts"
|
|
18
|
+
},
|
|
19
|
+
"./react-wrappers": {
|
|
20
|
+
"import": "./dist/react-wrappers/index.js",
|
|
21
|
+
"require": "./dist/react-wrappers/index.js",
|
|
22
|
+
"types": "./dist/react-wrappers/index.d.ts"
|
|
23
|
+
},
|
|
24
|
+
"./sds-button": {
|
|
25
|
+
"import": "./dist/sds-button/sds-button.js",
|
|
26
|
+
"require": "./dist/sds-button/sds-button.js",
|
|
27
|
+
"types": "./dist/sds-button/sds-button.d.ts"
|
|
28
|
+
},
|
|
29
|
+
"./sds-checkbox": {
|
|
30
|
+
"import": "./dist/sds-checkbox/sds-checkbox.js",
|
|
31
|
+
"require": "./dist/sds-checkbox/sds-checkbox.js",
|
|
32
|
+
"types": "./dist/sds-checkbox/sds-checkbox.d.ts"
|
|
33
|
+
},
|
|
34
|
+
"./sds-checkbox-group": {
|
|
35
|
+
"import": "./dist/sds-checkbox-group/sds-checkbox-group.js",
|
|
36
|
+
"require": "./dist/sds-checkbox-group/sds-checkbox-group.js",
|
|
37
|
+
"types": "./dist/sds-checkbox-group/sds-checkbox-group.d.ts"
|
|
38
|
+
},
|
|
39
|
+
"./sds-chip": {
|
|
40
|
+
"import": "./dist/sds-chip/sds-chip.js",
|
|
41
|
+
"require": "./dist/sds-chip/sds-chip.js",
|
|
42
|
+
"types": "./dist/sds-chip/sds-chip.d.ts"
|
|
43
|
+
},
|
|
44
|
+
"./sds-detail": {
|
|
45
|
+
"import": "./dist/sds-detail/sds-detail.js",
|
|
46
|
+
"require": "./dist/sds-detail/sds-detail.js",
|
|
47
|
+
"types": "./dist/sds-detail/sds-detail.d.ts"
|
|
48
|
+
},
|
|
49
|
+
"./sds-heading": {
|
|
50
|
+
"import": "./dist/sds-heading/sds-heading.js",
|
|
51
|
+
"require": "./dist/sds-heading/sds-heading.js",
|
|
52
|
+
"types": "./dist/sds-heading/sds-heading.d.ts"
|
|
53
|
+
},
|
|
54
|
+
"./sds-icon": {
|
|
55
|
+
"import": "./dist/sds-icon/sds-icon.js",
|
|
56
|
+
"require": "./dist/sds-icon/sds-icon.js",
|
|
57
|
+
"types": "./dist/sds-icon/sds-icon.d.ts"
|
|
58
|
+
},
|
|
59
|
+
"./sds-icon/icon-loader": {
|
|
60
|
+
"import": "./dist/sds-icon/sds-icon-loader.js",
|
|
61
|
+
"require": "./dist/sds-icon/sds-icon-loader.js",
|
|
62
|
+
"types": "./dist/sds-icon/sds-icon-loader.d.ts"
|
|
63
|
+
},
|
|
64
|
+
"./sds-label": {
|
|
65
|
+
"import": "./dist/sds-label/sds-label.js",
|
|
66
|
+
"require": "./dist/sds-label/sds-label.js",
|
|
67
|
+
"types": "./dist/sds-label/sds-label.d.ts"
|
|
68
|
+
},
|
|
69
|
+
"./sds-link": {
|
|
70
|
+
"import": "./dist/sds-link/sds-link.js",
|
|
71
|
+
"require": "./dist/sds-link/sds-link.js",
|
|
72
|
+
"types": "./dist/sds-link/sds-link.d.ts"
|
|
73
|
+
},
|
|
74
|
+
"./sds-loader": {
|
|
75
|
+
"import": "./dist/sds-loader/sds-loader.js",
|
|
76
|
+
"require": "./dist/sds-loader/sds-loader.js",
|
|
77
|
+
"types": "./dist/sds-loader/sds-loader.d.ts"
|
|
78
|
+
},
|
|
79
|
+
"./sds-nav-card": {
|
|
80
|
+
"import": "./dist/sds-nav-card/sds-nav-card.js",
|
|
81
|
+
"require": "./dist/sds-nav-card/sds-nav-card.js",
|
|
82
|
+
"types": "./dist/sds-nav-card/sds-nav-card.d.ts"
|
|
83
|
+
},
|
|
84
|
+
"./sds-notification": {
|
|
85
|
+
"import": "./dist/sds-notification/sds-notification.js",
|
|
86
|
+
"require": "./dist/sds-notification/sds-notification.js",
|
|
87
|
+
"types": "./dist/sds-notification/sds-notification.d.ts"
|
|
88
|
+
},
|
|
89
|
+
"./sds-paragraph": {
|
|
90
|
+
"import": "./dist/sds-paragraph/sds-paragraph.js",
|
|
91
|
+
"require": "./dist/sds-paragraph/sds-paragraph.js",
|
|
92
|
+
"types": "./dist/sds-paragraph/sds-paragraph.d.ts"
|
|
93
|
+
},
|
|
94
|
+
"./sds-radio": {
|
|
95
|
+
"import": "./dist/sds-radio/sds-radio.js",
|
|
96
|
+
"require": "./dist/sds-radio/sds-radio.js",
|
|
97
|
+
"types": "./dist/sds-radio/sds-radio.d.ts"
|
|
98
|
+
},
|
|
99
|
+
"./sds-radio-group": {
|
|
100
|
+
"import": "./dist/sds-radio-group/sds-radio-group.js",
|
|
101
|
+
"require": "./dist/sds-radio-group/sds-radio-group.js",
|
|
102
|
+
"types": "./dist/sds-radio-group/sds-radio-group.d.ts"
|
|
103
|
+
},
|
|
104
|
+
"./sds-switch": {
|
|
105
|
+
"import": "./dist/sds-switch/sds-switch.js",
|
|
106
|
+
"require": "./dist/sds-switch/sds-switch.js",
|
|
107
|
+
"types": "./dist/sds-switch/sds-switch.d.ts"
|
|
108
|
+
},
|
|
109
|
+
"./sds-text": {
|
|
110
|
+
"import": "./dist/sds-text/sds-text.js",
|
|
111
|
+
"require": "./dist/sds-text/sds-text.js",
|
|
112
|
+
"types": "./dist/sds-text/sds-text.d.ts"
|
|
113
|
+
},
|
|
114
|
+
"./sds-textfield": {
|
|
115
|
+
"import": "./dist/sds-textfield/sds-textfield.js",
|
|
116
|
+
"require": "./dist/sds-textfield/sds-textfield.js",
|
|
117
|
+
"types": "./dist/sds-textfield/sds-textfield.d.ts"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
"scripts": {
|
|
121
|
+
"build-components": "tsc",
|
|
122
|
+
"version-bump": "node ../../../scripts/bump-version.js"
|
|
123
|
+
},
|
|
124
|
+
"dependencies": {
|
|
125
|
+
"lit": "^3.2.0"
|
|
126
|
+
},
|
|
127
|
+
"peerDependencies": {
|
|
128
|
+
"@politiet/sheriff-css-framework": "^1.0.0-rc.0"
|
|
129
|
+
},
|
|
130
|
+
"author": "Politiets IT-enhet",
|
|
131
|
+
"license": "ISC"
|
|
128
132
|
}
|