Searchbar Update + Storybook Update

apps/isa-app/stories/ui/search-bar/search-bar.stories.ts

@@ -48,10 +48,9 @@ const meta: Meta<UiSearchBarComponentInputs> = {
       control: 'text',
     },
     appearance: {
-      control: {
-        type: 'select',
-        options: ['main', 'results'] as Appearance[],
-      },
+      control: 'select',
+      options: ['main', 'results'] as Appearance[],
+      type: 'string',
     },
   },
   args: {
@@ -71,11 +70,12 @@ const meta: Meta<UiSearchBarComponentInputs> = {
 
     return {
       props: { ...args, control: new FormControl(args.value) },
-      template: `<ui-search-bar class="flex items-center shrink-0 h-[3.75rem] pr-2 pl-6" ${argsToTemplate(args, { exclude: ['placeholder', 'value', 'resetValue', 'appearance'] })}>
+      template: `<ui-search-bar appearance="${args.appearance}" ${argsToTemplate(args, { exclude: ['placeholder', 'value', 'resetValue', 'appearance'] })}>
             <input [formControl]="control" type="text" placeholder="${args.placeholder}" />
-            <ui-search-bar-clear [class.pr-4]="${args.appearance === 'results'}" value="${args.resetValue}"></ui-search-bar-clear>
+            <ui-search-bar-clear></ui-search-bar-clear>
             ${button}
-            </ui-search-bar>`,
+            </ui-search-bar>
+            `,
     };
   },
 };

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html

@@ -1,6 +1,6 @@
 @let inp = input();
 @if (inp) {
-  <ui-search-bar>
+  <ui-search-bar [appearance]="appearance()">
     <input
       type="text"
       [formControl]="control"
@@ -8,9 +8,7 @@
       (keydown.enter)="onSearch()"
     />
 
-    <ui-search-bar-clear
-      [class.pr-4]="appearance() === 'results'"
-    ></ui-search-bar-clear>
+    <ui-search-bar-clear></ui-search-bar-clear>
 
     @if (appearance() === 'main') {
       <button
@@ -24,7 +22,6 @@
       </button>
     } @else if (appearance() === 'results') {
       <button
-        class="filter-search-bar-input__prefix-search-button"
         type="submit"
         uiIconButton
         prefix

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.scss

@@ -1,35 +1,3 @@
 .filter-search-bar-input {
   @apply flex flex-row gap-4 items-center;
 }
-
-.filter-search-bar-input__main {
-  .ui-search-bar {
-    @apply flex justify-between items-center shrink-0 w-[31.75rem] isa-desktop:w-[32.5rem] h-[3.75rem] pr-2 pl-6;
-  }
-}
-
-.filter-search-bar-input__results {
-  .ui-search-bar {
-    @apply flex justify-between items-center shrink-0 w-[21.25rem] h-[3.25rem];
-
-    &:has(input[type='text']:placeholder-shown) {
-      @apply pl-0;
-
-      .filter-search-bar-input__prefix-search-button {
-        @apply inline-flex;
-      }
-    }
-
-    &:has(input[type='text']) {
-      @apply pl-4;
-
-      input[type='text'] {
-        @apply pr-4 whitespace-nowrap overflow-hidden overflow-ellipsis;
-      }
-
-      .filter-search-bar-input__prefix-search-button {
-        @apply hidden;
-      }
-    }
-  }
-}

libs/ui/search-bar/src/lib/search-bar.component.scss

@@ -43,9 +43,37 @@ input[type='text'] {
 }
 
 .ui-search-bar__action__close {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  @apply text-2xl cursor-pointer;
+  @apply inline-flex justify-center items-center shrink-0 text-2xl cursor-pointer;
+}
+
+.ui-search-bar__main {
+  @apply flex justify-between items-center shrink-0 w-[31.75rem] isa-desktop:w-[32.5rem] h-[3.75rem] pr-2 pl-6;
+}
+
+.ui-search-bar__results {
+  @apply flex justify-between items-center shrink-0 w-[21.25rem] h-[3.25rem];
+
+  .ui-search-bar__action__close {
+    @apply pr-4;
+  }
+
+  &:has(input[type='text']:placeholder-shown) {
+    @apply pl-0;
+
+    button[prefix][uiIconButton] {
+      @apply inline-flex;
+    }
+  }
+
+  &:has(input[type='text']) {
+    @apply pl-4;
+
+    input[type='text'] {
+      @apply pr-4 whitespace-nowrap overflow-hidden overflow-ellipsis;
+    }
+
+    button[prefix][uiIconButton] {
+      @apply hidden;
+    }
+  }
 }

libs/ui/search-bar/src/lib/search-bar.component.ts

@@ -1,12 +1,22 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   contentChild,
   ElementRef,
+  input,
   ViewEncapsulation,
 } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
+export const SearchbarAppearance = {
+  Main: 'main',
+  Results: 'results',
+} as const;
+
+export type SearchbarAppearance =
+  (typeof SearchbarAppearance)[keyof typeof SearchbarAppearance];
+
 @Component({
   selector: 'ui-search-bar',
   templateUrl: './search-bar.component.html',
@@ -14,11 +24,21 @@ import { NgControl } from '@angular/forms';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class]': '["ui-search-bar"]',
+    '[class]': '["ui-search-bar", appearanceClass()]',
   },
 })
 export class UiSearchBarComponent {
+  appearance = input<SearchbarAppearance>(SearchbarAppearance.Main);
+
+  appearanceClass = computed(() => {
+    return this.appearance() === SearchbarAppearance.Main
+      ? 'ui-search-bar__main'
+      : 'ui-search-bar__results';
+  });
+
   inputControl = contentChild.required(NgControl, { read: NgControl });
 
-  inputControlElementRef = contentChild.required(NgControl, { read: ElementRef });
+  inputControlElementRef = contentChild.required(NgControl, {
+    read: ElementRef,
+  });
 }