@sneat/ui 0.1.2 → 0.1.4

package/src/lib/components/sneat-base.component.ts

@@ -1,78 +0,0 @@
-import { inject, Injectable, InjectionToken, OnDestroy } from '@angular/core';
-import { createSetFocusToInput } from '../focus';
-import { ErrorLogger } from '@sneat/core';
-import { MonoTypeOperatorFunction, Subject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-export interface IConsole {
-  log(...data: unknown[]): void;
-
-  warn(...data: unknown[]): void;
-
-  trace(...data: unknown[]): void;
-
-  error(...data: unknown[]): void;
-}
-
-export const ClassName = new InjectionToken<string>('className');
-
-@Injectable()
-export abstract class SneatBaseComponent implements OnDestroy {
-  // protected $isInitialized = signal(false);
-  //
-  // // eslint-disable-next-line @angular-eslint/contextual-lifecycle
-  // public ngOnInit() {
-  // 	console.info(`${this.className}.SneatBaseComponent.ngOnInit()`);
-  // 	// $isInitialized is for workaround for https://angular.dev/errors/NG0950
-  // 	// Required input is accessed before a value is set.
-  // 	// Might be excessive and should be removed if we can find a better way.
-  // 	this.$isInitialized.set(true);
-  // }
-
-  private readonly destroyed = new Subject<void>();
-  // Signals that the component is destroyed and should not be used anymore
-  protected readonly destroyed$ = this.destroyed.asObservable();
-
-  // All active subscriptions of a component. Will be unsubscribed on destroy
-  protected readonly subs = new Subscription();
-
-  protected readonly console: IConsole = console;
-
-  protected readonly errorLogger = inject(ErrorLogger);
-
-  protected readonly logError = this.errorLogger.logError;
-  protected readonly logErrorHandler = this.errorLogger.logErrorHandler;
-
-  // Passes focus to the input element
-  protected readonly setFocusToInput = createSetFocusToInput(this.errorLogger);
-
-  protected readonly className = inject(ClassName);
-
-  public constructor() {
-    this.log(`${this.className}.SneatBaseComponent.constructor()`);
-  }
-
-  protected log(msg: string, ...data: unknown[]): void {
-    this.console.log(msg, ...data);
-  }
-
-  // protected readonly takeUntilDestroyed = <T>() =>
-  // 	takeUntil<T>(this.destroyed$);
-  protected takeUntilDestroyed<T>(): MonoTypeOperatorFunction<T> {
-    return takeUntil(this.destroyed$);
-  }
-
-  public ngOnDestroy(): void {
-    this.log(`${this.className}.SneatBaseComponent.ngOnDestroy()`);
-    this.unsubscribe(`${this.className}.SneatBaseComponent.ngOnDestroy()`);
-    this.destroyed?.next();
-    this.destroyed?.complete();
-  }
-
-  protected unsubscribe(reason?: string): void {
-    this.log(
-      `${this.className}.SneatBaseComponent.unsubscribe(reason: ${reason})`,
-    );
-    this.subs.unsubscribe();
-  }
-}

package/src/lib/focus.ts

@@ -1,19 +0,0 @@
-import { IonInput, IonTextarea } from '@ionic/angular/standalone';
-import { IErrorLogger } from '@sneat/core';
-
-export function createSetFocusToInput(errorLogger: IErrorLogger) {
-  return (input?: IonInput | IonTextarea, delay = 100): void => {
-    if (!input) {
-      console.error('can not set focus to undefined input');
-      return;
-    }
-    setTimeout(() => {
-      requestAnimationFrame(() => {
-        // input.getInputElement().then(el => el.focus()).catch(errorLogger.logErrorHandler('failed to set focus to input'));
-        input
-          .setFocus()
-          .catch(errorLogger.logErrorHandler('failed to set focus to input'));
-      });
-    }, delay);
-  };
-}

package/src/lib/selector/multi-selector/multi-selector.component.html

@@ -1,26 +0,0 @@
-<ion-card>
-  <ion-item-divider color="light">
-    <ion-label color="medium">{{ title }}</ion-label>
-    <ion-buttons slot="end">
-      <ion-button color="medium">
-        <ion-icon name="add-outline" />
-        <ion-label>Add</ion-label>
-      </ion-button>
-    </ion-buttons>
-  </ion-item-divider>
-
-  <ion-list>
-    @for (item of selectedItems; track item.id) {
-      <ion-item>
-        <ion-label>{{ item.title }}</ion-label>
-        @if (canRemove) {
-          <ion-buttons slot="end">
-            <ion-button title="Remove" (click)="removeItem($event, item)">
-              <ion-icon name="close-outline" />
-            </ion-button>
-          </ion-buttons>
-        }
-      </ion-item>
-    }
-  </ion-list>
-</ion-card>

package/src/lib/selector/multi-selector/multi-selector.component.spec.ts

@@ -1,147 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { ErrorLogger } from '@sneat/core';
-import { ClassName } from '../../components';
-import { OverlayController } from '../selector-base.component';
-import { MultiSelectorComponent } from './multi-selector.component';
-import { ISelectItem } from '../selector-interfaces';
-
-// Suppress Ionic icon warnings - mock console methods to filter Ionic-specific errors
-const originalWarn = console.warn;
-const originalError = console.error;
-
-vi.spyOn(console, 'error').mockImplementation((...args: any[]) => {
-  const message = args[0]?.toString() || '';
-  // Only suppress Ionic/Stencil icon loading errors
-  if (
-    message.includes('Ionicons') ||
-    message.includes('@ionic/core/components/icon') ||
-    message.includes('getAssetPath')
-  ) {
-    return;
-  }
-  // Let other errors through
-  originalError(...args);
-});
-
-vi.spyOn(console, 'warn').mockImplementation((...args: any[]) => {
-  const message = args[0]?.toString() || '';
-  // Only suppress Ionic icon warnings
-  if (message.includes('Ionicons') || message.includes('Could not load icon')) {
-    return;
-  }
-  // Let other warnings through
-  originalWarn(...args);
-});
-
-describe('MultiSelectorComponent', () => {
-  let component: MultiSelectorComponent;
-  let fixture: ComponentFixture<MultiSelectorComponent>;
-
-  const mockItems: ISelectItem[] = [
-    { id: '1', title: 'Item 1' },
-    { id: '2', title: 'Item 2' },
-  ];
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MultiSelectorComponent],
-      providers: [
-        { provide: ClassName, useValue: 'TestComponent' },
-        {
-          provide: ErrorLogger,
-          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
-        },
-        {
-          provide: OverlayController,
-          useValue: { dismiss: vi.fn().mockResolvedValue(undefined) },
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(MultiSelectorComponent, {
-        set: {
-          imports: [],
-          schemas: [CUSTOM_ELEMENTS_SCHEMA],
-          providers: [
-            { provide: ClassName, useValue: 'TestComponent' },
-            {
-              provide: OverlayController,
-              useValue: { dismiss: vi.fn().mockResolvedValue(undefined) },
-            },
-          ],
-        },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(MultiSelectorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  describe('ngOnChanges', () => {
-    it('should set selectedItems when allItems changes', () => {
-      component.allItems = mockItems;
-      component.selectedIDs = ['1'];
-      component.ngOnChanges({
-        allItems: new SimpleChange(undefined, mockItems, true),
-      });
-      // @ts-expect-error accessing protected member
-      expect(component.selectedItems).toEqual([mockItems[0]]);
-    });
-  });
-
-  describe('removeItem', () => {
-    it('should remove item and emit event', () => {
-      component.allItems = mockItems;
-      component.selectedIDs = ['1', '2'];
-      component.ngOnChanges({
-        allItems: new SimpleChange(undefined, mockItems, true),
-      });
-
-      const removeSpy = vi.spyOn(component.removeItems, 'emit');
-      const event = { stopPropagation: vi.fn() };
-      // @ts-expect-error accessing protected member
-      component.removeItem(event as any, mockItems[0]);
-
-      expect(event.stopPropagation).toHaveBeenCalled();
-      // @ts-expect-error accessing protected member
-      expect(component.selectedItems).toEqual([mockItems[1]]);
-      expect(removeSpy).toHaveBeenCalledWith([{ event, item: mockItems[0] }]);
-    });
-  });
-  describe('SelectorBaseComponent coverage', () => {
-    it('should close and dismiss overlay', () => {
-      // @ts-expect-error accessing protected member
-      const dismissSpy = vi.spyOn(component.overlayController, 'dismiss');
-      const event = { stopPropagation: vi.fn(), preventDefault: vi.fn() };
-      // @ts-expect-error accessing protected member
-      component.close(event as any);
-      expect(event.stopPropagation).toHaveBeenCalled();
-      expect(event.preventDefault).toHaveBeenCalled();
-      expect(dismissSpy).toHaveBeenCalled();
-    });
-
-    it('should close without event and dismiss overlay', () => {
-      // @ts-expect-error accessing protected member
-      const dismissSpy = vi.spyOn(component.overlayController, 'dismiss');
-      // @ts-expect-error accessing protected member
-      component.close();
-      expect(dismissSpy).toHaveBeenCalled();
-    });
-
-    it('should ignore ngOnChanges if allItems not changed', () => {
-      // @ts-expect-error accessing protected member
-      component.selectedItems = undefined;
-      component.ngOnChanges({
-        other: new SimpleChange(undefined, 'value', true),
-      });
-      // @ts-expect-error accessing protected member
-      expect(component.selectedItems).toBeUndefined();
-    });
-  });
-});

package/src/lib/selector/multi-selector/multi-selector.component.ts

@@ -1,79 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-} from '@angular/core';
-import {
-  IonButton,
-  IonButtons,
-  IonCard,
-  IonIcon,
-  IonItem,
-  IonItemDivider,
-  IonLabel,
-  IonList,
-  ModalController,
-} from '@ionic/angular/standalone';
-import { ClassName } from '../../components';
-import { ISelectItem, ISelectItemEvent } from '../selector-interfaces';
-import {
-  OverlayController,
-  SelectorBaseComponent,
-} from '../selector-base.component';
-
-@Component({
-  selector: 'sneat-multi-selector',
-  templateUrl: './multi-selector.component.html',
-  imports: [
-    IonCard,
-    IonItemDivider,
-    IonLabel,
-    IonButtons,
-    IonButton,
-    IonItem,
-    IonIcon,
-    IonList,
-  ],
-  providers: [
-    {
-      provide: ClassName,
-      useValue: 'MultiSelectorComponent',
-    },
-    {
-      provide: OverlayController,
-      useClass: ModalController,
-    },
-  ],
-})
-export class MultiSelectorComponent<T = ISelectItem>
-  extends SelectorBaseComponent<T>
-  implements OnChanges
-{
-  @Input() title = 'Select';
-
-  @Input() canRemove = false;
-  @Input() public allItems?: ISelectItem[];
-  @Input() public selectedIDs?: readonly string[];
-
-  @Output() readonly removeItems = new EventEmitter<ISelectItemEvent[]>();
-  @Output() readonly addItems = new EventEmitter<ISelectItemEvent[]>();
-
-  protected selectedItems?: ISelectItem[];
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['allItems']) {
-      this.selectedItems = this.allItems?.filter((item) =>
-        this.selectedIDs?.includes(item.id),
-      );
-    }
-  }
-
-  protected removeItem(event: Event, item: ISelectItem): void {
-    event.stopPropagation();
-    this.selectedItems = this.selectedItems?.filter((i) => i.id !== item.id);
-    this.removeItems.emit([{ event, item }]);
-  }
-}

package/src/lib/selector/multi-selector/multi-selector.service.spec.ts

@@ -1,91 +0,0 @@
-import { MultiSelectorService } from './multi-selector.service';
-import { ISelectItem } from '../selector-interfaces';
-import { ErrorLogger } from '@sneat/core';
-import { ModalController } from '@ionic/angular/standalone';
-
-describe('MultiSelectorService', () => {
-  let service: MultiSelectorService;
-  let errorLoggerMock: ErrorLogger;
-  let modalControllerMock: ModalController;
-
-  beforeEach(() => {
-    errorLoggerMock = {
-      logError: vi.fn(),
-      logErrorHandler: vi.fn(() => vi.fn()),
-    };
-    modalControllerMock = {
-      create: vi.fn(),
-    };
-    service = new MultiSelectorService(errorLoggerMock, modalControllerMock);
-  });
-
-  it('should create', () => {
-    expect(service).toBeTruthy();
-  });
-
-  describe('selectMultiple', () => {
-    const items: ISelectItem[] = [{ id: '1', title: 'test' }];
-
-    it('should resolve with selected items on success', async () => {
-      const modalMock = {
-        present: vi.fn().mockReturnValue(Promise.resolve()),
-        onDidDismiss: vi.fn().mockReturnValue(
-          Promise.resolve({ data: { selectedItems: items } }),
-        ),
-      };
-      modalControllerMock.create.mockReturnValue(Promise.resolve(modalMock));
-
-      const result = await service.selectMultiple(items, []);
-      expect(result).toEqual(items);
-      expect(modalControllerMock.create).toHaveBeenCalled();
-      expect(modalMock.present).toHaveBeenCalled();
-    });
-
-    it('should reject and log error if modal creation fails', async () => {
-      modalControllerMock.create.mockReturnValue(Promise.reject('fail'));
-      await expect(service.selectMultiple([], [])).rejects.toBe('fail');
-      expect(errorLoggerMock.logError).toHaveBeenCalledWith(
-        'fail',
-        'Failed to create modal',
-      );
-    });
-
-    it('should reject and log error if modal presentation fails', async () => {
-      const modalMock = {
-        present: vi.fn().mockReturnValue(Promise.reject('present-fail')),
-        onDidDismiss: vi.fn().mockReturnValue(new Promise(() => { /* never resolves */ })),
-      };
-      modalControllerMock.create.mockReturnValue(Promise.resolve(modalMock));
-      await expect(service.selectMultiple([], [])).rejects.toBe('present-fail');
-      expect(errorLoggerMock.logError).toHaveBeenCalledWith(
-        'Failed to present modal',
-      );
-    });
-
-    it('should reject and log error if modal dismiss fails', async () => {
-      const modalMock = {
-        present: vi.fn().mockReturnValue(Promise.resolve()),
-        onDidDismiss: vi.fn().mockReturnValue(Promise.reject('dismiss-fail')),
-      };
-      modalControllerMock.create.mockReturnValue(Promise.resolve(modalMock));
-      await expect(service.selectMultiple([], [])).rejects.toBe('dismiss-fail');
-      expect(errorLoggerMock.logError).toHaveBeenCalledWith(
-        'dismiss-fail',
-        'Failed to handle modal dismiss',
-      );
-    });
-
-    it('should resolve with empty array if selectedItems is missing in response', async () => {
-      const modalMock = {
-        present: vi.fn().mockReturnValue(Promise.resolve()),
-        onDidDismiss: vi.fn().mockReturnValue(
-          Promise.resolve({ data: {} }),
-        ),
-      };
-      modalControllerMock.create.mockReturnValue(Promise.resolve(modalMock));
-
-      const result = await service.selectMultiple([], []);
-      expect(result).toEqual([]);
-    });
-  });
-});

package/src/lib/selector/multi-selector/multi-selector.service.ts

@@ -1,49 +0,0 @@
-import { Inject } from '@angular/core';
-import { ModalController, ModalOptions } from '@ionic/angular/standalone';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-import { ISelectItem } from '../selector-interfaces';
-import { MultiSelectorComponent } from './multi-selector.component';
-
-export class MultiSelectorService {
-  constructor(
-    @Inject(ErrorLogger) private readonly errorLogger: IErrorLogger,
-    private readonly modalController: ModalController,
-  ) {}
-
-  selectMultiple(
-    items: ISelectItem[],
-    selectedItems: ISelectItem[],
-  ): Promise<ISelectItem[]> {
-    const result = new Promise<ISelectItem[]>((resolve, reject) => {
-      const modalOptions: ModalOptions = {
-        component: MultiSelectorComponent,
-        componentProps: {
-          items,
-          selectedItems,
-        },
-        keyboardClose: true,
-      };
-      this.modalController
-        .create(modalOptions)
-        .then((modal) => {
-          modal
-            .onDidDismiss()
-            .then((res) => resolve(res.data?.selectedItems || []))
-            .catch((err) => {
-              this.errorLogger.logError(err, 'Failed to handle modal dismiss');
-              reject(err);
-            });
-          modal.present().catch((err) => {
-            reject(err);
-            this.errorLogger.logError('Failed to present modal');
-          });
-        })
-        .catch((err) => {
-          this.errorLogger.logError(err, 'Failed to create modal');
-          reject(err);
-        });
-    });
-
-    return result;
-  }
-}