@sneat/ui 0.1.3 → 0.1.4

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

@@ -1,283 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  EventEmitter,
-  forwardRef,
-  input,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  signal,
-  SimpleChanges,
-  ViewChild,
-  inject,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-} from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import {
-  IonButton,
-  IonButtons,
-  IonCheckbox,
-  IonIcon,
-  IonInput,
-  IonItem,
-  IonItemDivider,
-  IonItemGroup,
-  IonLabel,
-  IonList,
-  IonRadio,
-  IonRadioGroup,
-  IonSelect,
-  IonSelectOption,
-  IonSpinner,
-} from '@ionic/angular/standalone';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-import { NEVER, Observable, Subject, takeUntil } from 'rxjs';
-import { ISelectItem } from '../selector-interfaces';
-
-@Component({
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SelectFromListComponent),
-      multi: true,
-    },
-  ],
-  imports: [
-    FormsModule,
-    RouterModule,
-    IonItem,
-    IonIcon,
-    IonSelect,
-    IonSelectOption,
-    IonButtons,
-    IonButton,
-    IonInput,
-    IonItemDivider,
-    IonRadioGroup,
-    IonList,
-    IonLabel,
-    IonCheckbox,
-    IonRadio,
-    IonItemGroup,
-    IonSpinner,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'sneat-select-from-list',
-  templateUrl: './select-from-list.component.html',
-})
-export class SelectFromListComponent
-  implements ControlValueAccessor, OnChanges, OnDestroy
-{
-  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
-
-  @Input() value: string | undefined = '';
-  @Output() readonly valueChange = new EventEmitter<string>();
-
-  @Input() filterLabel = 'Find';
-  @Input() label = 'Please choose';
-  @Input() listLabel?: 'divider';
-  @Input() listLabelColor?:
-    | 'light'
-    | 'medium'
-    | 'primary'
-    | 'secondary'
-    | 'tertiary';
-  @Input() isFilterable?: boolean;
-  @Input() isLoading?: boolean;
-  @Input() items?: readonly ISelectItem[];
-  @Input() items$: Observable<ISelectItem[]> = NEVER;
-
-  private $items = signal<undefined | readonly ISelectItem[]>(undefined);
-
-  @Input() lastItemLines?: 'none' | 'inset' | 'full';
-  @Input() labelPlacement?: 'start' | 'end' | 'fixed' | 'stacked';
-  @Input() justify?: 'start' | 'end' | 'space-between';
-  @Input() other: 'top' | 'bottom' | 'none' = 'none';
-  @Input() canAdd = false;
-  @Input() filterItem?: (item: ISelectItem, filter: string) => boolean;
-
-  @Output() readonly filterChanged = new EventEmitter<string>();
-
-  @Input() selectMode: 'single' | 'multiple' = 'single';
-
-  @Input() isReadonly = false;
-
-  public $isProcessing = input<boolean>();
-
-  @Input() sortBy?: 'title' | 'id';
-
-  // @Input() ngModel?: string;
-  // @Output() readonly ngModelChange = new EventEmitter<string>();
-
-  private destroyed = new Subject<void>();
-
-  @ViewChild(IonInput, { static: false }) addInput?: IonInput;
-  @ViewChild('filterInput', { static: false }) filterInput?: IonInput;
-  @ViewChild('selectInput', { static: false }) selectInput?: IonSelect;
-
-  protected readonly $displayItems = signal<undefined | readonly ISelectItem[]>(
-    undefined,
-  );
-
-  protected readonly $hiddenCount = computed(() => {
-    return (this.$items()?.length || 0) - (this.$displayItems()?.length || 0);
-  });
-
-  protected isDisabled = false;
-
-  protected readonly $filter = signal('');
-
-  public focus(): void {
-    setTimeout(() => {
-      this.filterInput
-        ?.setFocus()
-        .catch(
-          this.errorLogger.logErrorHandler(
-            'Failed to set focus to filter input',
-          ),
-        );
-    }, 100);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['items']) {
-      this.$items.set(this.items);
-      this.applyFilter();
-    }
-    if (changes['items$'] && this.items$) {
-      this.items$?.pipe(takeUntil(this.destroyed)).subscribe((items) => {
-        this.$items.set(items);
-        this.applyFilter();
-      });
-    }
-  }
-
-  private applyFilter(): void {
-    const f = this.$filter().trim().toLowerCase();
-    // console.log('SelectFromListComponent.applyFilter', f);
-    const items = this.$items();
-    let displayItems = f
-      ? items?.filter(
-          (v) =>
-            v.title.toLowerCase().includes(f) ||
-            v.longTitle?.toLowerCase().includes(f) ||
-            (this.filterItem && this.filterItem(v, f)),
-        )
-      : items;
-    if (displayItems && this.sortBy) {
-      switch (this.sortBy) {
-        case 'title':
-          displayItems = [...displayItems].toSorted((a, b) =>
-            a.title.localeCompare(b.title),
-          );
-          break;
-        case 'id':
-          displayItems = [...displayItems].toSorted((a, b) =>
-            a.id.localeCompare(b.id),
-          );
-          break;
-      }
-    }
-    this.$displayItems.set(displayItems);
-  }
-
-  protected select(item: ISelectItem): void {
-    switch (this.selectMode) {
-      case 'multiple':
-        return;
-      case 'single':
-        this.$selectedItem.set(item);
-        this.onChange(item.id);
-        if (this.$filter()) {
-          this.clearFilter();
-        }
-    }
-  }
-
-  protected readonly $selectedItem = signal<ISelectItem | undefined>(undefined);
-
-  protected onRadioChanged(event: Event): void {
-    if (this.selectMode !== 'single') {
-      return;
-    }
-    const value = (event as CustomEvent).detail['value'] as string;
-    this.value = value;
-    this.onChange(value);
-    this.clearFilter();
-  }
-
-  protected onSelectChanged(): void {
-    // this.value = (event as CustomEvent).detail['value'] as string;
-    this.onChange(this.value || '');
-  }
-
-  protected onChange = (id: string) => {
-    this.value = id;
-    if (this.$selectedItem()?.id !== id) {
-      const selectedItem = this.items?.find((item) => item.id === id);
-      this.$selectedItem.set(selectedItem);
-    }
-    this.valueChange.emit(this.value);
-  };
-
-  onTouched: () => void = () => void 0;
-
-  registerOnChange(fn: (v: unknown) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.isDisabled = isDisabled;
-  }
-
-  writeValue(obj: unknown): void {
-    this.value = obj as string;
-  }
-
-  protected onFilterChanged(
-    event: CustomEvent,
-    source: 'ionChange' | 'ionInput',
-  ): void {
-    void source;
-    this.$filter.set(event.detail.value || '');
-    this.applyFilter();
-    this.filterChanged.emit(this.$filter());
-  }
-
-  protected clearFilter(): void {
-    this.$filter.set('');
-    this.filterChanged.emit(this.$filter());
-    this.applyFilter();
-  }
-
-  protected deselect(): void {
-    this.value = '';
-    this.onChange(this.value);
-  }
-
-  protected onAdd(event: Event): void {
-    event.preventDefault();
-    this.value = this.$filter();
-    this.onChange(this.value);
-  }
-
-  protected onCheckboxChange(event: CustomEvent, item: ISelectItem): void {
-    void event;
-    void item;
-  }
-
-  ngOnDestroy(): void {
-    this.destroyed.next();
-  }
-}

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

@@ -1,43 +0,0 @@
-import {
-  Directive,
-  inject,
-  InjectionToken,
-  Input,
-  signal,
-} from '@angular/core';
-import { ModalController, PopoverController } from '@ionic/angular/standalone';
-import { SneatBaseComponent } from '../components/sneat-base.component';
-
-export const OverlayController = new InjectionToken<
-  ModalController | PopoverController
->('OverlayController');
-
-@Directive()
-export abstract class SelectorBaseComponent<T> extends SneatBaseComponent {
-  @Input() public selectMode?: 'single' | 'multiple';
-
-  protected readonly overlayController = inject(OverlayController);
-
-  protected $selectedItems = signal<readonly T[]>([]);
-
-  protected close(event?: Event): void {
-    event?.stopPropagation();
-    event?.preventDefault();
-    this.overlayController
-      .dismiss({ selectedItems: this.$selectedItems() })
-      .catch(
-        this.errorLogger.logErrorHandler(
-          'failed to dismiss contact selector modal',
-        ),
-      );
-  }
-}
-
-@Directive()
-export abstract class SelectorModalComponent<
-  T,
-> extends SelectorBaseComponent<T> {
-  protected get modalController() {
-    return this.overlayController as ModalController;
-  }
-}

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

@@ -1,62 +0,0 @@
-import { inject } from '@angular/core';
-import { ModalController, ModalOptions } from '@ionic/angular/standalone';
-import type { ComponentProps, ComponentRef } from '@ionic/core';
-import { ErrorLogger } from '@sneat/core';
-import { ISelectItem } from './selector-interfaces';
-import { ISelectorOptions } from './selector-options';
-
-export abstract class SelectorBaseService<T = ISelectItem> {
-  protected readonly errorLogger = inject(ErrorLogger);
-  private readonly modalController = inject(ModalController);
-
-  protected constructor(private readonly component: ComponentRef) {}
-
-  public async selectSingleInModal(
-    options: ISelectorOptions<T>,
-  ): Promise<T | null> {
-    const result = await this.selectMultipleInModal(options);
-    return result ? result[0] : null;
-  }
-
-  // We make it protected so each service must override it for easiness of navigation
-  protected async selectMultipleInModal(
-    options: ISelectorOptions<T>,
-  ): Promise<T[] | undefined> {
-
-    let result: readonly T[] | undefined = undefined;
-
-    const onSelected = options.onSelected;
-
-    options = {
-      ...options,
-      onSelected: async (items?: T[]): Promise<void> => {
-        if (onSelected) {
-          await onSelected(items);
-        }
-        await this.modalController.dismiss(items);
-        result = items;
-      },
-    };
-    let componentProps: ComponentProps<unknown> = {
-      ...options.componentProps,
-      selectMode: 'multiple',
-      onSelected: options.onSelected,
-      mode: 'modal',
-    };
-    if (options.title) {
-      componentProps = { ...componentProps, title: options.title };
-    }
-    const modalOptions: ModalOptions = {
-      component: this.component,
-      componentProps: componentProps,
-      keyboardClose: true,
-    };
-    const modal = await this.modalController.create(modalOptions);
-    await modal.present();
-
-    // 🔹 Track when the modal is dismissed
-    await modal.onDidDismiss();
-
-    return result;
-  }
-}

package/src/lib/selector/selector-interfaces.ts

@@ -1,28 +0,0 @@
-export type IonicColor =
-  | 'danger'
-  | 'success'
-  | 'warning'
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'dark'
-  | 'medium'
-  | 'light';
-
-export interface ISelectItem {
-  readonly id: string;
-  readonly title: string;
-  readonly shortTitle?: string;
-  readonly longTitle?: string;
-  readonly description1?: string;
-  readonly description2?: string;
-  readonly emoji?: string;
-  readonly iconName?: string;
-  readonly iconColor?: IonicColor;
-  readonly labelColor?: IonicColor;
-}
-
-export interface ISelectItemEvent {
-  item: ISelectItem;
-  event: Event;
-}

package/src/lib/selector/selector-options.ts

@@ -1,18 +0,0 @@
-import { ComponentProps } from '@ionic/core';
-import { Signal } from '@angular/core';
-import { Observable } from 'rxjs';
-
-export interface ISelectorEvents<T> {
-  readonly onSelected?: (item?: T[]) => Promise<void>;
-  readonly onAdded?: (item: T) => Observable<void>;
-  readonly onRemoved?: (item: T) => Observable<void>;
-}
-
-export interface ISelectorOptions<T> extends ISelectorEvents<T> {
-  readonly items?: Signal<readonly T[]>;
-  readonly selectedItems?: readonly T[];
-  readonly max?: number;
-  readonly title?: string;
-
-  componentProps?: ComponentProps<unknown>;
-}

package/src/test-setup.ts

@@ -1,3 +0,0 @@
-import { setupTestEnvironment } from '@sneat/core/testing';
-
-setupTestEnvironment();

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.angular.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

package/tsconfig.lib.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.lib.base.json",
-  "exclude": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/test-setup.ts",
-    "src/lib/testing/**/*"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}

package/tsconfig.spec.json

@@ -1,31 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "types": [
-      "vitest/globals",
-      "vitest/importMeta",
-      "vite/client",
-      "node",
-      "vitest"
-    ]
-  },
-  "include": [
-    "vite.config.ts",
-    "vite.config.mts",
-    "vitest.config.ts",
-    "vitest.config.mts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.js",
-    "src/**/*.spec.js",
-    "src/**/*.test.jsx",
-    "src/**/*.spec.jsx",
-    "src/**/*.d.ts"
-  ],
-  "files": [
-    "src/test-setup.ts"
-  ]
-}

package/vite.config.mts

@@ -1,10 +0,0 @@
-/// <reference types='vitest' />
-import { defineConfig } from 'vitest/config';
-import { createBaseViteConfig } from '../../vite.config.base';
-
-export default defineConfig(() =>
-	createBaseViteConfig({
-		dirname: __dirname,
-		name: 'ui',
-	}),
-);