@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

package/{scss → projects/tcloud-ui/assets/scss}/tcloud/custom/colors.scss

@@ -64,6 +64,9 @@
   --success :#1E8E3E;
   --complete :#039BE5;
 
+  --warning-lighten: #f3b137;
+  --danger-lighten: #eb5b50;
+
   // grays
   --tc-gray-600: #4e4944;
   --tc-gray-500: #8a817b;

package/{scss → projects/tcloud-ui/assets/scss}/tcloud/custom/forms.scss

@@ -1,10 +1,3 @@
-// ---------------------------------
-// Forms
-// ---------------------------------
-// ---------------------------------
-// Forms
-// ---------------------------------
-
 .tc-form-control{
   display: block;
   width: 100%;
@@ -15,7 +8,7 @@
   color: #212529;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid var(--tc-gray-300);
+  border: 1px solid var(--tc-gray-300);;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -52,7 +45,7 @@ select.tc-form-control{
   background-position: right .75rem center;
   background-size: 16px 12px; 
 
-  border: 1px solid var(--tc-gray-300);
+  border: 1px solid #A2A2A2;
   border-radius: 3px;
   color: var(--cinza);
   font-family: "Open Sans";

package/projects/tcloud-ui/assets/scss/tcloud/custom/mixins.scss

@@ -0,0 +1,319 @@
+
+// ===============================================
+// Font and text
+// ===============================================
+
+@mixin bold {
+  font-weight: bold;
+}
+
+
+@mixin uppercase {
+  text-transform:  uppercase;
+}
+
+
+
+// ===============================================
+// Helpers
+// ===============================================
+
+@mixin test($args...){
+  border:1px solid $args
+}
+
+
+
+// ===============================================
+// Misc
+// ===============================================
+
+@mixin brdr($color: var(--tc-gray-200)) {
+  border: 1px solid $color;
+}
+
+@mixin bd-bottom($color: var(--tc-gray-200)) {
+  border-bottom: 1px solid $color;
+}
+
+@mixin bd-top($color: var(--tc-gray-200)) {
+  border-top: 1px solid $color;
+}
+
+@mixin bd-rgt($color: var(--tc-gray-200)) {
+  border-right: 1px solid $color;
+}
+
+@mixin bd-lft($color: var(--tc-gray-200)) {
+  border-left: 1px solid $color;
+}
+
+
+@mixin arrow-top ($size, $color){
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: transparent transparent $color transparent;
+  border-width: 0 $size $size $size;
+}
+
+@mixin arrow-bottom ($size, $color){
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: $color transparent transparent transparent;
+  border-width: $size $size 0 $size;
+}
+
+
+
+
+// ===============================================
+// Font and text
+// ===============================================
+
+@mixin bold {
+  font-weight: bold;
+}
+
+
+@mixin uppercase {
+  text-transform:  uppercase;
+}
+
+// ===============================================
+// Helpers
+// ===============================================
+
+@mixin test($args...) {
+border: 1px solid $args;
+}
+
+@mixin flex-center {
+display: flex;
+align-items: center;
+justify-content: center;
+}
+
+// ===============================================
+// Font and text
+// ===============================================
+
+@mixin bold {
+font-weight: bold;
+}
+
+@mixin ellipsis {
+text-overflow: ellipsis; /* enables ellipsis */
+white-space: nowrap; /* keeps the text in a single line */
+overflow: hidden; /* keeps the element from overflowing its parent */
+}
+
+// ===============================================
+// Misc
+// ===============================================
+
+@mixin arrow-top($size, $color) {
+content: '';
+height: 0;
+width: 0;
+border-style: solid;
+border-color: transparent transparent $color transparent;
+border-width: 0 $size $size $size;
+}
+
+@mixin arrow-bottom($size, $color) {
+content: '';
+height: 0;
+width: 0;
+border-style: solid;
+border-color: $color transparent transparent transparent;
+border-width: $size $size 0 $size;
+}
+
+@mixin thin-scroll-bar() {
+&::-webkit-scrollbar {
+  width: 10px;
+}
+/* Track */
+&::-webkit-scrollbar-track {
+  background: var(--tc-gray-200);
+  border-radius: 10px;
+}
+/* Handle */
+&::-webkit-scrollbar-thumb {
+  background: var(--tc-gray-300);
+  border-radius: 10px;
+}
+/* Handle on hover */
+&::-webkit-scrollbar-thumb:hover {
+  background: var(--tc-gray-400);
+}
+}
+
+@mixin bdr-bottom( $sz, $clr) {
+border-bottom: 1px solid $clr;
+margin-bottom: $sz;
+padding-bottom: $sz;
+}
+
+@mixin flex-center {
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+// ===============================================
+// T-Cloud Prime
+// ===============================================
+
+@mixin prime-color {
+// @include prime-color;
+color: var(--tc-primary) !important;
+}
+
+@mixin prime-gray-100 {
+// @include prime-gray-100;
+color: var(--tc-gray-100) !important;
+}
+
+@mixin prime-gray-50 {
+// @include prime-gray-50;
+color: var(--tc-gray-50) !important;
+}
+
+
+
+
+@mixin prime-bg {
+// @include prime-bg;
+background: var(--tc-primary) !important;
+}
+
+@mixin prime-bgc {
+// @include prime-bgc;
+background-color: var(--tc-primary) !important;
+}
+
+@mixin prime-bg-100 {
+// @include prime-bg-100;
+background: var(--tc-gray-100) !important;
+}
+
+@mixin prime-bg-50 {
+// @include prime-bg-50;
+background: var(--tc-gray-50) !important;
+}
+
+@mixin prime-bg-10 {
+// @include prime-bg-10;
+background: var(--tc-gray-100) !important;
+}
+
+
+
+
+@mixin prime-bdr {
+// @include prime-color;
+border-color: var(--tc-primary) !important;
+}
+
+@mixin prime-bdr-100 {
+// @include prime-bdr-100;
+border-color: var(--tc-gray-100) !important;
+}
+
+@mixin prime-bdr-50 {
+// @include prime-bdr-50;
+border-color: var(--tc-gray-50) !important;
+}
+
+
+
+
+@mixin prime-black {
+// @include prime-black;
+color: var(--black) !important;
+}
+
+@mixin prime-white {
+// @include prime-white;
+color: var(--white) !important;
+}
+
+@mixin prime-mkt-gradient {
+$tcprimary: var(--tc-primary);
+$tcprimary2: var(--tc-primary2);
+
+// @include prime-mkt-gradient;
+/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6b48ff+0,362480+100 */
+background: $tcprimary!important; /* Old browsers */
+background: -moz-linear-gradient(left, $tcprimary 0%, $tcprimary2 100%)!important; /* FF3.6-15 */
+background: -webkit-linear-gradient(left, $tcprimary 0%,$tcprimary2 100%)!important; /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(to right, $tcprimary 0%,$tcprimary2 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$tcprimary, endColorstr=$tcprimary2,GradientType=1 )!important; /* IE6-9 */
+}
+
+@mixin prime-bg-gradient {
+$tcprimary: var(--tc-primary);
+// @include prime-bg-gradient;
+/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6b48ff+0,7151ff+100 */
+background: $tcprimary; /* Old browsers */
+background: -moz-linear-gradient(left, $tcprimary 0%, $tcprimary 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(left, $tcprimary 0%,$tcprimary 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(to right, $tcprimary 0%,$tcprimary 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$tcprimary, endColorstr=$tcprimary,GradientType=1 ); /* IE6-9 */
+}
+
+
+@mixin prime-title {
+// @include prime-title;
+font-size: 20px;
+font-weight: bold;
+text-transform: uppercase;
+padding-bottom: 10px;
+border-bottom: 1px solid var(--tc-gray-50);
+margin-bottom: 20px;
+}
+
+
+@mixin prime-subtitle {
+// @include prime-subtitle;
+font-size: 16px !important;
+text-transform: uppercase !important;
+border-bottom: 1px solid var(--tc-gray-50) !important;
+padding-bottom: 10px !important;
+margin-bottom: 20px !important;
+}
+
+@mixin ico-menu($img, $hgt, $wdt) {
+background: url(/assets/img/menu/#{$img}.svg);
+height: $hgt;
+width: $wdt;
+background-repeat: no-repeat;
+background-position: center;
+
+&::before {
+  display: none;
+}
+
+}
+
+@mixin ico-topmenu($img, $hgt, $wdt) {
+background: url(/assets/img/topmenu/#{$img}.svg);
+height: $hgt;
+width: $wdt;
+background-repeat: no-repeat;
+background-position: center;
+
+&::before {
+  display: none !important;
+}
+
+}
+
+@mixin svg-prime {
+filter: invert(37%) sepia(99%) saturate(5131%) hue-rotate(243deg) brightness(100%) contrast(103%);
+}

package/{scss → projects/tcloud-ui/assets/scss}/tcloud/custom/tcloud-prime.scss

@@ -1,12 +1,6 @@
 @import 'mixins';
 
 
-// ngxLoadingAnimationTypes.cubeGrid
-
-// ngxLoadingAnimationTypes.doubleBounce
-
-// ngxLoadingAnimationTypes.doubleBounce
-
 // '#293846'
 
 // '#293846'
@@ -396,6 +390,23 @@ body.tc-prime {
 
   }
 
+  //============================
+  // Spacing
+  //============================
+
+  .prime-mb-1 {
+    margin-bottom: 10px;  
+  }
+
+  .prime-mb-2 {
+    margin-bottom: 20px;  
+  }
+  
+  .prime-mb-3 {
+    margin-bottom: 30px;  
+  }
+
+
   //============================
   // Toast Msg
   //============================
@@ -4534,6 +4545,18 @@ body.tc-prime {
   }
 
 
+  //==========================================================
+  // Button disabled
+  //==========================================================
+
+  .container-button.disabled {
+    background-color: #a691ff !important;
+    border-radius: 30px;
+  }
+  .primary:disabled {
+    background: #a691ff !important;
+  }
+
 // =================================================================
 // =================================================================
 }  // End T-Cloud Prime Styles

package/{scss → projects/tcloud-ui/assets/scss}/tcloud/custom/text.scss

@@ -46,5 +46,13 @@
 }
 
 .tc-text-primary {
-    color: #37b6c4;
+    color: var(--tc-primary);
+}
+
+.tc-text-warning {
+    color: var(--warning);
+}
+
+.tc-text-danger {
+    color: var(--danger);
 }

package/{scss → projects/tcloud-ui/assets/scss}/tcloud/custom/top-navigation.scss

@@ -49,4 +49,11 @@
   }
 }
 
+.tc-top-navigation{
+  .dropdown{
+    .dropdown-menu{
+      z-index: 2001 !important;
+    }
+  }
+}
 

package/projects/tcloud-ui/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/tcloud-ui'),
+      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/projects/tcloud-ui/ng-package.json

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

package/projects/tcloud-ui/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@dev-tcloud/tcloud-ui",
+  "version": "2.2.3",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  }
+}

package/projects/tcloud-ui/src/lib/_directives/align/align.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, ElementRef, OnInit, Renderer2, Input} from '@angular/core';
+
+
+@Directive({
+  selector: '[TCalign]'
+})
+export class TCloudUiAlignDirective implements OnInit{
+
+  private _direction: 'start' | 'center' | 'end' = 'start';
+
+  @Input() set TCalign (direction: any){
+    if (direction){
+      this._direction = direction;
+      this.setStyle(this.el.nativeElement);
+    }
+  }
+  
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2
+    ) {}
+
+  ngOnInit(): void {
+    
+  }
+
+  setStyle(el: any){
+    if( this._direction === 'start' ){
+        this.renderer.setStyle(el, 'text-align', 'left');
+    }
+
+    if( this._direction === 'center' ){
+        this.renderer.setStyle(el, 'text-align', 'center');
+    }
+
+    if( this._direction === 'end' ){
+        this.renderer.setStyle(el, 'text-align', 'right');
+    }
+  }
+
+
+}

package/projects/tcloud-ui/src/lib/_directives/currency/currency.directive.ts

@@ -0,0 +1,155 @@
+import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+@Directive({
+  selector: '[TCcurrency]',
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: TCloudCurrencyDirective,
+    multi: true
+  }]
+})
+export class TCloudCurrencyDirective implements ControlValueAccessor {
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  // ngAfterViewInit() {
+  //   setTimeout(() => {
+  //     let unmaskedValue = this.unmask( this.el.nativeElement.value );
+  //     console.log('Valor do input:', unmaskedValue);
+  //     this.onChange(Number(unmaskedValue));
+  //     this.writeValue(unmaskedValue);
+  //   });    
+  // }
+
+  writeValue(value: any): void {
+    this.renderer.setProperty(this.el.nativeElement, 'type', 'text');
+    this.renderer.setStyle(this.el.nativeElement, 'text-align', 'right');
+    if (value !== undefined && value !== null) {
+      this.renderer.setProperty(this.el.nativeElement, 'value', this.formatCurrency(value));
+    } else {
+      this.renderer.setProperty(this.el.nativeElement, 'value', '');
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  @HostListener('focus')
+  onFocus(): void {
+    this.setCursorToEnd();
+  }
+
+  private setCursorToEnd(): void {
+    const nativeInput = this.el.nativeElement as HTMLInputElement;
+    const length = nativeInput.value.length;
+    nativeInput.setSelectionRange(length, length);
+  }
+
+  private setInInput(){
+
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  onInput(value: string): void {
+    const unmaskedValue = this.unmask(value);
+    this.onChange(Number(unmaskedValue));
+    this.writeValue(unmaskedValue);
+  }
+
+  private formatCurrency(value: any): string { 
+    
+    const posicaoPonto = `${value}`.indexOf('.');
+    if (posicaoPonto !== -1) {
+      let part = `${value}`.split('.');
+      let decimalPart = (part && part[1]) ? part[1] : '';
+      if( (decimalPart).length < 2 ){
+        value = value + '0';
+      }      
+    }else{
+      value = value + '.00';
+    }
+
+    return 'R$ '+ this.formatReal(value);
+  }
+
+  private unmask(value: string): any {
+    if( value === undefined || value === null || value === "" ){
+      return "";
+    }
+    value = value.replace(/[^\d]/g, '');
+    value = value.replace(/^0+/, '');
+    if( value && value[0] ){
+      if( (value[0] === ',' || value[0] === '.') ){
+        value = '0'+value;
+      }     
+    }
+    value = this.toDecimal(value);   
+    return value;
+  }
+
+  private formatarNumero(numero: any): string {
+    return numero.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') as string;
+  }
+
+  private formatReal(value: any): string {
+    var delimiter = ',';
+    
+    if( !value! ){ return `0${delimiter}00`; }
+    if( value === `0${delimiter}00` ){ value = ''; }
+    value = `${value}`;
+    value = value.replace(/^0+/, '');
+    const cleanValue = value.replace(/[^\d]/g, '');
+    if (cleanValue.length <= 2) {      
+      let _value = `${delimiter}${cleanValue.padStart(2, '0')}`;
+      if( _value && _value[0] ){
+        if( (_value[0] === ',' || _value[0] === '.') ){
+          _value = '0'+_value;
+        }     
+      }
+      return _value;
+    }
+
+    let integerPart = cleanValue.slice(0, -2) || '0';
+    const decimalPart = cleanValue.slice(-2).padStart(2, '0');
+    if( (integerPart).length > 3 ){
+      integerPart = this.formatarNumero(integerPart);
+    }
+    let _value = `${integerPart}${delimiter}${decimalPart}`;
+    if( _value && _value[0] ){
+      if( (_value[0] === ',' || _value[0] === '.') ){
+        _value = '0'+_value;
+      }     
+    }
+
+    return _value;
+  }
+
+  private toDecimal(numero: any) {    
+    const numeroStr = numero.toString();
+    let parteInteira = numeroStr.slice(0, -2) || '0';
+    let parteDecimal = numeroStr.slice(-2);
+    if(Number(parteDecimal) > 0 && Number(parteDecimal) < 10 ){
+      parteDecimal = `0${Number(parteDecimal)}`;
+    }
+    let _value = `${parteInteira}.${parteDecimal}`;  
+    if( _value === ',' || _value === ',0' || _value === '0,' || _value === '0,0' || _value === '0,00' ){ return '0'; }
+    if( _value === '.' || _value === '.0' || _value === '0.' || _value === '0.0' || _value === '0.00' ){ return '0'; }
+    _value = _value.replace(/^0+/, '');
+    if( _value && _value[0] ){
+      if( (_value[0] === ',' || _value[0] === '.') ){
+        _value = '0'+_value;
+      }     
+    }
+    
+    return _value;
+  }
+}