@helsevestikt/hviktor-icons 0.0.45 → 0.0.46

package/README.md

@@ -18,6 +18,29 @@ npm install @helsevestikt/hviktor-icons
 - ✅ **Full TypeScript support** with IntelliSense
 - ✅ **Tiny bundle** - no framework overhead
 
+## TypeScript typings and metadata
+
+The package publishes both:
+
+- `dist/lib/icons.d.ts` (configured via the `types` field in `package.json`)
+- `dist/custom-elements.json`
+
+This gives strong IntelliSense across editors and frameworks for:
+
+- custom element tags (`hvi-icon-*`)
+- attributes/properties (`size`)
+- typed custom event `hvi-size-change`
+
+TypeScript example:
+
+```ts
+const icon = document.createElement('hvi-icon-airplane');
+icon.size = 'lg';
+icon.addEventListener('hvi-size-change', (event) => {
+  console.log(event.detail.previousSize, event.detail.size);
+});
+```
+
 ## Quick Start
 
 ### Angular

package/dist/lib/base-icon.webcomponent.d.ts

@@ -1,8 +1,19 @@
+export interface HviIconSizeChangeDetail {
+    previousSize: 'sm' | 'md' | 'lg';
+    size: 'sm' | 'md' | 'lg';
+}
 export interface HviIconElement extends HTMLElement {
     size: 'sm' | 'md' | 'lg';
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: 'hvi-size-change', listener: (event: CustomEvent<HviIconSizeChangeDetail>) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: 'hvi-size-change', listener: (event: CustomEvent<HviIconSizeChangeDetail>) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
 }
 export interface HviIconAttributes {
     size?: 'sm' | 'md' | 'lg';
+    onhvisizechange?: (event: CustomEvent<HviIconSizeChangeDetail>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -25,6 +36,7 @@ export declare abstract class HviIconBase extends HTMLElement {
     connectedCallback(): void;
     protected abstract get path(): string;
     protected get sizePx(): number;
+    private emitSizeChange;
     private render;
 }
 //# sourceMappingURL=base-icon.webcomponent.d.ts.map

package/dist/lib/base-icon.webcomponent.d.ts.map

@@ -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;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,OAAO,EAAE,YAAY,MAAM,EAAE,GAAG,cAAc,CAAC;KACjD;IAED,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,EAGjC;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAOzE,iBAAiB;IAIjB,SAAS,CAAC,QAAQ,KAAK,IAAI,IAAI,MAAM,CAAC;IAEtC,SAAS,KAAK,MAAM,IAAI,MAAM,CAG7B;IAED,OAAO,CAAC,MAAM;CAuBf"}
+{"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;IAED,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"}

package/dist/lib/base-icon.webcomponent.js

@@ -11,13 +11,17 @@ export class HviIconBase extends HTMLElement {
         return this._size;
     }
     set size(value) {
+        const previousSize = this._size;
         this._size = value;
         this.render();
+        this.emitSizeChange(previousSize, this._size);
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'size' && oldValue !== newValue) {
+            const previousSize = this._size;
             this._size = newValue || 'md';
             this.render();
+            this.emitSizeChange(previousSize, this._size);
         }
     }
     connectedCallback() {
@@ -27,6 +31,19 @@ export class HviIconBase extends HTMLElement {
         const sizeMap = { sm: 16, md: 24, lg: 32 };
         return sizeMap[this._size];
     }
+    emitSizeChange(previousSize, size) {
+        if (previousSize === size) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('hvi-size-change', {
+            detail: {
+                previousSize,
+                size,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     render() {
         this._shadow.innerHTML = `
       <style>

package/dist/lib/base-icon.webcomponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-icon.webcomponent.js","sourceRoot":"","sources":["../../src/lib/base-icon.webcomponent.ts"],"names":[],"mappings":"AAoBA,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,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAgB,EAAE,QAAgB;QACvE,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC7C,IAAI,CAAC,KAAK,GAAI,QAA+B,IAAI,IAAI,CAAC;YACtD,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,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,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"}
+{"version":3,"file":"base-icon.webcomponent.js","sourceRoot":"","sources":["../../src/lib/base-icon.webcomponent.ts"],"names":[],"mappings":"AA0DA,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

@@ -1907,10 +1907,48 @@ declare global {
 
 export interface HviIconAttributes {
   size?: 'sm' | 'md' | 'lg';
+  onhvisizechange?: (event: CustomEvent<HviIconSizeChangeDetail>) => void;
+}
+
+export interface HviIconSizeChangeDetail {
+  previousSize: 'sm' | 'md' | 'lg';
+  size: 'sm' | 'md' | 'lg';
 }
 
 export interface HviIconElement extends HTMLElement {
   size: 'sm' | 'md' | 'lg';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(
+    type: 'hvi-size-change',
+    listener: (event: CustomEvent<HviIconSizeChangeDetail>) => void,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+
+  removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: 'hvi-size-change',
+    listener: (event: CustomEvent<HviIconSizeChangeDetail>) => void,
+    options?: boolean | EventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions,
+  ): void;
 }
 
 export interface HviIconAirplane extends HviIconElement {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helsevestikt/hviktor-icons",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "description": "Pure Web Components icon library with 900+ icons, works in any framework",
   "main": "dist/index.js",
   "module": "dist/index.js",