import { AXPValueWidgetComponent } from '@acorex/platform/layout/widget-core';
import { AXFormatPipe } from '@acorex/core/format';
import { AXPUserAvatarComponent } from '@acorex/platform/layout/components';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { AXImageComponent } from '@acorex/components/image';

class AXPSignatureListWidgetViewComponent extends AXPValueWidgetComponent {
    constructor() {
        super(...arguments);
        this.items = computed(() => {
            const value = this.getValue();
            return Array.isArray(value) ? value : [];
        }, ...(ngDevMode ? [{ debugName: "items" }] : []));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPSignatureListWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPSignatureListWidgetViewComponent, isStandalone: true, selector: "axp-signature-list-widget-view", usesInheritance: true, ngImport: i0, template: `
      <!-- Header -->
      <div class="ax-grid ax-grid-cols-12 ax-text-neutral-600 ax-font-medium ax-py-2 ax-border-b ax-border-lighter">
        <div class="ax-col-span-6">Name</div>
        <div class="ax-col-span-4">Signature</div>
        <div class="ax-col-span-2 ax-text-right">Date</div>
      </div>
 
      <!-- Rows -->
      @for (item of items(); track $index) {
        <div class="ax-grid ax-grid-cols-12 ax-items-center ax-gap-4 ax-py-3 ax-border-b ax-border-lightest">
          <!-- Name + Avatar -->
          <div class="ax-col-span-6">
            <div class="ax-flex ax-items-center ax-gap-3 ax-min-w-0">
              <axp-user-avatar #ua [size]="40" [userId]="item?.auditInfo?.created?.by?.id"></axp-user-avatar>
              <div class="ax-min-w-0">
                <div class="ax-font-medium ax-text-neutral-800 ax-truncate">{{ ua.firstName() + ' ' + ua.lastName() }}</div>
              </div>
            </div>
          </div>

          <!-- Signature Image -->
          <div class="ax-col-span-4 ax-flex ax-justify-start ax-items-start">
            @if (item?.signed ) {
              <ax-image [src]="item.signed" alt="signature" class="ax-h-14 ax-object-contain" />
            }@else {
              <div class="ax-h-14 ax-flex ax-items-center ax-text-neutral-500">No signature</div>
            }
          </div>

          <!-- Date -->
          <div class="ax-col-span-2 ax-text-right ax-font-semibold ax-text-neutral-800">
            {{ item?.auditInfo?.created?.at | format: 'datetime' : { format: 'date' } | async }}
          </div>
        </div>
      } @empty {
        <div class="ax-text-neutral-500 ax-text-sm ax-py-6">No signatures</div>
      }
    
  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPSignatureListWidgetViewComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'axp-signature-list-widget-view',
                    template: `
      <!-- Header -->
      <div class="ax-grid ax-grid-cols-12 ax-text-neutral-600 ax-font-medium ax-py-2 ax-border-b ax-border-lighter">
        <div class="ax-col-span-6">Name</div>
        <div class="ax-col-span-4">Signature</div>
        <div class="ax-col-span-2 ax-text-right">Date</div>
      </div>
 
      <!-- Rows -->
      @for (item of items(); track $index) {
        <div class="ax-grid ax-grid-cols-12 ax-items-center ax-gap-4 ax-py-3 ax-border-b ax-border-lightest">
          <!-- Name + Avatar -->
          <div class="ax-col-span-6">
            <div class="ax-flex ax-items-center ax-gap-3 ax-min-w-0">
              <axp-user-avatar #ua [size]="40" [userId]="item?.auditInfo?.created?.by?.id"></axp-user-avatar>
              <div class="ax-min-w-0">
                <div class="ax-font-medium ax-text-neutral-800 ax-truncate">{{ ua.firstName() + ' ' + ua.lastName() }}</div>
              </div>
            </div>
          </div>

          <!-- Signature Image -->
          <div class="ax-col-span-4 ax-flex ax-justify-start ax-items-start">
            @if (item?.signed ) {
              <ax-image [src]="item.signed" alt="signature" class="ax-h-14 ax-object-contain" />
            }@else {
              <div class="ax-h-14 ax-flex ax-items-center ax-text-neutral-500">No signature</div>
            }
          </div>

          <!-- Date -->
          <div class="ax-col-span-2 ax-text-right ax-font-semibold ax-text-neutral-800">
            {{ item?.auditInfo?.created?.at | format: 'datetime' : { format: 'date' } | async }}
          </div>
        </div>
      } @empty {
        <div class="ax-text-neutral-500 ax-text-sm ax-py-6">No signatures</div>
      }
    
  `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    imports: [CommonModule, AXPUserAvatarComponent, AXFormatPipe, AXImageComponent],
                }]
        }] });

export { AXPSignatureListWidgetViewComponent };
//# sourceMappingURL=acorex-modules-workflow-management-signature-list-widget-view.component-B9rKQvol.mjs.map
