otimus-library 0.2.45 → 0.2.47

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+@use '../../../styles/variables.scss';
+.oc-step {
+  border-left: 2px;
+  width: 100%;
+  
+  &.oc-not-selected {
+    cursor: pointer;
+    transition: 0.15s ease;
+    border-radius: 1rem;
+    &:hover {
+      background-color: variables.$color-gray-6;
+    }
+  }
+}
+
+.left-side {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+
+  .step-number {
+    padding: 2rem;
+
+    background-color: variables.$color-gray-4;
+
+    &.oc-purple {
+      background-color: variables.$color-brand-p-1;
+    }
+
+    &.oc-green {
+      background-color: variables.$color-brand-g-1;
+    }
+
+    &.oc-selected-p {
+      box-shadow: 0 0 16px variables.$color-brand-p-6;
+    }
+
+    &.oc-selected-g {
+      box-shadow: 0 0 16px variables.$color-brand-g-6;
+    }
+
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 16px;
+
+    transform: rotate(45deg);
+
+    span {
+      transform: rotate(-45deg);
+      color: variables.$color-gray-6;
+
+      font-size: 1.5rem;
+      font-weight: 700;
+    }
+  }
+}
+
+.oc-content {
+  overflow: hidden;
+  transition: padding 0.3s ease, opacity 0.3s ease;
+  padding: 1.5rem;
+  margin-left: 27px;
+  width: 100%;
+
+  &.expanded {
+    padding: 1rem 2.9rem 2rem;
+    opacity: 1;
+  }
+
+  &.oc-left-border {
+    border-left: 3px solid variables.$color-gray-4;
+  }
+
+  &.oc-prev-selected-p {
+    border-left: 3px solid variables.$color-brand-p-2;
+  }
+ 
+  &.oc-prev-selected-g {
+    border-left: 3px solid variables.$color-brand-g-2;
+  }
+}
+
+
+.oc-selected-p-title {
+  color: variables.$color-brand-p-1;
+}
+
+.oc-selected-g-title {
+  color: variables.$color-brand-g-1;
+}
+
+@media (max-width: 820px) {
+  .expanded {
+    padding: 0rem 1rem 2rem !important;
+  }
+}
+
+@import './styles/oc-step.shui-component.scss';

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

@@ -0,0 +1,39 @@
+import { CommonModule } from '@angular/common'
+import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core'
+import { StyleThemeService } from '../../services/style-theme.service'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+
+@Component({
+  selector: 'oc-step',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './oc-step.component.html',
+  styleUrl: './oc-step.component.scss',
+})
+export class OcStepComponent implements AfterViewInit {
+  constructor(private styleThemeService: StyleThemeService) {}
+
+  @Input() ocIsActive: boolean = false
+  @Input() ocTitle: string = ''
+  @Input() ocColor: 'purple' | 'green' = 'purple'
+  @Input() ocCompleted: boolean = false
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+
+  @Output() ocClick = new EventEmitter()
+  stepIndex: number = 0
+  selectedIndex: number = 0
+  lastIndex: number = 0
+
+  ngAfterViewInit(): void {
+    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
+  }
+
+  protected handleStepClick(stepIndex: number): void {
+    if (stepIndex !== this.selectedIndex && (stepIndex <= this.selectedIndex || this.ocCompleted)) {
+      this.selectStep(stepIndex)
+      this.ocClick.emit()
+    }
+  }
+
+  @Input() selectStep!: (index: number) => void
+}