@sneat/components 0.1.2 → 0.1.4

package/src/lib/country-selector/countries-loader.service.spec.ts

@@ -1,149 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { HttpClient } from '@angular/common/http';
-import { of, throwError } from 'rxjs';
-import { CountriesLoaderService } from './countries-loader.service';
-import { GeoRegion } from './countries';
-
-describe('CountriesLoaderService', () => {
-  let service: CountriesLoaderService;
-  let httpClient: { get: ReturnType<typeof vi.fn> };
-
-  const mockCountriesData = {
-    countriesByID: {
-      US: {
-        id: 'US',
-        id3: 'USA',
-        title: 'United States',
-        geoRegions: ['Americas', 'Northern America'] as GeoRegion[],
-        emoji: '🇺🇸',
-      },
-      UA: {
-        id: 'UA',
-        id3: 'UKR',
-        title: 'Ukraine',
-        geoRegions: ['Europe', 'Eastern Europe'] as GeoRegion[],
-        emoji: '🇺🇦',
-      },
-      JP: {
-        id: 'JP',
-        id3: 'JPN',
-        title: 'Japan',
-        geoRegions: ['Asia', 'Eastern Asia'] as GeoRegion[],
-        emoji: '🇯🇵',
-      },
-    },
-    unknownCountry: {
-      id: '--',
-      id3: '---',
-      title: 'Unknown',
-      geoRegions: [] as GeoRegion[],
-      emoji: '🏳️',
-    },
-  };
-
-  beforeEach(() => {
-    httpClient = {
-      get: vi.fn(() => of(mockCountriesData)),
-    };
-
-    TestBed.configureTestingModule({
-      providers: [
-        CountriesLoaderService,
-        { provide: HttpClient, useValue: httpClient },
-      ],
-    });
-    service = TestBed.inject(CountriesLoaderService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should load countries from JSON file', async () => {
-    const countries = await service.getCountries();
-    expect(httpClient.get).toHaveBeenCalledWith('assets/data/countries.json');
-    expect(countries.length).toBe(3);
-  });
-
-  it('should return countries by ID', async () => {
-    const countriesByID = await service.getCountriesByID();
-    expect(countriesByID['US']).toBeDefined();
-    expect(countriesByID['US'].title).toBe('United States');
-    expect(countriesByID['UA'].title).toBe('Ukraine');
-  });
-
-  it('should return specific country by ID', async () => {
-    const country = await service.getCountryByID('US');
-    expect(country).toBeDefined();
-    expect(country?.title).toBe('United States');
-    expect(country?.emoji).toBe('🇺🇸');
-  });
-
-  it('should return undefined for non-existent country', async () => {
-    const country = await service.getCountryByID('XX');
-    expect(country).toBeUndefined();
-  });
-
-  it('should return unknown country', async () => {
-    const unknownCountry = await service.getUnknownCountry();
-    expect(unknownCountry).toBeDefined();
-    expect(unknownCountry.id).toBe('--');
-    expect(unknownCountry.title).toBe('Unknown');
-  });
-
-  it('should filter countries by region', async () => {
-    const europeanCountries = await service.getCountriesByRegion('Europe' as GeoRegion);
-    expect(europeanCountries.length).toBe(1);
-    expect(europeanCountries[0].id).toBe('UA');
-  });
-
-  it('should return empty array for region with no countries', async () => {
-    const africaCountries = await service.getCountriesByRegion('Africa' as GeoRegion);
-    expect(africaCountries.length).toBe(0);
-  });
-
-  it('should cache countries data and not reload', async () => {
-    await service.getCountries();
-    expect(httpClient.get).toHaveBeenCalledTimes(1);
-
-    await service.getCountries();
-    expect(httpClient.get).toHaveBeenCalledTimes(1); // Still only called once
-  });
-
-  it('should handle load error gracefully', async () => {
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
-    httpClient.get = vi.fn(() => throwError(() => new Error('Load failed')));
-
-    const service2 = TestBed.inject(CountriesLoaderService);
-    const countries = await service2.getCountries();
-
-    expect(consoleSpy).toHaveBeenCalledWith('Failed to load countries:', expect.any(Error));
-    expect(countries).toEqual([]);
-    consoleSpy.mockRestore();
-  });
-
-  it('should return unknown country after load error', async () => {
-    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
-    httpClient.get = vi.fn(() => throwError(() => new Error('Load failed')));
-
-    const service2 = TestBed.inject(CountriesLoaderService);
-    const unknownCountry = await service2.getUnknownCountry();
-
-    expect(unknownCountry).toBeDefined();
-    expect(unknownCountry.id).toBe('--');
-    consoleSpy.mockRestore();
-  });
-
-  it('should handle concurrent load requests', async () => {
-    const [countries1, countries2, countries3] = await Promise.all([
-      service.getCountries(),
-      service.getCountriesByID(),
-      service.getCountryByID('US'),
-    ]);
-
-    expect(httpClient.get).toHaveBeenCalledTimes(1); // Should only load once
-    expect(countries1.length).toBe(3);
-    expect(Object.keys(countries2).length).toBe(3);
-    expect(countries3?.id).toBe('US');
-  });
-});

package/src/lib/country-selector/countries-loader.service.ts

@@ -1,100 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { firstValueFrom } from 'rxjs';
-import { GeoRegion, ICountry } from './countries';
-
-interface CountriesData {
-  countriesByID: Record<string, ICountry>;
-  unknownCountry: ICountry;
-}
-
-/**
- * Service to lazy load country data.
- * This reduces the initial bundle size by loading country data on-demand.
- */
-@Injectable({ providedIn: 'root' })
-export class CountriesLoaderService {
-  private readonly http = inject(HttpClient);
-  private countriesData?: CountriesData;
-  private loadPromise?: Promise<void>;
-
-  /**
-   * Loads country data from JSON file.
-   * Subsequent calls return the same promise (singleton pattern).
-   */
-  private async loadCountries(): Promise<void> {
-    if (this.countriesData) {
-      return; // Already loaded
-    }
-
-    if (!this.loadPromise) {
-      this.loadPromise = (async () => {
-        try {
-          this.countriesData = await firstValueFrom(
-            this.http.get<CountriesData>('assets/data/countries.json'),
-          );
-        } catch (error) {
-          console.error('Failed to load countries:', error);
-          // Set to empty to avoid repeated failures
-          this.countriesData = {
-            countriesByID: {},
-            unknownCountry: {
-              id: '--',
-              id3: '---',
-              title: 'Unknown',
-              geoRegions: [],
-              emoji: '🏳️',
-            },
-          };
-        }
-      })();
-    }
-
-    return this.loadPromise;
-  }
-
-  /**
-   * Gets all countries as an array.
-   * Automatically loads country data if not yet loaded.
-   */
-  async getCountries(): Promise<readonly ICountry[]> {
-    await this.loadCountries();
-    return Object.values(this.countriesData!.countriesByID);
-  }
-
-  /**
-   * Gets countries by ID lookup.
-   * Automatically loads country data if not yet loaded.
-   */
-  async getCountriesByID(): Promise<Record<string, ICountry>> {
-    await this.loadCountries();
-    return this.countriesData!.countriesByID;
-  }
-
-  /**
-   * Gets a specific country by ID.
-   * Automatically loads country data if not yet loaded.
-   */
-  async getCountryByID(id: string): Promise<ICountry | undefined> {
-    await this.loadCountries();
-    return this.countriesData!.countriesByID[id];
-  }
-
-  /**
-   * Gets the unknown country constant.
-   * Automatically loads country data if not yet loaded.
-   */
-  async getUnknownCountry(): Promise<ICountry> {
-    await this.loadCountries();
-    return this.countriesData!.unknownCountry;
-  }
-
-  /**
-   * Gets countries filtered by geo region.
-   * Automatically loads country data if not yet loaded.
-   */
-  async getCountriesByRegion(region: GeoRegion): Promise<readonly ICountry[]> {
-    const countries = await this.getCountries();
-    return countries.filter((c) => c.geoRegions.includes(region));
-  }
-}

package/src/lib/country-selector/countries.ts

@@ -1,42 +0,0 @@
-export type GeoRegion =
-  | 'Europe'
-  | 'Asia'
-  | 'Americas'
-  | 'South America'
-  | 'North America'
-  | 'Pacific Ocean'
-  | 'Africa';
-
-export interface ICountry {
-  id: string;
-  id3: string;
-  geoRegions: GeoRegion[];
-  title: string;
-  longTitle?: string;
-  shortTitle?: string;
-  emoji: string;
-}
-
-/**
- * @deprecated Use CountriesLoaderService.getCountriesByID() instead.
- * Country data is now lazy-loaded to reduce bundle size.
- */
-export const countriesByID: Record<string, ICountry> = {};
-
-/**
- * @deprecated Use CountriesLoaderService.getUnknownCountry() instead.
- * Country data is now lazy-loaded to reduce bundle size.
- */
-export const unknownCountry: ICountry = {
-  id: '--',
-  id3: '---',
-  title: 'Unknown',
-  geoRegions: [],
-  emoji: '🏳️',
-};
-
-/**
- * @deprecated Use CountriesLoaderService.getCountries() instead.
- * Country data is now lazy-loaded to reduce bundle size.
- */
-export const countries: ICountry[] = [];

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

@@ -1,24 +0,0 @@
-<sneat-select-from-list
-  [value]="countryID || ''"
-  [isFilterable]="true"
-  [filterLabel]="label"
-  [label]="label"
-  [items]="countries()"
-  [(ngModel)]="countryID"
-  (ngModelChange)="onChanged()"
-  [isReadonly]="readonly"
-  [filterItem]="filterCountryByCode"
-  (filterChanged)="onFilterChanged($event)"
-  labelPlacement="start"
->
-  @if (!countryID && !filter()) {
-    <ion-segment [(ngModel)]="geoRegion" (ionChange)="onRegionChanged($event)">
-      <ion-segment-button value="All">All</ion-segment-button>
-      @for (region of geoRegions; track region.id) {
-        <ion-segment-button [value]="region.id">
-          <small>{{ region.id }}</small>
-        </ion-segment-button>
-      }
-    </ion-segment>
-  }
-</sneat-select-from-list>

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

@@ -1,5 +0,0 @@
-describe('CountrySelectorComponent', () => {
-  it('should create', () => {
-    expect(true).toBeTruthy();
-  });
-});

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

@@ -1,125 +0,0 @@
-import {
-  Component,
-  computed,
-  EventEmitter,
-  inject,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  signal,
-  SimpleChanges,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
-import { ISelectItem, SelectFromListComponent } from '@sneat/ui';
-import { GeoRegion, ICountry } from './countries';
-import { CountriesLoaderService } from './countries-loader.service';
-
-@Component({
-  selector: 'sneat-country-selector',
-  templateUrl: './country-selector.component.html',
-  imports: [FormsModule, SelectFromListComponent, IonSegment, IonSegmentButton],
-})
-export class CountrySelectorComponent implements OnInit, OnChanges {
-  private readonly countriesLoader = inject(CountriesLoaderService);
-
-  protected readonly geoRegions: readonly {
-    readonly id: string;
-    title?: string;
-  }[] = [
-    { id: 'Europe' },
-    { id: 'Asia' },
-    { id: 'Americas' },
-    { id: 'Africa' },
-  ];
-
-  @Input({ required: true }) countryID?: string;
-
-  @Input() defaultCountryID?: string;
-
-  @Input() readonly = false;
-  @Input() disabled = false;
-  @Input() label = 'search';
-  @Input() canBeUnknown = false;
-
-  @Output() readonly countryIDChange = new EventEmitter<string>();
-
-  protected readonly filter = signal<string>('');
-  protected readonly geoRegion = signal<GeoRegion | 'All' | 'Americas'>('All');
-  protected readonly allCountries = signal<readonly ICountry[]>([]);
-  protected readonly unknownCountry = signal<ICountry | undefined>(undefined);
-
-  protected readonly countries = computed<readonly ISelectItem[]>(() => {
-    const allCountries = this.allCountries();
-    if (allCountries.length === 0) {
-      return []; // Data not loaded yet
-    }
-
-    const filter = this.filter();
-    let countriesToShow: readonly ISelectItem[] = filter
-      ? allCountries
-      : allCountries.filter(
-          (c) =>
-            this.geoRegion() === 'All' ||
-            (this.geoRegion() === 'Americas' &&
-              (c.geoRegions.includes('North America') ||
-                c.geoRegions.includes('South America'))) ||
-            c.geoRegions.includes(this.geoRegion() as GeoRegion),
-        );
-    if (this.canBeUnknown && this.unknownCountry()) {
-      countriesToShow = [...countriesToShow, this.unknownCountry()!];
-    }
-    return countriesToShow;
-  });
-
-  ngOnInit(): void {
-    // Load countries data
-    this.countriesLoader.getCountries().then((countries) => {
-      this.allCountries.set(countries);
-    });
-    this.countriesLoader.getUnknownCountry().then((unknown) => {
-      this.unknownCountry.set(unknown);
-    });
-  }
-
-  // protected geoRegion: GeoRegion | 'All' | 'Americas' = 'All';
-
-  protected onChanged(): void {
-    this.countryIDChange.emit(this.countryID);
-  }
-
-  protected onFilterChanged(filter: string): void {
-    this.filter.set(filter);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['country'] && this.countryID === '--' && !this.canBeUnknown) {
-      this.countryID = undefined;
-    }
-    if (
-      changes['defaultCountryID'] &&
-      !this.countryID &&
-      this.defaultCountryID &&
-      this.defaultCountryID !== '--'
-    ) {
-      this.countryID = this.defaultCountryID;
-      this.countryIDChange.emit(this.countryID);
-    }
-  }
-
-  protected onRegionChanged(event: Event): void {
-    this.geoRegion.set(
-      (event as CustomEvent).detail.value as GeoRegion | 'All' | 'Americas',
-    );
-  }
-
-  protected readonly filterCountryByCode = (
-    item: ISelectItem,
-    filter: string,
-  ) => {
-    const f = filter.trim().toUpperCase();
-    const c = item as ICountry;
-    return c.id === f || c.id3.startsWith(f);
-  };
-}

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

@@ -1,23 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ModalController } from '@ionic/angular/standalone';
-import { ErrorLogger } from '@sneat/core';
-import { CountrySelectorService } from './country-selector.service';
-
-describe('CountrySelectorService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        CountrySelectorService,
-        {
-          provide: ErrorLogger,
-          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
-        },
-        { provide: ModalController, useValue: { create: vi.fn() } },
-      ],
-    });
-  });
-
-  it('should be created', () => {
-    expect(TestBed.inject(CountrySelectorService)).toBeTruthy();
-  });
-});

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

@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SelectorBaseService } from '@sneat/ui';
-import { ICountry } from './countries';
-import { CountrySelectorComponent } from './country-selector.component';
-
-@Injectable()
-export class CountrySelectorService extends SelectorBaseService<ICountry> {
-  constructor() {
-    super(CountrySelectorComponent);
-  }
-}

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

@@ -1,39 +0,0 @@
-<ion-item class="sneat-tiny-end-padding" lines="none">
-  @let displayValue = $displayValue();
-
-  <ion-input
-    [label]="$label()"
-    type="date"
-    [readonly]="$value() === undefined || $updating()"
-    [value]="displayValue"
-    (ionChange)="onValueChanged($event)"
-  />
-
-  @if ($value() !== undefined || $newValue()) {
-    <ion-buttons slot="end">
-      @if ($updating()) {
-        <ion-button disabled="true" (click)="openDatePicker($event)">
-          <ion-spinner name="lines-small" slot="start" />
-          <ion-label>Saving...</ion-label>
-        </ion-button>
-      } @else if ($newValue() !== undefined && $newValue() !== $value()) {
-        <ion-button color="danger" fill="solid" (click)="save($event)">
-          <ion-icon name="save-outline" slot="start" />
-          <ion-label>Save</ion-label>
-        </ion-button>
-      } @else if ($value()) {
-        <ion-button color="medium" (click)="openDatePicker($event)">
-          <ion-icon name="chevron-down-outline" slot="start" />
-        </ion-button>
-      } @else {
-        <ion-button
-          fill="solid"
-          [color]="$noValueButtonColor() || 'danger'"
-          (click)="openDatePicker($event)"
-        >
-          <ion-label>Add</ion-label>
-        </ion-button>
-      }
-    </ion-buttons>
-  }
-</ion-item>