otimus-library 0.2.46 → 0.2.48

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

@@ -0,0 +1,277 @@
+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

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

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

@@ -0,0 +1,125 @@
+@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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,30 @@
+<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>

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

@@ -0,0 +1,103 @@
+@use '../../../styles/variables.scss';
+
+.oc-checkbox-content{
+  display: flex;
+  align-items: center;
+
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+
+  gap: .3rem;
+
+  .oc-checkbox-label{
+    background-color: transparent;
+    border: none;
+
+    color: variables.$color-gray-3;
+    font-weight: 500;
+    text-align: left;
+  }
+}
+
+.oc-checkbox{
+  min-width: 1rem;
+  min-width: 1rem;
+
+  width: 1.2rem;
+  height: 1.2rem;
+
+  border-radius: .3rem;
+  background-color: variables.$color-gray-5;
+  border: 2px solid variables.$color-white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: .15s ease;
+  cursor: pointer;
+  &:hover{
+    filter: brightness(0.95);
+  }
+
+  overflow: hidden;
+
+  .check-icon{
+
+    font-weight: 700;
+
+    color: variables.$color-gray-6;
+    opacity: 0;
+
+    pointer-events: none;
+
+    margin: 0;
+    font-size: 1.15rem;
+
+    transition: .2s ease;
+
+    transform: translateY(15px) scale(0.5);
+  }
+}
+
+.oc-checkbox.gray-border{
+  border: 2px solid variables.$color-gray-4;
+}
+
+.oc-checkbox.tiny{
+  width: 1rem;
+  height: 1rem;
+
+  border: 1px solid variables.$color-white;
+  &.gray{
+    border: 1px solid variables.$color-gray-4;
+  }
+}
+
+.checked {
+  background-color: variables.$color-brand-g-1;
+  box-shadow: 0px 2px 10px 0px rgba(0, 221, 163, 0.17);
+
+  .check-icon{
+    transform: translateY(0) scale(1);
+
+    opacity: 1;
+
+    color: variables.$color-gray-6;
+  }
+  border: none !important;
+}
+
+.checked.purple{
+  background-color: variables.$color-brand-p-1;
+  box-shadow: 0px 2px 10px 0px rgba(85, 5, 162, 0.2);
+}
+
+.label{
+  width: 18.4px !important;
+  height: 18.4px !important;
+}
+
+@import './styles/oc-checkbox.shui-component.scss';

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

@@ -0,0 +1,132 @@
+import { CommonModule } from '@angular/common'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  ControlValueAccessor,
+  FormControl,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { StyleThemeService } from '../../services/style-theme.service'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+
+@Component({
+  selector: 'oc-checkbox',
+  standalone: true,
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './oc-checkbox.component.html',
+  styleUrl: './oc-checkbox.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => OcCheckboxComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class OcCheckboxComponent implements ControlValueAccessor, AfterViewInit {
+  checkBoxId: string = `oc-${Math.random()}`
+
+  constructor(
+    private styleThemeService: StyleThemeService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  @Output() ocChange = new EventEmitter<boolean>()
+
+  @Input() ocChecked: boolean = false
+  @Input() ocSize: 'tiny' | 'small' = 'small'
+  @Input() ocLabel?: string = ''
+  @Input() ocName?: string = ''
+  @Input() ocColor: 'purple' | 'green' = 'green'
+  @Input() ocBorderColor: 'white' | 'gray' = 'white'
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+  @Output() ocDoubleClick = new EventEmitter<boolean>()
+  @Input() formControl?: FormControl
+  @Input() ocTabIndex?: number
+  @Input() disableDoubleClickCheck = true
+
+  private onChange?: (value: boolean) => void
+  private onTouched = (): void => {}
+
+  ngAfterViewInit(): void {
+    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
+    this.cdr.markForCheck()
+    this.cdr.detectChanges()
+  }
+
+  writeValue(value: boolean): void {
+    this.ocChecked = value
+    this.cdr.markForCheck()
+    this.cdr.detectChanges()
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn
+    this.cdr.markForCheck()
+    this.cdr.detectChanges()
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn
+    this.cdr.markForCheck()
+    this.cdr.detectChanges()
+  }
+
+  private doubleClickCounter = 0
+  private timeoutId: ReturnType<typeof setTimeout> | null = null
+  protected onDoubleClick(): void {
+    if (this.disableDoubleClickCheck) {
+      return
+    }
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = null
+    }
+
+    if (this.doubleClickCounter === 0) {
+      this.doubleClickCounter = 1
+      this.timeoutId = setTimeout(() => {
+        this.doubleClickCounter = 0
+        this.cdr.markForCheck()
+        setInterval(() => this.cdr.detectChanges(), 100)
+      }, 500)
+    } else {
+      this.doubleClickCounter = 0
+      if (this.ocDoubleClick && this.ocChecked) {
+        this.ocDoubleClick.emit(this.ocChecked)
+      }
+    }
+    this.cdr.markForCheck()
+    this.cdr.detectChanges()
+  }
+  toggleChecked(): void {
+    if (this.doubleClickCounter === 1) {
+      this.cdr.markForCheck()
+      this.cdr.detectChanges()
+      return
+    }
+    this.ocChecked = !this.ocChecked
+    if (this.onChange) {
+      this.onChange(this.ocChecked)
+    }
+    this.onTouched()
+    this.ocChange.emit(this.ocChecked)
+
+    if (this.formControl) {
+      this.formControl.setValue(this.ocChecked)
+    }
+    this.cdr.markForCheck()
+    this.cdr.detectChanges()
+  }
+}

package/src/lib/components/oc-checkbox/styles/oc-checkbox.shui-component.scss

@@ -0,0 +1,21 @@
+@use '../../../../styles/variables.scss';
+
+.oc-checkbox-content.shui {
+  .oc-checkbox, .purple {
+    border-radius: 0.15rem;
+    background-color: variables.$color-shui-base-2;
+
+    &.gray-border {
+      border: 2px solid variables.$color-shui-ui-0;
+      background-color: transparent;
+    }
+
+    &.checked {
+      background-color: variables.$color-shui-ui-0;
+    }
+  }
+
+  span.cbx {
+    color: rgba(variables.$color-shui-ui-1, 0.75);
+  }
+}