otimus-library 0.2.48 → 0.2.49

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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