otimus-library 0.0.19 → 0.0.20

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$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/package.json

@@ -1,28 +1,19 @@
-{
-  "name": "otimus-library",
-  "version": "0.0.19",
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/cdk": "^17.0.2",
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "sass": "./src/styles/styles.scss",
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/otimus-library.mjs",
-      "esm": "./esm2022/otimus-library.mjs",
-      "default": "./fesm2022/otimus-library.mjs"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    }
-  },
-  "module": "fesm2022/otimus-library.mjs",
-  "typings": "index.d.ts"
-}
+{
+  "name": "otimus-library",
+  "version": "0.0.20",
+  "license":"MIT",
+  "peerDependencies": {
+    "@angular/cdk": "^17.0.2",
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "sass": "./src/styles/styles.scss"
+    }
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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