ngx-opalbytes-components 1.19.0 → 1.21.0

package/src/lib/shared/components/drop-down/drop-down.ts

@@ -0,0 +1,335 @@
+import { CommonModule } from "@angular/common";
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+  forwardRef,
+  OnInit,
+  OnDestroy,
+  ChangeDetectorRef,
+} from "@angular/core";
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+  FormControl,
+} from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { MatTooltipModule } from "@angular/material/tooltip";
+
+export interface ICaoDropDownOption {
+  id?: string | number;
+  nome: string;
+  icon?: string;
+  iconPosition?: string;
+  dataCy?: string;
+}
+
+@Component({
+  selector: "cao-drop-down",
+  templateUrl: "./drop-down.html",
+  styleUrl: "./drop-down.css",
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    MatIconModule,
+    CommonModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CaoDropDownComponent),
+      multi: true,
+    },
+  ],
+})
+export class CaoDropDownComponent implements ControlValueAccessor, OnInit, OnDestroy {
+  @Input() textHeader = "SELECIONE UM ITEM";
+  @Input() options: ICaoDropDownOption[] = [];
+  @Input() dropDownClass = "";
+  @Input() styleDropDown: { [klass: string]: unknown } = {};
+  @Input() control?: AbstractControl | null;
+  @Input() controlName = "";
+  @Input() isDisabled = false;
+  @Input() tooltip = "";
+  @Input() dropDirectionInput: "up" | "down" = "down";
+  @Input() dataCy?: string = "";
+
+  @Input() trackByFn?: (index: number, item: ICaoDropDownOption) => unknown;
+  @Input() compareWith?: (option: unknown, value: unknown) => boolean;
+  @Input() ariaLabel?: string;
+  @Input() ariaLabelledBy?: string;
+  @Input() listAriaLabel?: string;
+
+  @Output() readonly itemSelected = new EventEmitter<ICaoDropDownOption>();
+
+  isOpen = false;
+  selectedItem?: ICaoDropDownOption;
+  filteredOptions: ICaoDropDownOption[] = [];
+  searchControl = new FormControl("");
+  isTouched = false;
+  isFocused = false;
+  dropDirection: string | undefined;
+  removeValidBorder = false;
+
+
+  focusedIndex = -1;
+
+  private _handleClickOutside = this.onClickOutside.bind(this);
+
+  constructor(
+    private _eref: ElementRef,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    document.addEventListener("click", this._handleClickOutside, true);
+    this.filteredOptions = [...this.options];
+
+    this.searchControl.valueChanges.subscribe((value) => {
+      this.filterOptions(value || "");
+      this.focusedIndex = -1
+    });
+  }
+
+  ngOnDestroy(): void {
+    document.removeEventListener("click", this._handleClickOutside, true);
+  }
+
+  get activeDescendant(): string | null {
+    if (this.isOpen && this.focusedIndex >= 0 && this.filteredOptions[this.focusedIndex]) {
+      return `option-${this.dataCy}-${this.focusedIndex}`;
+    }
+    return null;
+  }
+
+  toggleDropdown(): void {
+    if (this.isDisabled) { return };
+
+    this.checkAvailableSpace();
+    this.isOpen = !this.isOpen;
+    this.isFocused = this.isOpen;
+    this.markAsTouched();
+
+    if (this.isOpen) {
+      this.searchControl.setValue("");
+      this.filteredOptions = [...this.options];
+      this.removeValidBorder = false;
+      this.focusedIndex = -1;
+
+
+      setTimeout(() => {
+        if (this.isOpen) {
+          const searchInput = this._eref.nativeElement.querySelector('.dropdown-search input');
+          if (searchInput) {
+            searchInput.focus();
+          }
+        }
+      });
+    } else {
+      this.focusedIndex = -1;
+    }
+
+    this.cdr.detectChanges();
+  }
+
+  selectItem(option: ICaoDropDownOption): void {
+    if (this.isDisabled) { return };
+
+    this.selectedItem = option;
+    this.isOpen = false;
+    this.focusedIndex = -1;
+    this.itemSelected.emit(option);
+    this.onChange(option);
+    this.markAsTouched();
+    this.cdr.detectChanges();
+  }
+
+  clear(): void {
+    this.selectedItem = undefined;
+    this.onChange(null);
+    this.cdr.detectChanges();
+  }
+
+  filterOptions(searchTerm: string) {
+    if (!searchTerm) {
+      this.filteredOptions = [...this.options];
+      return;
+    }
+    const lowerCaseSearchTerm = searchTerm.toLowerCase();
+    this.filteredOptions = this.options.filter(
+      (option) =>
+        option.nome.toLowerCase().includes(lowerCaseSearchTerm) ||
+        option.id?.toString().toLowerCase().includes(lowerCaseSearchTerm)
+    );
+  }
+
+  trackBy(index: number, item: ICaoDropDownOption): unknown {
+    return this.trackByFn ? this.trackByFn(index, item) : item.id;
+  }
+
+  private onClickOutside(event: MouseEvent): void {
+    if (!this._eref.nativeElement.contains(event.target)) {
+      if (this.isOpen) {
+        this.isOpen = false;
+      }
+      if (this.isFocused) {
+        this.isFocused = false;
+      }
+      this.focusedIndex = -1;
+      this.markAsTouched();
+      this.removeValidBorder = true;
+      this.cdr.detectChanges();
+    }
+  }
+
+  onArrowDown(event: Event): void {
+    if (this.isDisabled) { return };
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.filteredOptions.length === 0) { return };
+
+    if (this.focusedIndex === -1) {
+
+      this.focusedIndex = 0;
+    } else {
+
+      this.focusedIndex = (this.focusedIndex + 1) % this.filteredOptions.length;
+    }
+
+    this.scrollIntoView();
+    this.cdr.detectChanges();
+  }
+
+  onArrowUp(event: Event): void {
+    if (this.isDisabled) { return };
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.filteredOptions.length === 0) { return };
+
+    if (this.focusedIndex === -1) {
+
+      this.focusedIndex = this.filteredOptions.length - 1;
+    } else {
+
+      this.focusedIndex = this.focusedIndex <= 0
+        ? this.filteredOptions.length - 1
+        : this.focusedIndex - 1;
+    }
+
+    this.scrollIntoView();
+    this.cdr.detectChanges();
+  }
+
+  onSearchEnter(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.focusedIndex >= 0 && this.focusedIndex < this.filteredOptions.length) {
+      this.selectItem(this.filteredOptions[this.focusedIndex]);
+    } else if (this.filteredOptions.length > 0) {
+
+      this.selectItem(this.filteredOptions[0]);
+    }
+  }
+
+  closeDropdown(): void {
+    if (this.isDisabled) { return };
+
+    this.isOpen = false;
+    this.focusedIndex = -1;
+    this.isFocused = false;
+    this.cdr.detectChanges();
+  }
+
+  private scrollIntoView(): void {
+    if (!this.isOpen || this.focusedIndex === -1) { return };
+
+    setTimeout(() => {
+      const element = document.getElementById(`option-${this.dataCy}-${this.focusedIndex}`);
+      if (element) {
+        element.scrollIntoView({
+          block: 'nearest',
+          behavior: 'smooth'
+        });
+      }
+    }, 0);
+  }
+
+  checkAvailableSpace(): void {
+    if (this.dropDirectionInput === "up") {
+      this.dropDirection = "up";
+      return;
+    }
+
+    const rect = this._eref.nativeElement.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const dropdownHeight = 200
+
+    const spaceBelow = windowHeight - rect.bottom;
+    this.dropDirection = spaceBelow < dropdownHeight ? "up" : "down";
+  }
+
+
+  writeValue(value: unknown): void {
+    if (value !== null && value !== undefined) {
+      const match = this.options.find((opt) =>
+        this.compareWith
+          ? this.compareWith(opt, value)
+          : opt.id === (typeof value === "object" && value ? (value as any).id : value)
+      );
+
+      if (match) {
+        this.selectedItem = match;
+      } else {
+        const matchByName = this.options.find((opt) => opt.nome === value);
+        if (matchByName) {
+          this.selectedItem = matchByName;
+        }
+      }
+    } else {
+      this.selectedItem = undefined;
+    }
+    this.cdr.detectChanges();
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  onChange: (value: unknown) => void = () => { };
+  onTouched = () => { };
+
+  get errorText(): string | null {
+    if (!this.control) { return null; }
+    if (this.control.hasError("required")) {
+      return "*Campo obrigatório";
+    }
+    return null;
+  }
+
+  private markAsTouched() {
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+      this.control?.markAsTouched();
+    }
+  }
+
+  get controlNameValue(): string {
+    return this.controlName;
+  }
+}

package/src/lib/shared/components/footer/footer.css

@@ -0,0 +1,29 @@
+* {
+  list-style: none;
+  text-decoration: none;
+}
+
+.footer-component{
+  display: flex;
+  align-items: end;
+  justify-content: end;
+  height: 35px;
+  padding: 0 50px 10px 0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.footer-component .flex{
+  display: flex;
+
+}
+.footer-component.isFixed{
+  position: fixed;
+}
+
+.footer-component.col{
+  flex-direction: column;
+}

package/src/lib/shared/components/footer/footer.html

@@ -0,0 +1,10 @@
+<footer class="footer-element" [class.fixed]="isFixed">
+  <div class="flex col">
+    <ng-content />
+    @if(footerText){
+      <ul class="footer-end">
+        <li>{{ footerText }} © {{ currentYear }}</li>
+      </ul>
+    }
+  </div>
+</footer>

package/src/lib/shared/components/footer/footer.spec.ts

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

package/src/lib/shared/components/footer/footer.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { Footer } from './footer';
+
+const meta: Meta<Footer> = {
+  title: 'Componentes/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  argTypes: {
+    currentRoute: { control: 'text' },
+    footerText: { control: 'text' },
+    isFixed: { control: 'boolean' },
+  },
+  args: {
+    footerText: 'Opalbytes',
+  },
+};
+
+export default meta;
+type Story = StoryObj<Footer>;
+
+export const Padrao: Story = {
+  args: {
+    footerText: 'Opalbytes',
+  },
+};
+
+export const Fixo: Story = {
+  args: {
+    footerText: 'Opalbytes',
+    isFixed: true,
+  },
+};
+
+export const ComRota: Story = {
+  args: {
+    footerText: 'Opalbytes',
+    currentRoute: '/dashboard',
+  },
+};
+
+export const ComConteudo: Story = {
+  render: (args) => ({
+    template: `
+      <cao-footer [currentRoute]="currentRoute" [footerText]="footerText" [isFixed]="isFixed">
+        <div>Links úteis: <a href="#">Termos</a> | <a href="#">Privacidade</a></div>
+      </cao-footer>
+    `,
+    props: args,
+  }),
+};

package/src/lib/shared/components/footer/footer.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "cao-footer",
+  templateUrl: "./footer.html",
+  styleUrl: "./footer.css",
+  imports: [ CommonModule ]
+})
+export class Footer {
+  currentYear: number = new Date().getFullYear();
+  @Input() currentRoute?:string;
+  @Input() footerText?:string;
+  @Input() isFixed = true;
+}

package/src/lib/shared/components/index.ts

@@ -0,0 +1,19 @@
+export * from './base-button/base-button.component'
+export * from './base-input/base-input'
+export * from './base-time-range/base-time-range'
+
+export * from './autocomplete/autocomplete.component'
+export * from './drop-down/drop-down'
+export * from './links-button/links-button'
+export * from './footer/footer'
+export * from './paginator/paginator'
+export * from './time-picker/time-picker'
+
+export * from './stepper/stepper'
+export * from './stepper/step/step'
+
+export * from "./tab-group/tab-group"
+export * from "./tab-panel/tab-panel"
+
+export * from "./base-icon/base-icon"
+export * from "./kpi/kpi"

package/src/lib/shared/components/kpi/kpi.html

@@ -0,0 +1,11 @@
+<div
+  class="flex flex-col py-2 pt-2.25 px-3.75 rounded-card border-b w-46.25 bg-(--color-white)"
+  [style.border-color]="kpiData().borderColor">
+  <div class="flex w-full justify-end">
+    <img class="w-6 h-6 mr-2" [src]="kpiData().icon.src" [alt]="kpiData().icon.alt" />
+  </div>
+  <div class="flex flex-col pl-1.5">
+    <p class="text-2xl" [style.color]="kpiData().textColor">{{ kpiData().value }}</p>
+    <h3 class="text-base" [style.color]="kpiData().textColor">{{ kpiData().title }}</h3>
+  </div>
+</div>

package/src/lib/shared/components/kpi/kpi.spec.ts

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { CaoKpi, ICaoKPI } from "./kpi";
+
+const mockKpiData: ICaoKPI = {
+  title: "Test",
+  value: "42",
+  textColor: "#000000",
+  borderColor: "#ffffff",
+  icon: { src: "icon.png", alt: "icon" },
+};
+
+describe("CaoKpi", () => {
+  let component: CaoKpi;
+  let fixture: ComponentFixture<CaoKpi>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoKpi],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CaoKpi);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput("kpiData", mockKpiData);
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should render the kpi data", () => {
+    const el: HTMLElement = fixture.nativeElement;
+    expect(el.textContent).toContain("42");
+    expect(el.textContent).toContain("Test");
+  });
+});

package/src/lib/shared/components/kpi/kpi.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoKpi, ICaoKPI } from './kpi';
+
+const defaultKpi: ICaoKPI = {
+  title: 'Faturamento',
+  value: 'R$ 128.450,00',
+  textColor: '#111827',
+  borderColor: '#e5e7eb',
+  icon: {
+    src: 'https://lucide.dev/icons/trending-up.svg',
+    alt: 'ícone de tendência',
+  },
+};
+
+const meta: Meta<CaoKpi> = {
+  title: 'Componentes/KPI',
+  component: CaoKpi,
+  tags: ['autodocs'],
+  argTypes: {
+    kpiData: { control: 'object' },
+  },
+  args: {
+    kpiData: defaultKpi,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoKpi>;
+
+export const Padrao: Story = {
+  args: {
+    kpiData: defaultKpi,
+  },
+};
+
+export const Sucesso: Story = {
+  args: {
+    kpiData: {
+      title: 'Meta de vendas',
+      value: '87%',
+      textColor: '#16a34a',
+      borderColor: '#16a34a',
+      icon: {
+        src: 'https://lucide.dev/icons/check-circle.svg',
+        alt: 'ícone de sucesso',
+      },
+    },
+  },
+};
+
+export const Alerta: Story = {
+  args: {
+    kpiData: {
+      title: 'Pedidos pendentes',
+      value: '32',
+      textColor: '#dc2626',
+      borderColor: '#dc2626',
+      icon: {
+        src: 'https://lucide.dev/icons/alert-triangle.svg',
+        alt: 'ícone de alerta',
+      },
+    },
+  },
+};

package/src/lib/shared/components/kpi/kpi.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+export interface ICaoImage {
+  src: string;
+  alt: string;
+}
+export interface ICaoKPI {
+  title: string;
+  value: string;
+  textColor: string;
+  borderColor: string;
+  icon: ICaoImage;
+}
+
+@Component({
+  selector: "cao-kpi",
+  imports: [CommonModule],
+  templateUrl: "./kpi.html",
+  styleUrl: "./kpi.css",
+  standalone: true,
+})
+export class CaoKpi {
+  readonly kpiData = input.required<ICaoKPI>();
+}

package/src/lib/shared/components/links-button/links-button.css

@@ -0,0 +1,70 @@
+* {
+  text-decoration: none;
+}
+
+.links-info {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+}
+
+.links-info h2 {
+  font-size: 24px;
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  color: var(--title-info);
+  margin-bottom: 12%;
+  text-wrap: wrap;
+  height: 64px;
+}
+
+.links-info .links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 46px;
+}
+
+.links-info .links .link {
+  width: 250px;
+  height: 100px;
+  text-transform: uppercase;
+  background-color: var(--primary);
+  color: var(--white);
+  font-weight: 700;
+  padding: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 16px;
+  border-radius: 20px;
+  box-shadow: 0 4px 4px 0 var(--shadow-black);
+  cursor: pointer;
+}
+
+.links-info .links .link.disabled {
+  background-color: var(--input-disabled-bg);
+  color: var(--black);
+  pointer-events: none;
+  cursor: default;
+}
+
+.links-info .links .link:active {
+  background-color: var(--active-success-btn);
+}
+
+.links-info .links .link:hover {
+  background: linear-gradient(125.78deg, var(--primary) 7.03%, var(--confirm-color) 96.73%);
+}
+
+@media (max-width: 768px) {
+  .links-info h2 {
+    height: 0;
+  }
+  
+  .links-info .links {
+    padding-bottom: 20px;
+  }
+}