@helsevestikt/hviktor-icons 0.0.45 → 0.0.47
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/README.md
CHANGED
|
@@ -18,6 +18,29 @@ npm install @helsevestikt/hviktor-icons
|
|
|
18
18
|
- ✅ **Full TypeScript support** with IntelliSense
|
|
19
19
|
- ✅ **Tiny bundle** - no framework overhead
|
|
20
20
|
|
|
21
|
+
## TypeScript typings and metadata
|
|
22
|
+
|
|
23
|
+
The package publishes both:
|
|
24
|
+
|
|
25
|
+
- `dist/lib/icons.d.ts` (configured via the `types` field in `package.json`)
|
|
26
|
+
- `dist/custom-elements.json`
|
|
27
|
+
|
|
28
|
+
This gives strong IntelliSense across editors and frameworks for:
|
|
29
|
+
|
|
30
|
+
- custom element tags (`hvi-icon-*`)
|
|
31
|
+
- attributes/properties (`size`)
|
|
32
|
+
- typed custom event `hvi-size-change`
|
|
33
|
+
|
|
34
|
+
TypeScript example:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
const icon = document.createElement('hvi-icon-airplane');
|
|
38
|
+
icon.size = 'lg';
|
|
39
|
+
icon.addEventListener('hvi-size-change', (event) => {
|
|
40
|
+
console.log(event.detail.previousSize, event.detail.size);
|
|
41
|
+
});
|
|
42
|
+
```
|
|
43
|
+
|
|
21
44
|
## Quick Start
|
|
22
45
|
|
|
23
46
|
### Angular
|
|
@@ -1,8 +1,19 @@
|
|
|
1
|
+
export interface HviIconSizeChangeDetail {
|
|
2
|
+
previousSize: 'sm' | 'md' | 'lg';
|
|
3
|
+
size: 'sm' | 'md' | 'lg';
|
|
4
|
+
}
|
|
1
5
|
export interface HviIconElement extends HTMLElement {
|
|
2
6
|
size: 'sm' | 'md' | 'lg';
|
|
7
|
+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
8
|
+
addEventListener(type: 'hvi-size-change', listener: (event: CustomEvent<HviIconSizeChangeDetail>) => void, options?: boolean | AddEventListenerOptions): void;
|
|
9
|
+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
10
|
+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
|
|
11
|
+
removeEventListener(type: 'hvi-size-change', listener: (event: CustomEvent<HviIconSizeChangeDetail>) => void, options?: boolean | EventListenerOptions): void;
|
|
12
|
+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
|
|
3
13
|
}
|
|
4
14
|
export interface HviIconAttributes {
|
|
5
15
|
size?: 'sm' | 'md' | 'lg';
|
|
16
|
+
onhvisizechange?: (event: CustomEvent<HviIconSizeChangeDetail>) => void;
|
|
6
17
|
}
|
|
7
18
|
declare global {
|
|
8
19
|
interface HTMLElementTagNameMap {
|
|
@@ -25,6 +36,7 @@ export declare abstract class HviIconBase extends HTMLElement {
|
|
|
25
36
|
connectedCallback(): void;
|
|
26
37
|
protected abstract get path(): string;
|
|
27
38
|
protected get sizePx(): number;
|
|
39
|
+
private emitSizeChange;
|
|
28
40
|
private render;
|
|
29
41
|
}
|
|
30
42
|
//# sourceMappingURL=base-icon.webcomponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-icon.webcomponent.d.ts","sourceRoot":"","sources":["../../src/lib/base-icon.webcomponent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"base-icon.webcomponent.d.ts","sourceRoot":"","sources":["../../src/lib/base-icon.webcomponent.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAEzB,gBAAgB,CAAC,CAAC,SAAS,MAAM,mBAAmB,EAClD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,OAAO,EACpE,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,EAC/D,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,mBAAmB,EACrD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,OAAO,EACpE,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,iBAAiB,EACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,EAC/D,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,OAAO,EAAE,YAAY,MAAM,EAAE,GAAG,cAAc,CAAC;KACjD;IAGD,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,CAAC,OAAO,EAAE,YAAY,MAAM,EAAE,GAAG,iBAAiB,CAAC;SACpD;KACF;CACF;AAED,8BAAsB,WAAY,SAAQ,WAAW;IACnD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAAa;;IAO5B,MAAM,KAAK,kBAAkB,aAE5B;IAED,IAAI,IAAI,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAE7B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,EAKjC;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASzE,iBAAiB;IAIjB,SAAS,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC;IAEtC,SAAS,KAAK,MAAM,IAAI,MAAM,CAG7B;IAED,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,MAAM;CAuBf"}
|
|
@@ -11,13 +11,17 @@ export class HviIconBase extends HTMLElement {
|
|
|
11
11
|
return this._size;
|
|
12
12
|
}
|
|
13
13
|
set size(value) {
|
|
14
|
+
const previousSize = this._size;
|
|
14
15
|
this._size = value;
|
|
15
16
|
this.render();
|
|
17
|
+
this.emitSizeChange(previousSize, this._size);
|
|
16
18
|
}
|
|
17
19
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
18
20
|
if (name === 'size' && oldValue !== newValue) {
|
|
21
|
+
const previousSize = this._size;
|
|
19
22
|
this._size = newValue || 'md';
|
|
20
23
|
this.render();
|
|
24
|
+
this.emitSizeChange(previousSize, this._size);
|
|
21
25
|
}
|
|
22
26
|
}
|
|
23
27
|
connectedCallback() {
|
|
@@ -27,6 +31,19 @@ export class HviIconBase extends HTMLElement {
|
|
|
27
31
|
const sizeMap = { sm: 16, md: 24, lg: 32 };
|
|
28
32
|
return sizeMap[this._size];
|
|
29
33
|
}
|
|
34
|
+
emitSizeChange(previousSize, size) {
|
|
35
|
+
if (previousSize === size) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
this.dispatchEvent(new CustomEvent('hvi-size-change', {
|
|
39
|
+
detail: {
|
|
40
|
+
previousSize,
|
|
41
|
+
size,
|
|
42
|
+
},
|
|
43
|
+
bubbles: true,
|
|
44
|
+
composed: true,
|
|
45
|
+
}));
|
|
46
|
+
}
|
|
30
47
|
render() {
|
|
31
48
|
this._shadow.innerHTML = `
|
|
32
49
|
<style>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-icon.webcomponent.js","sourceRoot":"","sources":["../../src/lib/base-icon.webcomponent.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-icon.webcomponent.js","sourceRoot":"","sources":["../../src/lib/base-icon.webcomponent.ts"],"names":[],"mappings":"AA2DA,MAAM,OAAgB,WAAY,SAAQ,WAAW;IAInD;QACE,KAAK,EAAE,CAAC;QAJF,UAAK,GAAuB,IAAI,CAAC;QAKvC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACrD,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,IAAI,IAAI,CAAC,KAAyB;QAChC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAgB,EAAE,QAAgB;QACvE,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,KAAK,GAAI,QAA+B,IAAI,IAAI,CAAC;YACtD,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAID,IAAc,MAAM;QAClB,MAAM,OAAO,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QAC3C,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IAEO,cAAc,CAAC,YAAgC,EAAE,IAAwB;QAC/E,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAA0B,iBAAiB,EAAE;YAC1D,MAAM,EAAE;gBACN,YAAY;gBACZ,IAAI;aACL;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG;;;;;;;;;;;iBAWZ,IAAI,CAAC,MAAM;kBACV,IAAI,CAAC,MAAM;;;;;;+EAMkD,IAAI,CAAC,IAAI;;KAEnF,CAAC;IACJ,CAAC;CACF"}
|
package/dist/lib/icons.d.ts
CHANGED
|
@@ -1904,15 +1904,6 @@ declare global {
|
|
|
1904
1904
|
'hvi-icon-zoom-plus-fill': HviIconZoomPlusFill;
|
|
1905
1905
|
}
|
|
1906
1906
|
}
|
|
1907
|
-
|
|
1908
|
-
export interface HviIconAttributes {
|
|
1909
|
-
size?: 'sm' | 'md' | 'lg';
|
|
1910
|
-
}
|
|
1911
|
-
|
|
1912
|
-
export interface HviIconElement extends HTMLElement {
|
|
1913
|
-
size: 'sm' | 'md' | 'lg';
|
|
1914
|
-
}
|
|
1915
|
-
|
|
1916
1907
|
export interface HviIconAirplane extends HviIconElement {}
|
|
1917
1908
|
export interface HviIconAirplaneFill extends HviIconElement {}
|
|
1918
1909
|
export interface HviIconAlignBottom extends HviIconElement {}
|