otimus-library 0.2.46 → 0.2.47

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

@@ -0,0 +1,52 @@
+@use '../../../../styles/variables.scss';
+
+.shui-step {
+  .step-number {
+    border-radius: 100% !important;
+  
+    background-color: rgba(variables.$color-shui-ui-8, 0.1) !important;
+
+    span {
+      color: variables.$color-shui-ui-8 !important;
+    }
+    
+    border: 5px solid white;
+  
+    box-shadow: none !important;
+    span {
+      font-size: 2rem;
+    }
+  }
+
+  &:hover {
+    background-color: rgba(variables.$color-shui-base-2, 0.4);
+
+    .step-number {
+    border: 5px solid variables.$color-shui-base-2;
+    }
+  }
+
+  .oc-content {
+    &.oc-left-border {
+      border-left: 5px solid variables.$color-shui-base-1 !important;
+    }
+    &.expanded, &.oc-prev-selected-p, &.oc-prev-selected-g {
+      border-left: 5px solid rgba(variables.$color-shui-ui-8, 0.7) !important;
+    }
+  }
+
+  .oc-purple,.oc-green, .oc-selected-g, .oc-selected-p {
+    background-color: variables.$color-shui-ui-8 !important;
+    span {
+      color: variables.$color-shui-base-1 !important;
+    }
+  }
+
+  h2 {
+    color: variables.$color-shui-ui-8;
+    font-weight: 500;
+  }
+  .oc-selected-p-title {
+    color: variables.$color-shui-ui-8 !important;
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class="oc-stepper">
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,9 @@
+.oc-stepper{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  > * {
+    width: 100% !important;
+  }
+}

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

@@ -0,0 +1,86 @@
+import { AfterViewInit, Component, ContentChildren, QueryList, Input } from '@angular/core'
+import { OcStepComponent } from '../oc-step/oc-step.component'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+import { StyleThemeService } from '../../services/style-theme.service'
+
+@Component({
+  selector: 'oc-stepper',
+  standalone: true,
+  imports: [],
+  templateUrl: './oc-stepper.component.html',
+  styleUrl: './oc-stepper.component.scss',
+})
+export class OcStepperComponent implements AfterViewInit {
+  constructor(private styleThemeService: StyleThemeService) {}
+  @ContentChildren(OcStepComponent) ocSteps!: QueryList<OcStepComponent>
+  @Input() ocAllowNavigation: boolean = false
+  @Input() ocColor: 'purple' | 'green' = 'purple'
+  @Input() ocCurrentIndex: number = 0
+  @Input() ocSaveCompletedSteps: boolean = true
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+
+  private completedSteps: number[] = []
+
+  ngAfterViewInit(): void {
+    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
+    this.setStepsValues()
+    this.selectStep(this.ocCurrentIndex)
+    this.setCompletedSteps()
+  }
+
+  private setCompletedSteps(): void {
+    if (!this.ocSaveCompletedSteps) {
+      return
+    }
+    for (let i = 0; i <= this.ocCurrentIndex; i++) {
+      this.completedSteps.push(i)
+    }
+  }
+
+  setStepsValues(): void {
+    this.ocSteps.forEach((step, i) => {
+      step.stepIndex = i
+      step.ocColor = this.ocColor
+      step.lastIndex = this.ocSteps.length - 1
+      step.ocStyle = this.ocStyle
+
+      step.selectStep = (index: number) => this.selectStep(index)
+    })
+  }
+
+  selectStep(index: number): void {
+    this.ocSteps.forEach((step, i) => {
+      step.ocStyle = this.ocStyle
+
+      if (this.completedSteps.includes(i)) {
+        step.ocCompleted = true
+      }
+      if (i !== index) {
+        step.ocIsActive = false
+        step.selectedIndex = index
+        return
+      }
+      step.ocIsActive = true
+      this.ocCurrentIndex = index
+      step.selectedIndex = this.ocCurrentIndex
+      this.setCompletedSteps()
+    })
+    return
+  }
+
+  nextStep(event: Event): void {
+    event.stopPropagation()
+    if (this.ocCurrentIndex === this.ocSteps.length - 1) {
+      return
+    }
+    this.selectStep(this.ocCurrentIndex + 1)
+  }
+
+  previousStep(event: Event): void {
+    event.stopPropagation()
+    if (!this.ocCurrentIndex) {
+      return
+    }
+    this.selectStep(this.ocCurrentIndex - 1)
+  }
+}

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

@@ -0,0 +1,3 @@
+@if (ocIsActive) {
+  <ng-content></ng-content>
+}

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

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'oc-tab',
+  standalone: true,
+  imports: [],
+  templateUrl: './oc-tab.component.html',
+  styleUrl: './oc-tab.component.scss',
+})
+export class OcTabComponent {
+  @Input() ocTitle: string = ''
+  @Input() ocIsActive: boolean = false
+
+  tabIndex: number = 0
+}

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

@@ -0,0 +1,62 @@
+<table class="oc table" cdk-table [dataSource]="ocData">
+
+  <ng-container *ngFor="let column of columns; let i = index" [cdkColumnDef]="column">
+    <!-- Table Columns -->
+    <th cdk-header-cell *cdkHeaderCellDef>
+      @if(!column.includes('oc ')) {
+      {{column}}
+      } @else {
+      @if (ocSelect && i === 0) {
+      <oc-checkbox ocBorderColor="gray" />
+      }
+      }
+    </th>
+
+    <td cdk-cell *cdkCellDef="let row" [ngStyle]="{
+      'width': (
+        column === 'oc select' ? '20px' :  
+        row[keys[i]]?.width || 'inherit'
+      )
+    }">
+
+      @if (!column.includes('oc ')) {
+      @if (isObject(row[keys[i]])) {
+      @if (!row[keys[i]].component) {
+      {{row[keys[i]].value}}
+      } @else {
+
+      @if(row[keys[i]].component.name === 'oc-chip') {
+      <oc-chip [ocType]="row[keys[i]].component.ocType" [ocBg]="row[keys[i]].component.ocBg">
+        {{row[keys[i]].value}}
+      </oc-chip>
+      }
+      }
+      } @else {
+      {{row[keys[i]] || ''}}
+      }
+      } @else {
+
+      @if(column === 'oc select') {
+      <oc-checkbox ocBorderColor="gray"></oc-checkbox>
+      }@else if (column === 'oc actions') {
+      <div class="button-row">
+        @for (action of row.oc_actions; track $index) {
+        <button class="oc button icon tiny gray-1" (click)="action.callback()">
+          <span class="material-symbols-outlined oc color" [ngClass]="{
+                  error: action.icon === 'delete'
+                }">{{action.icon}}</span>
+        </button>
+        }
+      </div>
+      }
+      }
+    </td>
+  </ng-container>
+
+  <tr cdk-header-row *cdkHeaderRowDef="columns"></tr>
+  <tr cdk-row *cdkRowDef="let row; columns: columns"></tr>
+</table>
+
+@if (ocPage) {
+<oc-pagination [ocPage]="ocPage" [ocMaxPage]="ocMaxPage" (ocGetPage)="ocGetPage.emit()" />
+}

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

@@ -0,0 +1,2 @@
+@use '../../../styles/variables.scss';
+@import '../../../styles/components/table/table.scss';

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

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {CdkTableModule} from '@angular/cdk/table'
+import { OcCheckboxComponent, OcChipComponent, OcPaginationComponent } from 'otimus-library';
+
+
+@Component({
+  selector: 'oc-table',
+  standalone: true,
+  imports: [CommonModule, CdkTableModule, OcCheckboxComponent, OcPaginationComponent, OcChipComponent],
+  templateUrl: './oc-table.component.html',
+  styleUrls: ['./oc-table.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class OcTableComponent implements OnInit {
+  @Input() ocData: any[] = []
+
+  // Pagination attributes
+  @Input() ocPage: number = 0
+  @Input() ocMaxPage: number = 0
+  @Input() ocPerPage: number = 0
+  @Output() ocGetPage = new EventEmitter()
+
+  @Output() ocSelect = new EventEmitter()
+
+  columns: string[] = []
+  selectable: boolean = false
+  keys: string[] = []
+
+  innerComponents = ['oc-chip']
+
+  ngOnInit(): void {
+    if(!this.ocData.length) return
+    this.keys = Object.keys(this.ocData[0])
+
+    this.columns = Object.keys(this.ocData[0]).map(col => {
+      return col.split('_').join(' ').split('-').join(' ')
+    })
+
+    this.isAllSelected()
+  }
+
+  isAllSelected () {
+    this.selectable = this.ocData.every(row => row.selectable)
+  }
+
+  protected isObject (column: any) {
+    if(!column) return false
+    return !!Object.keys(column).length
+  }
+}

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

@@ -0,0 +1,13 @@
+<div class="oc-tabs" [ngClass]="{
+  shui: ocStyle === 'shui'
+}">
+  <div class="row">
+    @for(tab of ocTabs; track $index) {
+    <button [ngClass]="{
+        'oc-selected': tab.tabIndex === activeTabIndex
+      }" class="oc-tab" (click)="selectTab(tab.tabIndex); 
+      handleTabClick()" type="button">{{tab.ocTitle}}</button>
+    }
+  </div>
+  <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,47 @@
+@use '../../../styles/variables.scss';
+
+.oc-tabs .row {
+  display: flex;
+  gap: 1px;
+}
+
+.oc-tab {
+  border: none;
+  padding: 0.75rem 1.3rem;
+  cursor: pointer;
+
+  border-radius: 8px 8px 0 0;
+
+  background-color: transparent;
+  border-bottom: 2px solid variables.$color-gray-5;
+ 
+  transition: 0.15s ease;
+
+  color: variables.$color-gray-2;
+
+  &:hover {
+    background-color: variables.$color-gray-6;
+  }
+
+  &.oc-selected {
+    border-bottom: 2px solid variables.$color-brand-p-1;
+    background-color: variables.$color-gray-6;
+    color: variables.$color-brand-p-1;
+  }
+}
+
+.row {
+  max-width: 100%;
+  transform: rotateX(180deg);
+  overflow-x: auto;
+  .oc-tab {
+    transform: rotateX(180deg);
+  }
+
+}
+::-webkit-scrollbar {
+  height: 3px;
+}
+
+
+@import './styles/oc-tabs.shui-component.scss';

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

@@ -0,0 +1,46 @@
+import {
+  Component,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core'
+import { OcTabComponent } from '../oc-tab/oc-tab.component'
+import { CommonModule } from '@angular/common'
+import { StyleThemeService } from '../../services/style-theme.service'
+import { OcStyleThemeType } from '../../interfaces/oc-style-theme'
+
+@Component({
+  selector: 'oc-tabs',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './oc-tabs.component.html',
+  styleUrl: './oc-tabs.component.scss',
+})
+export class OcTabsComponent implements AfterContentInit {
+  constructor(private styleThemeService: StyleThemeService) {}
+  @ContentChildren(OcTabComponent) ocTabs!: QueryList<OcTabComponent>
+  @Input() ocStyle: OcStyleThemeType = 'otimus'
+  @Output() ocClick = new EventEmitter<void>()
+
+  activeTabIndex: number = 0
+
+  ngAfterContentInit(): void {
+    this.ocStyle = this.styleThemeService.getStyleTheme() || this.ocStyle
+    this.selectTab(0)
+  }
+
+  selectTab(index: number): void {
+    this.ocTabs.toArray().forEach((tab, i) => {
+      tab.tabIndex = i
+      tab.ocIsActive = i === index
+    })
+    this.activeTabIndex = index
+  }
+
+  handleTabClick(): void {
+    this.ocClick.emit()
+  }
+}

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

@@ -0,0 +1,25 @@
+@use '../../../../styles/variables.scss';
+
+.oc-tabs.shui {
+ .row {
+  display: flex;
+  gap: 1rem;
+ } 
+
+ .oc-tab {
+  border-bottom: 3px solid transparent;
+  font-weight: 600;
+
+  color: rgba(variables.$color-shui-ui-1, 0.5);
+  
+  &:hover {
+    background-color: transparent;
+    border-bottom: 3px solid variables.$color-shui-ui-8;
+  }
+  &.oc-selected {
+    border-bottom: 3px solid variables.$color-shui-ui-8;
+    background-color: transparent;
+    color: rgba(variables.$color-shui-ui-1, 0.5);
+  }
+ }
+}

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

@@ -0,0 +1,46 @@
+<div
+  class="toast"
+  [ngClass]="{
+    'close-toast': toast.currentToast.counter === 1,
+    error: ['erro', 'error'].includes(toast.currentToast.status.toLowerCase()),
+    success: ['sucesso', 'success', 'éxito'].includes(toast.currentToast.status.toLowerCase()),
+    loading: ['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase()),
+    animation: toast.currentToast.hasAnimation
+  }"
+  *ngIf="toast.currentToast && toast.currentToast.counter > 0"
+>
+  <header>
+    <ng-container [ngTemplateOutlet]="iconTemplate"></ng-container>
+    <h4 class="status">
+      {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}
+    </h4>
+    <button (click)="toast.closeToast(toast.currentToast.id)">
+      <span class="material-symbols-outlined">close</span>
+    </button>
+  </header>
+  <p>{{ toast.currentToast.message }}</p>
+</div>
+
+<ng-template #iconTemplate>
+  <span
+    class="material-symbols-outlined"
+    *ngIf="['erro', 'error'].includes(toast.currentToast.status.toLowerCase())"
+    >error</span
+  >
+
+  <span
+    class="material-symbols-outlined"
+    *ngIf="['sucesso', 'success', 'éxito'].includes(toast.currentToast.status.toLowerCase())"
+    >check_circle</span
+  >
+
+  <span
+    class="material-symbols-outlined"
+    *ngIf="['information', 'informação', 'información'].includes(toast.currentToast.status.toLowerCase())"
+    >info</span
+  >
+
+  <svg *ngIf="['carregando', 'cargando', 'loading'].includes(toast.currentToast.status.toLowerCase())" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class="spinner_zWVm" x="1" y="1" width="7.33" height="7.33"/><rect class="spinner_gfyD" x="8.33" y="1" width="7.33" height="7.33"/><rect class="spinner_T5JJ" x="1" y="8.33" width="7.33" height="7.33"/><rect class="spinner_E3Wz" x="15.66" y="1" width="7.33" height="7.33"/><rect class="spinner_g2vs" x="8.33" y="8.33" width="7.33" height="7.33"/><rect class="spinner_ctYB" x="1" y="15.66" width="7.33" height="7.33"/><rect class="spinner_BDNj" x="15.66" y="8.33" width="7.33" height="7.33"/><rect class="spinner_rCw3" x="8.33" y="15.66" width="7.33" height="7.33"/><rect class="spinner_Rszm" x="15.66" y="15.66" width="7.33" height="7.33"/></svg>
+  
+
+</ng-template>

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

@@ -0,0 +1,133 @@
+@use '../../../styles/variables.scss';
+
+.toast {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+
+  width: 370px !important;
+  min-height: 116px !important;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  border-radius: 17px;
+
+  padding: 1rem;
+  padding-bottom: 1.5rem;
+
+  box-shadow: 8px 16px 32px 0 rgba(0, 0, 0, 0.3);
+  background-color: variables.$color-white;
+
+  z-index: 50;
+
+  p {
+    color: variables.$color-brand-dp-4;
+    font-size: 13px;
+  }
+
+  > header {
+    color: variables.$color-brand-p-1;
+
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    > button {
+      position: absolute;
+      right: 20px;
+      border: none;
+      background-color: transparent;
+
+      color: variables.$color-gray-4;
+
+      padding: 10px;
+      padding-right: 0;
+
+      cursor: pointer;
+
+      transition: 0.3s ease;
+
+      &:hover {
+        color: variables.$color-error;
+      }
+    }
+
+    > .icon {
+      border: 4px solid variables.$color-brand-p-1;
+      border-radius: 50%;
+
+      width: 30px;
+      height: 30px;
+    }
+
+    h4 {
+      margin: 0;
+      padding: 0;
+
+      font-size: 20px;
+    }
+  }
+}
+
+.animation {
+  animation: show-up 0.5s ease;
+}
+
+.error {
+  > header {
+    color: variables.$color-error;
+
+    h4 {
+      color: variables.$color-error;
+    }
+  }
+}
+
+.success {
+  > header {
+    color: variables.$color-success;
+
+    h4 {
+      color: variables.$color-success;
+    }
+  }
+}
+
+.loading {
+  > header {
+    h4 {
+      color: variables.$color-brand-dp-5;
+    }
+    > img, svg {
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.close-toast {
+  animation: close 1.1s ease;
+}
+
+@keyframes show-up {
+  from {
+    opacity: 0;
+    transform: translateY(100vw);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes close {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100vw);
+  }
+}

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { OcToastService } from '../../services/oc-toast.service'
+
+@Component({
+  selector: 'oc-toast',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './oc-toast.component.html',
+  styleUrl: './oc-toast.component.scss',
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class OcToastComponent {
+  constructor(public toast: OcToastService) {}
+}

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

@@ -0,0 +1,4 @@
+<label class="switch">
+  <input [checked]="ocChecked" (click)="toggleChecked()" type="checkbox">
+  <span class="slider round" [ngClass]="[ocColor]"></span>
+</label>