@sneat/components 0.1.2 → 0.1.4

package/src/lib/app-version/app-version.component.html

@@ -1,15 +0,0 @@
-<ion-item-divider color="light">
-  <ion-label>App version</ion-label>
-</ion-item-divider>
-<ion-item>
-  <ion-input
-    label="Build:"
-    color="medium"
-    readonly="true"
-    disabled="true"
-    [value]="
-      buildInfo.gitHash.substring(0, 7) + ' @ ' + buildInfo.buildTimestamp
-    "
-    [title]="buildInfo.gitHash"
-  />
-</ion-item>

package/src/lib/app-version/app-version.component.spec.ts

@@ -1,25 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { AppVersionComponent } from './app-version.component';
-
-describe('AppVersionComponent', () => {
-  let component: AppVersionComponent;
-  let fixture: ComponentFixture<AppVersionComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppVersionComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(AppVersionComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(AppVersionComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/app-version/app-version.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  IonInput,
-  IonItem,
-  IonItemDivider,
-  IonLabel,
-} from '@ionic/angular/standalone';
-import { buildInfo } from './build-info';
-
-@Component({
-  selector: 'sneat-app-version',
-  templateUrl: 'app-version.component.html',
-  imports: [IonItemDivider, IonLabel, IonItem, IonInput],
-})
-export class AppVersionComponent {
-  protected readonly buildInfo = buildInfo;
-}

package/src/lib/app-version/build-info.ts

@@ -1,8 +0,0 @@
-export const buildInfo: {
-  // TODO: Needs pre-commit hook to check gitHash and buildTimestamp are NOT changed.
-  readonly gitHash: string;
-  readonly buildTimestamp: string;
-} = {
-  gitHash: 'gitHash t0be$et',
-  buildTimestamp: 'timestamp t0be$et',
-};

package/src/lib/card-list/sneat-card-list.component.html

@@ -1,108 +0,0 @@
-<ion-card>
-  @if (title) {
-    <ion-item (click)="cardTitleClick.emit()" tappable>
-      @if (itemIcon && !isLoading && !items?.length) {
-        <ion-icon [name]="itemIcon" slot="start" />
-      }
-      <ion-label style="font-weight: bold">{{ title }}</ion-label>
-      @if (isFilterable) {
-        <ion-input [(ngModel)]="filter" placeholder="(type to filter)" />
-      }
-      <ion-buttons slot="end">
-        @if (filter) {
-          <ion-button (click)="filter = ''" title="Clear filter">
-            <ion-icon name="close-outline" color="medium" />
-          </ion-button>
-        }
-        @if (mode !== "add" && create) {
-          <ion-button (click)="showAddForm($event)">
-            <ion-icon color="primary" slot="start" name="add" />
-            <ion-label color="medium">Add</ion-label>
-          </ion-button>
-        }
-      </ion-buttons>
-    </ion-item>
-  }
-  @if (tabs) {
-    <ion-segment [(ngModel)]="tab" (ionChange)="tabChanged.emit(tab || '')">
-      @for (tab of tabs; track tab.id) {
-        <ion-segment-button [value]="tab.id">
-          <ion-label>{{ tab.title }}</ion-label>
-        </ion-segment-button>
-      }
-    </ion-segment>
-    <ion-buttons>
-      @if (mode !== "add" && create) {
-        <ion-button (click)="showAddForm($event)">
-          <ion-icon color="primary" slot="start" name="add" />
-          <ion-label color="medium">Add</ion-label>
-        </ion-button>
-      }
-    </ion-buttons>
-  }
-  @if (isLoading) {
-    <ion-card-content>
-      <ion-skeleton-text animated="" style="width: 100%" />
-    </ion-card-content>
-  } @else {
-    <ion-list>
-      @for (item of items; track item.id) {
-        <ion-item
-          tappable
-          (click)="itemClick && click($event, item)"
-          [routerLink]="getRouterLink(item)"
-        >
-          @if (itemIcon) {
-            <ion-icon [name]="itemIcon" slot="start" />
-          }
-          <ion-label>{{ item.title || item.id }}</ion-label>
-        </ion-item>
-      }
-      @if (mode === "add") {
-        <ion-item>
-          <ion-icon name="earth-outline" slot="start" color="medium" />
-          <ion-input
-            [(ngModel)]="name"
-            placeholder="Name"
-            [disabled]="!!isAdding"
-          />
-          <ion-buttons slot="end">
-            <ion-button
-              fill="solid"
-              color="primary"
-              [disabled]="isAdding || !name.trim()"
-              (click)="tryCreate()"
-            >
-              Create
-            </ion-button>
-            <ion-button
-              (click)="mode = 'list'"
-              color="medium"
-              title="Cancel"
-              [disabled]="isAdding"
-            >
-              <ion-icon name="close-outline" />
-            </ion-button>
-          </ion-buttons>
-        </ion-item>
-      }
-    </ion-list>
-    @if (!items?.length && mode !== "add") {
-      <ion-card-content>
-        @if (!noItemsText) {
-          <p>
-            {{ noItemsText }}
-          </p>
-        } @else {
-          <p>
-            Not defined for this project yet. Click the
-            <span style="background-color: whitesmoke; padding: 4px 8px"
-              >+ Add</span
-            >
-            button above in the header of this card to create a first one.
-          </p>
-        }
-      </ion-card-content>
-    }
-  }
-</ion-card>

package/src/lib/card-list/sneat-card-list.component.spec.ts

@@ -1,131 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { SneatCardListComponent } from './sneat-card-list.component';
-import { ErrorLogger } from '@sneat/core';
-import { of, throwError } from 'rxjs';
-
-describe('SneatCardListComponent', () => {
-  let component: SneatCardListComponent;
-  let fixture: ComponentFixture<SneatCardListComponent>;
-  let errorLogger: { logError: ReturnType<typeof vi.fn> };
-
-  beforeEach(waitForAsync(async () => {
-    errorLogger = {
-      logError: vi.fn(),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [SneatCardListComponent],
-      providers: [
-        {
-          provide: ErrorLogger,
-          useValue: errorLogger,
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(SneatCardListComponent, {
-        set: {
-          imports: [],
-          schemas: [CUSTOM_ELEMENTS_SCHEMA],
-          template: '',
-        },
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(SneatCardListComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit itemClick when click is called', () => {
-    const itemClickSpy = vi.fn();
-    component.itemClick.subscribe(itemClickSpy);
-
-    const mockEvent = {
-      preventDefault: vi.fn(),
-      stopPropagation: vi.fn(),
-    } as unknown as Event;
-
-    const mockItem = { id: 1, title: 'Test Item' };
-
-    component['click'](mockEvent, mockItem);
-
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(itemClickSpy).toHaveBeenCalledWith(mockItem);
-  });
-
-  it('should change mode to add when showAddForm is called', () => {
-    const mockEvent = {
-      preventDefault: vi.fn(),
-      stopPropagation: vi.fn(),
-    } as unknown as Event;
-
-    component['showAddForm'](mockEvent);
-
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(component['mode']).toBe('add');
-  });
-
-  it('should successfully create item when tryCreate is called', () => {
-    const mockItem = { id: '123', title: 'New Item' };
-    component.items = [];
-    component.create = vi.fn().mockReturnValue(of(mockItem));
-    component['name'] = 'New Item';
-
-    component['tryCreate']();
-
-    expect(component.create).toHaveBeenCalledWith('New Item');
-    expect(component.items).toContain(mockItem);
-    expect(component['mode']).toBe('list');
-    expect(component['name']).toBe('');
-    expect(component['isAdding']).toBe(false);
-  });
-
-  it('should handle error when tryCreate fails', () => {
-    const mockError = new Error('Creation failed');
-    component.create = vi.fn().mockReturnValue(throwError(() => mockError));
-    component['name'] = 'New Item';
-
-    component['tryCreate']();
-
-    expect(component.create).toHaveBeenCalledWith('New Item');
-    expect(errorLogger.logError).toHaveBeenCalledWith(
-      mockError,
-      'Failed to create new item',
-    );
-    expect(component['isAdding']).toBe(false);
-  });
-
-  it('should not add item if create is not defined', () => {
-    component.create = undefined;
-    component['name'] = 'New Item';
-
-    component['tryCreate']();
-
-    expect(component['isAdding']).toBe(true);
-  });
-
-  it('should trim name before creating', () => {
-    const mockItem = { id: '123', title: 'Trimmed' };
-    component.items = [];
-    component.create = vi.fn().mockReturnValue(of(mockItem));
-    component['name'] = '  Trimmed  ';
-
-    component['tryCreate']();
-
-    expect(component.create).toHaveBeenCalledWith('Trimmed');
-  });
-
-  it('should initialize with default values', () => {
-    expect(component.filter).toBe('');
-    expect(component['mode']).toBe('list');
-    expect(component['name']).toBe('');
-    expect(component['isAdding']).toBeUndefined();
-  });
-});

package/src/lib/card-list/sneat-card-list.component.ts

@@ -1,125 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  inject,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import {
-  IonButton,
-  IonButtons,
-  IonCard,
-  IonCardContent,
-  IonIcon,
-  IonInput,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonSegment,
-  IonSegmentButton,
-  IonSkeletonText,
-} from '@ionic/angular/standalone';
-import { IRecord } from '@sneat/data';
-import { ErrorLogger, IErrorLogger } from '@sneat/core';
-import { Observable } from 'rxjs';
-
-export interface ICardTab {
-  id: string;
-  title: string;
-}
-
-interface IOptionallyTitled {
-  id?: string;
-  title?: string;
-}
-
-@Component({
-  selector: 'sneat-card-list',
-  templateUrl: './sneat-card-list.component.html',
-  imports: [
-    RouterModule,
-    IonCard,
-    IonItem,
-    IonIcon,
-    IonLabel,
-    IonInput,
-    IonButtons,
-    IonButton,
-    IonSegment,
-    IonSegmentButton,
-    FormsModule,
-    IonCardContent,
-    IonSkeletonText,
-    IonList,
-  ],
-})
-export class SneatCardListComponent {
-  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
-
-  @Input() title?: string;
-  @Input() isFilterable?: boolean;
-  @Input() isLoading?: boolean;
-  @Input() items?: { id?: unknown; title?: string }[];
-  @Input() create?: (name: string) => Observable<IRecord<IOptionallyTitled>>;
-  @Input() itemIcon?: string;
-  @Input() tab?: string;
-  @Input() tabs?: ICardTab[];
-  @Input() noItemsText?: string;
-  @Input() getRouterLink: (item: unknown) => string = () =>
-    undefined as unknown as string;
-
-  @Output() readonly cardTitleClick = new EventEmitter<void>();
-  @Output() readonly itemClick = new EventEmitter<unknown>();
-  @Output() readonly tabChanged = new EventEmitter<string>();
-
-  @ViewChild(IonInput, { static: false }) addInput?: IonInput;
-
-  filter = '';
-
-  protected mode: 'list' | 'add' = 'list';
-  protected name = '';
-  protected isAdding?: boolean;
-
-  protected click(event: Event, item: unknown): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.itemClick.emit(item);
-  }
-
-  protected showAddForm(event: Event): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.mode = 'add';
-    setTimeout(() => {
-      // console.log(this.addInput);
-      if (this.addInput) {
-        this.addInput
-          ?.setFocus()
-          .catch((err) =>
-            this.errorLogger.logError(err, 'Failed to set focus'),
-          );
-      }
-    }, 200);
-  }
-
-  protected tryCreate(): void {
-    this.isAdding = true;
-    if (this.create) {
-      this.create(this.name.trim()).subscribe({
-        next: (item) => {
-          this.items?.push(item);
-          this.isAdding = false;
-          this.mode = 'list';
-          this.name = '';
-        },
-        error: (err) => {
-          this.errorLogger.logError(err, 'Failed to create new item');
-          this.isAdding = false;
-        },
-      });
-    }
-  }
-}

package/src/lib/copyright/copyright.component.html

@@ -1 +0,0 @@
-<p>2020 &copy; Sneat.team</p>

package/src/lib/copyright/copyright.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { CopyrightComponent } from './copyright.component';
-
-describe('CopyrightComponent', () => {
-  let component: CopyrightComponent;
-  let fixture: ComponentFixture<CopyrightComponent>;
-
-  beforeEach(waitForAsync(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CopyrightComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CopyrightComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/copyright/copyright.component.ts

@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sneat-copyright',
-  templateUrl: './copyright.component.html',
-})
-export class CopyrightComponent {}

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

@@ -1,33 +0,0 @@
-<ion-item class="sneat-tiny-end-padding" lines="none">
-  <ion-select
-    interface="popover"
-    [label]="label"
-    [(ngModel)]="countryID"
-    (ionChange)="onCountryChanged()"
-  >
-    <ion-select-option value="">All</ion-select-option>
-    @for (c of countries(); track c.id) {
-      <ion-select-option [value]="c.id">
-        {{ c.title }} {{ c.emoji }}
-      </ion-select-option>
-    }
-  </ion-select>
-  @if (countryID && canReset) {
-    <ion-buttons slot="end">
-      <ion-button color="medium" (click)="reset($event)">
-        <ion-icon name="close-outline" />
-      </ion-button>
-    </ion-buttons>
-  }
-  <!-- disable for now as select is showing incorrectyl and lookup us not linked-->
-  <!--	<ion-buttons slot="end" class="ion-no-margin ion-no-padding">-->
-  <!--		<ion-button *ngIf="canReset && countryID"-->
-  <!--								color="medium"-->
-  <!--								(click)="reset($event)" [disabled]="!canReset || !countryID">-->
-  <!--			<ion-icon name="close-outline"></ion-icon>-->
-  <!--		</ion-button>-->
-  <!--		<ion-button (click)="openCountrySelector($event)">-->
-  <!--			<ion-label>...</ion-label>-->
-  <!--		</ion-button>-->
-  <!--	</ion-buttons>-->
-</ion-item>

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

@@ -1,84 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { CountryInputComponent } from './country-input.component';
-import { CountriesLoaderService } from '../country-selector';
-
-describe('CountryInputComponent', () => {
-  let component: CountryInputComponent;
-  let fixture: ComponentFixture<CountryInputComponent>;
-  let countriesLoader: { getCountries: ReturnType<typeof vi.fn> };
-
-  const mockCountries = [
-    { id: 'US', emoji: '🇺🇸', title: 'United States' },
-    { id: 'UA', emoji: '🇺🇦', title: 'Ukraine' },
-  ];
-
-  beforeEach(waitForAsync(async () => {
-    countriesLoader = {
-      getCountries: vi.fn().mockResolvedValue(mockCountries),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [CountryInputComponent],
-      providers: [
-        {
-          provide: CountriesLoaderService,
-          useValue: countriesLoader,
-        },
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    })
-      .overrideComponent(CountryInputComponent, {
-        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: '' },
-      })
-      .compileComponents();
-    fixture = TestBed.createComponent(CountryInputComponent);
-    component = fixture.componentInstance;
-  }));
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default values', () => {
-    expect(component.canReset).toBe(true);
-    expect(component.label).toBe('Country');
-    expect(component.countryID).toBe('');
-  });
-
-  it('should load countries on init', async () => {
-    await component.ngOnInit();
-    expect(countriesLoader.getCountries).toHaveBeenCalled();
-    // Wait for promise to resolve
-    await Promise.resolve();
-    expect(component.countries()).toEqual(mockCountries);
-  });
-
-  it('should emit countryIDChange when onCountryChanged is called', () => {
-    const emitSpy = vi.fn();
-    component.countryIDChange.subscribe(emitSpy);
-    component.countryID = 'US';
-
-    component.onCountryChanged();
-
-    expect(emitSpy).toHaveBeenCalledWith('US');
-  });
-
-  it('should reset countryID and emit when reset is called', () => {
-    const emitSpy = vi.fn();
-    component.countryIDChange.subscribe(emitSpy);
-    component.countryID = 'US';
-
-    const mockEvent = {
-      preventDefault: vi.fn(),
-      stopPropagation: vi.fn(),
-    } as unknown as Event;
-
-    component.reset(mockEvent);
-
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(mockEvent.stopPropagation).toHaveBeenCalled();
-    expect(component.countryID).toBe('');
-    expect(emitSpy).toHaveBeenCalledWith('');
-  });
-});

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

@@ -1,76 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  inject,
-  Input,
-  OnInit,
-  Output,
-  signal,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import {
-  IonButton,
-  IonButtons,
-  IonIcon,
-  IonItem,
-  IonSelect,
-  IonSelectOption,
-} from '@ionic/angular/standalone';
-import { ICountry, CountriesLoaderService } from '../country-selector';
-
-@Component({
-  selector: 'sneat-country-input',
-  templateUrl: './country-input.component.html',
-  imports: [
-    FormsModule,
-    IonItem,
-    IonSelect,
-    IonSelectOption,
-    IonButtons,
-    IonButton,
-    IonIcon,
-  ],
-})
-export class CountryInputComponent implements OnInit {
-  private readonly countriesLoader = inject(CountriesLoaderService);
-
-  @Input() canReset = true;
-  @Input() label = 'Country';
-  @Input() countryID = '';
-  @Output() countryIDChange = new EventEmitter<string>();
-
-  readonly countries = signal<readonly ICountry[]>([]);
-
-  ngOnInit(): void {
-    // Load countries data
-    this.countriesLoader.getCountries().then((countries) => {
-      this.countries.set(countries);
-    });
-  }
-
-  // constructor(
-  // 	// private readonly countrySelectorService: CountrySelectorService,
-  // ) {
-  // }
-
-  public onCountryChanged(): void {
-    // console.log('CountryInputComponent.onCountryChanged()', this.countryID);
-    this.countryIDChange.emit(this.countryID);
-  }
-
-  reset(event: Event): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.countryID = '';
-    this.countryIDChange.emit('');
-  }
-
-  // protected openCountrySelector(): void {
-  // 	// const options: ISelectorOptions<ICountry> = {
-  // 	// 	items: of(countries),
-  // 	// };
-  // 	// this.countrySelectorService
-  // 	// 	.selectSingleInModal(options)
-  // 	// 	.then();
-  // }
-}