ngx-sp-infra 0.0.0

package/projects/ngx-sp-infra/src/lib/widgets/svg-storage/svg-storage.component.ts

@@ -0,0 +1,105 @@
+import { Component, OnChanges, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-svg-storage',
+  templateUrl: './svg-storage.component.html',
+  styleUrls: ['./svg-storage.component.scss']
+})
+export class SvgStorageComponent implements OnChanges {
+
+  constructor() { }
+
+  public ngOnChanges(): void {
+    switch (this.svgSize) {
+      case "default": this.svgName == 'edit' ? this.size = 20 : this.size = 24; break;
+
+      case "medium-small": this.svgName == 'edit' ? this.size = 16 : this.size = 20; break;
+
+      case "small": this.svgName == 'edit' ? this.size = 12 : this.size = 16; break;
+
+      default: this.size = this.svgSize; break;
+    }
+
+    this.color = this.svgColor;
+
+    switch (this.svgColor) {
+      case "white": this.color = "#FFFFFF"; break;
+
+      case "blue": this.color = "#2847A0"; break;
+
+      case "gray": this.color = "#6C757D"; break;
+
+      case "lightgray": this.color = "#bfbfbf"; break;
+
+      case "green": this.color = "#198754"; break;
+
+      case "light-blue": this.color = "#0dcaf0"; break;
+
+      case "yellow": this.color = "#ffc107"; break;
+
+      case "red": this.color = "#dc3545"; break;
+
+      case "currentColor": this.color = "currentColor"; break;
+    }
+
+    switch (this.svgStrokeWidth) {
+      case "super-lighter": this.strokeWidth = 0.5; break;
+
+      case "lighter": this.strokeWidth = 1; break;
+
+      case "light": this.strokeWidth = 1.5; break;
+
+      case "default": this.strokeWidth = 2; break;
+
+      case "bold": this.strokeWidth = 2.5; break;
+
+      case "bolder": this.strokeWidth = 3; break
+    }
+  }
+
+  // #region PROPERTIES
+
+  // #region PRIVATE
+  // #endregion PRIVATE
+
+  // #region PUBLIC
+  @Input() public svgName: 'arrow-up' | 'arrow-down' | 'copy' | 'chevron-left' | 'cloud' | 'duplicate' | 'eye'
+    | 'eye-off' | 'more-vertical' | 'plus' | 'save' | 'inativar' | 'trash' | 'edit' | 'ativar' | 'search' | 'cancel'
+    | 'info' | 'rocket' | 'plus-circle' | 'menu' | 'building' | 'star' | 'star-outline' | 'file-download'
+    | 'file-download-alt' | 'flag' | 'cancel-circle' | 'warning' | 'gavel' | 'chevron-right' | 'chevron-up'
+    | 'chevron-down' | 'code' | 'square-pencil' | 'document' | 'document-sign' | 'timer-clock' | 'download-doc'
+    | 'file-alt' | 'file-upload-alt' | 'file-upload' | 'file-blank' | 'refresh' | 'send' | 'arrow-left-right'
+    | 'exclamation-circle' | 'camera' | 'user' | 'user-iconscout' | 'angry' | 'frown' | 'meh' | 'smile' | 'grin-tongue'
+    | 'fases' | 'list-ul' | 'list-ol' | 'file-docx' | 'file-pdf' | 'table' | 'dash-circle' | 'file-slash'
+    | 'file-info-alt' | 'signout' | 'calculator-alt' | 'prancheta-icon' | 'minus' | 'esfera-cheia'
+    | string
+    | 'folha' | 'folha-linhas' | 'folha-upload' | 'folha-lapis' | 'folha-mais' | 'folha-check' | 'folha-marcador'
+    | 'prancheta' | 'folha-dupla' | 'folha-dupla-linhas' | 'seta-baixo' | 'seta-cima' | 'seta-esquerda' | 'seta-direita'
+    | 'upload' | 'download' | 'login' | 'logout' | 'fechar' | 'mais' | 'check' | 'aspas' | 'cubo' | 'caixa'
+    | 'engrenagem' | 'editar' | 'escrita-linha' | 'janelas' | 'atencao' | 'pare' | 'cronometro' | 'olho' | 'sino' | 'estrela'
+    | 'lupa' | 'usuarios' | 'usuario-quadro' | 'adicionar-usuario' | 'foguete' | 'predio' | 'casa' | 'monitor'
+    | 'monitor-painel' | 'calendario' | 'fluxo' | 'nuvem' | 'aviao-papel' | 'disquete' | 'lixeira' | 'atualizar'
+    | 'menu-hamburguer' | 'menu-pontos' | 'linkedin' | 'facebook' | 'instagram' | 'auditoria' | 'cifrao' | 'moedas'
+    | 'reajuste' | 'cimabaixo' | 'toggle-on' | 'toggle-off' | 'folha-pdf' | 'folha-docx' | 'download-docx'
+    | 'download-pdf' | 'link' | 'iniciar' | 'timeline' | 'acessoexterno' | 'olho-fechado' | 'tabela-fixa'
+    | 'eventos-tabela' | 'eventos-nao-periodicos' | 'eventos-periodicos' | 'eventos-saude' | 'eventos-de-fechamento'
+    | 'evento-tabela' | 'testes' | 'log' | 'eventos-p' | 'eventos-np' | 'contraparte' | 'copiar' | 'logs'
+    | 'ver-assinaturas' | 'configurar-assinaturas' | 'recalcular' | 'estornar' | 'solicitacao' | 'perguntas' | 'centraldeajuda'
+    | 'sorriso' | 'lampada' | 'sol' | 'seta-grande-cima' | 'seta-grande-baixo' | 'historico';
+
+  @Input() public svgColor: 'white' | 'blue' | 'gray' | 'green' | 'light-blue' | 'yellow' | 'red' | 'currentColor' | string = 'currentColor';
+
+  @Input() public svgFill: string = 'none';
+
+  @Input() public svgSize: 'default' | 'medium-small' | 'small' | number = 'default';
+
+  @Input() public svgStrokeWidth: 'super-lighter' | 'lighter' | 'light' | 'default' | 'bold' | 'bolder' = 'default';
+
+  public size: number;
+  public color: string;
+  public strokeWidth: number;
+  // #endregion PUBLIC
+
+  // #endregion PROPERTIES
+
+}

package/projects/ngx-sp-infra/src/lib/widgets/tree/README.md

@@ -0,0 +1,33 @@
+<!-- AVISO !! QUALQUER ALTERAÇÃO DO COMPONENTE DEVE SER INFORMADA NESTE ARQUIVO -->
+
+# Breve descrição de utilização do Tree Component
+
+# _1. (IMPORT) Para utilizar o Tree Component, você deve importar o InfraModule para o módulo de seu componente.
+
+```ts  
+import { InfraModule } from 'src/app/infra/infra.module';
+```
+## _2. (OPTIONS)
+
+# [items]= TreeItem[] 
+# [checkbox] = boolean (default = false)
+# [filter] = boolean (default = false)
+
+```html
+<app-tree [items]="" [checkbox]="" [filter]=""></app-tree>
+```
+
+### _3. (MODEL) O modelo do de dados deve ser recebido via JSON e respeitar a classe TreeItem.ts
+
+```ts
+export class TreeItem {
+  label: string;
+  id: number;
+  children: TreeItem[];
+  expanded: boolean;
+  has_children: boolean;
+  is_selected: boolean;
+  key: string;
+  aplicClass: boolean = false;
+}
+```

package/projects/ngx-sp-infra/src/lib/widgets/tree/models/ret-tree.ts

@@ -0,0 +1,8 @@
+import { IError } from '../../../models/ierror';
+import { TreeItem } from './tree-item';
+
+export class RetTree implements IError {
+      Error: boolean;
+      ErrorMessage: string;
+      RetTreeModel: TreeItem[];
+}

package/projects/ngx-sp-infra/src/lib/widgets/tree/models/tree-item.ts

@@ -0,0 +1,11 @@
+export class TreeItem {
+  id: number;
+  label: string;
+  children: TreeItem[];
+  expanded: boolean;
+  has_children: boolean;
+  is_selected: boolean;
+  key: string;
+  aplicClass: boolean = false;
+  level: number = 0;
+}

package/projects/ngx-sp-infra/src/lib/widgets/tree/pipes/search-tree.pipe.ts

@@ -0,0 +1,15 @@
+import { TreeItem } from '../models/tree-item';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'TreeFilter',
+  pure: true,
+})
+
+export class SearchTreePipe implements PipeTransform {
+
+  public transform(items: TreeItem[], search: string): TreeItem[] {
+    return items.filter(node => node.label.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
+  }
+
+}

package/projects/ngx-sp-infra/src/lib/widgets/tree/tree.component.html

@@ -0,0 +1,51 @@
+<!-- FILTER -->
+<ng-template [ngIf]="filter">
+  <!-- <app-search-filters></app-search-filters> -->
+
+  <div class="input-group glb-search-input my-3">
+    <span class="input-group-text search px-2 glb-bg-color-white">
+      <app-svg-storage svgName="search" svgColor="gray" svgSize="medium-small"
+        class="d-flex align-items-center"></app-svg-storage>
+    </span>
+    <input type="text" class="form-control border-left-none ps-0" [(ngModel)]="search">
+  </div>
+  
+</ng-template>
+<!-- TREE -->
+<ul class="tree-view">
+  <ng-container *ngFor="let item of items | TreeFilter : search; index as i">
+    <div class="container py-1" [class]="!item.has_children ? 'children' : null ">
+      <app-svg-storage
+        class="chevron"
+        *ngIf="item.has_children"
+        [class]="item.aplicClass ? 'rotate' : null"
+        (click)="
+          onExpand(item);
+          item.aplicClass ? (item.aplicClass = false) : (item.aplicClass = true)
+        "
+        svgSize="medium-small"
+        svgName="chevron-right"
+      ></app-svg-storage>
+      <!-- CHECKBOX -->
+      <ng-template [ngIf]="checkbox">
+        <input
+          type="checkbox"
+          class="form-check-input m-0 position-relative"
+          [checked]="onCheckEvent(items)"
+          (change)="onCheck(items, item)"
+          [(ngModel)]="item.is_selected"
+        />
+      </ng-template>
+      <label class="label mb-0 ms-2">{{ item.label }}</label>
+    </div>
+    <!-- NODES -->
+    <ul *ngIf="item.expanded">
+      <app-tree
+        (onSelect)="item.is_selected = $event"
+        (onEvent)="item.is_selected = $event"
+        [items]="item.children"
+        [checkbox]="checkbox"
+      ></app-tree>
+    </ul>
+  </ng-container>
+</ul>

package/projects/ngx-sp-infra/src/lib/widgets/tree/tree.component.scss

@@ -0,0 +1,57 @@
+* {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  color: #000;
+  box-sizing: border-box;
+  list-style: none;
+  font-size: 1rem;
+}
+
+.tree-view {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  transition: all .3s ease-in-out;
+}
+
+.container {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.chevron {
+  position: relative;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: .3s ease-in-out;
+  -moz-transition: .3s ease-in-out;
+  -o-transition: .3s ease-in-out;
+  transition: .3s ease-in-out;
+  color: #000;
+  cursor: pointer;
+}
+
+.chevron:hover {
+  color: #0D6EFD;
+  transform: rotate(30deg);
+}
+
+.chevron.rotate {
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transition: 0.3s;
+}
+
+.form-check-input {
+  cursor: pointer;
+}
+
+.children{
+  padding-left: 20px;
+}

package/projects/ngx-sp-infra/src/lib/widgets/tree/tree.component.ts

@@ -0,0 +1,88 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { TreeItem } from "./models/tree-item";
+
+@Component({
+  selector: "app-tree",
+  templateUrl: "./tree.component.html",
+  styleUrls: ["./tree.component.scss"]
+})
+export class TreeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  // #region ==========> PROPERTIES <==========
+
+  // #region PUBLIC
+  @Input() public items: TreeItem[] | any = [];
+  @Input() public checkbox: boolean = false;
+  @Input() public filter: boolean = false;
+
+  @Output() public onSelect: EventEmitter<boolean> = new EventEmitter();
+  @Output() public onEvent: EventEmitter<boolean> = new EventEmitter();
+
+  public checked = (item: TreeItem) => item.is_selected == true;
+
+  public search: string = "";
+  // #endregion PUBLIC
+
+  // #endregion ==========> PROPERTIES <==========
+
+  // #region ==========> PUBLIC METHODS <==========
+  public onExpand(item: TreeItem): void {
+    if (item.expanded) {
+      item.expanded = !item.expanded;
+      return;
+    } else {
+      if (item.children) {
+        if (item.children.length > 0) {
+          item.expanded = true;
+        } else {
+          item.expanded = false;
+        }
+      }
+    }
+  }
+
+  public onCheck(items: TreeItem[], item: TreeItem): void {
+    if (item.has_children) {
+      item.children.forEach((firstNode) => {
+        if (firstNode.is_selected != item.is_selected) {
+          firstNode.is_selected = !firstNode.is_selected;
+        }
+        if (firstNode.has_children) {
+          firstNode.children.forEach((secondNode) => {
+            if (secondNode.is_selected != firstNode.is_selected) {
+              secondNode.is_selected = !secondNode.is_selected;
+            }
+          });
+        }
+      });
+    }
+    if (this.indeterminateCheck(items)) {
+      this.onSelect.emit(true);
+    } else if (!this.indeterminateCheck(items)) {
+      this.onSelect.emit(false);
+    }
+  }
+
+  public onCheckEvent(items: TreeItem[]) {
+    if (this.indeterminateCheck(items)) {
+      this.onEvent.emit(true);
+    } else {
+      this.onEvent.emit(false);
+    }
+  }
+  // #endregion ==========> PUBLIC METHODS <==========
+
+  // #region ==========> PRIVATE METHODS <==========
+
+  private indeterminateCheck(list: TreeItem[]): boolean {
+    return list.some(this.checked);
+  }
+
+  // private allCheck(list: TreeItem[]): boolean {
+  //   return list.every(this.checked);
+  // }
+  // #endregion ==========> PRIVATE METHODS <==========
+}

package/projects/ngx-sp-infra/src/public-api.ts

@@ -0,0 +1,58 @@
+/*
+ * Public API Surface of infra
+ */
+
+/** Modules */
+export * from './lib/infra.module';
+
+/** Message */
+export * from './lib/message/alert/alert.component';
+export * from './lib/message/confirm/confirm.component';
+export * from './lib/message/confirm-modal/confirm-modal.component';
+export * from './lib/message/save/save.component';
+export * from './lib/message/message.service';
+export * from './lib/message/message-enum';
+
+/** Models */
+export * from './lib/models/DownloadArquivos';
+export * from './lib/models/email-model';
+export * from './lib/models/ierror';
+export * from './lib/models/ipagination';
+export * from './lib/models/report-file';
+export * from './lib/models/ret-error';
+export * from './lib/models/ret-feedback-message';
+export * from './lib/models/ret-report-file';
+
+/** Pipes */
+export * from './lib/pipes/cpf-cnpj.pipe';
+export * from './lib/pipes/currency.pipe';
+export * from './lib/pipes/to-url.pipe';
+
+/** Utils */
+export * from './lib/utils/check-url-and-method.service';
+export * from './lib/utils/form-utils';
+export * from './lib/utils/settings.service';
+export * from './lib/utils/ip-service.service';
+export * from './lib/utils/utils';
+
+/** Validators */
+export * from './lib/validators/cpf-cnpj.validator.directive';
+export * from './lib/validators/cpf-cnpj.validator';
+
+/** Widgets */
+export * from './lib/widgets/breadcrumb/infra-breadcrumb/infra-breadcrumb.component';
+export * from './lib/widgets/breadcrumb/infra-breadcrumb-item/infra-breadcrumb-item.component';
+export * from './lib/widgets/breadcrumb/portalrh-breadcrumb/breadcrumb.component';
+export * from './lib/widgets/click-outside/clickoutside.directive';
+export * from './lib/widgets/combobox/combobox.component';
+export * from './lib/widgets/field-control-error/field-control-error.component';
+export * from './lib/widgets/field-error-message/field-error-message.component';
+export * from './lib/widgets/loading/loading.component';
+export * from './lib/widgets/loading-button/loading-button.component';
+export * from './lib/widgets/ordering/ordering.component';
+export * from './lib/widgets/svg-storage/svg-storage.component';
+export * from './lib/widgets/tree/tree.component';
+export * from './lib/widgets/tree/models/ret-tree';
+export * from './lib/widgets/tree/models/tree-item';
+export * from './lib/widgets/tree/pipes/search-tree.pipe';
+

package/projects/ngx-sp-infra/src/test.ts

@@ -0,0 +1,15 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);

package/projects/ngx-sp-infra/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/projects/ngx-sp-infra/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/ngx-sp-infra/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "paths": {
+      "infra": [
+        "dist/SpNgInfra/SpNgInfra",
+        "dist/SpNgInfra"
+      ]
+    },
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "strictPropertyInitialization": false,
+    "useDefineForClassFields": false
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}