otimus-library 0.2.48 → 0.2.50

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

@@ -1,82 +0,0 @@
-import { CommonModule } from '@angular/common'
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core'
-import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
-import { StyleThemeService } from '../../services/style-theme.service'
-
-@Component({
-  selector: 'oc-modal',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-modal.component.html',
-  styleUrl: './oc-modal.component.scss',
-  encapsulation: ViewEncapsulation.None,
-})
-export class OcModalComponent implements AfterViewInit {
-  constructor(
-    private elRef: ElementRef,
-    private styleThemeService: StyleThemeService,
-    private cdr: ChangeDetectorRef
-  ) {}
-
-  @Input() ocClose: boolean = true
-  @Input() ocTitle: string = ''
-  @Input() ocSize: 'small' | 'medium' | 'large' | 'screen' = 'medium'
-  @Input() ocBgColor?: string
-  @Input() ocWidth: string = ''
-  @Input() ocMaxWidth: string = ''
-  @Input() ocStyle: OcStyleThemeType = 'otimus'
-  @Input() ocLoading: boolean = false
-  @Output() ocOnClose = new EventEmitter<any>()
-  @Output() ocOnOpen = new EventEmitter<any>()
-
-  @Input() isOpen: boolean = false
-  closing: boolean = false
-
-  ngAfterViewInit(): void {
-    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
-  }
-
-  open(): void {
-    this.isOpen = true
-    this.elRef.nativeElement.ownerDocument.body.classList.add('disabled-scroll')
-    this.ocOnOpen.emit(this.isOpen)
-  }
-
-  close(): void {
-    this.closing = true
-    setTimeout(() => {
-      this.isOpen = false
-      this.closing = false
-
-      if (this.ocOnClose) {
-        this.ocOnClose.emit(this.isOpen)
-      }
-
-      this.elRef.nativeElement.ownerDocument.body.classList.remove('disabled-scroll')
-      this.cdr.detectChanges()
-    }, 100)
-  }
-
-  protected getModalStyles(): { [key: string]: string } {
-    const styles: { [key: string]: string } = {}
-    if (this.ocBgColor) {
-      styles['background-color'] = this.ocBgColor
-    }
-    if (this.ocWidth) {
-      styles['width'] = this.ocWidth
-    }
-    if (this.ocMaxWidth) {
-      styles['max-width'] = this.ocMaxWidth
-    }
-    return styles
-  }
-}

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

@@ -1,3 +0,0 @@
-.shui-modal .oc-modal {
-  border-radius: 0 ;
-}

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

@@ -1,11 +0,0 @@
-<footer class="oc-modal-footer" [ngClass]="{
-  'left': ocSide === 'left',
-  'right': ocSide === 'right',
-  'fixed': ocFixed
-}"
-  [ngStyle]="{
-    'background-color': ocBgColor
-  }"
->
-  <ng-content></ng-content>
-</footer>

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

@@ -1,27 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-modal-footer{
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-
-  width: 100%;
-
-  margin-top: 1.5rem;
-
-  padding-bottom: 2px;
-}
-
-.left{
-  justify-content: flex-start;
-}
-
-.right{
-  justify-content: flex-end;
-}
-
-.fixed {
-  position: sticky;
-  bottom: 0;
-  background-color: variables.$color-gray-6;
-}

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

@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { Component, Input } from '@angular/core'
-
-@Component({
-  selector: 'oc-modal-footer',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-modal-footer.component.html',
-  styleUrl: './oc-modal-footer.component.scss',
-})
-export class OcModalFooterComponent {
-  @Input() ocSide: 'left' | 'right' = 'right'
-  @Input() ocBgColor?: string
-  @Input() ocFixed: boolean = true
-}

package/src/lib/components/oc-not-found/oc-not-found.component.html

@@ -1,14 +0,0 @@
-<main class="oc-not-found">
-  <div class="content">
-    <div class="main-title">
-      <h1>404</h1>
-      <span class="s-1">?</span>
-      <span class="s-2">?</span>
-      <span class="s-3">?</span>
-    </div>
-    <div class="not-found-msg">
-      <h2>Página não encontrada</h2>
-      <p>Não conseguimos encontrar a página que você está procurando</p>
-    </div>
-  </div>
-</main>

package/src/lib/components/oc-not-found/oc-not-found.component.scss

@@ -1,153 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-not-found{
-  width: 100vw;
-  height: 100vh;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  margin: 0;
-  padding: 0;
-
-  z-index: 50;
-
-  background-repeat: no-repeat;
-  background-image: url(../../../assets/images/not-found-bg.jpg);
-  background-size: cover;
-}
-
-.content{
-  width: 100%;
-  height: 100%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-
-  padding: 2rem;
-
-  .not-found-msg{
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-
-    h2{
-      margin: 0;
-      padding: 0;
-      font-size: 1.75rem;
-      color: variables.$color-brand-dp-1;
-    }
-
-    p{
-      color: variables.$color-gray-3;
-      margin: 0;
-      padding: 0;
-      max-width: 275px;
-      font-weight: 150%;
-      
-      font-family: 'Ubuntu', sans-serif !important;
-    }
-  }
-
-  .main-title {
-    position: relative;
-
-    h1{
-      font-family: 'Ubuntu', sans-serif !important;
-      font-size: 5.5rem;
-      z-index: 5;
-
-      background: linear-gradient(180deg, #5505A2 0%, #9976BB 100%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-
-      color: variables.$color-brand-p-1;
-    }
-
-    span{
-      position: absolute;
-      color: variables.$color-brand-p-1;
-      font-weight: 900;
-      font-size: 3rem;
-      font-family: 'Ubuntu', sans-serif !important;
-
-    }
-    .s-1{
-      top: 3rem;
-      transform: rotate(-25deg);
-      z-index: -1;
-      
-      animation: bouncing 4s ease infinite;
-    }
-
-    .s-2{
-      top: 2rem;
-      left: 3rem;
-      font-size: 4rem;
-      transform: rotate(-25deg);
-
-      animation: bouncing-s-2 6s ease infinite;
-    }
-
-    .s-3{
-      top: 4rem;
-      right: 0;
-      font-size: 2.8rem;
-      transform: rotate(-25deg);
-      animation: bouncing-s-3 9s ease infinite;
-    }
-  }
-}
-
-@keyframes bouncing {
-  0%{
-    transform: translateY(0);
-  }
-  50%{
-    transform: translateY(10px) rotate(10deg);
-  }
-  100%{
-    transform: translateY(0) rotate(0);
-  }
-}
-
-@media (max-width: 720px) {
-  .content{
-    flex-direction: column;
-
-    .not-found-msg{
-      justify-content: center;
-      h4, p {
-        text-align: center;
-      }
-    }
-  }
-}
-
-@keyframes bouncing-s-2 {
-  0%{
-    transform: translateY(0);
-  }
-  50%{
-    transform: translateY(15px) rotate(-18deg);
-  }
-  100%{
-    transform: translateY(0) rotate(0);
-  }
-}
-
-@keyframes bouncing-s-3 {
-  0%{
-    transform: translateY(0);
-  }
-  50%{
-    transform: translateY(15px) rotate(7deg);
-  }
-  100%{
-    transform: translateY(0) rotate(0);
-  }
-}

package/src/lib/components/oc-not-found/oc-not-found.component.spec.ts

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

package/src/lib/components/oc-not-found/oc-not-found.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'oc-not-found',
-  standalone: true,
-  imports: [],
-  templateUrl: './oc-not-found.component.html',
-  styleUrl: './oc-not-found.component.scss'
-})
-export class OcNotFoundComponent {
-
-}

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

@@ -1,32 +0,0 @@
-<div class="oc-pagination">
-  <p class="oc-pagination-text">
-    Página
-    <span>{{ocPage}}</span> 
-      de
-    <span>{{ocMaxPage}}</span>
-  </p>
-  <div class="oc-pagination-buttons">
-    <button (click)="firstPage()" [ngClass]="{
-      disabled: ocPage === 1
-    }">
-      <span class="material-symbols-outlined">keyboard_double_arrow_left</span>
-    </button>
-    <button (click)="decrementPage()" [ngClass]="{
-      disabled: ocPage === 1
-    }">
-      <span class="material-symbols-outlined">navigate_before</span>
-    </button>
-    <button (click)="incrementPage()" [ngClass]="{
-      disabled: ocPage === ocMaxPage
-    }"> 
-      <span class="material-symbols-outlined">navigate_next</span>
-    </button>
-    <button (click)="lastPage()" [ngClass]="{
-      disabled: ocPage === ocMaxPage
-    }"> 
-      <span class="material-symbols-outlined">
-        keyboard_double_arrow_right
-      </span>
-    </button>
-  </div>
-</div>

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

@@ -1,80 +0,0 @@
-@use '../../../styles/variables.scss';
-
-
-.oc-pagination{
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 1rem;
-
-  border: none;
-  overflow: hidden;
-
-  .oc-pagination-buttons{
-    display: flex;
-    align-items: center;
-    gap: 0;
-
-    border: 2px solid variables.$color-gray-5;
-    border-radius: .5rem;
-
-    transition: .3s ease;
-
-    &:hover{
-      border-color: variables.$color-gray-4;
-    }
-
-    button{
-      margin: 0;
-
-      transition: .15s ease;
-
-      border-radius: .5rem;
-
-      cursor: pointer;
-      border: none;
-
-      height: 3rem;
-      padding: 0 1rem;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      background-color: transparent;
-      color: variables.$color-gray-2;
-      font-weight: 700;
-
-      &:hover{
-        background-color: variables.$color-gray-5;
-        color: variables.$color-brand-p-3;
-      }
-
-      &:active{
-        transform: translateY(2px);
-      }
-    }
-  }
-
-  .oc-pagination-text{
-    font-weight: 500;
-    font-size: 1rem;
-
-    margin: 0;
-
-    color: variables.$color-gray-3;
-
-    span{
-      font-weight: 700;
-      color: variables.$color-brand-p-1;
-
-    }
-  }
-}
-
-.disabled{
-  cursor: not-allowed !important;
-  opacity: 0.4;
-
-  pointer-events: none;
-}

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

@@ -1,46 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
-@Component({
-  selector: 'oc-pagination',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-pagination.component.html',
-  styleUrl: './oc-pagination.component.scss'
-})
-export class OcPaginationComponent implements OnInit{
-  @Input() ocPage: number = 1
-  @Input() ocMaxPage?: number
-  @Output() ocGetPage = new EventEmitter<number>()
-  
-  ngOnInit(): void {
-    if(!this.ocMaxPage) this.ocMaxPage = this.ocPage
-  }
-
-  firstPage() {
-    this.ocPage = 1
-    
-    this.ocGetPage.emit(this.ocPage)
-  }
-
-  decrementPage() {
-    if(this.ocPage <= 1) return
-    this.ocPage--
-    
-    this.ocGetPage.emit(this.ocPage)
-  }
-
-  incrementPage() {
-    if(!this.ocMaxPage || this.ocPage >= this.ocMaxPage) return
-    this.ocPage++
-    
-    this.ocGetPage.emit(this.ocPage)
-  }
-
-  lastPage() {
-    if(!this.ocMaxPage) return
-    this.ocPage = this.ocMaxPage
-    
-    this.ocGetPage.emit(this.ocPage)
-  }
-}

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

@@ -1,17 +0,0 @@
-<div class="oc-profile"
-  [ngClass]="{
-    small: ocSize === 'small',
-    tiny: ocSize === 'tiny',
-    large: ocSize === 'large'
-  }"
->
-  <div class="content">
-    @if(ocProfilePic){
-      <img [src]="ocProfilePic" [alt]="ocUserName || 'Foto de perfil do usuário'">
-    }@else {
-      <span>
-        {{nameInitials}}
-      </span>
-    }
-  </div>
-</div>

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

@@ -1,80 +0,0 @@
-@use '../../../styles/variables.scss';
-
-.oc-profile{
-  transform: rotate(45deg);
-
-  width: 50px;
-  height: 50px;
-
-  padding: 0;
-  margin: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background-color: variables.$color-brand-p-1;
-  border-radius: .7rem;
-
-  overflow: hidden;
-
-  &.small{
-    width: 40px;
-    height: 40px;
-    border-radius: .55rem;
-
-    .content{
-      font-size: 1.2rem;
-    }
-  }
-
-  &.tiny{
-    width: 30px;
-    height: 30px;
-    border-radius: .4rem;
-
-    .content{
-      font-size: 0.9rem;
-    }
-  }
-
-  &.large{
-    width: 60px;
-    height: 60px;
-
-    .content{
-      font-size: 2rem;
-    }
-  }
-
-  .content{
-    transform: rotate(-45deg);
-    color: variables.$color-gray-6;
-    font-weight: 500;
-    font-size: 1.5rem;
-    user-select: none;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover{
-      img{
-        transform: scale(2.1);
-      }
-    }
-  }
-
-  img{
-    max-width: 100%;
-    max-height: 100%;
-
-    // max-height: 64px;
-    // max-width: 64px;
-    
-    transform: scale(1.95);
-
-    transition: .3s ease;
-    object-fit: cover;
-  }
-}

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

@@ -1,38 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'oc-profile',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './oc-profile.component.html',
-  styleUrl: './oc-profile.component.scss',
-  encapsulation: ViewEncapsulation.None
-})
-export class OcProfileComponent implements OnInit {
-  @Input() ocUserName?: string
-  @Input() ocProfilePic?: string
-  @Input() ocSize: 'large' | 'medium' | 'small' | 'tiny' = 'medium'
-  nameInitials: string = ''
-  
-  ngOnInit() {
-    this.getInitials()
-  }
-
-  getInitials() {
-    if(!this.ocUserName) return
-
-    const splittedName = this.ocUserName?.split(' ')
-
-    const firstLetter = splittedName[0][0]
-    let lastLetter = ''
-    
-    const lastName = splittedName[splittedName.length - 1]
-
-    if(splittedName.length > 1 && lastName){
-      lastLetter = lastName[0]
-    }
-
-    this.nameInitials = (firstLetter + lastLetter).toUpperCase()
-  }
-}

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

@@ -1,32 +0,0 @@
-<div class="oc-step" (click)="
-  handleStepClick(stepIndex)
-  " [ngClass]="{
-    'oc-not-selected': stepIndex !== selectedIndex,
-    'shui': ocStyle === 'shui',
-    'shui-step': ocStyle === 'shui'
-}">
-  <div class="left-side">
-    <div class="step-number" [ngClass]="{
-      'oc-selected-p': selectedIndex === stepIndex && ocColor === 'purple',
-      'oc-selected-g': selectedIndex === stepIndex && ocColor === 'green',
-      'oc-purple': (stepIndex! <= selectedIndex || ocCompleted) && ocColor === 'purple',
-      'oc-green': (stepIndex! <= selectedIndex || ocCompleted) && ocColor === 'green'
-    }">
-      <span>{{stepIndex! + 1}}</span>
-    </div>
-    <h2 [ngClass]="{
-      'oc-selected-p-title': selectedIndex === stepIndex && ocColor === 'purple',
-      'oc-selected-g-title': selectedIndex === stepIndex && ocColor === 'green',
-    }">{{ocTitle}}</h2>
-  </div>
-  <div class="oc-content" [ngClass]="{
-    'expanded': ocIsActive,
-    'oc-prev-selected-p': (stepIndex! < selectedIndex || ocCompleted) && ocColor === 'purple',
-    'oc-prev-selected-g': (stepIndex! < selectedIndex || ocCompleted) && ocColor === 'green',
-    'oc-left-border': stepIndex !== lastIndex
-  }">
-    @if (ocIsActive) {
-    <ng-content></ng-content>
-    }
-  </div>
-</div>