feat(components/input-select): fix search input for dropdown #1981

zyfra · Aug 30, 2024 · 89ef051 · 89ef051
1 parent 1a30211
commit 89ef051
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 75 deletions.
diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.html b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.html
@@ -27,26 +27,26 @@
  />
 
  <ng-template #dropdown>
+ <div class="list-search-item" *ngIf="searchable">
+ <prizm-input-layout [label]="searchLabelTranslation$ | async" size="m">
+ <input
+ class="input-search"
+ #input
+ [formControl]="searchInputControl"
+ (input)="dropdownHostRef.reCalculatePositions(1000 / 16)"
+ prizmInput
+ prizmAutoFocus
+ />
+ <button [interactive]="true" prizmInputIconButton="magnifying-glass" prizm-input-right></button>
+ </prizm-input-layout>
+ </div>
  <prizm-data-list
  class="block"
  *prizmLet="{ filteredItems: filteredItems$ | async } as $"
  [scroll]="dropdownScroll"
  [style.--prizm-data-list-border]="0"
  (prizmOnDestroy)="onTouch()"
  >
- <div class="list-search-item" *ngIf="searchable">
- <prizm-input-layout [label]="searchLabelTranslation$ | async" size="m">
- <input
- class="input-search"
- #input
- [formControl]="searchInputControl"
- (input)="dropdownHostRef.reCalculatePositions(1000 / 16)"
- prizmInput
- prizmAutoFocus
- />
- <button [interactive]="true" prizmInputIconButton="magnifying-glass" prizm-input-right></button>
- </prizm-input-layout>
- </div>
  <ng-container *ngIf="$.filteredItems?.length; else emptyTemplate">
  <div
  class="item"

diff --git a/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less b/libs/components/src/lib/components/dropdowns/multi-select/input-multi-select.component.less
@@ -79,7 +79,7 @@
 }
 
 .list-search-item {
- padding: var(--prizm-select-item-padding, 8px 16px);
+ padding: var(--prizm-select-item-padding, 16px 16px 8px);
 
  prizm-input-layout {
  width: 100%;

diff --git a/libs/components/src/lib/components/dropdowns/select/input-select.component.html b/libs/components/src/lib/components/dropdowns/select/input-select.component.html
@@ -97,77 +97,30 @@
  </ng-template>
 
  <ng-template #dropdown>
+ <div class="list-search-item" *ngIf="searchable">
+ <prizm-input-layout [label]="searchLabelTranslation$ | async">
+ <input
+ class="input-search"
+ [ngModel]="printing$.value"
+ [ngModelOptions]="{ standalone: true }"
+ (ngModelChange)="dropdownHostRef.reCalculatePositions(1000 / 16); printing$.next($event)"
+ prizmInput
+ prizmAutoFocus
+ />
+ <button [interactive]="true" prizmInputIconButton="magnifying-glass" prizm-input-right></button>
+ </prizm-input-layout>
+ </div>
  <prizm-data-list
  class="block"
  *prizmLet="(filteredItems$ | async) ?? [] as items"
  [scroll]="customItemDataList ? 'none' : dropdownScroll"
  [style.--prizm-data-list-border]="0"
  (prizmOnDestroy)="onTouch()"
  >
- <div class="list-search-item" *ngIf="searchable">
- <prizm-input-layout [label]="searchLabelTranslation$ | async">
- <input
- class="input-search"
- [ngModel]="printing$.value"
- [ngModelOptions]="{ standalone: true }"
- (ngModelChange)="dropdownHostRef.reCalculatePositions(1000 / 16); printing$.next($event)"
- prizmInput
- prizmAutoFocus
- />
- <button [interactive]="true" prizmInputIconButton="magnifying-glass" prizm-input-right></button>
- </prizm-input-layout>
- </div>
  <ng-container *ngIf="items?.length; else emptyTemplate">
  <ng-container *polymorphOutlet="customItemDataList?.template">
  <prizm-input-select-item *ngFor="let item of items" [item]="item"></prizm-input-select-item>
  </ng-container>
- <!-- <div-->
- <!-- class="item"-->
- <!-- #hostHint-->
- <!-- *ngFor="let item of items; let idx = index"-->
- <!-- [class.most-relevant]="isMostRelevant(idx, items)"-->
- <!-- [class.selected]="-->
- <!-- item === value ||-->
- <!-- (item && value && (transformer(item) | prizmCallFunc : identityMatcher : value))-->
- <!-- "-->
- <!-- prizmInputSelectOption-->
- <!-- [value]='item'-->
- <!-- >-->
- <!-- <ng-container *ngIf="!isNullish(item); else nullContentTemplate">-->
- <!-- <span-->
- <!-- class="text"-->
- <!-- #elem-->
- <!-- *prizmLet="-->
- <!-- item | prizmCallFunc : stringify : $any(nullContent) | prizmToObservable | async as text-->
- <!-- "-->
- <!-- [prizmHint]="text"-->
- <!-- [prizmHintHost]="hostHint"-->
- <!-- [prizmHintDirection]="direction"-->
- <!-- [prizmHintCanShow]="$any(elem | prizmCallFunc : prizmIsTextOverflow$ | async)"-->
- <!-- >-->
- <!-- <ng-container-->
- <!-- *polymorphOutlet="-->
- <!-- listItemTemplate ?? valueTemplate as content;-->
- <!-- context: {-->
- <!-- $implicit: item,-->
- <!-- value: item | prizmCallFunc : transformer,-->
- <!-- stringify: text-->
- <!-- }-->
- <!-- "-->
- <!-- >-->
- <!-- {{ text }}-->
- <!-- </ng-container>-->
- <!-- </span>-->
- <!-- </ng-container>-->
-
- <!-- <ng-template #nullContentTemplate>-->
- <!-- <ng-container *ngIf="nullContent">-->
- <!-- <ng-container *polymorphOutlet="nullContent as content">-->
- <!-- {{ content }}-->
- <!-- </ng-container>-->
- <!-- </ng-container>-->
- <!-- </ng-template>-->
- <!-- </div>-->
  </ng-container>
  <ng-template #emptyTemplate>
  <div class="empty-template">

diff --git a/libs/components/src/lib/components/dropdowns/select/input-select.component.less b/libs/components/src/lib/components/dropdowns/select/input-select.component.less
@@ -92,7 +92,7 @@ prizm-icon {
 }
 
 .list-search-item {
- padding: var(--prizm-select-item-padding, 8px 16px);
+ padding: var(--prizm-select-item-padding, 16px 16px 8px);
 
  prizm-input-layout {
  width: 100%;