@sneat/ui 0.1.0

package/eslint.config.js

@@ -0,0 +1,7 @@
+const baseConfig = require('../../eslint.config.js');
+const { sneatLibConfig } = require('../../eslint.lib.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...sneatLibConfig(__dirname),
+];

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/ui",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@sneat/ui",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@ionic/angular": ">=8",
+    "@sneat/logging": ">=0.1.0"
+  },
+  "dependencies": {
+    "tslib": "2.8.1"
+  }
+}

package/project.json

@@ -0,0 +1,38 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/ui/src",
+  "prefix": "sneat",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:ng-packagr-lite",
+      "outputs": [
+        "{workspaceRoot}/dist/libs/ui"
+      ],
+      "options": {
+        "project": "libs/ui/ng-package.json",
+        "tsConfig": "libs/ui/tsconfig.lib.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/ui/tsconfig.lib.prod.json"
+        },
+        "development": {}
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": [
+        "{workspaceRoot}/coverage/libs/ui"
+      ],
+      "options": {
+        "tsConfig": "libs/ui/tsconfig.spec.json"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/focus';
+export * from './lib/components';
+export * from './lib/selector';

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './sneat-base.component';
+export * from './sneat-base-modal.component';

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

@@ -0,0 +1,22 @@
+import { inject, Injectable } from '@angular/core';
+import { SneatBaseComponent } from './sneat-base.component';
+import { ModalController } from '@ionic/angular/standalone';
+
+@Injectable()
+export abstract class SneatBaseModalComponent extends SneatBaseComponent {
+  private readonly modalController = inject(ModalController);
+
+  protected close(): void {
+    this.dismissModal();
+  }
+
+  protected dismissModal(data?: unknown, role?: string, id?: string): void {
+    this.modalController
+      .dismiss(data, role, id)
+      .catch(
+        this.errorLogger.logErrorHandler(
+          `Failed to close modal ${this.className}`,
+        ),
+      );
+  }
+}

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

@@ -0,0 +1,71 @@
+import { SneatBaseComponent } from './sneat-base.component';
+import { IErrorLogger } from '@sneat/core';
+import { Subject, Subscription } from 'rxjs';
+
+class TestComponent extends SneatBaseComponent {
+  constructor(errorLogger: IErrorLogger, className: string) {
+    super();
+    // @ts-expect-error accessing private property
+    this.errorLogger = errorLogger;
+    // @ts-expect-error accessing private property
+    this.className = className;
+    // @ts-expect-error accessing private property
+    this.destroyed = new Subject<void>();
+    // @ts-expect-error accessing private property
+    this.subs = new Subscription();
+  }
+
+  public getDestroyed(): Subject<void> {
+    // @ts-expect-error accessing private property
+    return this.destroyed;
+  }
+
+  public getSubs(): Subscription {
+    // @ts-expect-error accessing private property
+    return this.subs;
+  }
+
+  public log(_msg: string) {
+    void _msg;
+    // override log to avoid console output
+  }
+}
+
+describe('SneatBaseComponent', () => {
+  let component: TestComponent;
+  let errorLoggerMock: IErrorLogger;
+
+  beforeEach(() => {
+    errorLoggerMock = {
+      logError: vi.fn(),
+      logErrorHandler: vi.fn(),
+    } as unknown as IErrorLogger;
+    // Use Object.create to bypass constructor that calls inject()
+    component = Object.create(TestComponent.prototype) as TestComponent;
+    // @ts-expect-error accessing private property
+    component.errorLogger = errorLoggerMock;
+    // @ts-expect-error accessing private property
+    component.className = 'TestComponent';
+    // @ts-expect-error accessing private property
+    component.destroyed = new Subject<void>();
+    // @ts-expect-error accessing private property
+    component.subs = new Subscription();
+
+    // @ts-expect-error accessing private property
+    vi.spyOn(component.destroyed, 'next');
+    // @ts-expect-error accessing private property
+    vi.spyOn(component.subs, 'unsubscribe');
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit on destroyed and unsubscribe when ngOnDestroy is called', () => {
+    component.ngOnDestroy();
+    // @ts-expect-error accessing private property
+    expect(component.destroyed.next).toHaveBeenCalled();
+    // @ts-expect-error accessing private property
+    expect(component.subs.unsubscribe).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,19 @@
+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/index.ts

@@ -0,0 +1,6 @@
+export * from './selector-interfaces';
+export * from './selector-options';
+export * from './selector-base.service';
+export * from './selector-base.component';
+export * from './multi-selector';
+export * from './select-from-list';

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

@@ -0,0 +1,2 @@
+export * from './multi-selector.service';
+export * from './multi-selector.component';

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

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,147 @@
+/* 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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,49 @@
+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;
+  }
+}

package/src/lib/selector/select-from-list/index.ts

@@ -0,0 +1 @@
+export * from './select-from-list.component';