otimus-library 0.0.20 → 0.0.21

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/otimus-library",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "assets": [
-    { "input": "src/assets/iconfont", "glob": "**/*.*", "output": "assets/iconfont" },
-    { "input": "src/styles", "glob": "**/*.*", "output": "styles" }
-  ]
-}

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-chip/oc-chip.component.html

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

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

@@ -1,88 +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: 600;
-
-  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;
-  }
-}
-
-.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,21 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, 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'
-  @Input() ocBg: 'green' | 'red' = 'green'
-  @Input() ocText: string = ''
-  @Output() ocClick: EventEmitter<any> = new EventEmitter<any>
-
-  ocEvent() {
-    this.ocClick.emit()
-  }
-}

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

@@ -1,20 +0,0 @@
-<div class="oc-filter-row" [ngClass]="{
-  reverse: ocSide === 'right'
-}">
-  <button class="oc-filter-btn" (click)="toggleOpen()">
-    <span class="material-symbols-outlined md-18">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';
-@import '../../../styles/styles.scss';
-
-.oc-filter-row{
-  width: 100%;
-  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;
-  }
-}
-
-
-.oc-filter-content{
-  width: 100%;
-  animation: showing-up 0.15s ease;
-
-  overflow: hidden;
-
-  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,21 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { OcBadgeComponent } from '../oc-badge/oc-badge.component';
-
-@Component({
-  selector: 'oc-filter',
-  standalone: true,
-  imports: [CommonModule, OcBadgeComponent],
-  templateUrl: './oc-filter.component.html',
-  styleUrl: './oc-filter.component.scss'
-})
-export class OcFilterComponent {
-  isOpen: boolean = false
-  @Input() ocText: string = 'Filtros'
-  @Input() ocActive: number = 0
-  @Input() ocSide: 'left' | 'right' = 'left'
-
-  toggleOpen() {
-    this.isOpen = !this.isOpen
-  }
-}

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

@@ -1,12 +0,0 @@
-<div class="oc-input-box" [ngClass]="{
-  'small': ocSize === 'small',
-  'large': ocSize === 'large',
-  error: !!ocError
-}" [id]="inputId">
-  <ng-content></ng-content>
-  <label>{{ocPlaceholder}}</label>
-  <small
-    *ngIf="ocError"
-    class="error-msg"
-  >{{ocError}}</small>
-</div>

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

@@ -1,114 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-input-box {
-  position: relative;
-
-  select * {
-    background-color: variables.$color-gray-6;
-  }
-
-  label {
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 0.5rem 0.7rem;
-    font-size: 0.85rem;
-    color: variables.$color-gray-3;
-    pointer-events: none;
-    transition: 0.3s ease;
-    border-radius: 0.5rem;
-  }
-
-  input, textarea, select {
-    font-size: 1rem;
-    border-radius: 0.7rem;
-    background-color: variables.$color-gray-5;
-    border: 1px solid variables.$color-gray-4;
-    outline: none;
-    padding: 0.6rem 0.9rem;
-    width: 100%;
-    transition: 0.3s ease;
-    color: variables.$color-brand-p-2;
-    font-weight: 500;
-
-    &:focus {
-      border: 1px solid variables.$color-brand-g-1;
-      box-shadow: 0px 4px 3.2px 0px rgba(0, 221, 163, 0.08);
-    }
-  }
-
-  input:not(:placeholder-shown) ~ label,
-  input:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  select:valid ~ label, 
-  select:focus ~ label {
-    transform: translateY(-0.82rem) translateX(0.6rem);
-    color: variables.$color-gray-2;
-    font-weight: 600;
-    background-color: variables.$color-gray-6;
-    padding: 2px 10px;
-  }
-
-}
-
-
-.error {
-  input, textarea, select {
-    border: 1px solid variables.$color-error;
-    box-shadow: 0px 4px 6.1px 0px rgba(161, 0, 0, 0.08);
-  }
-
-  small, label {
-    color: variables.$color-error !important;
-    font-weight: 600;
-  }
-}
-
-.small {
-  input, textarea, select {
-    padding: 0.3rem 0.7rem;
-    border-radius: 0.5rem;
-  }
-
-  label {
-    padding: 0.5rem 0.7rem;
-  }
-
-  input:focus ~ label,
-  input:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  select:focus ~ label,
-  select:valid ~ label {
-    transform: translateY(-0.99rem) translateX(0.6rem);
-    color: variables.$color-gray-2;
-    font-weight: 600;
-    background-color: variables.$color-white;
-    padding: 2px 10px;
-  }
-}
-
-.large {
-  input, textarea, select {
-    padding: 1rem;
-    border-radius: 1rem;
-  }
-
-  label {
-    padding: 1rem 0.7rem;
-  }
-
-  input:focus ~ label,
-  input:not(:placeholder-shown) ~ label,
-  textarea:focus ~ label,
-  textarea:not(:placeholder-shown) ~ label,
-  select:focus ~ label,
-  select:valid ~ label {
-    transform: translateY(-0.77rem) translateX(0.6rem);
-    color: variables.$color-gray-2;
-    font-weight: 600;
-    background-color: variables.$color-white;
-    padding: 2px 10px;
-  }
-}

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

@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'oc-input',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-input.component.html',
-  styleUrls: ['./oc-input.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class OcInputComponent implements AfterViewInit {
-  @Input() ocError?: string;
-  @Input() ocSize?: 'small' | 'medium' | 'large' = 'medium';
-  @Input() ocPlaceholder: string = '';
-  inputId: string = `oc-${Math.random()}`;
-
-  constructor(private el: ElementRef, private renderer: Renderer2) {}
-
-  ngAfterViewInit() {
-    const inputBox = this.el.nativeElement;
-
-    if (inputBox) {
-      const inputElement = inputBox.querySelector('input');
-
-      if (inputElement) {
-        this.renderer.setAttribute(inputElement, 'placeholder', '');
-      }
-    }
-  }
-}

package/src/lib/components/oc-key-value/oc-key-value.component.html

@@ -1,10 +0,0 @@
-<div class="oc-key-value">
-  <!-- Ícone -->
-  <ng-content></ng-content>
-  <p>
-    @if (ocKey) {
-      <span>{{ocKey}}:</span>
-    }
-    {{ocValue}}
-  </p>
-</div>

package/src/lib/components/oc-key-value/oc-key-value.component.scss

@@ -1,24 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-key-value{
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  font-size: 1rem;
-
-  p{
-    color: variables.$color-gray-2;
-    font-weight: 600;
-  }
-
-  span{
-    color: variables.$color-brand-p-1;
-
-    font-weight: 700;
-  }
-
-  .material-symbols-outlined{
-    color: variables.$color-brand-p-1;
-  }
-}

package/src/lib/components/oc-key-value/oc-key-value.component.spec.ts

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

package/src/lib/components/oc-key-value/oc-key-value.component.ts

@@ -1,14 +0,0 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'oc-key-value',
-  standalone: true,
-  imports: [],
-  templateUrl: './oc-key-value.component.html',
-  styleUrl: './oc-key-value.component.scss',
-  encapsulation: ViewEncapsulation.None
-})
-export class OcKeyValueComponent {
-  @Input() ocKey: string = ''
-  @Input() ocValue: string = ''
-}

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

@@ -1,12 +0,0 @@
-<div class="oc-menu-container">
-  <div [cdkMenuTriggerFor]="menu" class="oc-menu-btn">
-    <ng-content select="[trigger]"></ng-content>
-  </div>
-  
-  <ng-template #menu>
-    <div class="oc-menu" cdkMenu>
-      <ng-content select="[menu]">
-      </ng-content>
-    </div>
-  </ng-template>
-</div>