otimus-library 0.2.48 → 0.2.50

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

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

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

@@ -1,21 +0,0 @@
-@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);
-  }
-}

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

@@ -1,20 +0,0 @@
-<button
-  [ngClass]="{
-    'oc-chip': true,
-    selected: ocSelected,
-    'not-selectable': ocType !== 'select' && ocType !== 'select_remove',
-    'tag': ocType === 'tag',
-    'remove': ocType === 'remove' || ocType==='select_remove',
-    'green-bg': ocBg === 'green',
-    'red-bg': ocBg === 'red',
-    'yellow-bg': ocBg === 'yellow'
-  }"
-  type="button"
-  [title]="ocText"
-  (click)="ocType.includes('select') ? ocEvent($event) : null"
->
-  <ng-content></ng-content>
-  @if (ocType.includes('remove')) {
-    <span class="material-symbols-outlined" (click)="ocRemoveEvent($event)">close</span>
-  }
-</button>

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

@@ -1,102 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-chip {
-  background-color: variables.$color-gray-5;
-  color: variables.$color-gray-3;
-
-  border: 2px solid variables.$color-gray-4;
-  border-radius: 16px;
-
-  font-size: 1rem;
-  font-weight: 500;
-
-  padding: 3px 18px;
-  transition: 0.3s ease !important;
-
-  cursor: pointer;
-
-  &:hover {
-    filter: brightness(0.95);
-  }
-
-  &:active {
-    filter: brightness(0.85);
-  }
-}
-
-.selected {
-  background-color: #ccfbe6dc;
-  border: 2px solid variables.$color-brand-g-1;
-  color: variables.$color-brand-g-1;
-
-  &.red-bg{
-    color: variables.$color-error;
-    border-color: variables.$color-error;
-  
-    background-color: #FFCACA;
-  }
-
-  &.green-bg{
-    color: variables.$color-brand-g-1;
-    border-color: variables.$color-brand-g-1;
-  
-    background-color: #ccfbe6dc;
-  }
-
-  &.yellow-bg{
-    color: variables.$color-warning;
-    border-color: variables.$color-warning;
-
-    background-color: #FFFAEA;
-  }
-}
-
-.not-selectable {
-  border: none;
-  background-color: variables.$color-gray-5;
-  color: variables.$color-gray-3;
-
-  &:active {
-    cursor: not-allowed;
-  }
-
-  cursor: default;
-}
-
-
-.material-symbols-outlined{
-  font-size: 0.9rem;
-  width: 10px;
-  height: 10px;
-
-
-}
-
-.remove{
-  display: flex;
-  align-items: center;
-  gap: .5rem;
-
-  padding-right: .5rem;
-
-  &:hover{
-    filter: brightness(1);
-  }
-
-  span{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
-
-    cursor: pointer;
-    border-radius: 50%;
-
-    transition: 0.1s ease;
-
-    &:hover{
-      background-color: variables.$color-gray-4;
-    }
-  }
-}
-

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

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'oc-chip',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-chip.component.html',
-  styleUrl: './oc-chip.component.scss'
-})
-export class OcChipComponent {
-  @Input() ocSelected: boolean = false
-  @Input() ocType: 'select' | 'remove' | 'tag' | 'select_remove' = 'select'
-  @Input() ocBg: 'green' | 'red' | 'yellow' | 'default' = 'green'
-  @Input() ocText: string = ''
-  @Output() ocClick: EventEmitter<any> = new EventEmitter<any>
-  @Output() ocRemove: EventEmitter<any> = new EventEmitter<any>
-
-  ocEvent(event:any) {
-    event.stopPropagation()
-    this.ocClick.emit()
-  }
-  
-  ocRemoveEvent (event: any) {
-    event.stopPropagation()
-    if(!this.ocRemove.observed) {
-      this.ocClick.emit()
-      return
-    }
-    this.ocRemove.emit()
-  }
-}

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

@@ -1,22 +0,0 @@
-<div class="oc-filter-row" [ngClass]="{
-  reverse: ocSide === 'right'
-}">
-  <button class="oc-filter-btn" [ngClass]="{
-    shui: ocStyle === 'shui'
-  }" (click)="toggleOpen()">
-    <span class="material-symbols-outlined">filter_list</span>
-    {{ocText}}
-    <div class="badge">
-      <oc-badge *ngIf="ocActive > 0" ocSize="small" ocColor="success" [ocWaved]="true">{{ocActive}}</oc-badge>
-    </div>
-  </button>
-
-  <div class="filter-row-content">
-    <ng-content select="[row]"></ng-content>
-  </div>
-
-</div>
-<div *ngIf="isOpen" class="oc-filter-content">
-  <ng-content select="[body]">
-  </ng-content>
-</div>

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

@@ -1,78 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-filter-row{
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-
-  .filter-row-content{
-    width: 100%;
-  }
-}
-
-.reverse{
-  flex-direction: row-reverse;
-}
-
-.oc-filter-btn{
-  background-color: variables.$color-brand-p-1;
-  color: variables.$color-gray-6;
-
-  border: none;
-  border-radius: 0.5rem;
-
-  padding: 0.4rem 0.8rem;
-
-  font-weight: 600;
-
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-
-  transition: 0.2s ease;
-
-  position: relative;
-
-  cursor: pointer;
-  &:hover{
-    filter: brightness(0.9);
-  }
-
-  .material-symbols-outlined{
-    font-size: 1rem;
-    color: variables.$color-gray-5;
-  }
-
-  img{
-    width: 15px;
-    filter: brightness(0) invert(1);
-  }
-
-  .badge{
-    position: absolute;
-    top: -8px;
-    right: -12px;
-  }
-  
-  &.shui {
-    background-color: variables.$color-shui-ui-0 !important;
-    border-radius: 50px !important;
-  }
-}
-
-
-.oc-filter-content{
-  width: 100%;
-  animation: showing-up 0.15s ease;
-  margin-top: 1rem;
-}
-
-@keyframes showing-up {
-  from{
-    height: 0px;
-    opacity: 0;
-  }to{
-    height: 100%;
-    opacity: 1;
-  }
-}

package/src/lib/components/oc-filter/oc-filter.component.spec.ts

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

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

@@ -1,30 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { AfterViewInit, Component, Input } from '@angular/core'
-import { OcBadgeComponent } from '../oc-badge/oc-badge.component'
-import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
-import { StyleThemeService } from '../../services/style-theme.service'
-
-@Component({
-  selector: 'oc-filter',
-  standalone: true,
-  imports: [CommonModule, OcBadgeComponent],
-  templateUrl: './oc-filter.component.html',
-  styleUrl: './oc-filter.component.scss',
-})
-export class OcFilterComponent implements AfterViewInit {
-  @Input() isOpen: boolean = false
-  @Input() ocText: string = 'Filtros'
-  @Input() ocActive: number = 0
-  @Input() ocSide: 'left' | 'right' = 'left'
-  @Input() ocStyle: OcStyleThemeType = 'otimus'
-
-  constructor(private styleThemeService: StyleThemeService) {}
-
-  ngAfterViewInit(): void {
-    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
-  }
-
-  toggleOpen() {
-    this.isOpen = !this.isOpen
-  }
-}

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

@@ -1,21 +0,0 @@
-<div [ngClass]="{
-  'oc-input-box':  !ocStyle || ocStyle === 'otimus',
-  small: ocSize === 'small',
-  large: ocSize === 'large',
-  error: !!ocError,
-  prefix: hasPrefix,
-  suffix: hasSuffix,
-  'shui': ocStyle === 'shui',
-  'shui-input-box': ocStyle === 'shui'
-}" [id]="inputId">
-  <ng-content></ng-content>
-  <ng-content select="ocPrefix"></ng-content>
-  <ng-content select="ocSuffix"></ng-content>
-  <label>
-    <span [innerHTML]="ocPlaceholder"></span>
-    @if(ocRequired) {
-    <span class="oc color error">*</span>
-    }
-  </label>
-  <small *ngIf="ocError" class="error-msg">{{ocError}}</small>
-</div>

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

@@ -1,3 +0,0 @@
-@use '../../../styles/variables.scss';
-@import '../../../styles/components/inputs/inputs.scss';
-@import '../../../styles/components/inputs/inputs.shui.scss';

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

@@ -1,100 +0,0 @@
-import { CommonModule } from '@angular/common'
-import {
-  AfterContentChecked,
-  AfterViewInit,
-  Component,
-  ContentChild,
-  ElementRef,
-  HostBinding,
-  Input,
-  OnChanges,
-  Renderer2,
-  SimpleChanges,
-  ViewEncapsulation,
-} from '@angular/core'
-import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
-import { StyleThemeService } from '../../services/style-theme.service'
-
-@Component({
-  selector: 'oc-input',
-  host: {
-    '[style.width]': 'computedWidth',
-    '[style.min-width]': 'computedMinWidth',
-    '[style.max-width]': 'computedMaxWidth',
-  },
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-input.component.html',
-  styleUrls: ['./oc-input.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class OcInputComponent implements AfterViewInit, OnChanges, AfterContentChecked {
-  @ContentChild('ocPrefix') ocPrefix: any
-  @ContentChild('ocSuffix') ocSuffix: any
-
-  @Input() ocError?: string
-  @Input() ocSize?: 'small' | 'medium' | 'large' = 'medium'
-  @Input() ocPlaceholder: string = ''
-  @Input() ocWidth?: string
-  @Input() ocMinWidth?: string
-  @Input() ocMaxWidth?: string
-  @Input() ocRequired: boolean = false
-  @Input() ocStyle: OcStyleThemeType = 'otimus'
-
-  inputId: string = `oc-${Math.random()}`
-  hasSuffix: boolean = false
-  hasPrefix: boolean = false
-
-  @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%'
-  }
-
-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2,
-    private styleThemeService: StyleThemeService
-  ) {}
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.ocPrefix) {
-      this.hasPrefix = true
-    }
-    if (this.ocSuffix) {
-      this.hasSuffix = true
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
-    const inputBox = this.el.nativeElement
-
-    if (inputBox) {
-      const inputElement = inputBox.querySelector('input')
-
-      if (inputElement) {
-        this.renderer.setAttribute(inputElement, 'placeholder', '')
-        this.renderer.setAttribute(inputElement, 'required', this.ocRequired.toString())
-      }
-    }
-  }
-
-  ngAfterContentChecked(): void {
-    if (this.ocPrefix) {
-      this.hasPrefix = true
-    }
-    if (this.ocSuffix) {
-      this.hasSuffix = true
-    }
-  }
-}