@dev-tcloud/tcloud-ui 0.1.20 → 0.1.22

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

@@ -4,8 +4,9 @@
 
 .tc-card {
     font-size: 13px;
-    background: #fff;
-    border-radius: 20px;
+    background: var(--white);
+    color: var(--tc-gray-500);
+    border-radius: 15px;
     box-shadow: 2px 3px 20px rgb(0 0 0 / 8%);
     padding: 20px;
     margin-bottom: 20px;
@@ -31,6 +32,7 @@
   
 .tc-card-description {
     font-size: 11px;
+    margin: 0;
 }
   
 .tc-card-footer {

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

@@ -17,6 +17,7 @@
     --second2:  #EEEEEE;
     --white: #fff;
     --black: #363636;
+    --dark: #2f2f2f;
     --red: #ff5555;
     --green: #1E8E3E;
 

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

@@ -21,7 +21,7 @@
   appearance: none;
   border-radius: .25rem;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  
+  height: 40px;
 
   &:focus {
     border-color: var(--tc-primary);
@@ -32,12 +32,12 @@
     outline: 1px solid var(--tc-primary);
     border-radius: 3px;
   }
-}
 
-input.tc-form-control, 
-select.tc-form-control{
-  height: 40px !important;
-  padding: 5px 15px;
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--tc-gray-200);
+  }
 }
 
 textarea.tc-form-control{
@@ -51,6 +51,14 @@ select.tc-form-control{
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px; 
+  border: 1px solid var(--tc-gray-300);
+  border-radius: 3px;
+  color: var(--cinza);
+  font-family: "Open Sans";
+  font-size: 16px;
+  height: 40px;
+  padding: 0 10px;
+
 }
 
 

package/projects/tcloud-ui/assets/scss/tcloud/custom/left-navigation.scss

@@ -0,0 +1,48 @@
+
+.menu-area-floating{
+  -webkit-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
+  -moz-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
+  box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
+}
+
+.tc-prime.mini-navbar{  
+  .footer{
+    display: none;
+  }  
+}
+
+.mini-navbar{
+  #side-menu{
+    li{
+      padding-left: 8px;
+    }
+  }
+}
+
+.fixed-sidebar-below{
+  margin-left: 62px !important;
+
+  .navbar-fixed-top{
+    z-index: 0;
+  }
+
+  .wrap-main{
+    .background-page-global-internal{
+      margin-top: 8px !important;
+    }
+  }
+  
+}
+
+.mini-navbar{
+  #page-wrapper{
+    .wrap-main{
+      .background-page-global-internal{
+        margin-top: 70px;
+      }
+    }
+    nav.navbar{
+      padding: 0 70px 0 0 !important;
+    }
+  }
+}

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

@@ -529,13 +529,6 @@ body.tc-prime {
     }
 	}
 
-  .notifications-container {
-
-    .bullets {
-      display: none !important;
-    }
-  }
-
   //============================
   // ngx pagination
   //============================
@@ -833,10 +826,6 @@ body.tc-prime {
   // User Box info
   //====================================
 
-  .toggleBtn {
-    display: none;
-  }
-
   .user-name {
 
     p {
@@ -996,6 +985,7 @@ body.tc-prime {
       a {
         display: flex;
         align-items: center;
+        justify-content: flex-start;
         gap: 10px;
         color: var(--white);
         border-radius: 35px;
@@ -1143,6 +1133,14 @@ body.tc-prime {
 
   .menu-prime-item {
     justify-content: space-between;
+    position: relative;
+
+    // Fix arrow menu standard
+    .fa.arrow {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
   }
 
 

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

@@ -17,6 +17,9 @@ body {
   height: 100%;
 }
 
+a:hover {
+  text-decoration: none!important;
+}
 
 // ---------------------------------------------
 // Card

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

@@ -0,0 +1,52 @@
+.tc-top-navigation{
+
+  .tc-navbar-nav{
+    margin-right: 5px !important;
+    li{
+      .tc-btn{
+        margin: 5px !important;
+      }
+
+      .label-warning{
+        margin-left: 3px;
+      }
+    }
+  }
+
+  .dropdown-toggle::after{
+    display: none !important;
+  }
+
+  .navbar-collapse{
+    &.collapse{
+      &.show{
+        ul{
+          li{
+            .tc-btn:first-child{
+              width: 100% !important;
+              display: flex !important;
+              margin: 5px;
+              justify-content: left;
+              padding-left: 24px;
+            }
+          }
+        }
+        
+        
+      }
+    }
+  }
+}
+
+.tc-prime{
+  .tc-top-navigation{
+    ul{
+      li > .tc-btn{          
+        border: none !important;
+        background: transparent !important;
+      }
+    }
+  }
+}
+
+

package/projects/tcloud-ui/assets/scss/tcloud/iaas/forms.scss

@@ -0,0 +1,18 @@
+.iaas-page{ 
+  
+  .tc-form-control {
+    background-color: white;
+    border: 1px solid #A2A2A2;
+    border-radius: 3px;
+    color: var(--cinza);
+    font-family: "Open Sans";
+    font-size: 13px;
+    height: 40px;
+    padding: 0 10px;
+  }
+
+  .tc-form-control:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}

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

@@ -1,6 +1,8 @@
 @import 'custom/variables.scss';
 @import 'custom/mixins.scss';
 
+@import 'custom/top-navigation.scss';
+@import 'custom/left-navigation.scss';
 @import 'custom/buttons.scss';
 
 @import 'custom/card.scss';
@@ -10,4 +12,6 @@
 @import 'custom/alerts.scss';
 
 @import 'custom/tcloud-standard.scss';
-@import 'custom/tcloud-prime.scss';
+@import 'custom/tcloud-prime.scss';
+
+@import 'iaas/forms.scss';

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": "0.1.22",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

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');
+    }
+  }
+
+
+}