ngx-opalbytes-components 1.19.0 → 1.21.0

package/src/lib/shared/components/base-button/base-button.component.scss

@@ -0,0 +1,14 @@
+.base-button{
+    display: flex;
+    gap: 5px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &.disabled {
+        cursor: not-allowed;
+    }
+    &.loading{
+        cursor: progress;
+    }
+}

package/src/lib/shared/components/base-button/base-button.component.spec.ts

@@ -0,0 +1,64 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { CaoBaseButtonComponent } from "./base-button.component";
+
+describe("CaoBaseButtonComponent", () => {
+  let component: CaoBaseButtonComponent;
+  let fixture: ComponentFixture<CaoBaseButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CaoBaseButtonComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaoBaseButtonComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("deveria criar", () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it("deve emitir o evento buttonClick quando clicado", () => {
+    vi.spyOn(component.buttonClick, "emit");
+    component.onClick();
+    expect(component.buttonClick.emit).toHaveBeenCalledWith();
+  });
+
+  it("não deve emitir o evento buttonClick quando desabilitado", () => {
+    component.isDisabled = true;
+    vi.spyOn(component.buttonClick, "emit");
+    component.onClick();
+    expect(component.buttonClick.emit).not.toHaveBeenCalled();
+  });
+
+  it("não deve emitir o evento buttonClick ao carregar", () => {
+    component.isLoading = true;
+    vi.spyOn(component.buttonClick, "emit");
+    component.onClick();
+    expect(component.buttonClick.emit).not.toHaveBeenCalled();
+  });
+
+  it("deve aplicar a classe de modo escuro quando isDarkMode for verdadeiro", () => {
+    component.isDarkMode = true;
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector("button");
+    expect(button.classList.contains("dark-mode")).toBeTruthy();
+  });
+
+  it("deve aplicar a classe desabilitada quando isDisabled for verdadeiro", () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector("button");
+    expect(button.classList.contains("disabled")).toBeTruthy();
+  });
+
+  it("deve aplicar a classe de carregamento quando isLoading for verdadeiro", () => {
+    component.isLoading = true;
+    fixture.detectChanges();
+    const button = fixture.nativeElement.querySelector("button");
+    expect(button.classList.contains("loading")).toBeTruthy();
+  });
+});

package/src/lib/shared/components/base-button/base-button.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from "@angular/common";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { MatTooltipModule } from "@angular/material/tooltip";
+
+import { LucideDynamicIcon } from "@lucide/angular";
+
+@Component({
+  standalone: true,
+  selector: "cao-button",
+  templateUrl: "./base-button.component.html",
+  styleUrls: ["./base-button.component.scss"],
+  imports: [CommonModule, MatTooltipModule, LucideDynamicIcon],
+})
+export class CaoBaseButtonComponent implements OnInit{
+  @Output() readonly buttonClick = new EventEmitter<void>();
+
+  @Input() buttonText = "Clique!";
+  @Input() isDarkMode = false;
+  @Input() isDisabled = false;
+  @Input() isLoading = false;
+  @Input() btnClass = "";
+
+  @Input() tooltip?:string;
+  @Input() trailingIcon?: string;
+  @Input() leadingIcon?: string;
+  @Input() isLucideIcon = true;
+  @Input() dataCy?: string;
+  @Input() iconColor?: string;
+  @Input() strokeWidthIcon = 1
+  @Input() minTextToTooltip = 20
+  @Input() iconSize = 24
+
+  ngOnInit(): void {
+    if (!this.dataCy) {
+      this.dataCy = `btn-${this.buttonText.replace(/\s+/g, '-').toLowerCase()}`;
+    }
+
+    if(!this.tooltip && this.buttonText.length >= this.minTextToTooltip){
+      this.tooltip = this.buttonText
+    }
+  }
+
+  onClick(): void {
+    if (!this.isDisabled && !this.isLoading) {
+      this.buttonClick.emit();
+    }
+  }
+}

package/src/lib/shared/components/base-button/base-button.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+import { fn } from 'storybook/test';
+
+import { CaoBaseButtonComponent } from './base-button.component';
+
+const meta: Meta<CaoBaseButtonComponent> = {
+  title: 'Componentes/Base Button',
+  component: CaoBaseButtonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    buttonText: { control: 'text' },
+    btnClass: { control: 'text' },
+    tooltip: { control: 'text' },
+    leadingIcon: { control: 'text' },
+    trailingIcon: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    iconColor: { control: 'color' },
+    isDarkMode: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+    minTextToTooltip: { control: { type: 'number', min: 1, max: 100 } },
+    iconSize: { control: { type: 'number', min: 8, max: 64 } },
+    dataCy: { control: 'text' },
+  },
+  args: {
+    buttonClick: fn(),
+    buttonText: 'Clique!',
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseButtonComponent>;
+
+export const Padrao: Story = {
+  args: {
+    buttonText: 'Clique!',
+  },
+};
+
+export const Principal: Story = {
+  args: {
+    buttonText: 'Salvar',
+    btnClass: 'btn-primary',
+  },
+};
+
+export const ComLeadingIcon: Story = {
+  args: {
+    buttonText: 'Salvar',
+    leadingIcon: 'Save',
+    isLucideIcon: true,
+  },
+};
+
+export const ComTrailingIcon: Story = {
+  args: {
+    buttonText: 'Próximo',
+    trailingIcon: 'ArrowRight',
+    isLucideIcon: true,
+  },
+};
+
+export const ComAmbosIcones: Story = {
+  args: {
+    buttonText: 'Enviar',
+    leadingIcon: 'Send',
+    trailingIcon: 'ArrowRight',
+    isLucideIcon: true,
+    iconColor: '#f97316',
+  },
+};
+
+export const Desabilitado: Story = {
+  args: {
+    buttonText: 'Desabilitado',
+    isDisabled: true,
+  },
+};
+
+export const Carregando: Story = {
+  args: {
+    buttonText: 'Carregando...',
+    isLoading: true,
+  },
+};
+
+export const ModoEscuro: Story = {
+  args: {
+    buttonText: 'Tema Escuro',
+    isDarkMode: true,
+  },
+};
+
+export const DesabilitadoComIcone: Story = {
+  args: {
+    buttonText: 'Bloqueado',
+    leadingIcon: 'Lock',
+    isLucideIcon: true,
+    isDisabled: true,
+  },
+};

package/src/lib/shared/components/base-icon/base-icon.html

@@ -0,0 +1,11 @@
+@if (imgSource) {
+    @if (isLucideIcon) {
+        <div class="icon">
+            <svg [lucideIcon]="imgSource" [style.color]="iconColor" [strokeWidth]="strokeWidthIcon" [size]="size"></svg>
+        </div>
+    } @else {
+        <div class="icon">
+            <img alt="ícone de início" [src]="imgSource" />
+        </div>
+    }
+}

package/src/lib/shared/components/base-icon/base-icon.spec.ts

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

package/src/lib/shared/components/base-icon/base-icon.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { CaoBaseIcon } from './base-icon';
+
+const meta: Meta<CaoBaseIcon> = {
+  title: 'Componentes/Base Icon',
+  component: CaoBaseIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    imgSource: { control: 'text' },
+    isLucideIcon: { control: 'boolean' },
+    strokeWidthIcon: { control: { type: 'number', min: 0.5, max: 3, step: 0.1 } },
+    iconColor: { control: 'color' },
+    size: { control: { type: 'number', min: 8, max: 96 } },
+  },
+  args: {
+    imgSource: 'Home',
+    isLucideIcon: true,
+    size: 32,
+  },
+};
+
+export default meta;
+type Story = StoryObj<CaoBaseIcon>;
+
+export const IconeLucide: Story = {
+  args: {
+    imgSource: 'Home',
+    isLucideIcon: true,
+  },
+};
+
+export const IconeLucideComCor: Story = {
+  args: {
+    imgSource: 'Settings',
+    isLucideIcon: true,
+    iconColor: '#3b82f6',
+  },
+};
+
+export const TamanhoPersonalizado: Story = {
+  args: {
+    imgSource: 'Bell',
+    isLucideIcon: true,
+    size: 48,
+    strokeWidthIcon: 2,
+  },
+};
+
+export const IconeSVG: Story = {
+  args: {
+    imgSource: 'https://lucide.dev/icons/home.svg',
+    isLucideIcon: false,
+    size: 32,
+  },
+};

package/src/lib/shared/components/base-icon/base-icon.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+import { LucideDynamicIcon } from '@lucide/angular';
+
+@Component({
+  selector: 'cao-base-icon',
+  imports: [CommonModule, LucideDynamicIcon],
+  templateUrl: './base-icon.html',
+  styleUrl: './base-icon.css',
+})
+export class CaoBaseIcon {
+  @Input() imgSource = ""
+  @Input() isLucideIcon = true
+  @Input() strokeWidthIcon = 1
+  @Input() iconColor = ""
+  @Input() size = 32
+}

package/src/lib/shared/components/base-input/base-input.css

@@ -0,0 +1,193 @@
+.form-field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+label {
+  font-size: 12px;
+  color: var(--primary);
+  font-weight: 700;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.input-wrapper input,
+.input-wrapper textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--input-background);
+  border-radius: 8px;
+  padding: 14px 10px;
+  color: var(--text-color-input);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.input-wrapper input::placeholder,
+.input-wrapper textarea::placeholder {
+  color: var(--input-text);
+}
+
+.input-wrapper input:focus,
+.input-wrapper textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.input-wrapper.has-leading-icon input {
+  padding-left: 33px;
+}
+
+.input-wrapper.has-trailing-icon input {
+  padding-right: 30px;
+}
+
+.input-wrapper img {
+  width: 100%;
+  height: auto;
+}
+
+.input-wrapper .icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-wrapper.has-leading-icon .icon:first-of-type {
+  left: 8px;
+}
+
+.input-wrapper.has-trailing-icon .icon:last-of-type {
+  right: 8px;
+}
+
+.input-wrapper .search-icon-border {
+  position: absolute;
+  top: 50%;
+  right: 14px;
+  transform: translateY(-50%);
+  border-left: 1px solid var(--line-color);
+  padding-left: 8px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.input-wrapper .search-icon {
+  width: 16px;
+  height: 24px;
+  cursor: pointer;
+  transition: filter 0.2s;
+}
+
+.input-wrapper .search-icon:hover {
+  filter: invert(62%) sepia(92%) saturate(747%) hue-rotate(142deg) brightness(97%) contrast(101%);
+}
+
+[type="date"] {
+  height: 43px;
+  padding: 14px 0 14px 12px !important;
+}
+
+
+[type="date"].invalid::-webkit-calendar-picker-indicator {
+  border-left: 1px solid var(--error);
+}
+
+[type="date"].valid::-webkit-calendar-picker-indicator {
+  border-left: 1px solid var(--success);
+}
+
+.input-date-disabled {
+  background: url("/assets/images/svg/icon-date-border.svg") no-repeat right 12px center;
+  background-size: 30px;
+  border: none;
+  border-radius: 8px;
+  background-color: var(--input-background);
+  padding: 12px 40px 12px 16px;
+  width: 100%;
+  color: var(--input-text);
+}
+
+.input-date-disabled::placeholder {
+  color: var(--input-text);
+}
+
+.input-secondary {
+  width: 100%;
+  border: 1px solid var(--data-bg) !important;
+  background-color: var(--white) !important;
+}
+
+.input-secondary.invalid {
+  border: 1px solid var(--error) !important;
+}
+
+.input-secondary.valid {
+  border: 1px solid var(--success) !important;
+}
+
+.input-wrapper .invalid {
+  border: 1px solid var(--error);
+}
+
+.input-wrapper .valid {
+  border: 1px solid var(--success);
+}
+
+.input-border-primary {
+  border: 1px solid var(--primary) !important;
+  background-color: var(--white) !important;
+}
+
+.input-border-primary.invalid {
+  border: 1px solid var(--error) !important;
+}
+
+.input-border-primary.valid {
+  border: 1px solid var(--success) !important;
+}
+
+/* stylelint-disable selector-pseudo-element-no-unknown */
+::ng-deep .custom-arrow-tooltip {
+  background-color: var(--color-tooltip);
+  color: var(--white);
+  padding: 0 4px;
+  border-radius: 6px;
+  font-size: 12px;
+  position: relative;
+  text-align: center;
+  max-width: 260px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
+}
+
+::ng-deep .input-component .cdk-overlay-pane .custom-arrow-tooltip::after {
+  content: "";
+  position: absolute;
+  top: -6px;
+  rotate: 180deg;
+  right: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid var(--color-tooltip);
+}
+/* stylelint-enable selector-pseudo-element-no-unknown */

package/src/lib/shared/components/base-input/base-input.html

@@ -0,0 +1,43 @@
+<div class="form-field input-component" [class.search-mode]="searchMode">
+  <div class="input-wrapper" [class.has-leading-icon]="_leadingIcon" [class.has-trailing-icon]="_trailingIcon"
+    [class.focused]="isFocused">
+    @if (_leadingIcon) { @if (isLucideIcon) {
+    <div class="icon">
+      <svg [lucideIcon]="_leadingIcon" [style.color]="iconColor"></svg>
+    </div>
+    } @else {
+    <div class="icon">
+      <img alt="ícone de início" [src]="_leadingIcon"/>
+    </div>
+    } } @switch (type) { 
+      @case ('textarea') {
+    <textarea matTooltip="{{ tooltip }}" matTooltipPosition="above" matTooltipClass="custom-arrow-tooltip" [attr.data-cy]="dataCy"
+      [placeholder]="placeholder" [disabled]="isDisabled" [ngClass]="[
+          inputClass,
+          control?.touched && control?.invalid ? 'invalid' : '',
+          control?.touched && control?.valid && control?.value ? 'valid' : ''
+        ]" [attr.maxlength]="maxLength"
+      [rows]="textareaRows" [mask]="mask" [allowNegativeNumbers]="allowNegativeNumbers" [thousandSeparator]="thousandSeparator" [decimalMarker]="decimalMarker" [separatorLimit]="separatorLimit"
+      [(ngModel)]="value" (input)="onInput($event)"
+      (focus)="onFocus()" (blur)="onBlur()"></textarea>
+    } 
+    @default {
+    <input matTooltip="{{ tooltip }}" matTooltipPosition="below" matTooltipClass="custom-arrow-tooltip" [attr.data-cy]="dataCy" [type]="type"
+      [placeholder]="placeholder" [disabled]="isDisabled" [ngClass]="[
+          inputClass,
+          control?.touched && control?.invalid ? 'invalid' : '',
+          control?.touched && control?.valid && control?.value ? 'valid' : ''
+        ]" [attr.maxlength]="maxLength"
+      [mask]="mask" [allowNegativeNumbers]="allowNegativeNumbers" [thousandSeparator]="thousandSeparator" [decimalMarker]="decimalMarker" [separatorLimit]="separatorLimit" [(ngModel)]="value" (input)="onInput($event)"
+      (change)="onInputChange($event)" (focus)="onFocus()" (blur)="onBlur()" />
+    } } @if (_trailingIcon) { @if (isLucideIcon) {
+    <div class="icon">
+      <svg [lucideIcon]="_trailingIcon" [style.color]="iconColor"></svg>
+    </div>
+    } @else {
+    <div class="icon">
+      <img alt="ícone de fim" [src]="_trailingIcon" />
+    </div>
+    } } 
+  </div>
+</div>