otimus-library 0.2.48 → 0.2.49

package/src/lib/components/oc-autocomplete/oc-autocomplete.component.html

@@ -1,66 +0,0 @@
-<div [ngClass]="{
-    'oc-input-box': !ocSemanticLike && ocStyle === 'otimus',
-    small: ocSize === 'small',
-    large: ocSize === 'large',
-    error: !!ocError,
-    prefix: hasPrefix,
-    suffix: hasSuffix || ocHasDeleteButton,
-    shui: ocStyle === 'shui',
-    'shui-input-box': ocStyle === 'shui',
-  }">
-  <ng-content></ng-content>
-  <input [placeholder]="ocPlaceholder" #input (click)="toggleOptions(); ocClick.emit()" type="text"
-    (input)="filterData(ocValue)" [(ngModel)]="ocValue" (ngModelChange)="ocValue = $event; ocValueChange.emit($event)"
-    [ngClass]="{
-      'semantic-input': ocSemanticLike || ocStyle === 'semantic',
-    }" [tabindex]="ocTabIndex" />
-  @if (!ocSemanticLike && ocStyle !== 'semantic') {
-  <label>
-    <span [innerHTML]="ocPlaceholder"></span>
-    @if (ocRequired) {
-    <span class="oc color error">*</span>
-    }
-  </label>
-  }
-  <small *ngIf="ocError" class="error-msg">{{ ocError }}</small>
-  <ng-content select="ocPrefix"></ng-content>
-  @if (ocHasDeleteButton) {
-  <button class="oc-has-close-button oc suffix" (click)="clearValue()">
-    <span class="material-symbols-outlined">backspace</span>
-  </button>
-  }
-  <ng-content select="ocSuffix"></ng-content>
-
-  <div class="oc-options-div">
-    @if (isOptionsShown && !ocLoading) {
-    <ul #options class="oc-options" [ngStyle]="{
-          'max-height': ocOptionsMaxHeight,
-          width: ocOptionsWidth,
-        }">
-      @if (!filteredData.length) {
-      <li class="no-options">
-        {{ ocNoAvailableOptionsText || 'Nenhum resultado disponível' }}
-      </li>
-      } @else {
-      @for (data of filteredData; track data.value; let i = $index) {
-      @if (!ocMaxResults || i < ocMaxResults) { <li>
-        <button type="button" (click)="selectValue(data.value)">
-          {{ data.name }}
-        </button>
-        </li>
-        }
-        }
-        @if (ocMaxResults && filteredData.length > ocMaxResults) {
-        <li class="no-options">
-          {{ ocTypeForMoreResultsText || 'Digite para ver mais resultados' }}
-        </li>
-        }
-        }
-    </ul>
-    } @else if (isOptionsShown && ocLoading) {
-    <div class="oc-options loader">
-      <span class="material-symbols-outlined loading"> progress_activity </span>
-    </div>
-    }
-  </div>
-</div>

package/src/lib/components/oc-autocomplete/oc-autocomplete.component.scss

@@ -1,157 +0,0 @@
-@use '../../../styles/variables.scss';
-@import '../../../styles/components/inputs/inputs.scss';
-
-.oc-input-box {
-  position: relative;
-}
-
-.oc-options-div {
-  position: absolute;
-  width: 100%;
-}
-
-.oc-has-close-button-input {
-  padding-right: 60px; /* Espaço para o botão */
-}
-
-.oc-has-close-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  position: absolute;
-  right: 0.5rem !important;
-  top: 8%;
-  height: 84%;
-  width: 2.2rem;
-
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  background-color: transparent;
-
-  padding: 0 !important;
-
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-
-  &:hover {
-    border: 2px solid variables.$color-gray-3;
-    box-shadow: 0px 4px 8.7px 0px rgba(0, 0, 0, 0.13);
-    cursor: pointer;
-  }
-  span {
-    padding: 0 !important;
-    margin: 0.3rem;
-  }
-}
-
-.oc-options {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-
-  max-height: 40vh;
-
-  background-color: variables.$color-gray-6;
-  border: 2px solid variables.$color-white;
-  box-shadow: 0px 4px 8.7px 0px rgba(0, 0, 0, 0.13);
-
-  padding: 0;
-  margin-block-start: 0;
-
-  border-radius: 0.5rem;
-  overflow: hidden;
-
-  width: 100%;
-  position: absolute;
-  top: 50%;
-
-  overflow-y: auto;
-  z-index: 15;
-
-  > li {
-    padding: 0;
-    margin: 0;
-
-    button {
-      width: 100%;
-      text-align: left;
-      padding: 0.6rem;
-
-      border: none;
-      background-color: variables.$color-gray-6;
-
-      cursor: pointer;
-      &:hover {
-        filter: brightness(0.9);
-      }
-    }
-  }
-}
-
-.no-options {
-  padding: 0.6rem !important;
-  color: variables.$color-gray-3;
-}
-
-.oc-options.loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  span {
-    width: 24px;
-    margin: 3rem;
-
-    color: variables.$color-brand-p-1;
-  }
-}
-
-.loading {
-  animation: spinLoad 0.5s linear infinite;
-}
-
-.semantic-input {
-  display: inline-block;
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #333;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(34, 36, 38, 0.15);
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-/* Estilo ao passar o mouse */
-.semantic-input:hover {
-  border-color: #b3b3b3;
-}
-
-/* Estilo ao focar */
-.semantic-input:focus {
-  border-color: #85b7d9;
-  box-shadow: 0 0 0 2px rgba(34, 36, 38, 0.15);
-  outline: none;
-}
-
-/* Estilo para inputs desabilitados */
-.semantic-input:disabled {
-  background-color: #f9f9f9;
-  color: #b3b3b3;
-  border-color: #ddd;
-  cursor: not-allowed;
-}
-
-@keyframes spinLoad {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/lib/components/oc-autocomplete/oc-autocomplete.component.ts

@@ -1,277 +0,0 @@
-import { CommonModule } from '@angular/common'
-import {
-  AfterContentChecked,
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  Renderer2,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core'
-import { OcAutoCompleteType } from '../../interfaces/oc-autocomplete'
-import { FormsModule } from '@angular/forms'
-import { InternationalizationService } from '../../services/internationalization.service'
-import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
-import { StyleThemeService } from '../../services/style-theme.service'
-
-@Component({
-  selector: 'oc-autocomplete',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  providers: [InternationalizationService],
-  host: {
-    '[style.width]': 'computedWidth',
-    '[style.min-width]': 'computedMinWidth',
-    '[style.max-width]': 'computedMaxWidth',
-  },
-  templateUrl: './oc-autocomplete.component.html',
-  styleUrl: './oc-autocomplete.component.scss',
-  changeDetection: ChangeDetectionStrategy.Default,
-})
-export class OcAutocompleteComponent
-  implements AfterViewInit, OnChanges, AfterContentChecked, OnInit
-{
-  constructor(
-    private renderer: Renderer2,
-    private el: ElementRef,
-    private translateService: InternationalizationService,
-    private styleThemeService: StyleThemeService,
-    private cdr: ChangeDetectorRef
-  ) {}
-
-  @ViewChild('input') input!: ElementRef
-  @ViewChild('options') options!: ElementRef
-  @ViewChild('outerDiv') outerDiv!: ElementRef<HTMLDivElement>
-
-  @ContentChild('ocPrefix') ocPrefix: any
-  @ContentChild('ocSuffix') ocSuffix: any
-  @Input() ocPlaceholder?: string
-  @Input() ocError?: string
-  @Input() ocSize: 'small' | 'large' | 'medium' = 'medium'
-  @Input() ocData: OcAutoCompleteType[] = []
-  @Input() ocValue: any = ''
-  @Input() ocClearOnChange: boolean = false
-  @Input() ocWidth?: string
-  @Input() ocMinWidth?: string
-  @Input() ocMaxWidth?: string
-  @Input() ocOptionsMaxHeight?: string
-  @Input() ocOptionsWidth?: string
-  @Input() ocRequired: boolean = false
-  @Input() ocMaxResults?: number
-  @Input() ocAllowNotListedValue: boolean = false
-  @Input() ocNoAvailableOptionsText?: string
-  @Input() ocTypeForMoreResultsText?: string
-  @Input() ocLoading: boolean = false
-  @Input() ocSemanticLike: boolean = false // deprecated. Prefer using ocStyleTheme instead
-  @Input() ocStyle: OcStyleThemeType = 'otimus'
-  @Input() ocTabIndex?: number
-
-  @Input() ocHasDeleteButton?: boolean = false
-
-  @Output() ocValueChange = new EventEmitter<string>()
-  @Output() ocChange = new EventEmitter<string | null>()
-  @Output() ocOptionNotFound = new EventEmitter()
-  @Output() ocClick = new EventEmitter()
-
-  hasSuffix: boolean = false
-  hasPrefix: boolean = false
-
-  isOptionsShown: boolean = false
-  filteredData: OcAutoCompleteType[] = []
-  selectedValue: OcAutoCompleteType = {
-    name: '',
-    value: null,
-  }
-
-  @HostBinding('style.width')
-  get computedWidth() {
-    return this.ocWidth ? this.ocWidth : null
-  }
-
-  @HostBinding('style.min-width')
-  get computedMinWidth() {
-    return this.ocMinWidth || '0'
-  }
-
-  @HostBinding('style.max-width')
-  get computedMaxWidth() {
-    return this.ocMaxWidth || '100%'
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.ocPrefix) {
-      this.hasPrefix = true
-    }
-    if (this.ocSuffix) {
-      this.hasSuffix = true
-    }
-    this.formatOcValueType()
-    this.loadOptions()
-
-    this.cdr.detectChanges()
-  }
-
-  ngOnInit(): void {
-    if (this.ocValue === undefined) {
-      this.ocValue = null
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
-    if (this.ocPrefix) {
-      this.hasPrefix = true
-    }
-    if (this.ocSuffix) {
-      this.hasSuffix = true
-    }
-    this.formatOcValueType()
-    this.loadOptions()
-    this.translateService.getTranslationsByLanguage()
-    this.cdr.detectChanges()
-  }
-
-  ngAfterContentChecked(): void {
-    if (this.ocPrefix) {
-      this.hasPrefix = true
-    }
-    if (this.ocSuffix) {
-      this.hasSuffix = true
-    }
-  }
-
-  formatOcValueType() {
-    if (this.ocValue) {
-      return `${this.ocValue}`
-    }
-    return null
-  }
-
-  getTranslation(code: number | string) {
-    return this.translateService.getTranslation(code)
-  }
-
-  loadOptions() {
-    this.formatOcValueType()
-    setTimeout(() => {
-      this.filteredData = this.ocData
-      const inputBox = this.el.nativeElement
-
-      const found = this.ocData.find((el) => el.value == this.ocValue)
-      if (found) {
-        this.selectedValue = found
-        this.ocValue = found.name
-      }
-
-      if (inputBox) {
-        const inputElement = inputBox.querySelector('input')
-
-        if (inputElement && !this.ocSemanticLike && ['otimus', 'shui'].includes(this.ocStyle)) {
-          this.renderer.setAttribute(inputElement, 'placeholder', '')
-          this.renderer.setAttribute(inputElement, 'required', this.ocRequired.toString())
-        }
-      }
-    }, 50)
-  }
-
-  closeOnClickOut() {
-    this.renderer.listen('window', 'click', (e: Event) => {
-      if (this.input && this.options) {
-        if (e.target !== this.input.nativeElement && e.target !== this.options.nativeElement) {
-          this.isOptionsShown = false
-        }
-      }
-      this.findByTyping()
-    })
-  }
-
-  findByTyping(): void {
-    if (!this.ocValue || !this.ocValue?.toString().trim().length) {
-      this.ocChange.emit(null)
-      this.ocOptionNotFound.emit()
-    }
-    const foundValue = this.ocData.find(
-      (data) =>
-        data.name.toString().toLowerCase() === this.ocValue?.toString().toLowerCase() ||
-        data.value.toString().toLowerCase() === this.ocValue?.toString().toLowerCase()
-    )
-
-    if (!foundValue) {
-      this.selectedValue = {
-        name: '',
-        value: null,
-      }
-      if (!this.ocAllowNotListedValue) {
-        this.ocValue = ''
-      }
-      this.filteredData = this.ocData
-      return
-    }
-    this.selectedValue = foundValue
-  }
-
-  filterData(name: string): void {
-    this.isOptionsShown = true
-    this.filteredData = this.ocData.filter((data) => {
-      return this.getFormattedName(data.name)?.includes(this.getFormattedName(name))
-    })
-  }
-
-  getFormattedName(str: string): string {
-    return str
-      ?.toLowerCase()
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '') // Remove marcas diacríticas
-  }
-
-  toggleOptions() {
-    this.closeOnClickOut()
-    this.isOptionsShown = !this.isOptionsShown
-  }
-
-  selectValue(value: any) {
-    const foundValue = this.ocData.find((data) => data.value == value)
-
-    if (!foundValue) {
-      this.selectedValue = {
-        name: '',
-        value: null,
-      }
-
-      this.cdr.detectChanges()
-      return
-    }
-
-    this.selectedValue = foundValue
-    if (this.ocClearOnChange) {
-      this.ocValue = ''
-      this.filteredData = this.ocData
-    } else {
-      this.ocValue = foundValue.name
-    }
-
-    this.isOptionsShown = false
-
-    this.ocChange.emit(this.selectedValue.value)
-
-    this.cdr.detectChanges()
-  }
-
-  clearValue() {
-    this.selectedValue = {
-      name: '',
-      value: null,
-    }
-    this.ocValue = ''
-    this.filteredData = this.ocData
-  }
-}

package/src/lib/components/oc-badge/oc-badge.component.html

@@ -1,7 +0,0 @@
-<div>
-  <div class="oc-badge" [ngClass]="classList">
-    <ng-content>
-  
-    </ng-content>
-  </div>
-</div>

package/src/lib/components/oc-badge/oc-badge.component.scss

@@ -1,125 +0,0 @@
-@use '../../../styles/variables.scss';
-
-
-.oc-badge{
-  border-radius: 50%;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  color: variables.$color-gray-6;
-
-  > * {
-    color: variables.$color-gray-6;
-    font-weight: 600;
-  }
-}
-
-//Badge BG's
-.notification{
-  background-color: variables.$color-error;
-}
-
-.brand-g{
-  background-color: variables.$color-brand-g-1;
-}
-
-.brand-p {
-  background-color: variables.$color-brand-p-1;
-}
-
-.success {
-  background-color: variables.$color-success;
-}
-
-.warning {
-  background-color: variables.$color-warning;
-}
-
-
-//Badge Sizes
-.small{
-  width: 22px;
-  height: 22px;
-
-  font-size: 1rem;
-}
-
-.medium {
-  width: 28px;
-  height: 28px;
-  
-  font-size: 1.25rem;
-}
-
-.large {
-  width: 34px;
-  height: 34px;
-  font-size: 1.5rem;
-}
-
-//Wave Effect
-.waved{
-  position: relative;
-  z-index: 2;
-
-  &::before, &::after{
-    z-index: -1;
-
-    content: '';
-    position: absolute;
-    top: 0;
-
-    border-radius: 50%;
-    width: 100%;
-    height: 100%;
-
-    animation: wave infinite 2s;
-  }
-
-  &::after{
-    animation-delay: 600ms;
-  }
-}
-
-.waved.notification{
-  &::before, &::after{
-    background-color: variables.$color-error;
-  }
-}
-
-.waved.brand-g{
-  &::before, &::after{
-    background-color: variables.$color-brand-g-1;
-  }
-}
-
-.waved.brand-p{
-  &::before, &::after {
-    background-color: variables.$color-brand-p-1;
-  }
-}
-
-.waved.success{
-  &::before, &::after{
-    background-color: variables.$color-success;
-  }
-}
-
-.waved.warning{
-  &::before, &::after {
-    background-color: variables.$color-warning;
-  }
-}
-
-
-@keyframes wave{
-  from{
-      transform: scale(0);
-  }
-  to{
-      opacity: 0;
-      transform: scale(2);
-  }
-}

package/src/lib/components/oc-badge/oc-badge.component.ts

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'oc-badge',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-badge.component.html',
-  styleUrl: './oc-badge.component.scss'
-})
-export class OcBadgeComponent implements OnInit {
-  @Input() ocSize: 'small' | 'medium' | 'large' = 'small'
-  @Input() ocColor: 'notification' | 'brand-g' | 'brand-p' | 'success' | 'warning' = 'notification'
-  @Input() ocWaved: boolean = false
-
-  classList: string[] = []
-
-  ngOnInit(): void {
-    this.classList.push(this.ocSize, this.ocColor)
-    if(this.ocWaved) this.classList.push('waved')
-  }
-}

package/src/lib/components/oc-checkbox/oc-checkbox.component.html

@@ -1,30 +0,0 @@
-<button class="oc-checkbox-content cbx" type="button" (click)="toggleChecked();
-onDoubleClick()" [ngClass]="{
-  shui: ocStyle === 'shui'
-}" [tabIndex]="ocTabIndex">
-
-  <div class="oc-checkbox cbx" [ngClass]="{
-      'checked': ocChecked,
-      'tiny': ocSize === 'tiny',
-      purple: ocColor === 'purple',
-      'gray-border': ocBorderColor === 'gray'
-    }">
-
-    <span class="check-icon material-symbols-outlined">check_small</span>
-  </div>
-
-  @if(ocLabel) {
-  <span class="oc-checkbox-label cbx">
-    {{ocLabel}}
-  </span>
-  }
-
-  <ng-content>
-  </ng-content>
-
-  @if(formControl) {
-  <input [formControl]="formControl" [name]="ocName" [checked]="ocChecked" type="checkbox" hidden>
-  } @else {
-  <input [name]="ocName" [checked]="ocChecked" type="checkbox" hidden>
-  }
-</button>