keevo-components 2.0.105 → 2.0.107

package/src/lib/components/kv-inputs/kv-radio-group/kv-radio-group.component.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  DoCheck,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentService } from '../../../api/services/component.service';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+
+@Component({
+  selector: 'kv-radio-group',
+  templateUrl: './kv-radio-group.component.html',
+  styleUrls: [
+    './kv-radio-group.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvRadioGroupComponent),
+})
+export class KvRadioGroupComponent extends BaseComponentInput<any> implements OnInit, DoCheck {
+
+  @Input() options: any[] = [
+    { id: 0, description: 'Não' },
+    { id: 1, description: 'Sim' },
+  ];
+
+  @Input() optionValue: string = 'id';
+  @Input() optionLabel: string = 'description'
+
+  @Input() optionValueDefault!: any
+  @Input() vertical: boolean = false;
+
+  @Output() onSelectedOption: EventEmitter<any> = new EventEmitter();
+
+  selectedOpt: any = null;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.selectedDefault();
+  }
+
+  ngDoCheck(): void {
+    this.selectedDefault();
+  }
+
+  selectedDefault() {
+    if (this.optionValueDefault != undefined && !this.selectedOpt) {
+      let item = this.options.find(opt => opt[this.optionValue] === this.optionValueDefault);
+      if (item) this.selectedOpt = item;
+    }
+  }
+
+  selectedOption(event: any) {
+    this.onSelectedOption.emit(event.value[this.optionValue]);
+  }
+}

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.html

@@ -0,0 +1,26 @@
+@if(value) {
+<p-selectButton
+    [options]="options"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    (onChange)="selectionChange($event)"
+    (onOptionClick)="onOptionClick($event)"
+    [multiple]="mutiple"
+    [disabled]="disabled"
+    [(ngModel)]="value"
+/>
+} @else {
+<div [formGroup]="formGroup">
+    <p-selectButton
+        [options]="options"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        (onChange)="selectionChange($event)"
+        (onOptionClick)="onOptionClick($event)"
+        [multiple]="mutiple"
+        [disabled]="disabled"
+        [formControlName]="formControlName"
+        [(ngModel)]="value"
+    />
+</div>
+}

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.scss

@@ -0,0 +1,5 @@
+:host ::ng-deep .p-selectbutton .p-button.p-highlight {
+    background: #183462 !important;
+    border: #183462;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.03), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.12);
+}

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvSelectButtonComponent } from './kv-select-button.component';
+
+describe('KvSelectButtonComponent', () => {
+  let component: KvSelectButtonComponent;
+  let fixture: ComponentFixture<KvSelectButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [KvSelectButtonComponent]
+    });
+    fixture = TestBed.createComponent(KvSelectButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/kv-inputs/kv-select-button/kv-select-button.component.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'kv-select-button',
+  templateUrl: './kv-select-button.component.html',
+  styleUrls: ['./kv-select-button.component.scss']
+})
+export class KvSelectButtonComponent {
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() optionClick: EventEmitter<any> = new EventEmitter();
+
+  @Input() formGroup!: FormGroup
+  @Input() formControlName!: string
+  @Input() options: any[] = []
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+  @Input() mutiple: boolean = false
+  @Input() disabled: boolean = false
+
+  @Input() value: any;
+
+  selectionChange(event: any) {
+    this.onSelectionChange.emit(event);
+  }
+
+  onOptionClick(event: any) {
+    this.optionClick.emit(event);
+  }
+}

package/src/lib/components/kv-inputs/kv-select-buttons/kv-select-buttons.component.html

@@ -0,0 +1,28 @@
+<div class="flex flex-1 flex-row justify-content-start">
+  <div class="flex p-1 gap-1 border-round select-button-container">
+    @for(option of options(); track option.value;) {
+
+    <button
+    [pTooltip]="option.tooltip"
+    [tooltipPosition]="option.tooltipPosition || 'top'"
+    (click)="select(option)"
+      [ngClass]="[
+        selection() === option.value ? 'active' : 'inactive',
+        'select-button'
+      ]"
+      class=""
+      pButton
+      pRipple
+    >
+      @if(option.icon){
+        <span class="material-symbols-outlined">
+          {{ option.icon}}
+        </span>
+      }
+
+      {{ option.label }}
+
+    </button>
+    }
+  </div>
+</div>

package/src/lib/components/kv-inputs/kv-select-buttons/kv-select-buttons.component.scss

@@ -0,0 +1,61 @@
+.select-button {
+  border-radius: 4px !important;
+  box-shadow: 1px 1px 1px 1px #18346205;
+  color: black;
+  font-weight: bold;
+  border: none;
+  gap: 0.25rem;
+  padding: 0.5rem !important;
+  font-size: 0.8rem !important;
+}
+
+// para telas menores que 1400px
+@media (max-width: 1400px) {
+  .select-button {
+    padding: 0.3rem !important;
+  }
+}
+
+.active {
+  background-color: #002542;
+  color: white;
+  font-weight: 600;
+}
+
+.inactive {
+  background-color: #f0f4f9;
+  color: #64748b;
+  font-weight: 400;
+  // mudar de cor de forma suave
+  transition: background-color 0.3s ease;
+  &:hover {
+    background-color: #a3a3a336;
+    color: #47566b;
+    // opacity: 0.8;
+  }
+}
+
+.select-button-container {
+  background-color: transparent !important;
+  color: #0a3a78 !important;
+  margin-left: 10px;
+  margin-top: 10px;
+  // border: 1px solid rgba(10, 58, 120, 0.2) !important;
+}
+
+.select-button-container .active[_ngcontent-ng-c2721768269] {
+  background-color: rgba(10, 58, 120, 0.1) !important;
+  color: #0a3a78 !important;
+  font-weight: 600;
+  // transition-duration: 500ms;
+  transition-property: background-color, border-color, color;
+  transition: all 0.2s ease-in-out;
+}
+
+.select-button-container .inactive[_ngcontent-ng-c2721768269] {
+  background-color: #fff;
+  color: #212121;
+  font-weight: 400;
+  transition-property: background-color, border-color, color;
+  transition: all 0.2s ease-in-out;
+}

package/src/lib/components/kv-inputs/kv-select-buttons/kv-select-buttons.component.spec.ts

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

package/src/lib/components/kv-inputs/kv-select-buttons/kv-select-buttons.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, input, OnInit, Output, model } from '@angular/core';
+
+@Component({
+  selector: 'kv-select-buttons',
+  standalone: false,
+  templateUrl: './kv-select-buttons.component.html',
+  styleUrl: './kv-select-buttons.component.scss',
+})
+export class KvSelectButtonsComponent<T> implements OnInit {
+  options = input<SelectButtonsOption<T>[]>([]);
+  selection = model<T>();
+
+  /**
+   * @deprecated a favor do selection
+   */
+  @Input() defaultValue?: T;
+
+  /**
+   * @deprecated a favor do selection
+   */
+  @Output() selectChange = new EventEmitter<T>();
+
+  ngOnInit(): void {
+    if (this.defaultValue) {
+      this.selection.set(this.defaultValue);
+    }
+  }
+
+  select(value: SelectButtonsOption<T>) {
+    this.selection.set(value.value);
+    this.selectChange.emit(value.value);
+    value.action();
+  }
+}
+
+export type SelectButtonsOption<T> = {
+  label: string;
+  icon?: string;
+  action: () => void;
+  value: T;
+  tooltip?: string;
+  tooltipPosition?: string;
+}

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.html

@@ -0,0 +1,23 @@
+<div>
+  <div class="flex flex-row align-items-end">
+    <p-inputSwitch
+      [inputId]="componentId"
+      [(ngModel)]="value"
+      [disabled]="disabled"
+      [readonly]="readonly"
+      (ngModelChange)="emitOnSwitchChange($event)"
+    >
+    </p-inputSwitch>
+
+    @if(label) {
+    <label 
+      [for]="componentId" 
+      class="label-switch" 
+      [ngClass]="{'disabled-label': disabled}">{{ label }}</label>
+    }
+  </div>
+
+  <kv-error [hasError]="hasControlError()" class="w-screen">{{
+    erroMessage()
+  }}</kv-error>
+</div>

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.scss

@@ -0,0 +1,35 @@
+::ng-deep .label-switch {
+  position: relative;
+  bottom: 4px;
+  font-size: 0.75rem;
+}
+
+::ng-deep .disabled-label {
+  opacity: 0.4;
+}
+
+// ::ng-deep .p-inputswitch {
+//   scale: 0.6;
+// }
+
+::ng-deep .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+  background: #004172;
+  background: rgb(var(--kv-primary-color));
+
+  &:hover {
+    background: rgba(var(--kv-primary-color), 0.8);
+  }
+
+  &:active {
+    background: rgba(var(--kv-primary-color), 0.95);
+  }
+}
+
+::ng-deep .p-disabled {
+  opacity: 0.4;
+}
+
+::ng-deep p-inputswitch {
+  display: flex;
+  scale: 0.6;
+}

package/src/lib/components/kv-inputs/kv-switch/kv-switch.component.ts

@@ -0,0 +1,54 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
+
+import { BaseComponentInput } from '../../../api/base-components/base-component-input';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { ComponentService } from '../../../api/services/component.service';
+
+@Component({
+  selector: 'kv-switch',
+  templateUrl: './kv-switch.component.html',
+  styleUrls: [
+    './kv-switch.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvSwitchComponent),
+})
+export class KvSwitchComponent extends BaseComponentInput<boolean> {
+
+  @Input() readonly!: boolean;
+  @Input() switchValue!: boolean;
+
+  @Output() onSwitchChange: EventEmitter<any> = new EventEmitter();
+
+
+  varivelDoMeuComponente: boolean = false;
+
+  constructor(componentService: ComponentService) {
+    super(componentService);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes['switchValue']){
+      this.value = changes['switchValue'].currentValue;
+    }
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    if (this.switchValue) this.value = this.switchValue;
+  }
+
+  emitOnSwitchChange(event: any) {
+    this.onSwitchChange.emit(event);
+  }
+}
+
+

package/src/lib/components/kv-inputs/kv-tree-multi-select/kv-tree-multi-select.component.html

@@ -0,0 +1,68 @@
+<span>
+  <kv-label
+    [componentId]="componentId"
+    [label]="label && label + (showAsterisk ? '*' : '')"
+  />
+
+  <p-treeSelect
+    inputId="tree-multi-select"
+    [class]="baseInputClass"
+    [disabled]="disabled"
+    [options]="options"
+    [filter]="filter"
+    [showClear]="showClear"
+    [(ngModel)]="value"
+    (onNodeSelect)="selectionChange($event)"
+    (onNodeUnselect)="selectionChange($event)"
+    (onPanelHide)="panelHide($event)"
+    [appendTo]="appendTo"
+    [metaKeySelection]="false"
+    styleClass="inputs"
+    containerStyleClass="inputs"
+    selectionMode="checkbox"
+    display="chip"
+    [propagateSelectionDown]="propagateSelectionDown()"
+    [propagateSelectionUp]="propagateSelectionUp()"
+  >
+    <ng-template let-value pTemplate="value" class="w-full">
+      <div
+        class="p-multiselect p-multiselect-chip p-multiselect-label w-full flex flex-nowrap"
+      >
+        <div
+          #token
+          *ngFor="let chip of chips; let i = index"
+          class="p-multiselect-token"
+        >
+          <span class="p-multiselect-token-label">{{ chip.label }}</span>
+
+          <TimesCircleIcon
+            [styleClass]="'p-multiselect-token-icon'"
+            (click)="removerChip(chip, $event)"
+            [attr.data-pc-section]="'clearicon'"
+            [attr.aria-hidden]="true"
+          />
+        </div>
+      </div>
+    </ng-template>
+
+    @for (templateItem of itemTemplates; track $index) {
+    <ng-template let-node [pTemplate]="templateItem.type">
+      @if(templateItem.template) {
+      <ng-container
+        [ngTemplateOutlet]="templateItem.template"
+        [ngTemplateOutletContext]="{ $implicit: node }"
+      >
+      </ng-container>
+      }
+    </ng-template>
+
+    }
+
+    <ng-template let-node pTemplate="default">
+      {{ node.label }}
+    </ng-template>
+  </p-treeSelect>
+
+  <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+</span>
+<ng-content></ng-content>

package/src/lib/components/kv-inputs/kv-tree-multi-select/kv-tree-multi-select.component.scss

@@ -0,0 +1,86 @@
+:host ::ng-deep .disable .p-treeselect.p-treeselect-chip .p-treeselect-token .p-icon-wrapper {
+  display: none !important;
+}
+
+::ng-deep .p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.1rem 0.4rem;
+}
+
+::ng-deep .p-treeselect-label{
+  padding: 0rem 0rem;
+  display: flex;
+}
+
+::ng-deep .p-treeselect-item {
+  font-size: 0.875rem;
+  padding: 0.5rem;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+::ng-deep .p-treeselect {
+  width: 100%;
+}
+
+::ng-deep p-treeselect p-overlay .p-overlay {
+  max-width: 100%;
+}
+
+::ng-deep .p-treeselect-items-wrapper .p-treeselect-items {
+  padding: 0.75rem 0.75rem;
+}
+
+::ng-deep .p-treeselect-filter {
+  height: 1.875rem;
+}
+
+::ng-deep .p-treeselect-panel .p-treeselect-items .p-treeselect-empty-message {
+  padding: 0.75rem 0.75rem;
+  font-size:  0.875rem;
+}
+
+::ng-deep .p-treeselect-panel .p-treeselect-header {
+  padding: 0.5rem 0.5rem;
+}
+
+
+/// Estilos para chips
+
+:host ::ng-deep .p-chips .p-chips-multiple-container .p-chips-token{
+  padding: 0.1rem 0.4rem;
+  transform: translate(0px, -3px);
+}
+
+:host ::ng-deep  .p-chips .p-chips-multiple-container{
+  border: none;
+}
+
+:host ::ng-deep  .p-chip {
+  background: red;
+  padding: 0.1rem 0.4rem;
+  font-size: 0.875rem;
+  margin-right: 0.5rem;
+  background: #e5e7eb;
+  color: #4b5563;
+  border-radius: 16px;
+  height: 15px;
+}
+
+
+::ng-deep .p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.1rem 0.4rem;
+}
+
+:host ::ng-deep .p-multiselect.p-multiselect-chip.p-multiselect-label {
+  border: none;
+}
+
+:host ::ng-deep .p-treeselect-label, :host ::ng-deep .p-multiselect-label{
+  width: 100%;
+  padding: 0.09rem 0.4rem;
+  display: flex;
+}
+
+:host ::ng-deep .p-multiselect-token{
+  max-width: max-content;
+}

package/src/lib/components/kv-inputs/kv-tree-multi-select/kv-tree-multi-select.component.ts

@@ -0,0 +1,59 @@
+import { Component, input, Input, OnInit, TemplateRef } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { ComponentProviders } from '../../../api/helpers/component-providers';
+import { BaseComponentMultiSelect } from '../../../api/base-components/base-component-multi-select';
+import { ComponentService } from '../../../api/services/component.service';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'kv-tree-multi-select',
+  templateUrl: './kv-tree-multi-select.component.html',
+  styleUrls: [
+    './kv-tree-multi-select.component.scss',
+    '../../keevo-components-styles.scss'
+  ],
+  providers: ComponentProviders(KvTreeMultiSelectComponent),
+
+})
+export class KvTreeMultiSelectComponent extends BaseComponentMultiSelect {
+
+  @Input() appendTo: string = 'body';
+  @Input() override options!: TreeNode[];
+  @Input() itemTemplates: {template: TemplateRef<any>|null, type:string}[] = [];
+
+  propagateSelectionDown = input<boolean>(false)
+  propagateSelectionUp = input<boolean>(false)
+
+  protected chips: any[] = [];
+
+  constructor(componentService: ComponentService, private fb: FormBuilder) {
+    super(componentService);
+  }
+
+  override selectionChange(value:any){
+    super.selectionChange(value)
+    this.handleChips()
+  }
+
+  private handleChips(){
+    this.chips = []
+    this.value.forEach((node: TreeNode) => {
+      this.adicionarChip({
+        label: node.label??'',
+        data: node.data
+      })
+    })
+  }
+
+  private adicionarChip(chip: {label: string, data: any}){
+     this.chips = [...this.chips, chip]
+  }
+
+  protected removerChip(chip: any, event: any){
+    event.stopPropagation();
+    event.preventDefault();
+    this.value = this.value.filter((node: TreeNode) => node.data !== chip.data);
+    this.handleChips();
+  }
+
+}

package/src/lib/components/kv-label/kv-label.component.html

@@ -0,0 +1,3 @@
+<p class="m-0 label-container">
+  <label [for]="componentId" class="label-style">{{ label }}</label>
+</p>

package/src/lib/components/kv-label/kv-label.component.scss

@@ -0,0 +1,15 @@
+::ng-deep .label-style {
+  position: relative;
+  // top: 13px;
+  left: 1px;
+  font-size: 0.75rem !important;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
+  // font-family: 'Inter var', 'Roboto', Arial, Helvetica, sans-serif !important;
+}
+
+.label-container {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

package/src/lib/components/kv-label/kv-label.component.spec.ts

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