otimus-library 0.2.48 → 0.2.50

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

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

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

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

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

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

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

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

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

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

@@ -1,101 +0,0 @@
-@use '../../../styles/variables.scss';
-
-*{
-  box-sizing: border-box;
-}
-
-.oc-menu{
-
-  display: flex;
-  flex-direction: column;
-  border-radius: 0px 8px 8px 8px;
-  background-color: variables.$color-gray-6;
-  border: 2px solid variables.$color-white;
-
-  position: absolute;
-  z-index: 1000;
-
-  max-height: 800px;
-
-  box-shadow: 0px 4px 8.7px 0px rgba(0, 0, 0, 0.13);
-  
-  animation: showUp .15s ease;
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-
-    margin: 0;
-    padding: 0;
-
-    width: 100%;
-
-    li{
-      text-align: left;
-      text-decoration: none;
-      width: 100%;
-      max-height: 30px;
-
-      display: flex;
-      align-items: center;
-      gap: .2rem;
-
-      white-space: nowrap;
-        
-      .checkbox-opt{
-        min-width: 1.3rem;
-      }
-
-      a,button{
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      a, button, span, .checkbox-opt {
-        color: variables.$color-gray-3 ;
-
-        text-decoration: none;
-
-        font-size: 1rem;
-        font-weight: 400;
-        text-align: left;
-
-        padding: 0;
-        margin: 0;
-
-        border: none;
-        padding: 0.6rem;
-        background-color: transparent ;
-
-        width: 100%;
-        height: 100%;
-
-        cursor: pointer;
-
-      }
-
-      .material-symbols-outlined{
-        width: .3rem;
-        font-size: 1.1rem;
-        pointer-events: none;
-      }
-      
-      &:hover{
-        background-color: variables.$color-white;
-      }
-    }
-  }
-}
-
-
-@keyframes showUp {
-  from{
-    opacity: 0;
-    transform: scale(.7);
-  }to{
-    opacity: 1;
-    transform: scale(1);
-  }
-}

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

@@ -1,84 +0,0 @@
-import {  Component,ElementRef,EventEmitter,Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
-import {  CdkMenuModule } from '@angular/cdk/menu';
-import { CommonModule } from '@angular/common';
-import { OcMenuType } from '../../interfaces/oc-menu';
-import { OcCheckboxComponent } from '../oc-checkbox/oc-checkbox.component';
-
-@Component({
-  selector: 'oc-menu',
-  standalone: true,
-  imports: [CommonModule, CdkMenuModule, OcCheckboxComponent],
-  templateUrl: './oc-menu.component.html',
-  styleUrls: ['./oc-menu.component.scss']
-})
-export class OcMenuComponent implements OnInit {
-  constructor(private renderer: Renderer2) {}
-
-  @ViewChild('ocMenuEl') menu!: ElementRef;
-  @Output() ocChange = new EventEmitter()
-  @Input() ocMenu: OcMenuType[] = []
-  isMenuShown: boolean = false
-  buttonId?:string
-
-  open() {
-    this.isMenuShown = true
-
-    setTimeout(() => {
-      if(this.menu){
-        const parentButton = this.findParentButton(this.menu.nativeElement);
-        if (parentButton) {
-          this.buttonId = `oc-${Math.random()}`
-          this.renderer.setAttribute(parentButton, 'id', this.buttonId);
-        }
-      }
-    }, 100)
-  }
-
-  ngOnInit() {
-    this.closeOnClickOut()
-  }
-
-  findParentButton(element: HTMLElement): HTMLButtonElement | null {
-    let parent = element.parentElement;
-    while (parent) {
-      if (parent.tagName.toLowerCase() === 'button') {
-        return parent as HTMLButtonElement;
-      }
-      parent = parent.parentElement;
-    }
-    return null;
-  }
-  
-  closeOnClickOut() {
-    this.renderer.listen('window', 'click',(e:any)=>{
-
-      const isCheckbox = Array.from(e.target.classList).includes('cbx')
-
-      if(isCheckbox) return
-      else if(!this.menu) return
-
-      if(this.buttonId && e.target.id !== this.buttonId) {
-        this.isMenuShown = false
-        return
-      }
-      
-    })
-  }
-
-  changeCheckbox(name: string, checked: boolean) {
-    let foundItem
-    this.ocMenu.forEach(item => {
-      if(item.name === name && typeof checked === 'boolean') {
-        item.checked = checked
-
-        foundItem = item
-      }
-    })
-    this.ocChange.emit(foundItem)
-    return foundItem
-  }
-
-  typeof(key: any) {
-    return typeof key
-  }
-}

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

@@ -1,54 +0,0 @@
-@if (isOpen) {
-  <div
-    class="oc-modal-bg"
-    *ngIf="isOpen"
-    [ngClass]="{
-      'closing-bg': closing,
-      shui: ocStyle === 'shui',
-      'shui-modal': ocStyle === 'shui',
-    }"
-  >
-    <div
-      class="oc-modal"
-      [ngClass]="{
-        large: ocSize === 'large',
-        medium: ocSize === 'medium',
-        small: ocSize === 'small',
-        closing: closing,
-        'total-white': ocBgColor === 'white',
-      }"
-      [ngStyle]="getModalStyles()"
-    >
-      <header class="oc-modal-header">
-        <h3 *ngIf="ocTitle && ocTitle.trim().length > 0">{{ ocTitle }}</h3>
-        @if (ocClose) {
-          <button
-            (click)="close()"
-            class="oc-close-btn"
-          >
-            <span
-              class="material-symbols-outlined md-18"
-              title="Fechar"
-              >close</span
-            >
-          </button>
-        }
-      </header>
-      <div
-        class="oc-modal-content"
-        [ngClass]="{
-          'loading-content': ocLoading,
-        }"
-      >
-        @if (isOpen) {
-          <ng-content></ng-content>
-        }
-        @if (ocLoading) {
-          <div class="load-container">
-            <span class="loader material-symbols-outlined oc color p-1">progress_activity</span>
-          </div>
-        }
-      </div>
-    </div>
-  </div>
-}

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

@@ -1,204 +0,0 @@
-@use '../../../styles/variables.scss';
-@import '../../../styles/styles.scss';
-
-*{
-  box-sizing: border-box;
-}
-
-.disabled-scroll{
-  margin: 0; height: 100%; overflow: hidden
-}
-
-.oc-modal-bg{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  padding: 1rem;
-
-  background-color: rgba($color: #000000, $alpha: 0.5);
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  z-index: 20;
-}
-
-
-.oc-modal{
-  animation: show-up-modal 0.3s ease;
-
-  width: 100%;
-
-  padding: 1rem;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
-  background-color: variables.$color-gray-6;
-
-  border-radius: 1rem;
-}
-
-.oc-modal.total-white {
-  background-color: variables.$color-white;
-}
-
-.oc-modal-footer {
-  width: 100%;
-
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: .5rem;
-
-}
-
-.oc-modal-content{
-  margin: 0;
-  padding: 1px 1px 0px 1px;
-
-  max-height: 80vh;
-  overflow-y: auto;
-
-  position: relative;
-  
-  &.loading-content {
-    min-height: 200px;
-    overflow: hidden;
-  }
-
-  .load-container {
-    position: absolute;
-    top: 0;
-    z-index: 10;
-
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 1rem;
-
-    backdrop-filter: blur(4px);
-
-    .loader {
-      animation: load 0.75s ease infinite;
-      font-size: 2rem;
-    }
-  }
-}
-
-.oc-modal-header{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  padding: 0;
-  margin: 0;
-
-  position: sticky;
-  top: 0;
-  width: 100%;
-
-  h3{
-    margin: 0;
-    padding: 0;
-    margin-bottom: 1.2rem;
-
-    font-size: 1.5rem;
-    color: variables.$color-gray-1;
-  }
-
-  .oc-close-btn{
-    margin: 0;
-    margin-right: .5rem;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-
-    background-color: transparent;
-
-    transition: 0.15s ease;
-
-    color: variables.$color-gray-4;
-  
-    width: 15px;
-    height: 15px;
-  
-    border-radius: 50%;
-    transition: 0.15s ease;
-  
-    cursor: pointer;
-  
-    span{
-      transition: .15s ease;
-    }
-
-    &:hover{
-      span{
-        color: variables.$color-gray-3;
-      }
-    }
-
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-}
-
-.oc-modal.small {
-  width: 400px;
-}
-
-.oc-modal.medium {
-  width: 600px;
-}
-
-.oc-modal.large {
-  width: 800px;
-}
-
-.closing{
-  animation: closeModal .15s ease;
-}
-
-.closing-bg{
-  transition: .1s ease;
-  opacity: 0;
-}
-
-@keyframes show-up-modal {
-  from{
-    opacity: 0.5;
-    transform: scale(0.8);
-  }to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes closeModal {
-  from{
-    opacity: 1;
-  }to{
-    opacity: 0.5;
-    transform: scale(0.5);
-  }
-}
-
-@keyframes load {
-  from {
-    transform: rotate(0deg)
-  } to {
-    transform: rotate(360deg)
-  }
-}
-
-@import './styles/oc-modal.shui-component.scss';