otimus-library 0.2.46 → 0.2.48

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+<div class="oc-key-value" [ngClass]="{
+  shui: ocStyle === 'shui'
+}">
+  <!-- Ícone -->
+  <ng-content></ng-content>
+  <p>
+    @if (ocKey) {
+    <span [innerHTML]="ocKey + ':'"></span>
+    }
+    {{ocValue}}
+  </p>
+</div>

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

@@ -0,0 +1,26 @@
+@use '../../../styles/variables.scss';
+
+.oc-key-value{
+  display: flex;
+  align-items: center;
+  gap: 0.1rem;
+
+  font-size: 1rem;
+
+  p{
+    color: variables.$color-gray-2;
+    font-weight: 500;
+  }
+
+  span{
+    color: variables.$color-brand-p-1;
+    font-weight: 500;
+  }
+
+  .material-symbols-outlined{
+    color: variables.$color-brand-p-1;
+    font-size: 0.95rem;
+  }
+}
+
+@import './styles/oc-key-value.shui-component.scss';

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

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common'
+import { AfterViewInit, Component, Input, ViewEncapsulation } from '@angular/core'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+import { StyleThemeService } from '../../services/style-theme.service'
+
+@Component({
+  selector: 'oc-key-value',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './oc-key-value.component.html',
+  styleUrl: './oc-key-value.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class OcKeyValueComponent implements AfterViewInit {
+  constructor(private styleThemeService: StyleThemeService) {}
+  @Input() ocKey: string = ''
+  @Input() ocValue: string = ''
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+
+  ngAfterViewInit(): void {
+    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
+  }
+}

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

@@ -0,0 +1,26 @@
+@use '../../../../styles/variables.scss';
+
+.shui {
+  &.oc-key-value{
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+  
+    font-size: 1rem;
+  
+    p{
+      color: variables.$color-shui-ui-5;
+      font-weight: 500;
+    }
+  
+    span{
+      color: variables.$color-shui-ui-8;
+      font-weight: 500;
+    }
+  
+    .material-symbols-outlined{
+      color: variables.$color-shui-ui-8;
+      font-size: 0.95rem;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+<div class="oc-log">
+  <div class="left-side" [ngClass]="{
+    'has-profile': ocProfilePic || ocUserName
+  }">
+    @if(ocProfilePic || ocUserName) {
+      <oc-profile [ocProfilePic]="ocProfilePic" [ocUserName]="ocUserName">
+      </oc-profile>
+    } @else {
+      <div class="dot"></div>
+    }
+  </div>
+
+  <div class="content" [ngClass]="{
+    'has-profile-content': ocProfilePic || ocUserName
+  }" selector="[content]">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,61 @@
+@use '../../../styles/variables.scss';
+
+.oc-log{
+  width: 100%;
+
+  margin: 0;
+
+  border-left: 3px solid variables.$color-gray-4;
+  position: relative;
+
+  padding: 4rem 0;
+  padding-top: 0;
+
+  border-radius: 1rem;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+
+  transition: .2s ease;
+
+  &:hover{
+    background-color: variables.$color-gray-5;
+  }
+
+  .has-profile{
+    left: -2.1rem !important;
+  }
+
+  .left-side{
+    position: absolute;
+    z-index: 8;
+    left: -.6rem;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+
+    .dot{
+      width: 1rem;
+      height: 1rem;
+
+      border-radius: .2rem;
+      transform: rotate(45deg);
+
+      background-color: variables.$color-brand-p-1;
+    }
+  }
+}
+
+.content{
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  padding-left: 2rem;
+  padding-top: 1.5rem;
+}
+
+.has-profile-content{
+  padding-left: 3rem;
+}

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

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { OcProfileComponent } from '../oc-profile/oc-profile.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'oc-log',
+  standalone: true,
+  imports: [CommonModule, OcProfileComponent],
+  templateUrl: './oc-log.component.html',
+  styleUrl: './oc-log.component.scss'
+})
+export class OcLogComponent {
+  @Input() ocProfilePic?: string = ''
+  @Input() ocUserName?: string = ''
+}

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

@@ -0,0 +1,31 @@
+<div class="oc-menu" *ngIf="isMenuShown" cdkMenu #ocMenuEl>
+  <ul>
+    @for(option of ocMenu; track $index) {
+      <li
+        [ngClass]="{
+          'checkbox-option cbx': typeof(option.checked) === 'boolean'
+        }"
+      >
+        @if(typeof(option.checked) === 'boolean'){
+          <div class="checkbox-opt cbx">
+            <oc-checkbox (ocChange)="changeCheckbox(option.name, $event)" [ocChecked]="option.checked!" class="cbx" ocSize="tiny" [ocLabel]="option.name" ocBorderColor="gray"/>
+          </div>
+        }
+        @if(option.icon) {
+          <span class="material-symbols-outlined">
+            {{option.icon}}
+          </span>
+        }  
+        @if(option.callback){
+          <button (click)="option.callback()">{{option.name}}</button>
+        }
+        @if(option.url){
+          <a [href]="option.url" [target]="option.targetBlank ? '_blank' : ''">{{option.name}}</a>
+        }
+        @if (!option.callback && !option.url && typeof(option.checked) !== 'boolean') {
+          <span>{{option.name}}</span>
+        }
+    </li>
+  }
+  </ul>
+</div>