appproject-components 1.0.48 → 1.0.49

package/README.md

@@ -1,24 +1,24 @@
-# AppprojectComponents
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project appproject-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project appproject-components`.
-> Note: Don't forget to add `--project appproject-components` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build appproject-components` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build appproject-components`, go to the dist folder `cd dist/appproject-components` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test appproject-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# AppprojectComponents
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project appproject-components` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project appproject-components`.
+> Note: Don't forget to add `--project appproject-components` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build appproject-components` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build appproject-components`, go to the dist folder `cd dist/appproject-components` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test appproject-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/appproject-components'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/appproject-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,26 +1,15 @@
-{
-  "name": "appproject-components",
-  "version": "1.0.48",
-  "peerDependencies": {
-    "@angular/common": "^17.0.7",
-    "@angular/core": "^17.0.7",
-    "@ionic/angular": "^7.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2022/appproject-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/appproject-components.mjs",
-      "esm": "./esm2022/appproject-components.mjs",
-      "default": "./fesm2022/appproject-components.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "appproject-components",
+  "version": "1.0.49",
+  "peerDependencies": {
+    "@angular/common": "^17.0.7",
+    "@angular/core": "^17.0.7",
+    "@ionic/angular": "^7.0.0"
+  },
+  "dependencies": {    
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@ionic/angular": "^7.0.0"
+  }
+}

package/src/lib/appproject-components.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppprojectComponentsComponent } from './appproject-components.component';
+
+describe('AppprojectComponentsComponent', () => {
+  let component: AppprojectComponentsComponent;
+  let fixture: ComponentFixture<AppprojectComponentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AppprojectComponentsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AppprojectComponentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/appproject-components.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'kb-appproject-components',
+  template: `
+    <p>
+      appproject-components works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class AppprojectComponentsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/appproject-components.module.ts

@@ -0,0 +1,106 @@
+import { CUSTOM_ELEMENTS_SCHEMA, InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
+import { AppprojectComponentsComponent } from './appproject-components.component';
+import { InputTextComponent } from './input-text/input-text.component';
+import { InputFormatComponent } from './input-format/input-format.component';
+
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { HttpClientModule } from '@angular/common/http';
+import { AppprojectComponentsService } from './appproject-components.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { InputSelectComponent } from './input-select/input-select.component';
+import { InputPesquisaComponent } from './input-pesquisa/input-pesquisa.component';
+import { ModelTreeviewComponent } from './model-treeview/model-treeview.component';
+import { InputValorComponent } from './input-valor/input-valor.component';
+import { InputAreaComponent } from './input-area/input-area.component';
+import { InputCepComponent } from './input-cep/input-cep.component';
+import { InputArquivoComponent } from './input-arquivo/input-arquivo.component';
+import { BtnActionComponent } from './buttons/btn-action/btn-action.component';
+import { BtnCancelarComponent } from './buttons/btn-cancelar/btn-cancelar.component';
+import { BtnExcluirComponent } from './buttons/btn-excluir/btn-excluir.component';
+import { BtnNovoComponent } from './buttons/btn-novo/btn-novo.component';
+import { BtnSalvarComponent } from './buttons/btn-salvar/btn-salvar.component';
+import { EntityEditComponent } from './entity-edit/entity-edit.component';
+import { LibConfig } from './lib-config';
+import { InputCheckboxComponent } from './input-checkbox/input-checkbox.component';
+import { InputRadioComponent } from './input-radio/input-radio.component';
+import { TreeViewComponent } from './tree-view/tree-view.component';
+import { TreeViewNivelComponent } from './tree-view-nivel/tree-view-nivel.component';
+import { GridViewComponent } from './grid-view/grid-view.component';
+import { SafeHtmlPipe, ValorFormatPipe } from 'appproject-lib';
+
+
+export const LibConfigService = new InjectionToken<LibConfig>('LibConfig');
+
+@NgModule({
+  declarations: [
+    AppprojectComponentsComponent,
+    InputTextComponent,
+    InputFormatComponent,
+    InputSelectComponent,
+    InputPesquisaComponent,
+    ModelTreeviewComponent,
+    InputValorComponent,
+    InputAreaComponent,
+    InputCepComponent,
+    InputArquivoComponent,
+    BtnActionComponent,
+    BtnCancelarComponent,
+    BtnExcluirComponent,
+    BtnNovoComponent,
+    BtnSalvarComponent,
+    EntityEditComponent,
+    InputCheckboxComponent,
+    InputRadioComponent,
+    TreeViewComponent,
+    TreeViewNivelComponent,
+    GridViewComponent
+  ],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    IonicModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ValorFormatPipe,
+    SafeHtmlPipe
+  ],
+  exports: [
+    AppprojectComponentsComponent,
+    InputTextComponent,
+    InputFormatComponent,
+    InputSelectComponent,
+    InputPesquisaComponent,
+    ModelTreeviewComponent,
+    InputValorComponent,
+    InputAreaComponent,
+    InputCepComponent,
+    InputArquivoComponent,
+    BtnActionComponent,
+    BtnCancelarComponent,
+    BtnExcluirComponent,
+    BtnNovoComponent,
+    BtnSalvarComponent,
+    EntityEditComponent,
+    InputCheckboxComponent,
+    InputRadioComponent,
+    TreeViewComponent,
+    TreeViewNivelComponent,
+    GridViewComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppprojectComponentsModule {
+  static forRoot(config: LibConfig): ModuleWithProviders<AppprojectComponentsModule> {
+    return {
+      ngModule: AppprojectComponentsModule,
+      providers: [
+        AppprojectComponentsService,
+        {
+          provide: 'LibConfigService',
+          useValue: config
+        }
+      ]
+    }
+  }
+}

package/src/lib/appproject-components.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppprojectComponentsService } from './appproject-components.service';
+
+describe('AppprojectComponentsService', () => {
+  let service: AppprojectComponentsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AppprojectComponentsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/appproject-components.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppprojectComponentsService {
+
+  constructor() { }
+}

package/src/lib/baseComponent.scss

@@ -0,0 +1,162 @@
+/* estilos compartilhados */
+ion-label {
+    margin-bottom: 4px !important;
+    /* não precisa, porque desbilitado tem que ficar mais opaco */
+    //opacity: 1 !important;
+    --color: var(--ion-color-label, auto) !important;
+}
+
+ion-item {
+    ion-label {
+        overflow: initial !important;
+    }
+}
+
+ion-input {
+    padding: var(--input-padding, 8px) !important;
+    //--padding-start: var(--input-padding, 8px) !important;
+    border: 1px solid darkgray;
+    border-radius: 4px;        
+    width: 100%;
+    margin-top: 2px;    
+    max-height: var(--input-max-height, 29px);
+    transition: .2s ease;
+}
+
+.has-focus {
+    border: 1px solid var(--ion-color-bluetool, #1f477d);
+}
+
+//não acatou
+input:focus {
+    border: 1px solid lightblue !important;
+    ion-input, ion-textarea {
+        border: 1px solid lightblue !important;
+    }    
+    ion-label{
+        --color: var(--ion-color-label-focus, blue) !important;
+    }
+}
+
+.item-has-focus {
+    ion-label {
+        color: var(--ion-color-label-focus, blue) !important;
+    }
+    ion-input, ion-textarea {
+        border: 1px solid lightblue !important;
+    }    
+}
+
+//opcidade funciona
+.native-input[disabled] {
+    opacity: var(--item-disabled-opacity, 0.6) !important;
+    background-color: transparent;  
+  }
+
+.item-interactive-disabled ion-label {
+    opacity: var(--item-disabled-opacity, 0.6);
+}  
+
+
+.error-message {
+    font-size: small;
+    color: var(--error-text-color, red);
+    margin-left: 15px;    
+}
+
+.padding {
+    /*--inner-padding-end: auto; --padding-start: auto;*/
+    padding: auto;
+    
+}
+
+.no-padding {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;
+    height: 55px !important;
+}
+
+.no-padding-end {
+    --inner-padding-end: 0px;
+}
+
+.no-padding-start {
+    --padding-start: 0px !important;
+}
+
+.no-padding-no-height {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;    
+}
+
+.padding-top {
+    --padding-top: 0px;
+}
+
+.item-inner {
+    padding-right: 0px !important;
+}
+
+.label-right {
+    ion-label{
+       transform-origin: right top;
+       align-self: flex-end;    
+       margin-bottom: 4% !important;
+    }
+}
+
+.align-to-right {
+    ion-label {
+        position: relative;
+        left: 25%;
+        text-align: end;
+    }
+}
+
+
+
+@keyframes shake {
+    0% { transform: translate(20px); }
+    20% { transform: translate(-20px); }
+    40% { transform: translate(10px); }
+    60% { transform: translate(-10px); }
+    80% { transform: translate(4px); }
+    100% { transform: translate(0px); }
+}
+.error-input,
+.error-shake {
+    ion-label {
+        color: var(--error-text-color,red) !important;
+    }
+    ion-input {
+        animation: shake 0.4s 1 linear;
+        border: 1px solid var(--error-text-color, red) !important;
+    }
+}
+
+@keyframes shake {
+    0% { transform: translate(20px); }
+    20% { transform: translate(-20px); }
+    40% { transform: translate(10px); }
+    60% { transform: translate(-10px); }
+    80% { transform: translate(4px); }
+    100% { transform: translate(0px); }
+}
+/* animação de erro */
+.error-input,
+.error-shake {
+    ion-label {
+        color: var(--error-text-color, red) !important;
+    }
+    ion-input {
+        border: 1px solid red !important;
+    }
+}
+.error-shake {
+    ion-input {
+        animation: shake 0.4s 1 linear;
+    }
+}
+

package/src/lib/baseInputComponent.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+    template: ''
+})
+export abstract class BaseInputComponent implements OnInit {
+    @Input() label!: string;
+    @Input() labelPosition: string = 'stacked';
+    @Input() nome!: string;
+    @Input() placeholder: string = '';
+    @Input() form!: FormGroup;
+    @Input() campo!: string;
+    @Input('formControlName') formControlName!: string;  
+    @Input() max: string = '10';
+    @Input() validation_messages!: any[];
+    @Input() type: string = "text";
+    @Input() readonly: boolean = false;
+    @Input() leitura: boolean = false;
+    @Input() itemClass: string = "padding";
+    @Output() blur = new EventEmitter();
+    @Input() botaoLimpar: boolean = false;
+    @Input() labelColor: string = 'dark';
+    @Input() inputBackgroungColor: string = 'auto';
+    @Input() focusField: boolean = false;    
+    @Input() blurArgs!: any[];
+
+    constructor() {
+
+    }
+    ngOnInit(): void {
+        throw new Error('Method not implemented.');
+    }
+
+}

package/src/lib/buttons/baseBtnComponent.ts

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+    template: ''
+})
+export abstract class BaseBtnComponent implements OnInit {
+    @Input() disabled: boolean = false;
+    @Input() type: string = 'submit';
+    @Input() icon: string = 'checkmark-outline';
+    @Input() iconSrc: string = '';
+    @Input() title: string = 'Salvar';
+    @Input() fill: string = 'outline';
+    @Input() expand: string = 'block';
+    @Output() btnClick = new EventEmitter();
+    @Input() size: string = 'default';
+    @Input() iconSlot: string = 'start';
+
+    ngOnInit(): void {
+        return;
+    }
+
+    onClick() {
+        if (this.btnClick)
+            this.btnClick.emit();
+    }
+
+    resolveTheme(theme: string) {
+        //console.log('resolve theme', theme);
+        // if (theme == 'default') {
+        //     this.fill = 'outline';
+        // } else {
+        //     this.fill = 'solid';
+        // }
+        if (theme == 'windows-theme') {
+            this.fill = 'solid';
+        }
+    }
+}

package/src/lib/buttons/btn-action/btn-action.component.html

@@ -0,0 +1,11 @@
+<ion-button [color]="color" [type]="type" [disabled]="disabled" [fill]="fill" [expand]="expand"
+  [size]="size"
+  [hidden]="hidden"  
+  (click)="onClick()"
+  >  
+  <ion-icon *ngIf="icon || iconSrc" [slot]="title ? iconSlot : 'icon-only'" [name]="icon" [src]="iconSrc" [style]="iconStyle"></ion-icon>
+    <span [style]="titleStyle">{{ title }}</span>
+  <img *ngIf="imgSrc" [src]="imgSrc" [slot]="title ? iconSlot : 'icon-only'"/>
+</ion-button>
+
+

package/src/lib/buttons/btn-action/btn-action.component.scss

@@ -0,0 +1,7 @@
+ion-button {
+    //width: 100%;    
+}
+
+img {
+    width: 24px;margin-right: 6px;
+}

package/src/lib/buttons/btn-action/btn-action.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnActionComponent } from './btn-action.component';
+
+describe('BtnActionComponent', () => {
+  let component: BtnActionComponent;
+  let fixture: ComponentFixture<BtnActionComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnActionComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/buttons/btn-action/btn-action.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BaseBtnComponent } from '../baseBtnComponent';
+
+@Component({
+  selector: 'kb-btn-action',
+  templateUrl: './btn-action.component.html',
+  styleUrls: ['./btn-action.component.scss'],
+})
+export class BtnActionComponent extends BaseBtnComponent implements OnInit {
+  @Input() override title: string = 'Abrir';
+  @Input() color: string = 'primary';
+  @Input() hidden: boolean = false;
+  @Input() override icon: string = '';
+  @Input() override iconSrc: string = '';
+  @Input() imgSrc: string = '';
+  @Input() boxColor: string = '#4c8dff';
+  @Input() btnMargin: string = '4px';
+  @Input() override expand: string = 'block';
+  @Input() iconStyle: string = '';
+  @Input() titleStyle: string = '';
+  buttonStyle: string = '';  
+  constructor() {
+    super();
+    this.type = 'button';
+   }
+
+  override ngOnInit() {
+    this.buttonStyle = '';        
+  }  
+
+}

package/src/lib/buttons/btn-cancelar/btn-cancelar.component.html

@@ -0,0 +1,14 @@
+<ion-button color="tertiary" [type]="type" [disabled]="disabled" [fill]="fill" [expand]="expand" 
+  [size]="size"
+  (click)="onClick()"
+  >  
+  <ion-icon [slot]="title ? 'start' : 'icon-only'" [src]="iconSrc" [name]="icon"></ion-icon>
+    {{ title }}
+</ion-button> 
+<!-- 
+<ion-button color="tertiary" fill="outline" (click)="cancelarContato()" style="box-shadow: #6370ff 0px 3px 3px 0.05px"
+  [disabled]="!selectedContato">
+  <ion-icon src="/assets/icon/limpar_purple_24dp.svg"></ion-icon>
+  Cancelar
+</ion-button>
+-->

package/src/lib/buttons/btn-cancelar/btn-cancelar.component.scss

@@ -0,0 +1,5 @@
+ion-button {
+    //width: 100%;
+    margin: 4px;
+    box-shadow: #6370ff 0px 3px 3px 0.05px;
+}