otimus-library 0.0.18 → 0.0.20

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;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,49 @@
+@use '../../../styles/variables.scss';
+
+.oc-menu-btn{
+  padding: 0;
+  margin: 0;
+}
+
+
+
+::ng-deep {
+  .oc-menu{
+
+    display: flex;
+    flex-direction: column;
+    border-radius: 0px 8px 8px 8px;
+    background-color: variables.$color-gray-6;
+    border: 1px solid variables.$color-white;
+    max-width: 400px;
+
+    position: absolute;
+    
+    box-shadow: 0px 4px 8.7px 0px rgba(0, 0, 0, 0.13);
+    
+    >div {
+      display: flex;
+      flex-direction: column;
+    }
+
+    a, button, p, span, b, small, h1,h2,h3,h4,h5,h6 {
+      color: variables.$color-gray-3 ;
+      
+      font-size: 1rem;
+      font-weight: 500;
+      text-align: left;
+
+      border: none;
+      padding: 0.6rem;
+      padding-right: 1.5rem;
+      background-color: transparent ;
+
+      cursor: pointer;
+
+      &:hover{
+        filter: brightness(0.8);
+      }
+    }
+  }
+
+}

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

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

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

@@ -0,0 +1,24 @@
+import { AfterContentInit, Component, ContentChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
+import { CdkMenuItem, CdkMenuModule } from '@angular/cdk/menu';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oc-menu',
+  standalone: true,
+  imports: [CommonModule, CdkMenuModule],
+  templateUrl: './oc-menu.component.html',
+  styleUrls: ['./oc-menu.component.scss']
+})
+export class OcMenuComponent implements AfterContentInit {
+  @ContentChildren(CdkMenuItem, { descendants: true }) menuItems!: QueryList<CdkMenuItem>;
+
+  constructor(private renderer: Renderer2, private el: ElementRef) {}
+
+  ngAfterContentInit() {
+    if (this.menuItems) {
+      this.menuItems.forEach(item => {
+        this.renderer.setAttribute(item._elementRef.nativeElement, 'cdkMenuItem', '');
+      });
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+<div class="oc-modal-bg" *ngIf="isOpen" [ngClass]="{'closing-bg': closing}">
+  <div class="oc-modal" [ngClass]="{large: ocSize === 'large', medium: ocSize === 'medium', small: ocSize === 'small', closing: closing}">
+    <header class="oc-modal-header">
+      <h3 *ngIf="ocTitle.trim().length > 0">{{ocTitle}}</h3>
+      <button (click)="close()" class="oc-close-btn">
+        <span class="material-symbols-outlined md-18" title="Fechar">close</span>
+      </button>
+    </header>
+    <div class="oc-modal-content">
+      <ng-content></ng-content>
+    </div>
+    <footer class="oc-modal-footer">
+      <ng-content select="[footer]"></ng-content>
+    </footer>
+  </div>
+</div>

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

@@ -0,0 +1,159 @@
+@use '../../../styles/variables.scss';
+@import '../../../styles/styles.scss';
+
+*{
+  box-sizing: border-box;
+}
+
+.oc-modal-bg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 1rem;
+
+  background-color: rgba($color: #000000, $alpha: 0.5);
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: 20;
+}
+
+
+.oc-modal{
+  animation: show-up-modal 0.3s ease;
+
+  width: 100%;
+
+  padding: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  background-color: variables.$color-gray-6;
+
+  border-radius: 1rem;
+}
+
+.oc-modal-footer {
+  width: 100%;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: .5rem;
+
+}
+
+.oc-modal-content{
+  margin: 0;
+  padding: 0;
+  margin-bottom: 2rem;
+
+  max-height: 80vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.oc-modal-header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0;
+  margin: 0;
+
+  position: sticky;
+  top: 0;
+  width: 100%;
+
+  h3{
+    margin: 0;
+    padding: 0;
+    margin-bottom: 2rem;
+
+    font-size: 1.5rem;
+    color: variables.$color-gray-1;
+  }
+
+  .oc-close-btn{
+    margin: 0;
+    margin-right: .5rem;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+
+    background-color: transparent;
+
+    transition: 0.15s ease;
+
+    color: variables.$color-gray-4;
+  
+    width: 15px;
+    height: 15px;
+  
+    border-radius: 50%;
+    transition: 0.15s ease;
+  
+    cursor: pointer;
+  
+    span{
+      transition: .15s ease;
+    }
+
+    &:hover{
+      span{
+        color: variables.$color-gray-3;
+      }
+    }
+
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+.small {
+  width: 400px;
+}
+
+.medium {
+  width: 600px;
+}
+
+.large {
+  width: 800px;
+}
+
+.closing{
+  animation: closeModal .15s ease;
+}
+
+.closing-bg{
+  transition: .1s ease;
+  opacity: 0;
+}
+
+@keyframes show-up-modal {
+  from{
+    opacity: 0.5;
+    transform: scale(0.8);
+  }to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes closeModal {
+  from{
+    opacity: 1;
+  }to{
+    opacity: 0.5;
+    transform: scale(0.5);
+  }
+}

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

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

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

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, ContentChild, ElementRef, Input } from '@angular/core';
+
+@Component({
+  selector: 'oc-modal',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './oc-modal.component.html',
+  styleUrl: './oc-modal.component.scss'
+})
+export class OcModalComponent {
+  @Input() ocTitle: string = ''
+  @Input() ocSize: 'small' | 'medium' |'large' = 'medium'
+
+  isOpen: boolean = false
+
+  closing: boolean = false
+
+  open() {
+    this.isOpen = true
+  }
+  close() {
+    this.closing = true
+    setTimeout(() => {
+      this.isOpen = false
+      this.closing = false
+    },100)
+  }
+}

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

@@ -0,0 +1,10 @@
+<table cdk-table [dataSource]="dataSource">
+
+  <ng-container *ngFor="let column of columns; let i = index" [cdkColumnDef]="column">
+    <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
+    <td cdk-cell *cdkCellDef="let row"> {{row[keys[i]]}} </td>
+  </ng-container>
+
+  <tr cdk-header-row *cdkHeaderRowDef="columns"></tr>
+  <tr cdk-row *cdkRowDef="let row; columns: columns"></tr>
+</table>

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

@@ -0,0 +1,3 @@
+table{
+  width: 100%;
+}

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {CdkTableModule} from '@angular/cdk/table'
+
+
+@Component({
+  selector: 'oc-table',
+  standalone: true,
+  imports: [CommonModule, CdkTableModule],
+  templateUrl: './oc-table.component.html',
+  styleUrls: ['./oc-table.component.scss']
+})
+export class OcTableComponent implements OnInit {
+
+  @Input() columns: string[] = []
+  @Input() dataSource: any[] = []
+  keys: string[] = []
+
+  ngOnInit(): void {
+    if(!this.dataSource.length) return
+
+    this.keys = Object.keys(this.dataSource[0])
+  }
+}

package/src/lib/directives/oc-tooltip/oc-tooltip.directive.ts

@@ -0,0 +1,67 @@
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[ocTooltip]',
+  standalone: true
+})
+export class OcTooltipDirective {
+  constructor(private elRef: ElementRef, private renderer: Renderer2) { }
+
+  @Input() content: string = ''
+  @Input() side: 'bottom' | 'upon' | 'left' | 'right' = 'bottom'
+
+  created:boolean = false
+
+  createToolTip() {
+    if(this.created) return
+
+    const tooltip = this.renderer.createElement('div')
+    const text = this.renderer.createText(this.content)
+
+    this.renderer.appendChild(tooltip, text)
+    this.renderer.setStyle(tooltip, 'margin', '0')
+    this.renderer.addClass(tooltip, 'oc-tooltip')
+    this.renderer.setStyle(tooltip, 'position', 'absolute')
+    this.renderer.setStyle(tooltip, 'padding', '0.4rem 0.8rem')
+    this.renderer.setStyle(tooltip, 'font-size', '0.9rem')
+    this.renderer.setStyle(tooltip, 'font-weight', '600')
+    this.renderer.setStyle(tooltip, 'color', '#7E8485')
+    this.renderer.setStyle(tooltip, 'border', '1px solid #FFFFFF')
+    this.renderer.setStyle(tooltip, 'background-color', '#F8F9FF')
+    this.renderer.setStyle(tooltip, 'border-radius','1rem')
+    this.renderer.setStyle(tooltip, 'box-shadow', '0px 3px 6.5px 0px rgba(0, 0, 0, 0.20)')
+    this.renderer.setStyle(tooltip, 'transition', '0.1s ease')
+    this.renderer.setStyle(tooltip, 'max-width', '400px')
+
+    const width = this.elRef.nativeElement.offsetWidth
+    const height = this.elRef.nativeElement.offsetHeight
+
+    this.renderer.setStyle(tooltip, 'transform', `translateY(${height - 10}px)`)
+
+    if (this.side === 'right') {
+      this.renderer.setStyle(tooltip, 'transform', `translateX(${width + 20}px) translateY(-50%)`)
+    } else if (this.side === 'left') {
+      this.renderer.setStyle(tooltip, 'transform', `translateX(-${width + 20}px) translateY(-50%)`)
+    } else if (this.side === 'upon') {
+      this.renderer.setStyle(tooltip, 'transform', `translateY(-${height  + 40}px)`)
+    }
+
+    this.created = true
+    return tooltip
+  }
+
+  @HostListener('mouseover')
+  onMouseOver() {
+      const tooltip = this.createToolTip()
+      this.renderer.appendChild(this.elRef.nativeElement, tooltip)
+  }
+
+  @HostListener('mouseout')
+  onMouseOut() {
+    const tooltip = this.elRef.nativeElement.querySelector('.oc-tooltip')
+    if(tooltip){
+      this.renderer.removeChild(this.elRef.nativeElement, tooltip)
+      this.created = false
+    }
+  }
+}

package/src/lib/otimus-library.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-otimus-library',
+  standalone: true,
+  imports: [],
+  template: `
+    <p>
+      otimus-library works!
+    </p>
+  `,
+  styles: ``
+})
+export class OtimusLibraryComponent {
+
+}

package/src/lib/otimus-library.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OtimusLibraryService {
+
+  constructor() { }
+}

package/src/public-api.ts

@@ -0,0 +1,15 @@
+
+/*
+* Public API Surface of otimus-library
+*/
+
+export * from './lib/otimus-library.service'
+export * from './lib/otimus-library.component'
+export * from './lib/components/oc-table/oc-table.component'
+export * from './lib/components/oc-badge/oc-badge.component'
+export * from './lib/components/oc-filter/oc-filter.component'
+export * from './lib/directives/oc-tooltip/oc-tooltip.directive'
+export * from './lib/components/oc-input/oc-input.component'
+export * from './lib/components/oc-modal/oc-modal.component'
+export * from './lib/components/oc-key-value/oc-key-value.component'
+export * from './lib/components/oc-chip/oc-chip.component'