feat(button): use content property and move to manager

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

@@ -1,17 +1,52 @@
-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.
+   */
+  label?: string
+
+  /**
+   * 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 +85,16 @@ export class AlwatrButton extends AlwatrSurface {
     `,
   ];
 
-  @property()
-    icon?: string;
+  @property({type: Object})
+    content?: ButtonContent;
 
-  @property({attribute: 'click-signal-id'})
-    clickSignalId?: string;
-
-  @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 +103,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>${content.label ?? 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/snackbar/element.ts

@@ -121,7 +121,11 @@ export class AlwatrSnackbar extends AlwatrSurface {
     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=${{label: this.actionLabel}}
+            @click=${this._actionButtonClick}
+          ></alwatr-button>`,
     )}`;
   }
 

uniquely/com-pwa/src/manager/buttons.ts

@@ -15,9 +15,18 @@ export const buttons = {
     flipRtl: true,
     clickSignalId: 'browser_back_click_event',
   },
+  print: {
+    icon: 'print-outline',
+    clickSignalId: 'order_detail_print',
+  },
+
+  reload: {
+    icon: 'reload-outline',
+  },
 
   reloadOrderStorage: {
     icon: 'reload-outline',
+    flipRtl: true,
     clickSignalId: 'reload_order_storage',
   },
 
@@ -26,16 +35,79 @@ export const buttons = {
     clickSignalId: 'new_order_click_event',
   },
   showOrderDetail: {
+    labelKey: 'page_new_order_detail_button',
+    icon: 'information-outline',
     clickSignalId: 'show_order_detail_click_event',
   },
+  backToOrderList: {
+    icon: 'arrow-back-outline',
+    flipRtl: true,
+    clickSignalId: 'back_to_order_list_event',
+  },
+
+  editItems: {
+    labelKey: 'page_new_order_edit_items',
+    icon: 'create-outline',
+    clickSignalId: 'edit_items_click_event',
+  },
+  submit: {
+    labelKey: 'page_new_order_submit',
+    icon: 'checkmark-outline',
+    clickSignalId: 'submit_click_event',
+  },
+  selectProductSubmit: {
+    labelKey: 'select_product_submit_button',
+    icon: 'checkmark-outline',
+    clickSignalId: 'select_product_submit_click_event',
+  },
+  editOrder: {
+    labelKey: 'page_new_order_edit',
+    icon: 'create-outline',
+    clickSignalId: 'edit_order_click_event',
+  },
+  submitFinal: {
+    labelKey: 'page_new_order_submit_final',
+    icon: 'checkmark-outline',
+    clickSignalId: 'submit_final_click_event',
+  },
+  submitShippingForm: {
+    labelKey: 'page_new_order_shipping_submit',
+    icon: 'checkmark-outline',
+    clickSignalId: 'submit_shipping_form_click_event',
+  },
+  editShippingForm: {
+    labelKey: 'page_new_order_shipping_edit',
+    icon: 'create-outline',
+    clickSignalId: 'edit_shipping_form_click_event',
+  },
+  showRegisteredOrderDetail: {
+    labelKey: 'page_new_order_detail_button',
+    icon: 'information-outline',
+    clickSignalId: 'show_registered_order_detail_click_event',
+  },
+  showRegisteredOrderTracking: {
+    icon: 'chatbox-outline',
+    clickSignalId: 'show_registered_order_tracking_click_event',
+  },
+  retry: {
+    labelKey: 'page_new_order_retry_button',
+    icon: 'reload-outline',
+    clickSignalId: 'retry_click_event',
+  },
 } as const;
 
-eventListener.subscribe('new_order_click_event', () => {
-  redirect({
-    sectionList: ['new-order'],
-  });
+eventListener.subscribe(buttons.newOrder.clickSignalId, () => {
+  redirect({sectionList: ['new-order']});
+});
+
+eventListener.subscribe(buttons.print.clickSignalId, () => {
+  window.print();
 });
 
-eventListener.subscribe('show_order_detail_click_event', (event: ClickSignalType<Order>): void => {
+eventListener.subscribe(buttons.showOrderDetail.clickSignalId, (event: ClickSignalType<Order>): void => {
   redirect({sectionList: ['order-detail', event.detail.id]});
 });
+
+eventListener.subscribe(buttons.backToOrderList.clickSignalId, (): void => {
+  redirect({sectionList: ['order-list']});
+});