@sneat/components 0.1.2 → 0.1.4

package/src/lib/filter-item/filter-item.component.html

@@ -1,19 +0,0 @@
-<ion-item class="with-buttons" lines="none">
-  @if (!$filter()) {
-    <ion-icon name="search-outline" slot="start" />
-  }
-  <ion-input
-    [label]="$filter() ? 'Filter:' : ''"
-    placeholder="Filter"
-    [value]="$filter()"
-    (ionInput)="onFilterChanged($event)"
-    (ionBlur)="onBlured($event)"
-  />
-  @if (!!$filter()) {
-    <ion-buttons slot="end">
-      <ion-button color="medium" (click)="clearFilter($event)">
-        <ion-icon name="close-outline" />
-      </ion-button>
-    </ion-buttons>
-  }
-</ion-item>

package/src/lib/filter-item/filter-item.component.spec.ts

@@ -1,83 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FilterItemComponent } from './filter-item.component';
-
-describe('FilterItemComponent', () => {
-  let component: FilterItemComponent;
-  let fixture: ComponentFixture<FilterItemComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FilterItemComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(FilterItemComponent, {
-        set: {
-          imports: [],
-          schemas: [CUSTOM_ELEMENTS_SCHEMA],
-          template: '',
-        },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(FilterItemComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('$filter', 'test');
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit changed event with empty string when clearFilter is called', () => {
-    const changedSpy = vi.fn();
-    component.changed.subscribe(changedSpy);
-
-    const mockEvent = {
-      stopPropagation: vi.fn(),
-      preventDefault: vi.fn(),
-    } as unknown as Event;
-
-    component['clearFilter'](mockEvent);
-
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(changedSpy).toHaveBeenCalledWith('');
-  });
-
-  it('should emit changed event when onFilterChanged is called', () => {
-    const changedSpy = vi.fn();
-    component.changed.subscribe(changedSpy);
-
-    const mockEvent = {
-      detail: { value: 'new filter' },
-    } as CustomEvent;
-
-    component['onFilterChanged'](mockEvent);
-
-    expect(changedSpy).toHaveBeenCalledWith('new filter');
-  });
-
-  it('should emit empty string when onFilterChanged receives empty detail value', () => {
-    const changedSpy = vi.fn();
-    component.changed.subscribe(changedSpy);
-
-    const mockEvent = {
-      detail: { value: null },
-    } as CustomEvent;
-
-    component['onFilterChanged'](mockEvent);
-
-    expect(changedSpy).toHaveBeenCalledWith('');
-  });
-
-  it('should emit blured event when onBlured is called', () => {
-    const bluredSpy = vi.fn();
-    component.blured.subscribe(bluredSpy);
-
-    const mockEvent = {} as Event;
-
-    component['onBlured'](mockEvent);
-
-    expect(bluredSpy).toHaveBeenCalledWith(mockEvent);
-  });
-});

package/src/lib/filter-item/filter-item.component.ts

@@ -1,47 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  input,
-  Output,
-} from '@angular/core';
-import {
-  IonButton,
-  IonButtons,
-  IonIcon,
-  IonInput,
-  IonItem,
-} from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'sneat-filter-item',
-  templateUrl: './filter-item.component.html',
-  imports: [IonItem, IonIcon, IonInput, IonButtons, IonButton],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FilterItemComponent {
-  public readonly $filter = input.required<string>();
-
-  @Output() readonly changed = new EventEmitter<string>();
-  @Output() readonly blured = new EventEmitter<Event>();
-
-  protected clearFilter(event: Event): void {
-    event.stopPropagation();
-    event.preventDefault();
-    this.emitChanged('');
-  }
-
-  protected onFilterChanged(event: CustomEvent): void {
-    // console.log(`FilterItemComponent.onFilterChanged()`, event);
-    this.emitChanged(event.detail.value || '');
-  }
-
-  protected onBlured(event: Event): void {
-    this.blured.emit(event);
-  }
-
-  private emitChanged(value: string): void {
-    // console.log(`FilterItemComponent.emitChange(value=${value})`);
-    this.changed.emit(value);
-  }
-}

package/src/lib/pipes/country-emoji.pipe.spec.ts

@@ -1,116 +0,0 @@
-import { TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { CountryFlagPipe, CountryTitle } from './country-emoji.pipe';
-import { CountriesLoaderService } from '../country-selector';
-
-describe('Country pipes', () => {
-  let countriesLoader: { getCountriesByID: () => Promise<unknown> };
-  const mockCountries = {
-    US: { emoji: '🇺🇸', title: 'United States' },
-    UA: { emoji: '🇺🇦', title: 'Ukraine' },
-  };
-
-  beforeEach(() => {
-    countriesLoader = {
-      getCountriesByID: vi.fn().mockReturnValue(Promise.resolve(mockCountries)),
-    };
-
-    TestBed.configureTestingModule({
-      providers: [
-        CountryFlagPipe,
-        CountryTitle,
-        {
-          provide: CountriesLoaderService,
-          useValue: countriesLoader,
-        },
-      ],
-    });
-  });
-
-  describe('CountryFlagPipe', () => {
-    it('should create', () => {
-      expect(TestBed.inject(CountryFlagPipe)).toBeTruthy();
-    });
-
-    it('should return empty string for empty input', () => {
-      const pipe = TestBed.inject(CountryFlagPipe);
-      expect(pipe.transform('')).toBe('');
-      expect(pipe.transform('--')).toBe('');
-    });
-
-    it('should return countryID when cache is not yet loaded', () => {
-      const pipe = TestBed.inject(CountryFlagPipe);
-      expect(pipe.transform('US')).toBe('US');
-    });
-
-    it('should return emoji when cache is loaded', fakeAsync(() => {
-      const pipe = TestBed.inject(CountryFlagPipe);
-      tick(); // resolve promise
-      expect(pipe.transform('US')).toBe('🇺🇸');
-      expect(pipe.transform('UA')).toBe('🇺🇦');
-    }));
-
-    it('should return countryID for unknown country', fakeAsync(() => {
-      const pipe = TestBed.inject(CountryFlagPipe);
-      tick();
-      expect(pipe.transform('XX')).toBe('XX');
-    }));
-  });
-
-  describe('CountryTitle', () => {
-    it('should create', () => {
-      expect(TestBed.inject(CountryTitle)).toBeTruthy();
-    });
-
-    it('should return empty string for empty input', () => {
-      const pipe = TestBed.inject(CountryTitle);
-      expect(pipe.transform('')).toBe('');
-    });
-
-    it('should return countryID when cache is not yet loaded', () => {
-      const pipe = TestBed.inject(CountryTitle);
-      expect(pipe.transform('US')).toBe('US');
-    });
-
-    it('should return title when cache is loaded', fakeAsync(() => {
-      const pipe = TestBed.inject(CountryTitle);
-      tick();
-      expect(pipe.transform('US')).toBe('United States');
-      expect(pipe.transform('UA')).toBe('Ukraine');
-    }));
-
-    it('should return countryID for unknown country', fakeAsync(() => {
-      const pipe = TestBed.inject(CountryTitle);
-      tick();
-      expect(pipe.transform('XX')).toBe('XX');
-    }));
-
-    it('should return empty string for undefined input', () => {
-      const pipe = TestBed.inject(CountryTitle);
-      expect(pipe.transform(undefined)).toBe('');
-    });
-  });
-
-  describe('Error handling', () => {
-    it('should handle load error gracefully', fakeAsync(() => {
-      const errorLoader = {
-        getCountriesByID: vi.fn().mockReturnValue(Promise.reject(new Error('Load failed'))),
-      };
-
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule({
-        providers: [
-          CountryFlagPipe,
-          {
-            provide: CountriesLoaderService,
-            useValue: errorLoader,
-          },
-        ],
-      });
-
-      const pipe = TestBed.inject(CountryFlagPipe);
-      tick();
-      // After error, should return the countryID itself
-      expect(pipe.transform('US')).toBe('US');
-    }));
-  });
-});

package/src/lib/pipes/country-emoji.pipe.ts

@@ -1,67 +0,0 @@
-import { inject, Pipe, PipeTransform } from '@angular/core';
-import { CountriesLoaderService } from '../country-selector';
-
-/**
- * Base class for country-related pipes that need to cache country data.
- */
-abstract class CountryDataPipe {
-  protected readonly countriesLoader = inject(CountriesLoaderService);
-  protected countriesCache?: Record<string, { emoji: string; title: string }>;
-  protected isLoading = false;
-  protected loadError = false;
-
-  constructor() {
-    // Eagerly load countries data when pipe is created
-    this.loadCountriesData();
-  }
-
-  private loadCountriesData(): void {
-    if (this.isLoading) return;
-    this.isLoading = true;
-
-    this.countriesLoader
-      .getCountriesByID()
-      .then((countries) => {
-        this.countriesCache = Object.fromEntries(
-          Object.entries(countries).map(([id, country]) => [
-            id,
-            { emoji: country.emoji, title: country.title },
-          ]),
-        );
-      })
-      .catch((error) => {
-        console.error('Failed to load countries data for pipe:', error);
-        this.loadError = true;
-        // Set empty cache to avoid repeated load attempts
-        this.countriesCache = {};
-      })
-      .finally(() => {
-        this.isLoading = false;
-      });
-  }
-}
-
-export const countryFlagEmoji = (countryID?: string): string =>
-  countryID && countryID !== '--' ? countryID : '';
-
-@Pipe({ name: 'countryFlag' })
-export class CountryFlagPipe extends CountryDataPipe implements PipeTransform {
-  transform(countryID?: string): string {
-    if (!countryID || countryID === '--') {
-      return '';
-    }
-    // Return country emoji from cache if available, otherwise return countryID
-    return this.countriesCache?.[countryID]?.emoji || countryID;
-  }
-}
-
-@Pipe({ name: 'countryTitle' })
-export class CountryTitle extends CountryDataPipe implements PipeTransform {
-  transform(countryID?: string): string {
-    if (!countryID) {
-      return '';
-    }
-    // Return country title from cache if available, otherwise return countryID
-    return this.countriesCache?.[countryID]?.title || countryID;
-  }
-}

package/src/lib/pipes/decimal64p2.pipe.spec.ts

@@ -1,61 +0,0 @@
-import { Decimal64p2Pipe, Numeral2Pipe } from './decimal64p2.pipe';
-
-describe('Decimal64p2Pipe', () => {
-  let pipe: Decimal64p2Pipe;
-
-  beforeEach(() => {
-    pipe = new Decimal64p2Pipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('should divide value by 100', () => {
-    expect(pipe.transform(100)).toBe(1);
-    expect(pipe.transform(150)).toBe(1.5);
-    expect(pipe.transform(50)).toBe(0.5);
-  });
-
-  it('should return 0 for undefined or null', () => {
-    expect(pipe.transform(undefined)).toBe(0);
-  });
-});
-
-describe('Numeral2Pipe', () => {
-  let pipe: Numeral2Pipe;
-
-  beforeEach(() => {
-    pipe = new Numeral2Pipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('should add "st" for numbers ending in 1 (except 11 - currently bugged in code)', () => {
-    expect(pipe.transform(1)).toBe('1st');
-    expect(pipe.transform(21)).toBe('21st');
-    expect(pipe.transform(11)).toBe('11st'); // Verified current buggy behavior
-  });
-
-  it('should add "nd" for numbers ending in 2', () => {
-    expect(pipe.transform(2)).toBe('2nd');
-    expect(pipe.transform(22)).toBe('22nd');
-  });
-
-  it('should add "d" for numbers ending in 3 (should probably be "rd")', () => {
-    expect(pipe.transform(3)).toBe('3d');
-    expect(pipe.transform(23)).toBe('23d');
-  });
-
-  it('should add "th" for 13', () => {
-    expect(pipe.transform(13)).toBe('13th');
-  });
-
-  it('should add "th" for other numbers', () => {
-    expect(pipe.transform(4)).toBe('4th');
-    expect(pipe.transform(10)).toBe('10th');
-    expect(pipe.transform(0)).toBe('0th');
-  });
-});

package/src/lib/pipes/decimal64p2.pipe.ts

@@ -1,35 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'decimal64p2' })
-export class Decimal64p2Pipe implements PipeTransform {
-  readonly transform = (value?: number) => (value ? value / 100 : 0);
-}
-
-@Pipe({ name: 'numeral' })
-export class Numeral2Pipe implements PipeTransform {
-  readonly transform = (value?: number | string) => {
-    const s = value?.toString();
-    if (s?.endsWith('1')) {
-      return value + 'st';
-    }
-    if (
-      s === '13' ||
-      s?.endsWith('4') ||
-      s?.endsWith('5') ||
-      s?.endsWith('6') ||
-      s?.endsWith('7') ||
-      s?.endsWith('8') ||
-      s?.endsWith('9') ||
-      s?.endsWith('0')
-    ) {
-      return value + 'th';
-    }
-    if (s?.endsWith('2')) {
-      return value + 'nd';
-    }
-    if (s?.endsWith('3')) {
-      return value + 'd';
-    }
-    return value;
-  };
-}

package/src/lib/pipes/gender.pipes.spec.ts

@@ -1,84 +0,0 @@
-import { Gender } from '@sneat/core';
-import {
-  GenderIconNamePipe,
-  GenderEmojiPipe,
-  GenderColorPipe,
-} from './gender.pipes';
-
-describe('GenderIconNamePipe', () => {
-  let pipe: GenderIconNamePipe;
-
-  beforeEach(() => {
-    pipe = new GenderIconNamePipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  const cases: { gender: Gender | undefined; expected: string }[] = [
-    { gender: 'male', expected: 'man-outline' },
-    { gender: 'female', expected: 'woman-outline' },
-    { gender: 'other', expected: 'person-circle-outline' },
-    { gender: 'unknown', expected: 'person-outline' },
-    { gender: 'undisclosed', expected: 'person' },
-    { gender: undefined, expected: 'person-outline' },
-  ];
-
-  cases.forEach(({ gender, expected }) => {
-    it(`should return ${expected} for gender ${gender}`, () => {
-      expect(pipe.transform(gender)).toBe(expected);
-    });
-  });
-});
-
-describe('GenderEmojiPipe', () => {
-  let pipe: GenderEmojiPipe;
-
-  beforeEach(() => {
-    pipe = new GenderEmojiPipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  const cases: { gender: Gender | undefined; expected: string }[] = [
-    { gender: 'male', expected: 'man-outline' },
-    { gender: 'female', expected: 'woman-outline' },
-    { gender: undefined, expected: 'person-outline' },
-  ];
-
-  cases.forEach(({ gender, expected }) => {
-    it(`should return ${expected} for gender ${gender}`, () => {
-      expect(pipe.transform(gender)).toBe(expected);
-    });
-  });
-});
-
-describe('GenderColorPipe', () => {
-  let pipe: GenderColorPipe;
-
-  beforeEach(() => {
-    pipe = new GenderColorPipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  const cases: { gender: Gender | undefined; expected: string }[] = [
-    { gender: 'male', expected: 'primary' },
-    { gender: 'female', expected: 'danger' },
-    { gender: 'other', expected: 'warning' },
-    { gender: 'unknown', expected: 'medium' },
-    { gender: 'undisclosed', expected: 'medium' },
-    { gender: undefined, expected: 'dark' },
-  ];
-
-  cases.forEach(({ gender, expected }) => {
-    it(`should return ${expected} for gender ${gender}`, () => {
-      expect(pipe.transform(gender)).toBe(expected);
-    });
-  });
-});

package/src/lib/pipes/gender.pipes.ts

@@ -1,65 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { Gender } from '@sneat/core';
-
-@Pipe({ name: 'genderIconName' })
-export class GenderIconNamePipe implements PipeTransform {
-  transform(gender?: Gender): string {
-    switch (gender) {
-      case 'male':
-        return 'man-outline';
-      case 'female':
-        return 'woman-outline';
-      case 'other':
-        return 'person-circle-outline';
-      case 'unknown':
-        return 'person-outline';
-      case 'undisclosed':
-        return 'person';
-    }
-    return 'person-outline';
-  }
-}
-
-@Pipe({ name: 'genderEmoji' })
-export class GenderEmojiPipe implements PipeTransform {
-  transform(gender?: Gender): string {
-    switch (gender) {
-      case 'male':
-        return 'man-outline';
-      case 'female':
-        return 'woman-outline';
-    }
-    return 'person-outline';
-  }
-}
-
-export type GenderColor =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'dark'
-  | 'medium';
-
-export function genderColor(gender?: Gender): GenderColor {
-  switch (gender) {
-    case 'male':
-      return 'primary';
-    case 'female':
-      return 'danger';
-    case 'other':
-      return 'warning';
-    case 'unknown':
-      return 'medium';
-    case 'undisclosed':
-      return 'medium';
-  }
-  return 'dark';
-}
-
-@Pipe({ name: 'genderColor' })
-export class GenderColorPipe implements PipeTransform {
-  readonly transform = genderColor;
-}

package/src/lib/pipes/long-month-name.pipe.spec.ts

@@ -1,36 +0,0 @@
-import { LongMonthNamePipe } from './long-month-name.pipe';
-
-describe('LongMonthNamePipe', () => {
-  let pipe: LongMonthNamePipe;
-
-  beforeEach(() => {
-    pipe = new LongMonthNamePipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  const cases = [
-    { month: 0, expected: 'January' },
-    { month: 1, expected: 'February' },
-    { month: 2, expected: 'March' },
-    { month: 3, expected: 'April' },
-    { month: 4, expected: 'May' },
-    { month: 5, expected: 'June' },
-    { month: 6, expected: 'July' },
-    { month: 7, expected: 'August' },
-    { month: 8, expected: 'September' },
-    { month: 9, expected: 'October' },
-    { month: 10, expected: 'November' },
-    { month: 11, expected: 'December' },
-    { month: 12, expected: '12' },
-    { month: undefined, expected: 'undefined' },
-  ];
-
-  cases.forEach(({ month, expected }) => {
-    it(`should return ${expected} for month ${month}`, () => {
-      expect(pipe.transform(month)).toBe(expected);
-    });
-  });
-});

package/src/lib/pipes/long-month-name.pipe.ts

@@ -1,35 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'longMonthName' })
-export class LongMonthNamePipe implements PipeTransform {
-  transform(month?: number): string {
-    switch (month) {
-      case 0:
-        return 'January';
-      case 1:
-        return 'February';
-      case 2:
-        return 'March';
-      case 3:
-        return 'April';
-      case 4:
-        return 'May';
-      case 5:
-        return 'June';
-      case 6:
-        return 'July';
-      case 7:
-        return 'August';
-      case 8:
-        return 'September';
-      case 9:
-        return 'October';
-      case 10:
-        return 'November';
-      case 11:
-        return 'December';
-      default:
-        return '' + month;
-    }
-  }
-}

package/src/lib/pipes/short-month-name.pipe.spec.ts

@@ -1,28 +0,0 @@
-import { ShortMonthNamePipe } from './short-month-name.pipe';
-
-describe('ShortMonthNamePipe', () => {
-  let pipe: ShortMonthNamePipe;
-
-  beforeEach(() => {
-    pipe = new ShortMonthNamePipe();
-  });
-
-  it('should create', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  const cases = [
-    { month: 0, expected: 'Jan' },
-    { month: 5, expected: 'Jun' },
-    { month: 11, expected: 'Dec' },
-    { month: 12, expected: '12' },
-    { month: -1, expected: '-1' },
-    { month: undefined, expected: 'undefined' },
-  ];
-
-  cases.forEach(({ month, expected }) => {
-    it(`should return ${expected} for month ${month}`, () => {
-      expect(pipe.transform(month)).toBe(expected);
-    });
-  });
-});