@sneat/ui 0.1.0

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

@@ -0,0 +1,210 @@
+@if (value) {
+  <ion-item
+    [lines]="lastItemLines"
+    [class]="{ 'sneat-tiny-end-padding': !isReadonly }"
+  >
+    @if ($selectedItem()?.iconName) {
+      <ion-icon
+        slot="start"
+        [name]="$selectedItem()?.iconName"
+        [color]="
+          $selectedItem()?.iconColor || $selectedItem()?.labelColor || 'medium'
+        "
+      />
+    }
+    <ion-select
+      #selectInput
+      interface="popover"
+      [label]="label"
+      [(ngModel)]="value"
+      (ionChange)="onSelectChanged()"
+      [disabled]="isReadonly || !!$isProcessing()"
+    >
+      @for (item of items; track item.id) {
+        <ion-select-option [value]="item.id">
+          {{ item.emoji }}
+          @if (item.shortTitle) {
+            {{ item.shortTitle }}
+          } @else {
+            {{ item.title }}
+          }
+        </ion-select-option>
+      }
+      <!--		<ion-select-option value="other">OTHER</ion-select-option>-->
+    </ion-select>
+    @if ($isProcessing()) {
+      <ion-spinner name="lines-small" color="medium" slot="end" />
+    } @else if (!isReadonly) {
+      <ion-buttons slot="end" class="ion-no-margin">
+        <ion-button color="medium" title="Deselect" (click)="deselect()">
+          <ion-icon name="close-outline" />
+        </ion-button>
+      </ion-buttons>
+    }
+  </ion-item>
+} @else {
+  @if (isFilterable) {
+    <ion-item class="sneat-tiny-end-padding">
+      <ion-input
+        #filterInput
+        color="medium"
+        placeholder="filter"
+        [label]="filterLabel"
+        [value]="$filter()"
+        (ionChange)="onFilterChanged($event, 'ionChange')"
+        (ionInput)="onFilterChanged($event, 'ionInput')"
+      />
+      @if ($filter()) {
+        <ion-buttons slot="end">
+          @if (canAdd && $hiddenCount()) {
+            <ion-button
+              title="Use this"
+              color="primary"
+              (click)="onAdd($event)"
+            >
+              <ion-icon name="add-outline" />
+              <ion-label>Add</ion-label>
+            </ion-button>
+          }
+          <ion-button (click)="clearFilter()" title="Clear filter">
+            <ion-icon name="close-outline" />
+          </ion-button>
+        </ion-buttons>
+      }
+    </ion-item>
+  }
+
+  @if (items && !items.length) {
+    <ion-item-divider>
+      <ion-label>No items yet.</ion-label>
+    </ion-item-divider>
+  }
+
+  @if (labelPlacement) {
+    <ion-radio-group [(ngModel)]="value" (ionChange)="onRadioChanged($event)">
+      <ion-list class="ion-no-padding" lines="full">
+        @if (listLabel === "divider") {
+          <ion-item [color]="listLabelColor">
+            <ion-label>{{ label }}</ion-label>
+          </ion-item>
+        }
+        @for (item of $displayItems(); track item.id) {
+          <ion-item
+            [lines]="item.description1 ? 'inset' : 'full'"
+            (click)="select(item)"
+            tappable="true"
+          >
+            @switch (selectMode) {
+              @case ("multiple") {
+                <ion-checkbox
+                  slot="start"
+                  [value]="item.id"
+                  [checked]="false"
+                  [disabled]="isDisabled"
+                  (ionChange)="onCheckboxChange($event, item)"
+                />
+                <ion-label>
+                  <!-- TODO: duplicate code with the next case -->
+                  {{ item.emoji }}
+                  @if (item.shortTitle) {
+                    @if (item.longTitle) {
+                      {{ item.longTitle }} - {{ item.shortTitle }}
+                    } @else {
+                      {{ item.title }} - {{ item.shortTitle }}
+                    }
+                  } @else if (item.longTitle) {
+                    {{ item.longTitle }}
+                  } @else {
+                    {{ item.title }}
+                  }
+                </ion-label>
+              }
+              @case ("single") {
+                <ion-radio
+                  [value]="item.id"
+                  [labelPlacement]="labelPlacement"
+                  [justify]="
+                    justify ||
+                    (!labelPlacement || labelPlacement === 'start'
+                      ? 'space-between'
+                      : 'start')
+                  "
+                >
+                  {{ item.emoji }}
+                  @if (item.shortTitle) {
+                    @if (item.longTitle) {
+                      {{ item.longTitle }} - {{ item.shortTitle }}
+                    } @else {
+                      {{ item.title }} - {{ item.shortTitle }}
+                    }
+                  } @else if (item.longTitle) {
+                    {{ item.longTitle }}
+                  } @else {
+                    {{ item.title }}
+                  }
+                </ion-radio>
+              }
+            }
+          </ion-item>
+          @if (item.description1) {
+            <ion-item-divider>
+              <ion-label>
+                {{ item.description1 }}
+                @if (item.description2) {
+                  <i>{{ item.description2 }}</i>
+                }
+              </ion-label>
+            </ion-item-divider>
+          }
+        }
+      </ion-list>
+    </ion-radio-group>
+  } @else {
+    <ion-item-group>
+      @for (item of $displayItems(); track item.id; let last = $last) {
+        <ion-item
+          [lines]="item.description1 ? 'inset' : last ? lastItemLines : 'full'"
+          button
+          (click)="select(item)"
+        >
+          @if (item.iconName) {
+            <ion-icon
+              slot="start"
+              [name]="item.iconName"
+              [color]="item.iconColor || item.labelColor || 'medium'"
+            />
+          }
+          @if (!labelPlacement) {
+            <ion-label [color]="item.labelColor">
+              <span class="ion-margin-end">{{ item.emoji }}</span>
+              {{ item.title }}
+            </ion-label>
+          }
+        </ion-item>
+        @if (item.description1) {
+          <ion-item [lines]="last ? lastItemLines : 'full'">
+            <ion-label color="medium">
+              {{ item.description1 }}
+              @if (item.description2) {
+                <i>{{ item.description2 }}</i>
+              }
+            </ion-label>
+          </ion-item>
+        }
+      }
+    </ion-item-group>
+  }
+  @if ($hiddenCount(); as hiddenCount) {
+    <ion-item-divider>
+      <ion-label color="medium"
+        >{{ hiddenCount }} out of {{ items?.length }} items are hidden by filter
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button (click)="clearFilter()">
+          <ion-icon name="close-outline" slot="start" />
+          <ion-label>Clear filter</ion-label>
+        </ion-button>
+      </ion-buttons>
+    </ion-item-divider>
+  }
+}

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

@@ -0,0 +1,297 @@
+import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
+import { ErrorLogger } from '@sneat/core';
+import { SelectFromListComponent } from './select-from-list.component';
+import { of } from 'rxjs';
+import { ISelectItem } from '../selector-interfaces';
+
+describe('SelectFromListComponent', () => {
+  let component: SelectFromListComponent;
+  let fixture: ComponentFixture<SelectFromListComponent>;
+  let errorLoggerMock: ErrorLogger;
+
+  const mockItems: ISelectItem[] = [
+    { id: '1', title: 'Apple' },
+    { id: '2', title: 'Banana', longTitle: 'Yellow Banana' },
+    { id: '3', title: 'Cherry' },
+  ];
+
+  beforeEach(waitForAsync(async () => {
+    errorLoggerMock = {
+      logError: vi.fn(),
+      logErrorHandler: vi.fn(() => vi.fn()),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [SelectFromListComponent],
+      providers: [{ provide: ErrorLogger, useValue: errorLoggerMock }],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(SelectFromListComponent, {
+        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(SelectFromListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('ngOnChanges', () => {
+    it('should update items and apply filter when items change', () => {
+      component.items = mockItems;
+      component.ngOnChanges({
+        items: new SimpleChange(undefined, mockItems, true),
+      });
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()).toEqual(mockItems);
+    });
+
+    it('should subscribe to items$ and update items when items$ changes', () => {
+      const items$ = of(mockItems);
+      component.items$ = items$;
+      component.ngOnChanges({
+        items$: new SimpleChange(undefined, items$, true),
+      });
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()).toEqual(mockItems);
+    });
+  });
+
+  describe('filtering', () => {
+    beforeEach(() => {
+      component.items = mockItems;
+      component.ngOnChanges({
+        items: new SimpleChange(undefined, mockItems, true),
+      });
+    });
+
+    it('should filter items by title', () => {
+      // @ts-expect-error accessing protected member
+      component.onFilterChanged(
+        { detail: { value: 'app' } } as CustomEvent,
+        'ionInput',
+      );
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.length).toBe(1);
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.[0].id).toBe('1');
+    });
+
+    it('should filter items by longTitle', () => {
+      // @ts-expect-error accessing protected member
+      component.onFilterChanged(
+        { detail: { value: 'yellow' } } as CustomEvent,
+        'ionInput',
+      );
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.length).toBe(1);
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.[0].id).toBe('2');
+    });
+
+    it('should use custom filter function if provided', () => {
+      component.filterItem = (item, filter) => item.id === filter;
+      // @ts-expect-error accessing protected member
+      component.onFilterChanged({ detail: { value: '3' } } as CustomEvent, 'ionInput');
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.length).toBe(1);
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.[0].id).toBe('3');
+    });
+
+    it('should clear filter', () => {
+      // @ts-expect-error accessing protected member
+      component.onFilterChanged(
+        { detail: { value: 'app' } } as CustomEvent,
+        'ionInput',
+      );
+      // @ts-expect-error accessing protected member
+      component.clearFilter();
+      // @ts-expect-error accessing protected member
+      expect(component.$filter()).toBe('');
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.length).toBe(3);
+    });
+  });
+
+  describe('sorting', () => {
+    beforeEach(() => {
+      component.items = [
+        { id: 'b', title: 'Banana' },
+        { id: 'a', title: 'Apple' },
+      ];
+    });
+
+    it('should sort items by title', () => {
+      component.sortBy = 'title';
+      component.ngOnChanges({
+        items: new SimpleChange(undefined, component.items, true),
+      });
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.[0].title).toBe('Apple');
+    });
+
+    it('should sort items by id', () => {
+      component.sortBy = 'id';
+      component.ngOnChanges({
+        items: new SimpleChange(undefined, component.items, true),
+      });
+      // @ts-expect-error accessing protected member
+      expect(component.$displayItems()?.[0].id).toBe('a');
+    });
+  });
+
+  describe('selection', () => {
+    beforeEach(() => {
+      component.items = mockItems;
+      component.ngOnChanges({
+        items: new SimpleChange(undefined, mockItems, true),
+      });
+    });
+
+    it('should select item in single mode', () => {
+      const onChange = vi.fn();
+      component.registerOnChange(onChange);
+      // @ts-expect-error accessing protected member
+      component.select(mockItems[0]);
+      // @ts-expect-error accessing protected member
+      expect(component.$selectedItem()).toEqual(mockItems[0]);
+      expect(onChange).toHaveBeenCalledWith('1');
+    });
+
+    it('should handle radio change in single mode', () => {
+      const onChange = vi.fn();
+      component.registerOnChange(onChange);
+      // @ts-expect-error accessing protected member
+      component.onRadioChanged({ detail: { value: '2' } } as CustomEvent);
+      expect(component.value).toBe('2');
+      expect(onChange).toHaveBeenCalledWith('2');
+    });
+
+    it('should handle select change', () => {
+      const onChange = vi.fn();
+      component.registerOnChange(onChange);
+      component.value = '3';
+      // @ts-expect-error accessing protected member
+      component.onSelectChanged({} as Event);
+      expect(onChange).toHaveBeenCalledWith('3');
+    });
+
+    it('should deselect item', () => {
+      const onChange = vi.fn();
+      component.registerOnChange(onChange);
+      // @ts-expect-error accessing protected member
+      component.deselect();
+      expect(component.value).toBe('');
+      expect(onChange).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('ControlValueAccessor', () => {
+    it('should write value', () => {
+      component.writeValue('test');
+      expect(component.value).toBe('test');
+    });
+
+    it('should register on change', () => {
+      const fn = vi.fn();
+      component.registerOnChange(fn);
+      // @ts-expect-error accessing protected member
+      component.onChange('test');
+      expect(fn).toHaveBeenCalledWith('test');
+    });
+
+    it('should register on touched', () => {
+      const fn = vi.fn();
+      component.registerOnTouched(fn);
+      component.onTouched();
+      expect(fn).toHaveBeenCalled();
+    });
+
+    it('should set disabled state', () => {
+      component.setDisabledState(true);
+      // @ts-expect-error accessing protected member
+      expect(component.isDisabled).toBe(true);
+    });
+  });
+
+  describe('focus', () => {
+    it('should call setFocus on filterInput after timeout', fakeAsync(() => {
+      const filterInputMock = {
+        setFocus: vi.fn(() => Promise.resolve()),
+      };
+      component.filterInput = filterInputMock as unknown;
+      component.focus();
+      tick(100);
+      expect(filterInputMock.setFocus).toHaveBeenCalled();
+    }));
+  });
+
+  describe('onAdd', () => {
+    it('should use current filter as value when onAdd is called', () => {
+      const onChange = vi.fn();
+      component.registerOnChange(onChange);
+      // @ts-expect-error accessing protected member
+      component.$filter.set('New Item');
+      const event = { preventDefault: vi.fn() };
+      // @ts-expect-error accessing protected member
+      component.onAdd(event as Event);
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(component.value).toBe('New Item');
+      expect(onChange).toHaveBeenCalledWith('New Item');
+    });
+  });
+
+  describe('additional coverage', () => {
+    it('should ignore radio change if select mode is not single', () => {
+      component.selectMode = 'multiple';
+      component.value = '1';
+      // @ts-expect-error accessing protected member
+      component.onRadioChanged({ detail: { value: '2' } } as CustomEvent);
+      expect(component.value).toBe('1');
+    });
+
+    it('should handle checkbox change', () => {
+      const itemBefore = component.value;
+      // @ts-expect-error accessing protected member
+      component.onCheckboxChange({} as Event, mockItems[0]);
+      expect(component.value).toBe(itemBefore);
+    });
+
+    it('should handle onChange with an ID that does not exist in items', () => {
+      component.items = mockItems;
+      // @ts-expect-error accessing protected member
+      component.onChange('non-existent');
+      // @ts-expect-error accessing protected member
+      expect(component.$selectedItem()).toBeUndefined();
+    });
+
+    it('should ignore select if select mode is multiple', () => {
+      component.selectMode = 'multiple';
+      const onChange = vi.fn();
+      component.registerOnChange(onChange);
+      // @ts-expect-error accessing protected member
+      component.select(mockItems[0]);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('should clear filter when selecting an item', () => {
+      // @ts-expect-error accessing protected member
+      component.$filter.set('app');
+      // @ts-expect-error accessing protected member
+      component.select(mockItems[0]);
+      // @ts-expect-error accessing protected member
+      expect(component.$filter()).toBe('');
+    });
+  });
+});