ngx-opalbytes-components 1.19.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-opalbytes-components",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
@@ -12,6 +12,9 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "bin": {
+    "cao-comp": "cli/cao-comp.cjs"
+  },
   "sideEffects": false,
   "module": "fesm2022/ngx-opalbytes-components.mjs",
   "typings": "types/ngx-opalbytes-components.d.ts",

package/src/lib/shared/components/autocomplete/autocomplete.component.html

@@ -0,0 +1,126 @@
+<div class="form-field">
+  @if (label) {
+    <label [for]="dataCy">{{ label }}</label>
+  }
+
+  <div class="rnv-autocomplete-field autocomplete">
+    <div
+      #wrapper
+      class="input-wrapper"
+      [class.has-leading-icon]="_leadingIcon"
+      [class.has-trailing-icon]="_trailingIcon"
+      [class.focused]="isFocused"
+      [class.invalid]="control?.touched && control?.invalid"
+      [class.valid]="control?.touched && control?.valid && control?.value">
+
+      @if (_leadingIcon) {
+        @if (isLucideIcon) {
+          <div class="icon"
+            tabindex="0"
+            (click)="onLeadingIconClick($event)"
+            (keydown.enter)="onLeadingIconClick($event)">
+            <svg [strokeWidth]="strokeWidthIcon" [size]="iconSize" [lucideIcon]="_leadingIcon" [style.color]="iconColor"></svg>
+          </div>
+        } @else {
+          <div class="icon"
+            tabindex="0"
+            (click)="onLeadingIconClick($event)"
+            (keydown.enter)="onLeadingIconClick($event)">
+            <img alt="ícone de início" [style.width]="iconSize" [src]="_leadingIcon" />
+          </div>
+        }
+      }
+
+      <input
+        #inputEl
+        type="text"
+        autocomplete="off"
+        role="combobox"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="isPanelOpen"
+        [attr.aria-controls]="isPanelOpen ? listboxId : null"
+        [attr.aria-activedescendant]="activeOptionId"
+        [placeholder]="placeholder"
+        [disabled]="isDisabled"
+        [formControl]="internalControl"
+        [attr.data-cy]="dataCy"
+        [id]="dataCy"
+        (focus)="onFocus()"
+        (blur)="onBlur()"
+        (input)="onUserInput()"
+        (keydown)="onInputKeydown($event)" />
+
+      @if (_trailingIcon) {
+        @if (isLucideIcon) {
+          <div
+            tabindex="0"
+            class="icon trailing-icon"
+            (click)="onTrailingIconClick($event)"
+            (keydown.enter)="onTrailingIconClick($event)">
+            <svg [strokeWidth]="strokeWidthIcon" [size]="iconSize" [lucideIcon]="_trailingIcon" [style.color]="iconColor"></svg>
+          </div>
+        } @else {
+          <div
+            tabindex="0"
+            class="icon trailing-icon"
+            (click)="onTrailingIconClick($event)"
+            (keydown.enter)="onTrailingIconClick($event)">
+            <img alt="ícone de fim" [style.width]="iconSize"  [src]="_trailingIcon" />
+          </div>
+        }
+      }
+    </div>
+
+    @if (errorText) {
+      <span class="error-text">{{ errorText }}</span>
+    }
+  </div>
+</div>
+
+<ng-template #panel>
+  <div
+    class="autocomplete-panel"
+    cdkScrollable
+    role="listbox"
+    [id]="listboxId"
+    [style.width]="'100%'"
+    [style.max-height]="'260px'"
+    [style.background]="autocompleteBgColor">
+    
+    @if (!filteredOptionsList.length) {
+      <div class="empty-state">Nenhum resultado encontrado</div>
+    }
+
+    @for (option of filteredOptionsList; track trackByOptionId($index, option)) {
+      <div
+        class="option-item"
+        role="option"
+        [id]="optionId(option)"
+        [class.active]="$index === activeIndex"
+        [class.selected]="isOptionSelected(option)"
+        [attr.aria-selected]="$index === activeIndex"
+        (mousedown)="$event.preventDefault(); selectOption(option)"
+        (mouseenter)="activeIndex = $index">
+        <span>{{ option.nome }}</span>
+
+        <div class="option-item-icons">
+          @if (showCheckIcon && isOptionSelected(option)) {
+            @if (isLucideCheckIcon) {
+              <svg class="check-icon" [strokeWidth]="strokeWidthIcon" [lucideIcon]="checkIcon" [style.color]="iconColor"></svg>
+            } @else {
+              <span class="check-icon">{{ checkIcon }}</span>
+            }
+          }
+
+          @if (optionIcon) {
+            @if (isLucideOptionIcon) {
+              <svg [strokeWidth]="strokeWidthIcon" [size]="iconSize" [lucideIcon]="optionIcon" [style.color]="optionIConColor || iconColor"></svg>
+            } @else {
+              <img alt="" [src]="optionIcon" />
+            }
+          }
+        </div>
+      </div>
+    }
+  </div>
+</ng-template>

package/src/lib/shared/components/autocomplete/autocomplete.component.scss

@@ -0,0 +1,150 @@
+:host {
+  display: block;
+  position: relative;
+  --autocomplete-bg-color: white;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.rnv-autocomplete-field {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  height: var(--form-field-height, 44px);
+  display: flex;
+  align-items: center;
+  background-color: var(--autocomplete-bg-color, white);
+  border: 1px solid transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  &.invalid {
+    border-color: #d32f2f;
+  }
+
+  &.valid {
+    border-color: #2e7d32;
+  }
+}
+
+input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  padding: 12px;
+  font-size: 1rem;
+  box-sizing: border-box;
+
+  &:disabled {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+}
+
+.input-wrapper.has-leading-icon input {
+  padding-left: 36px;
+}
+
+.input-wrapper.has-trailing-icon input {
+  padding-right: 28px;
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  left: 6px;
+  transform: translateY(-50%);
+  width: auto;
+  height: auto;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.trailing-icon {
+  left: auto;
+  right: 6px;
+}
+
+.error-text {
+  color: #d32f2f;
+  font-size: 11px;
+  margin-top: 2px;
+}
+
+/* Painel do CDK Overlay */
+.autocomplete-panel {
+  background: var(--autocomplete-bg-color, white);
+  border-radius: 8px;
+  padding: 6px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+  max-height: 260px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.empty-state {
+  padding: 8px 12px;
+  font-size: .9rem;
+  color: rgba(0, 0, 0, .5);
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 1rem;
+  text-transform: uppercase;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover,
+  &.active {
+    background-color: rgba(0, 0, 0, .06);
+  }
+
+  &.selected {
+    background-color: rgba(25, 118, 210, .12);
+    font-weight: 600;
+  }
+
+  &.selected.active {
+    background-color: rgba(25, 118, 210, .2);
+  }
+}
+
+.option-item-icons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.check-icon {
+  font-weight: 700;
+  font-size: .95rem;
+  line-height: 1;
+}