@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/components/algolia-dropdown/algolia-dropdown.component.html

@@ -0,0 +1,19 @@
+<cura-dropdown-search
+  [name]="name()"
+  [value]="value()"
+  [placeholder]="placeholder()"
+  [label]="label()"
+  [status]="status()"
+  [icon]="icon()"
+  [disabled]="disabled()"
+  [required]="required()"
+  [maxheight]="maxheight()"
+  [searchdelay]="searchdelay()"
+  [searchminchars]="searchminchars()"
+  [helperText]="helperText()"
+  [cssMaxHeight]="cssMaxHeight()"
+  (termchange)="termChange($event)"
+  (optionselect)="optionSelect($event)"
+>
+  <ng-content></ng-content>
+</cura-dropdown-search>

package/components/algolia-dropdown/algolia-dropdown.component.spec.ts

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

package/components/algolia-dropdown/algolia-dropdown.component.ts

@@ -0,0 +1,103 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, input, output, inject } from '@angular/core';
+import { AlgoliaConfig, AlgoliaSearchParams, RdslAlgoliaMultipleIndex } from '@rededor/site-front-end-lib/core';
+import { AlgoliaSearchApiService } from '@rededor/site-front-end-lib/services/algolia-search-api';
+
+// TODO: REFATORAR COMPONENTE QUANDO FOR CRIADO O "CURA-DROPDOWN-SEARCH" NO CURA EM ANGULAR. (NA VERSÃO 20 DA LIB, ESTE COMPONENTE NÃO FUNCIONA)
+@Component({
+  selector: 'rdsite-algolia-dropdown',
+  imports: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './algolia-dropdown.component.html',
+  styleUrl: './algolia-dropdown.component.scss',
+})
+export class AlgoliaDropdownComponent {
+  private readonly algoliaSearchApiService = inject(AlgoliaSearchApiService);
+
+  compAlgoliaConfig: AlgoliaConfig = { id: '', key: '' };
+  get algoliaConfig() {
+    return this.compAlgoliaConfig;
+  }
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('algoliaConfig')
+  set algoliaConfig(config: AlgoliaConfig) {
+    this.ready = false;
+    if (this.setupAlgolia(config)) {
+      this.compAlgoliaConfig = config;
+      this.ready = true;
+    }
+  }
+  readonly name = input.required<string>();
+  readonly value = input.required<string>();
+  readonly size = input.required<string>();
+  readonly label = input.required<string>();
+  readonly placeholder = input.required<string>();
+  readonly status = input.required<string>();
+  readonly icon = input.required<string>();
+  readonly disabled = input<boolean>(false);
+  readonly required = input<boolean>(false);
+  readonly maxheight = input.required<string>();
+  readonly searchdelay = input.required<string>();
+  readonly searchminchars = input<number>(2);
+  readonly helperText = input.required<string>();
+  readonly cssMaxHeight = input.required<string>();
+  readonly searchParams = input<AlgoliaSearchParams>({});
+
+  public searchTerm: string = '';
+
+  // Algolia
+  isMultiple: boolean = false;
+
+  // State
+  ready: boolean = false;
+
+  readonly algoliaResults = output<any>();
+  readonly resetResults = output<any>();
+  readonly optionSelected = output<any>();
+
+  setupAlgolia(config: AlgoliaConfig): boolean {
+    if (config?.id && config?.key && (config?.index || config?.multipleIndex)) {
+      if (config.multipleIndex) {
+        this.isMultiple = true;
+      } else {
+        this.isMultiple = false;
+      }
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  termChange(event: any) {
+    if (event.target.value) {
+      this.searchTerm = event?.target?.value;
+      this.search();
+    } else {
+      this.resetResults.emit(event);
+    }
+  }
+
+  search(): void {
+    if (this.searchTerm?.length >= this.searchminchars() && this.ready) {
+      if (!this.isMultiple) {
+        this.algoliaSearchApiService.search(this.searchTerm, this.algoliaConfig.index!, this.searchParams()).subscribe({
+          next: (results) => {
+            this.algoliaResults.emit(results);
+          },
+        });
+      } else {
+        const queries: RdslAlgoliaMultipleIndex[] = this.compAlgoliaConfig?.multipleIndex!.map((i: RdslAlgoliaMultipleIndex) => {
+          return { ...i, query: this.searchTerm };
+        });
+        this.algoliaSearchApiService.searchMultipleIndexes(queries).subscribe({
+          next: (results) => {
+            this.algoliaResults.emit(results.results);
+          },
+        });
+      }
+    }
+  }
+
+  optionSelect(event: any) {
+    this.optionSelected.emit(event.target.value);
+  }
+}

package/components/algolia-dropdown/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/components/algolia-dropdown/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/components/algolia-dropdown/public-api.ts

@@ -0,0 +1 @@
+export * from './algolia-dropdown.component';

package/components/algolia-search/components/algolia-search/algolia-search.component.html

@@ -0,0 +1,96 @@
+@if (showLabel()) {
+  <cura-label [color]="searchControl().disabled ? 'neutral-medium' : 'neutral-black'" size="xsmall" weight="bold" style="margin-bottom: 8px">
+    {{ label() }}
+  </cura-label>
+}
+<div
+  class="algolia-search"
+  [ngClass]="{
+    focus: focus(),
+    'focus-mobile': focusMobile(),
+    'no-results': noResults(),
+    'light-style': componentStyle() === rdslAlgoliaComponentStyle.LIGHT,
+    'no-overlay': !enableOverlay(),
+    disabled: searchControl().disabled,
+    'star-theme': starTheme(),
+    'maternity-star-theme': maternityStarTheme(),
+  }"
+  data-testid="_algolia-search"
+>
+  <div class="algolia-search-controls" data-testid="_algolia-search-controls">
+    @if (hint() && !noResults() && preselectedIndex() === null) {
+      <div class="algolia-search-controls-hint" [innerHTML]="hint()!.label" data-testid="_algolia-search-controls-hint"></div>
+    }
+
+    @if (!isMobile() || !enableOverlay() || (isMobile() && !focusMobile())) {
+      <cura-icon
+        class="search-icon"
+        [name]="actionIcon()"
+        [disabled]="!searchControl().enabled"
+        size="20"
+        [color]="(focus() || focusMobile()) && noResults() ? 'error-dark' : 'neutral-dark'"
+        (click)="searchTerm()"
+      ></cura-icon>
+    }
+
+    @if (isMobile() && enableOverlay() && focusMobile()) {
+      <cura-icon
+        class="left-icon"
+        name="arrowLeft"
+        size="20"
+        (click)="overlayClick()"
+        [disabled]="!searchControl().enabled"
+        [color]="noResults() ? 'error-dark' : 'primary-base'"
+      ></cura-icon>
+    }
+
+    <algolia-search-field
+      [searchControl]="searchControl()"
+      [debounceTime]="debounceTime()"
+      [placeholder]="placeholder()"
+      [componentStyle]="componentStyle()"
+      [setFocus]="setFocus()"
+      (termChange)="facetsNames() && facetsNames().length > 0 ? searchTermFacet() : searchTerm()"
+      (controlEnterKey)="selectHint()"
+      (controlBlur)="onBlur()"
+      (controlFocus)="onFocus()"
+      (navDown)="onNavDown()"
+      (navUp)="onNavUp()"
+    >
+    </algolia-search-field>
+
+    @if (((isMobile() && focusMobile()) || (!isMobile() && focus())) && !!searchControl().value) {
+      <cura-icon
+        name="closeCircle"
+        size="20"
+        class="clean-icon"
+        (mousedown)="clean()"
+        [disabled]="!searchControl().enabled"
+        [color]="noResults() ? 'error-dark' : 'primary-base'"
+      ></cura-icon>
+    }
+  </div>
+
+  <ng-content select=".algolia-search-tooltip"></ng-content>
+
+  @if (((!isMobile() && focus()) || (isMobile() && focusMobile())) && !noResults()) {
+    <ng-content select="algolia-search-results"></ng-content>
+  }
+
+  @if (((!isMobile() && focus()) || (isMobile() && focusMobile())) && noResults()) {
+    <div class="algolia-search-results" data-testid="_algolia-search-results">
+      <div class="algolia-search-results-container" data-testid="_algolia-search-results-container">
+        <div class="algolia-search-results-item" data-testid="_algolia-search-results-item">
+          <div class="algolia-search-results-item-icon" data-testid="_algolia-search-results-item-icon">
+            <cura-icon name="alertCircle" size="24" color="error-dark"></cura-icon>
+          </div>
+          <h4 class="error-message">Não há nenhum resultado para "{{ searchControl().value }}".</h4>
+        </div>
+      </div>
+    </div>
+  }
+
+  <div class="algolia-search-results-overlay" (click)="overlayClick()" data-testid="_algolia-search-results-overlay"></div>
+</div>
+
+<ng-content select=".algolia-search-helper"></ng-content>