@sneat/components 0.1.3 → 0.1.4

package/src/lib/date-input/date-input.component.spec.ts

@@ -1,179 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { PopoverController } from '@ionic/angular/standalone';
-import { DateInputComponent } from './date-input.component';
-
-describe('DateInputComponent', () => {
-  let component: DateInputComponent;
-  let fixture: ComponentFixture<DateInputComponent>;
-  let popoverController: {
-    create: ReturnType<typeof vi.fn>;
-  };
-
-  beforeEach(waitForAsync(async () => {
-    popoverController = {
-      create: vi.fn(),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [DateInputComponent],
-      providers: [
-        { provide: PopoverController, useValue: popoverController },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(DateInputComponent, {
-        set: {
-          imports: [],
-          schemas: [CUSTOM_ELEMENTS_SCHEMA],
-          providers: [],
-          template: '',
-        },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(DateInputComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('$label', 'Test Label');
-    fixture.componentRef.setInput('$value', '2024-01-01');
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with undefined newValue', () => {
-    expect(component.$newValue()).toBeUndefined();
-  });
-
-  it('should compute noValueText with default when noValueLabel is not set', () => {
-    expect(component['$noValueText']()).toBe('(not set)');
-  });
-
-  it('should compute noValueText with custom label when provided', () => {
-    fixture.componentRef.setInput('$noValueLabel', 'Custom Label');
-    expect(component['$noValueText']()).toBe('Custom Label');
-  });
-
-  it('should compute displayValue from value when not updating', () => {
-    fixture.componentRef.setInput('$updating', false);
-    expect(component.$displayValue()).toBe('2024-01-01');
-  });
-
-  it('should compute displayValue from newValue when updating', () => {
-    component.$newValue.set('2024-12-31');
-    fixture.componentRef.setInput('$updating', true);
-    expect(component.$displayValue()).toBe('2024-12-31');
-  });
-
-  it('should update newValue when onValueChanged is called', () => {
-    const mockEvent = {
-      detail: { value: '2024-06-15' },
-    } as CustomEvent;
-
-    component['onValueChanged'](mockEvent);
-
-    expect(component.$newValue()).toBe('2024-06-15');
-  });
-
-  it('should emit valueChange when save is called', () => {
-    const emitSpy = vi.fn();
-    component.valueChange.subscribe(emitSpy);
-    component.$newValue.set('2024-03-20');
-
-    const mockEvent = {
-      preventDefault: vi.fn(),
-      stopPropagation: vi.fn(),
-    } as unknown as Event;
-
-    component['save'](mockEvent);
-
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(emitSpy).toHaveBeenCalledWith('2024-03-20');
-  });
-
-  it('should open date picker and handle date selection', async () => {
-    const mockPopover = {
-      onDidDismiss: vi.fn().mockResolvedValue({
-        data: '2024-09-01',
-      }),
-      present: vi.fn().mockResolvedValue(undefined),
-    };
-
-    popoverController.create.mockResolvedValue(mockPopover);
-
-    const emitSpy = vi.fn();
-    component.valueChange.subscribe(emitSpy);
-
-    const mockEvent = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-    } as unknown as Event;
-
-    await component['openDatePicker'](mockEvent);
-
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(popoverController.create).toHaveBeenCalledWith({
-      reference: 'trigger',
-      event: mockEvent,
-      side: 'bottom',
-      alignment: 'center',
-      component: expect.anything(),
-      componentProps: {
-        title: 'Test Label',
-        max: undefined,
-      },
-    });
-    expect(mockPopover.present).toHaveBeenCalled();
-    expect(component.$newValue()).toBe('2024-09-01');
-    expect(emitSpy).toHaveBeenCalledWith('2024-09-01');
-  });
-
-  it('should handle empty date selection in date picker', async () => {
-    const mockPopover = {
-      onDidDismiss: vi.fn().mockResolvedValue({
-        data: '',
-      }),
-      present: vi.fn().mockResolvedValue(undefined),
-    };
-
-    popoverController.create.mockResolvedValue(mockPopover);
-
-    const emitSpy = vi.fn();
-    component.valueChange.subscribe(emitSpy);
-
-    const mockEvent = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-    } as unknown as Event;
-
-    await component['openDatePicker'](mockEvent);
-
-    expect(component.$newValue()).toBe('');
-    expect(emitSpy).toHaveBeenCalledWith('');
-  });
-
-  it('should not emit when date picker is cancelled', async () => {
-    const mockPopover = {
-      onDidDismiss: vi.fn().mockResolvedValue({
-        data: undefined,
-      }),
-      present: vi.fn().mockResolvedValue(undefined),
-    };
-
-    popoverController.create.mockResolvedValue(mockPopover);
-
-    const emitSpy = vi.fn();
-    component.valueChange.subscribe(emitSpy);
-
-    const mockEvent = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-    } as unknown as Event;
-
-    await component['openDatePicker'](mockEvent);
-
-    expect(emitSpy).not.toHaveBeenCalled();
-  });
-});

package/src/lib/date-input/date-input.component.ts

@@ -1,97 +0,0 @@
-import {
-  Component,
-  computed,
-  inject,
-  input,
-  Output,
-  EventEmitter,
-  signal,
-} from '@angular/core';
-import {
-  IonInput,
-  IonLabel,
-  IonButton,
-  IonButtons,
-  IonItem,
-  PopoverController,
-  IonIcon,
-  IonSpinner,
-} from '@ionic/angular/standalone';
-import { DateModalComponent } from './date-modal.component';
-
-@Component({
-  selector: 'sneat-date-input',
-  templateUrl: 'date-input.component.html',
-  imports: [
-    IonItem,
-    IonInput,
-    IonLabel,
-    IonButtons,
-    IonButton,
-    IonIcon,
-    IonSpinner,
-  ],
-  providers: [PopoverController],
-})
-export class DateInputComponent {
-  public readonly $label = input.required<string>();
-  public readonly $value = input.required<string | undefined>();
-  public readonly $max = input<string>();
-
-  public readonly $newValue = signal<string | undefined>(undefined);
-
-  public readonly $displayValue = computed(() =>
-    this.$updating() ? this.$newValue() : this.$value(),
-  );
-
-  public readonly $updating = input<boolean>();
-
-  @Output() public valueChange = new EventEmitter<string | undefined>();
-
-  public readonly $noValueLabel = input<string>();
-
-  protected readonly $noValueText = computed(
-    () => this.$noValueLabel() || '(not set)',
-  );
-
-  protected readonly $noValueButtonColor = input<string>();
-
-  protected readonly popoverCtrl = inject(PopoverController);
-
-  protected onValueChanged(event: CustomEvent): void {
-    const newValue = event.detail.value as string;
-    // console.log('onValueChanged', newValue);
-    this.$newValue.set(newValue);
-  }
-
-  protected save(event: Event): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.valueChange.emit(this.$newValue());
-  }
-
-  protected async openDatePicker(event: Event): Promise<void> {
-    event.stopPropagation();
-    event.preventDefault();
-    const popover = await this.popoverCtrl.create({
-      reference: 'trigger',
-      event,
-      side: 'bottom',
-      alignment: 'center',
-      component: DateModalComponent,
-      componentProps: {
-        title: this.$label(),
-        max: this.$max(),
-      },
-    });
-    popover.onDidDismiss().then((eventDetail) => {
-      // console.log(`Selected "${this.$label()}":`, eventDetail.data);
-      const value = eventDetail.data as string | undefined;
-      if (value !== undefined) {
-        this.$newValue.set(value || '');
-        this.valueChange.emit(eventDetail.data as string | undefined);
-      }
-    });
-    await popover.present();
-  }
-}

package/src/lib/date-input/date-modal.component.html

@@ -1,23 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>{{ title }}</ion-title>
-    <ion-buttons slot="end">
-      <ion-button
-        (click)="dismiss()"
-        [disabled]="!$date()"
-        [color]="$date() ? 'primary' : undefined"
-        [fill]="$date() ? 'solid' : undefined"
-      >
-        <ion-label>Set</ion-label>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content>
-  <ion-datetime
-    [value]="$date()"
-    [max]="max"
-    (ionChange)="onDateChanged($event)"
-    presentation="date"
-  />
-</ion-content>

package/src/lib/date-input/date-modal.component.spec.ts

@@ -1,105 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { PopoverController } from '@ionic/angular/standalone';
-import { ErrorLogger } from '@sneat/core';
-import { ClassName } from '@sneat/ui';
-import { DateModalComponent } from './date-modal.component';
-
-describe('DateModalComponent', () => {
-  let component: DateModalComponent;
-  let fixture: ComponentFixture<DateModalComponent>;
-  let popoverController: { dismiss: ReturnType<typeof vi.fn> };
-  let errorLogger: { logError: ReturnType<typeof vi.fn>; logErrorHandler: ReturnType<typeof vi.fn> };
-
-  beforeEach(waitForAsync(async () => {
-    popoverController = {
-      dismiss: vi.fn().mockResolvedValue(true),
-    };
-
-    errorLogger = {
-      logError: vi.fn(),
-      logErrorHandler: vi.fn().mockReturnValue(() => undefined),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [DateModalComponent],
-      providers: [
-        { provide: ClassName, useValue: 'TestComponent' },
-        { provide: ErrorLogger, useValue: errorLogger },
-        { provide: PopoverController, useValue: popoverController },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(DateModalComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: '' },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(DateModalComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with undefined date', () => {
-    expect(component['$date']()).toBeUndefined();
-  });
-
-  it('should set date when onDateChanged is called with valid date', () => {
-    const mockEvent = {
-      detail: { value: '2024-03-15T10:30:00.000Z' },
-    } as CustomEvent;
-
-    component['onDateChanged'](mockEvent);
-
-    expect(component['$date']()).toBe('2024-03-15');
-  });
-
-  it('should handle date change with already formatted date', () => {
-    const mockEvent = {
-      detail: { value: '2024-12-25' },
-    } as CustomEvent;
-
-    component['onDateChanged'](mockEvent);
-
-    expect(component['$date']()).toBe('2024-12-25');
-  });
-
-  it('should set null when onDateChanged receives empty value', () => {
-    const mockEvent = {
-      detail: { value: null },
-    } as CustomEvent;
-
-    component['onDateChanged'](mockEvent);
-
-    expect(component['$date']()).toBeNull();
-  });
-
-  it('should dismiss popover with current date', () => {
-    component['$date'].set('2024-06-10');
-
-    component['dismiss']();
-
-    expect(popoverController.dismiss).toHaveBeenCalledWith('2024-06-10');
-  });
-
-  it('should dismiss popover with undefined date', () => {
-    component['dismiss']();
-
-    expect(popoverController.dismiss).toHaveBeenCalledWith(undefined);
-  });
-
-  it('should handle dismiss error', async () => {
-    const mockError = new Error('Dismiss failed');
-    popoverController.dismiss = vi.fn().mockRejectedValue(mockError);
-    const errorHandler = vi.fn();
-    errorLogger.logErrorHandler = vi.fn().mockReturnValue(errorHandler);
-
-    component['dismiss']();
-
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    expect(errorLogger.logErrorHandler).toHaveBeenCalledWith('failed to dismiss date modal');
-  });
-});

package/src/lib/date-input/date-modal.component.ts

@@ -1,67 +0,0 @@
-import {
-  Component,
-  inject,
-  Input,
-  signal,
-  ChangeDetectionStrategy,
-} from '@angular/core';
-import {
-  IonButton,
-  IonButtons,
-  IonContent,
-  IonDatetime,
-  IonHeader,
-  IonLabel,
-  IonTitle,
-  IonToolbar,
-  PopoverController,
-} from '@ionic/angular/standalone';
-import { ClassName, SneatBaseComponent } from '@sneat/ui';
-
-@Component({
-  imports: [
-    IonDatetime,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonContent,
-    IonButton,
-    IonButtons,
-    IonLabel,
-  ],
-  providers: [
-    {
-      provide: ClassName,
-      useValue: 'DateModalComponent',
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'sneat-contact-dob-modal',
-  templateUrl: 'date-modal.component.html',
-})
-export class DateModalComponent extends SneatBaseComponent {
-  @Input() title?: string;
-  @Input() max?: string;
-
-  public constructor() {
-    super();
-  }
-
-  private popoverCtrl = inject(PopoverController);
-
-  protected readonly $date = signal<string | undefined>(undefined);
-
-  protected onDateChanged(event: CustomEvent): void {
-    let { value } = event.detail;
-    if (value) {
-      value = (value as string).slice(0, 10);
-    }
-    this.$date.set(value);
-  }
-
-  protected dismiss(): void {
-    this.popoverCtrl
-      .dismiss(this.$date())
-      .catch(this.errorLogger.logErrorHandler('failed to dismiss date modal'));
-  }
-}

package/src/lib/dialog-header/dialog-header.component.html

@@ -1,8 +0,0 @@
-<ion-item color="primary" class="sneat-tiny-end-padding">
-  <ion-label>{{ dialogTitle }}</ion-label>
-  <ion-buttons slot="end">
-    <ion-button (click)="close($event)">
-      <ion-icon name="close-outline" />
-    </ion-button>
-  </ion-buttons>
-</ion-item>

package/src/lib/dialog-header/dialog-header.component.spec.ts

@@ -1,67 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ModalController } from '@ionic/angular/standalone';
-import { DialogHeaderComponent } from './dialog-header.component';
-
-describe('DialogHeaderComponent', () => {
-  let component: DialogHeaderComponent;
-  let fixture: ComponentFixture<DialogHeaderComponent>;
-  let modalController: { dismiss: ReturnType<typeof vi.fn> };
-
-  beforeEach(waitForAsync(async () => {
-    modalController = {
-      dismiss: vi.fn().mockResolvedValue(true),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [DialogHeaderComponent],
-      providers: [{ provide: ModalController, useValue: modalController }],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(DialogHeaderComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: '' },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(DialogHeaderComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default dialogTitle', () => {
-    expect(component.dialogTitle).toBe('Dialog');
-  });
-
-  it('should call modalController.dismiss when close is called', () => {
-    const mockEvent = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-    } as unknown as Event;
-
-    component.close(mockEvent);
-
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(modalController.dismiss).toHaveBeenCalled();
-  });
-
-  it('should handle dismiss error gracefully', async () => {
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
-    modalController.dismiss = vi.fn().mockRejectedValue(new Error('Dismiss failed'));
-
-    const mockEvent = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-    } as unknown as Event;
-
-    component.close(mockEvent);
-
-    // Wait for promise to reject
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    expect(consoleErrorSpy).toHaveBeenCalledWith(expect.any(Error));
-    consoleErrorSpy.mockRestore();
-  });
-});

package/src/lib/dialog-header/dialog-header.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input, inject } from '@angular/core';
-import {
-  ModalController,
-  IonButton,
-  IonButtons,
-  IonIcon,
-  IonItem,
-  IonLabel,
-} from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'sneat-dialog-header',
-  templateUrl: './dialog-header.component.html',
-  imports: [IonItem, IonLabel, IonButtons, IonButton, IonIcon],
-})
-export class DialogHeaderComponent {
-  private readonly modalController = inject(ModalController);
-
-  @Input() dialogTitle = 'Dialog';
-
-  close(event: Event): void {
-    event.stopPropagation();
-    event.preventDefault();
-    this.modalController.dismiss().catch(console.error);
-  }
-}

package/src/lib/dismissable.ts

@@ -1,6 +0,0 @@
-export interface IDismissable {
-  /**
-   * When `id` is not provided, it dismisses the top overlay.
-   */
-  dismiss(data?: unknown, role?: string, id?: string): Promise<boolean>;
-}

package/src/lib/error-card/sneat-error-card.component.html

@@ -1,20 +0,0 @@
-<ion-card>
-  <ion-card-header>
-    <ion-card-title color="danger">Error</ion-card-title>
-  </ion-card-header>
-  <ion-card-content>
-    @if (error?.message) {
-      <p>
-        {{ error?.message }}
-      </p>
-    }
-    <ion-item>
-      <ion-textarea
-        readonly="true"
-        [value]="error | json"
-        autoGrow="true"
-        color="medium"
-      />
-    </ion-item>
-  </ion-card-content>
-</ion-card>

package/src/lib/error-card/sneat-error-card.component.spec.ts

@@ -1,49 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { SneatErrorCardComponent } from './sneat-error-card.component';
-
-describe('SneatErrorCardComponent', () => {
-  let component: SneatErrorCardComponent;
-  let fixture: ComponentFixture<SneatErrorCardComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SneatErrorCardComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(SneatErrorCardComponent, {
-        set: {
-          imports: [],
-          schemas: [CUSTOM_ELEMENTS_SCHEMA],
-          template: '',
-        },
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(SneatErrorCardComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should accept error with message', () => {
-    const error = { message: 'Test error message' };
-    component.error = error;
-    expect(component.error).toBe(error);
-    expect(component.error.message).toBe('Test error message');
-  });
-
-  it('should accept error without message', () => {
-    const error = {};
-    component.error = error;
-    expect(component.error).toBe(error);
-    expect(component.error.message).toBeUndefined();
-  });
-
-  it('should handle undefined error', () => {
-    component.error = undefined;
-    expect(component.error).toBeUndefined();
-  });
-});

package/src/lib/error-card/sneat-error-card.component.ts

@@ -1,28 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import {
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardTitle,
-  IonItem,
-  IonTextarea,
-} from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'sneat-datatug-error-card',
-  templateUrl: './sneat-error-card.component.html',
-  imports: [
-    IonCard,
-    IonCardHeader,
-    IonCardTitle,
-    IonCardContent,
-    IonItem,
-    IonTextarea,
-    JsonPipe,
-  ],
-})
-export class SneatErrorCardComponent {
-  @Input()
-  error?: { message?: string };
-}