refactor(ui-kit/button): use button content property

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

@@ -1,17 +1,47 @@
-import {css, customElement, html, property} from '@alwatr/element';
+import {PropertyValues, css, customElement, html, nothing, property} from '@alwatr/element';
+import {message} from '@alwatr/i18n';
 import '@alwatr/icon';
 import {eventTrigger} from '@alwatr/signal';
 
 import {AlwatrSurface} from '../card/surface.js';
 
-import type {ClickSignalType, Stringifyable} from '@alwatr/type';
+import type {ClickSignalType, Stringifyable, StringifyableRecord} from '@alwatr/type';
 
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-button': AlwatrButton;
   }
 }
 
+export interface ButtonContent extends StringifyableRecord {
+  /**
+   * Label i18n key.
+   */
+  labelKey?: string;
+
+  /**
+   * Icon name.
+   */
+  icon?: string;
+
+  /**
+   * Flip icon on rtl
+   */
+  flipRtl?: true;
+
+  /**
+   * Unique name for identify click event over signal.
+   */
+  clickSignalId?: string;
+
+  /**
+   * Dispatched signal with ClickSignalType and this detail.
+   */
+  clickDetail?: Stringifyable;
+
+  disabled?: boolean;
+}
+
 /**
  * Alwatr outlined text field.
  *
@@ -50,18 +80,16 @@ export class AlwatrButton extends AlwatrSurface {
     `,
   ];
 
-  @property()
-    icon?: string;
-
-  @property({attribute: 'click-signal-id'})
-    clickSignalId?: string;
+  @property({type: Object})
+    content?: ButtonContent;
 
-  @property({attribute: false})
-    detail?: Stringifyable;
+  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(_changedProperties);
+    this.setAttribute('stated', '');
+  }
 
   override connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('stated', '');
     this.addEventListener('click', this._click);
   }
 
@@ -70,30 +98,37 @@ export class AlwatrButton extends AlwatrSurface {
     this.removeEventListener('click', this._click);
   }
 
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
+
+    const disabled = Boolean(this.content?.disabled);
+    if (this.hasAttribute('disabled') !== disabled) {
+      this.toggleAttribute('disabled', disabled);
+    }
+  }
+
   override render(): unknown {
     this._logger.logMethod('render');
-    if (this.icon) {
-      return html`
-        <alwatr-icon .name=${this.icon} ?flip-rtl=${this.hasAttribute('flip-rtl')}></alwatr-icon>
-        <slot>button</slot>
-      `;
-    }
-    else {
-      return html`<slot>button</slot>`;
-    }
+    const content = this.content || {};
+
+    return [
+      content.icon
+        ? html`<alwatr-icon .name=${content.icon} ?flip-rtl=${content.flipRtl}></alwatr-icon>`
+        : nothing,
+      html`<slot>${message(content.labelKey)}</slot>`,
+    ];
   }
 
   protected _click(event: MouseEvent): void {
-    this._logger.logMethodArgs('click', {clickSignalId: this.clickSignalId});
-    if (this.clickSignalId) {
-      eventTrigger.dispatch<ClickSignalType>(this.clickSignalId, {
-        x: event.clientX,
-        y: event.clientY,
-        altKey: event.altKey,
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        detail: this.detail,
-      });
-    }
+    if (this.content?.clickSignalId == null) return;
+    this._logger.logMethodArgs('click', {clickSignalId: this.content.clickSignalId});
+    eventTrigger.dispatch<ClickSignalType>(this.content.clickSignalId, {
+      x: event.clientX,
+      y: event.clientY,
+      altKey: event.altKey,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+      detail: this.content.clickDetail,
+    });
   }
 }

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

@@ -76,12 +76,16 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
     `,
   ];
 
-  @property({type: Object, attribute: false})
+  @property({type: Object})
     content?: IconButtonContent;
 
+  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
+    super.firstUpdated(_changedProperties);
+    this.setAttribute('stated', '');
+  }
+
   override connectedCallback(): void {
     super.connectedCallback();
-    this.setAttribute('stated', '');
     this.addEventListener('click', this._click);
   }
 
@@ -90,20 +94,20 @@ export class AlwatrStandardIconButton extends AlwatrSurface {
     this.removeEventListener('click', this._click);
   }
 
-  protected override shouldUpdate(changedProperties: PropertyValues<this>): boolean {
-    return super.shouldUpdate(changedProperties) && this.content != null;
-  }
-
-  override render(): unknown {
-    this._logger.logMethod('render');
-    if (this.content == null) return;
+  protected override update(changedProperties: PropertyValues<this>): void {
+    super.update(changedProperties);
 
-    const disabled = Boolean(this.content.disabled);
+    const disabled = Boolean(this.content?.disabled);
     if (this.hasAttribute('disabled') !== disabled) {
       this.toggleAttribute('disabled', disabled);
     }
+  }
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+    const content = this.content || {icon: ''};
 
-    return html`<alwatr-icon .name=${this.content.icon} ?flip-rtl=${this.content.flipRtl}></alwatr-icon>`;
+    return html`<alwatr-icon .name=${content.icon} ?flip-rtl=${content.flipRtl}></alwatr-icon>`;
   }
 
   protected _click(event: MouseEvent): void {

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

@@ -1,4 +1,4 @@
-import {css, customElement, html, property, nothing, ifDefined, when, PropertyValues} from '@alwatr/element';
+import {css, customElement, html, property, ifDefined, when, PropertyValues} from '@alwatr/element';
 import '@alwatr/icon';
 
 import {AlwatrSurface} from './surface.js';
@@ -126,8 +126,8 @@ export class AlwatrIconBox extends AlwatrSurface {
 
   override render(): unknown {
     this._logger.logMethod('render');
-    const content = this.content;
-    if (content == null) return nothing;
+    const content: IconBoxContent = this.content || {headline: ''};
+
     const target = content.target !== 'download' ? content.target : undefined;
 
     const template = html`<h3 class="headline">

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

@@ -1,4 +1,4 @@
-import {css, customElement, html, property, nothing, ifDefined, type PropertyValues} from '@alwatr/element';
+import {css, customElement, html, property, ifDefined, type PropertyValues} from '@alwatr/element';
 import '@alwatr/icon';
 
 import {AlwatrSurface} from './surface.js';
@@ -148,8 +148,7 @@ export class AlwatrImageBox extends AlwatrSurface {
 
   override render(): unknown {
     this._logger.logMethod('render');
-    const content = this.content;
-    if (content == null) return nothing;
+    const content = this.content || {image: '', headline: ''};
     const target = content.target !== 'download' ? content.target : undefined;
 
     const template = html`

ui/ui-kit/src/card/product-card.ts

@@ -4,10 +4,9 @@ import {
   SignalMixin,
   LocalizeMixin,
   ToggleMixin,
-  nothing,
   html,
   property,
-  type PropertyValues,
+  PropertyValueMap,
 } from '@alwatr/element';
 import {number} from '@alwatr/i18n';
 import '@alwatr/icon';
@@ -139,29 +138,25 @@ export class AlwatrProductCard extends ToggleMixin(LocalizeMixin(SignalMixin(Alw
   @property({type: Object, attribute: false})
     content?: ProductCartContent;
 
-  override connectedCallback(): void {
-    super.connectedCallback();
+  protected override firstUpdated(_changedProperties: PropertyValueMap<this>): void {
+    super.firstUpdated(_changedProperties);
     this.setAttribute('stated', '');
     this.setAttribute('elevated', '');
   }
 
-  protected override shouldUpdate(changedProperties: PropertyValues<this>): boolean {
-    return super.shouldUpdate(changedProperties) && this.content != null;
-  }
-
   override render(): unknown {
     this._logger.logMethod('render');
-    if (this.content == null) return nothing;
+    const content: ProductCartContent = this.content || {imagePath: '', title: ''};
 
     // const icon = this.selected ? 'radio-button-on-outline' : 'radio-button-off-outline';
 
     return html`
-      <img src=${this.content.imagePath} alt=${this.content.title} />
+      <img src=${content.imagePath} alt=${content.title} />
       <div class="content">
-        <h2 class="title">${this.content.title}</h2>
+        <h2 class="title">${content.title}</h2>
         <div class="price">
-          <del>${number(this.content.price)}</del>
-          <ins>${number(this.content.finalPrice)}</ins>
+          <del>${number(content.price)}</del>
+          <ins>${number(content.finalPrice)}</ins>
           <alwatr-icon .name=${'toman'}></alwatr-icon>
         </div>
     </div>

ui/ui-kit/src/radio-group/radio-group.ts

@@ -1,4 +1,6 @@
-import {customElement, css, html, map, AlwatrBaseElement, property, nothing, live} from '@alwatr/element';
+import {customElement, css, html, map, AlwatrBaseElement, property, live} from '@alwatr/element';
+import {eventTrigger} from '@alwatr/signal';
+import {Stringifyable} from '@alwatr/type';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -8,9 +10,19 @@ declare global {
 
 export type RadioOption = {label: string; value: string};
 
-export type RadioGroupOptions = {
+export type RadioGroupSignalDetail<T extends Stringifyable = null> = Stringifyable & {
+  name: string;
+  value: string;
+  detail: T;
+}
+
+export type RadioGroupContent = {
+  name: string;
   title: string;
   radioGroup: Array<RadioOption>;
+  value?: string;
+  inputChangeSignalName?: string;
+  inputChangeSignalDetail?: Stringifyable;
 };
 
 /**
@@ -71,36 +83,32 @@ export class AlwatrRadioGroup extends AlwatrBaseElement {
   `;
 
   @property({type: Object})
-    name = 'unknown';
-
-  @property({type: Object})
-    options?: RadioGroupOptions;
-
-  @property({type: String})
-    value?: string;
+    content?: RadioGroupContent;
 
   override render(): unknown {
     this._logger.logMethod('render');
     return html`
       <fieldset>
-        <legend>${this.options?.title}</legend>
+        <legend>${this.content?.title}</legend>
         ${this._optionsTemplate()}
       </fieldset>
     `;
   }
 
   protected _optionsTemplate(): unknown {
-    const options = this.options;
-    if (options == null) return nothing;
-    return map(options.radioGroup, (radioItem, index) => {
+    const content = this.content || {radioGroup: [], name: '', value: ''};
+
+    return map(content.radioGroup, (radioItem, index) => {
       const id: string = 'radioInput_' + index;
+      content.value ??= '';
+
       return html`<div>
         <input
-          type="radio"
           id=${id}
-          .name=${this.name}
+          type="radio"
+          .name=${content.name}
           .value=${radioItem.value}
-          .checked=${live(radioItem.value === this.value)}
+          .checked=${live(radioItem.value === content.value)}
           @change=${this._inputChanged}
         />
         <label for=${id}>${radioItem.label}</label>
@@ -109,9 +117,18 @@ export class AlwatrRadioGroup extends AlwatrBaseElement {
   }
 
   private _inputChanged(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    if (target == null) return;
-    this.value = target.value;
-    this.dispatchEvent(new CustomEvent('input-change'));
+    this._logger.logMethod('_inputChanged');
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+    const content = this.content;
+    if (target == null || content == null) return;
+
+    content.value = target.value;
+    if (content.inputChangeSignalName) {
+      eventTrigger.dispatch<RadioGroupSignalDetail<Stringifyable>>(content.inputChangeSignalName, {
+        name: content.name,
+        value: content.value,
+        detail: content.inputChangeSignalDetail,
+      });
+    }
   }
 }

ui/ui-kit/src/snackbar/element.ts

@@ -1,4 +1,4 @@
-import {html, css, customElement, property, when} from '@alwatr/element';
+import {html, css, customElement, property, when, PropertyValueMap} from '@alwatr/element';
 import {untilEvent} from '@alwatr/util';
 
 import '../button/button.js';
@@ -112,16 +112,20 @@ export class AlwatrSnackbar extends AlwatrSurface {
   @property({type: String})
     actionLabel?: string;
 
-  override connectedCallback(): void {
-    super.connectedCallback();
+  protected override firstUpdated(_changedProperties: PropertyValueMap<this>): void {
+    super.firstUpdated(_changedProperties);
     this.setAttribute('elevated', '3');
   }
 
   override render(): unknown {
     this._logger.logMethod('render');
     return html`<span class="message">${this.message}</span>${when(
         this.actionLabel,
-        () => html`<alwatr-button @click=${this._actionButtonClick}>${this.actionLabel}</alwatr-button>`,
+        () =>
+          html`<alwatr-button
+            .content=${{labelKey: this.actionLabel}}
+            @click=${this._actionButtonClick}
+          ></alwatr-button>`,
     )}`;
   }