otimus-library 0.2.45 → 0.2.47

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

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

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

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

@@ -0,0 +1,204 @@
+@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';

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

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

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

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

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

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

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

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