feat(icon-button): new content prop with click signal event

core/type/src/event-signal.ts

@@ -0,0 +1,7 @@
+export type ClickSignalType = {
+  readonly x: number;
+  readonly y: number;
+  readonly altKey: boolean;
+  readonly ctrlKey: boolean;
+  readonly metaKey: boolean;
+};

core/type/src/index.ts

@@ -4,6 +4,7 @@ export * from './storage.js';
 export * from './global.js';
 export * from './i18n.js';
 export * from './type-helper.js';
+export * from './event-signal.js';
 
 Alwatr.registeredList.push({
   name: '@alwatr/type',

ui/ui-kit/src/button/icon-button.ts

@@ -1,14 +1,35 @@
-import {css, customElement, html, property} from '@alwatr/element';
+import {css, customElement, html, property, type PropertyValues} from '@alwatr/element';
+import {eventTrigger} from '@alwatr/signal';
 
-import '@alwatr/icon';
 import {AlwatrSurface} from '../card/surface.js';
 
+import type {StringifyableRecord, ClickSignalType} from '@alwatr/type';
+
+import '@alwatr/icon';
+
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-icon-button': AlwatrStandardIconButton;
   }
 }
 
+export interface IconButtonContent extends StringifyableRecord {
+  /**
+   * Icon name.
+   */
+  icon: string;
+
+  /**
+   * Unique name for identify click event over signal.
+   */
+  clickSignalId?: string;
+
+  /**
+   * Flip icon on rtl
+   */
+  flipRtl?: true;
+}
+
 /**
  * Alwatr standard icon button element.
  *
@@ -47,23 +68,47 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
     `,
   ];
 
-  @property()
-    icon?: string;
+  @property({type: Object, attribute: false})
+    content?: IconButtonContent;
 
-  @property({type: Boolean, attribute: 'flip-rtl'})
-    flipRtl = false;
+  constructor() {
+    super();
+    this._click = this._click.bind(this);
+  }
 
   override connectedCallback(): void {
     this.setAttribute('stated', '');
     super.connectedCallback();
+    this.addEventListener('click', this._click);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._click);
+  }
+
+  protected override shouldUpdate(changedProperties: PropertyValues<this>): boolean {
+    return super.shouldUpdate(changedProperties) && this.content != null;
   }
 
   override render(): unknown {
-    super.render();
-    return html`<alwatr-icon
-      .name=${this.icon}
-      ?flip-rtl=${this.flipRtl}
-    ></alwatr-icon>`;
+    this._logger.logMethod('render');
+    if (this.content == null) return;
+    return html`<alwatr-icon .name=${this.content.icon} ?flip-rtl=${this.content.flipRtl}></alwatr-icon>`;
+  }
+
+  protected _click(event: MouseEvent): void {
+    const signalId = this.content?.clickSignalId;
+    this._logger.logMethodArgs('_click', {signalId});
+    if (signalId) {
+      eventTrigger.dispatch<ClickSignalType>(signalId, {
+        x: event.clientX,
+        y: event.clientY,
+        altKey: event.altKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+      });
+    }
   }
 }
 

ui/ui-kit/src/card/icon-box.ts

@@ -99,7 +99,7 @@ export class AlwatrIconBox extends AlwatrSurface {
     `,
   ];
 
-  @property({type: Object})
+  @property({type: Object, attribute: false})
     content?: IconBoxContent;
 
   protected override update(changedProperties: PropertyValues<this>): void {

uniquely/soffit-pwa/src/director/l18e-loader.ts

@@ -1,13 +1,13 @@
 import {setL18eLoader} from '@alwatr/i18n';
 
-import {logger} from './logger';
+import {logger} from './logger.js';
 
 import type {L18eContext} from '@alwatr/type';
 
 setL18eLoader((locale) => {
   const language = locale.language;
   logger.logMethodArgs('l18eLoader', {language});
   return language === 'en'
-    ? import('../l18r/en.json', {assert: {type: 'json'}}) as Promise<L18eContext>
-    : import('../l18r/fa.json', {assert: {type: 'json'}}) as Promise<L18eContext>;
+    ? import('../l18r/en.json', {assert: {type: 'json'}}) as unknown as Promise<L18eContext>
+    : import('../l18r/fa.json', {assert: {type: 'json'}}) as unknown as Promise<L18eContext>;
 });