@gipisistemas/ng-core 1.1.11 → 1.1.13

package/assets/styles/colors.scss

@@ -1,253 +1,270 @@
 // Cores provisórias ---------------------------
-$gipi-input-border-provisory: rgba(0, 0, 0, .12);
+$gipi-input-border-provisory: #0000001f;
 $gipi-input-color-provisory: #696969;
 // ---------------------------------------------
 
 // Box shadow
-$gipi-box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-$gipi-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+$gipi-box-shadow-sm:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$gipi-box-shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
 // Primary
-$gipi-primary-50 : #fceaec;
-$gipi-primary-100 : #f5bfc3;
-$gipi-primary-200 : #f1a0a6;
-$gipi-primary-300 : #ea757e;
-$gipi-primary-400 : #e65a65;
-$gipi-primary-500 : #e0313e; // Is default
-$gipi-primary-600 : #cc2d38;
-$gipi-primary-700 : #9f232c;
-$gipi-primary-800 : #7b1b22;
-$gipi-primary-900 : #5e151a;
+$gipi-primary-50: #fceaec;
+$gipi-primary-100: #f5bfc3;
+$gipi-primary-200: #f1a0a6;
+$gipi-primary-300: #ea757e;
+$gipi-primary-400: #e65a65;
+$gipi-primary-500: #e0313e; // Is default
+$gipi-primary-600: #cc2d38;
+$gipi-primary-700: #9f232c;
+$gipi-primary-800: #7b1b22;
+$gipi-primary-900: #5e151a;
+
 // Secondary
-$gipi-secondary-50 : #f5f5f6;
-$gipi-secondary-100 : #e0e1e2;
-$gipi-secondary-200 : #d1d2d4;
-$gipi-secondary-300 : #bbbdc1;
-$gipi-secondary-400 : #aeb1b5;
-$gipi-secondary-500 : #9a9da2; // Is default
-$gipi-secondary-600 : #8c8f93;
-$gipi-secondary-700 : #6d6f73;
-$gipi-secondary-800 : #555659;
-$gipi-secondary-900 : #414244;
+$gipi-secondary-50: #f5f5f6;
+$gipi-secondary-100: #e0e1e2;
+$gipi-secondary-200: #d1d2d4;
+$gipi-secondary-300: #bbbdc1;
+$gipi-secondary-400: #aeb1b5;
+$gipi-secondary-500: #9a9da2; // Is default
+$gipi-secondary-600: #8c8f93;
+$gipi-secondary-700: #6d6f73;
+$gipi-secondary-800: #555659;
+$gipi-secondary-900: #414244;
+
 // Success
-$gipi-success-100 : #bbdcb6;
-$gipi-success-300 : #6db362;
-$gipi-success-400 : #51a543;
-$gipi-success-500 : #258e14; // Is default
-$gipi-success-600 : #228112;
-$gipi-success-700 : #1a650e;
-$gipi-success-900 : #103c08;
+$gipi-success-100: #bbdcb6;
+$gipi-success-300: #6db362;
+$gipi-success-400: #51a543;
+$gipi-success-500: #258e14; // Is default
+$gipi-success-600: #228112;
+$gipi-success-700: #1a650e;
+$gipi-success-900: #103c08;
+
 // Information
-$gipi-info-100 : #b0d8ef;
-$gipi-info-300 : #54aadb;
-$gipi-info-400 : #3399d5;
-$gipi-info-500 : #0080ca; // Is default
-$gipi-info-600 : #0074b8;
-$gipi-info-700 : #005b8f;
-$gipi-info-900 : #003655;
+$gipi-info-100: #b0d8ef;
+$gipi-info-300: #54aadb;
+$gipi-info-400: #3399d5;
+$gipi-info-500: #0080ca; // Is default
+$gipi-info-600: #0074b8;
+$gipi-info-700: #005b8f;
+$gipi-info-900: #003655;
+
 // Warning
-$gipi-warning-100 : #f2e2b0;
-$gipi-warning-300 : #e4bf54;
-$gipi-warning-400 : #deb333;
-$gipi-warning-500 : #d6a000; // Is default
-$gipi-warning-600 : #c39200;
-$gipi-warning-700 : #987200;
-$gipi-warning-900 : #5a4300;
+$gipi-warning-100: #f2e2b0;
+$gipi-warning-300: #e4bf54;
+$gipi-warning-400: #deb333;
+$gipi-warning-500: #d6a000; // Is default
+$gipi-warning-600: #c39200;
+$gipi-warning-700: #987200;
+$gipi-warning-900: #5a4300;
+
 // Danger
-$gipi-danger-100 : #f1c4b6;
-$gipi-danger-300 : #e07f62;
-$gipi-danger-400 : #da6643;
-$gipi-danger-500 : #d14014; // Is default
-$gipi-danger-600 : #be3a12;
-$gipi-danger-700 : #942d0e;
-$gipi-danger-900 : #581b08;
+$gipi-danger-100: #f1c4b6;
+$gipi-danger-300: #e07f62;
+$gipi-danger-400: #da6643;
+$gipi-danger-500: #d14014; // Is default
+$gipi-danger-600: #be3a12;
+$gipi-danger-700: #942d0e;
+$gipi-danger-900: #581b08;
+
 // White
-$gipi-common-white-100 : #ffffff; // Is default
-$gipi-common-white-200 : #fcfcfc;
-$gipi-common-white-300 : #f5f5f5;
-$gipi-common-white-400 : #f0f0f0;
+$gipi-common-white-100: #ffffff; // Is default
+$gipi-common-white-200: #fcfcfc;
+$gipi-common-white-300: #f5f5f5;
+$gipi-common-white-400: #f0f0f0;
+
 // Black
-$gipi-common-black-100 : #131313; // Is default
-$gipi-common-black-200 : #262626;
-$gipi-common-black-300 : #595959;
-$gipi-common-black-400 : #bfbfbf;
+$gipi-common-black-100: #131313; // Is default
+$gipi-common-black-200: #262626;
+$gipi-common-black-300: #595959;
+$gipi-common-black-400: #bfbfbf;
+
 // Gray
-$gipi-common-gray-50 : #f5f5f6;
-$gipi-common-gray-100 : #e0e1e2;
-$gipi-common-gray-200 : #d1d2d4;
-$gipi-common-gray-300 : #bbbdc1;
-$gipi-common-gray-400 : #aeb1b5;
-$gipi-common-gray-500 : #9a9da2; // Is default
-$gipi-common-gray-600 : #8c8f93;
-$gipi-common-gray-700 : #6d6f73;
-$gipi-common-gray-800 : #555659;
-$gipi-common-gray-900 : #414244;
+$gipi-common-gray-50: #f5f5f6;
+$gipi-common-gray-100: #e0e1e2;
+$gipi-common-gray-200: #d1d2d4;
+$gipi-common-gray-300: #bbbdc1;
+$gipi-common-gray-400: #aeb1b5;
+$gipi-common-gray-500: #9a9da2; // Is default
+$gipi-common-gray-600: #8c8f93;
+$gipi-common-gray-700: #6d6f73;
+$gipi-common-gray-800: #555659;
+$gipi-common-gray-900: #414244;
+
 // Pastels - No default color
-$gipi-common-pastels-primary : #f3e7e7;
-$gipi-common-pastels-secondary : #e7ebee;
-$gipi-common-pastels-success : #e9f4e8;
-$gipi-common-pastels-info : #e6f2fa;
-$gipi-common-pastels-warning : #fbf6e6;
-$gipi-common-pastels-danger : #faece8;
-//
+$gipi-common-pastels-primary: #f3e7e7;
+$gipi-common-pastels-secondary: #e7ebee;
+$gipi-common-pastels-success: #e9f4e8;
+$gipi-common-pastels-info: #e6f2fa;
+$gipi-common-pastels-warning: #fbf6e6;
+$gipi-common-pastels-danger: #faece8;
+
 $gipi-palette-primary: (
-    50 : $gipi-primary-50,
-    100 : $gipi-primary-100,
-    200 : $gipi-primary-200,
-    300 : $gipi-primary-300,
-    400 : $gipi-primary-400,
-    500 : $gipi-primary-500,
-    600 : $gipi-primary-600,
-    700 : $gipi-primary-700,
-    800 : $gipi-primary-800,
-    900 : $gipi-primary-900,
-    contrast: ( //
-        50 : $gipi-common-black-100,
-        100 : $gipi-common-black-100,
-        200 : $gipi-common-black-100,
-        300 : $gipi-common-black-100,
-        400 : $gipi-common-black-100,
-        500 : $gipi-common-white-100,
-        600 : $gipi-common-white-100,
-        700 : $gipi-common-white-100,
-        800 : $gipi-common-white-100,
-        900 : $gipi-common-white-100,
+    50: $gipi-primary-50,
+    100: $gipi-primary-100,
+    200: $gipi-primary-200,
+    300: $gipi-primary-300,
+    400: $gipi-primary-400,
+    500: $gipi-primary-500,
+    600: $gipi-primary-600,
+    700: $gipi-primary-700,
+    800: $gipi-primary-800,
+    900: $gipi-primary-900,
+    contrast: (
+        50: $gipi-common-black-100,
+        100: $gipi-common-black-100,
+        200: $gipi-common-black-100,
+        300: $gipi-common-black-100,
+        400: $gipi-common-black-100,
+        500: $gipi-common-white-100,
+        600: $gipi-common-white-100,
+        700: $gipi-common-white-100,
+        800: $gipi-common-white-100,
+        900: $gipi-common-white-100
     )
 );
-//
+
 $gipi-palette-secondary: (
-    100 : $gipi-secondary-100,
-    300 : $gipi-secondary-300,
-    400 : $gipi-secondary-400,
-    500 : $gipi-secondary-500,
-    600 : $gipi-secondary-600,
-    700 : $gipi-secondary-700,
-    900 : $gipi-secondary-900,
-    contrast: ( //
-        50 : $gipi-common-black-100,
-        100 : $gipi-common-black-100,
-        200 : $gipi-common-black-100,
-        300 : $gipi-common-black-100,
-        400 : $gipi-common-black-100,
-        500 : $gipi-common-black-100,
-        600 : $gipi-common-black-100,
-        700 : $gipi-common-white-100,
-        800 : $gipi-common-white-100,
-        900 : $gipi-common-white-100,
+    100: $gipi-secondary-100,
+    300: $gipi-secondary-300,
+    400: $gipi-secondary-400,
+    500: $gipi-secondary-500,
+    600: $gipi-secondary-600,
+    700: $gipi-secondary-700,
+    900: $gipi-secondary-900,
+    contrast: (
+        50: $gipi-common-black-100,
+        100: $gipi-common-black-100,
+        200: $gipi-common-black-100,
+        300: $gipi-common-black-100,
+        400: $gipi-common-black-100,
+        500: $gipi-common-black-100,
+        600: $gipi-common-black-100,
+        700: $gipi-common-white-100,
+        800: $gipi-common-white-100,
+        900: $gipi-common-white-100
     )
 );
-//
+
 $gipi-palette-success: (
-    100 : $gipi-success-100,
-    300 : $gipi-success-300,
-    400 : $gipi-success-400,
-    500 : $gipi-success-500,
-    600 : $gipi-success-600,
-    700 : $gipi-success-700,
-    900 : $gipi-success-900,
-    contrast: ( //
-        100 : $gipi-common-black-100,
-        300 : $gipi-common-black-100,
-        400 : $gipi-common-black-100,
-        500 : $gipi-common-white-100,
-        600 : $gipi-common-white-100,
-        700 : $gipi-common-white-100,
-        900 : $gipi-common-white-100,
+    100: $gipi-success-100,
+    300: $gipi-success-300,
+    400: $gipi-success-400,
+    500: $gipi-success-500,
+    600: $gipi-success-600,
+    700: $gipi-success-700,
+    900: $gipi-success-900,
+    contrast: (
+        100: $gipi-common-black-100,
+        300: $gipi-common-black-100,
+        400: $gipi-common-black-100,
+        500: $gipi-common-white-100,
+        600: $gipi-common-white-100,
+        700: $gipi-common-white-100,
+        900: $gipi-common-white-100
     )
 );
-//
+
 $gipi-palette-info: (
-    100 : $gipi-info-100,
-    300 : $gipi-info-300,
-    400 : $gipi-info-400,
-    500 : $gipi-info-500,
-    600 : $gipi-info-600,
-    700 : $gipi-info-700,
-    900 : $gipi-info-900,
-    contrast: ( //
-        100 : $gipi-common-black-100,
-        300 : $gipi-common-black-100,
-        400 : $gipi-common-black-100,
-        500 : $gipi-common-white-100,
-        600 : $gipi-common-white-100,
-        700 : $gipi-common-white-100,
-        900 : $gipi-common-white-100,
+    100: $gipi-info-100,
+    300: $gipi-info-300,
+    400: $gipi-info-400,
+    500: $gipi-info-500,
+    600: $gipi-info-600,
+    700: $gipi-info-700,
+    900: $gipi-info-900,
+    contrast: (
+        100: $gipi-common-black-100,
+        300: $gipi-common-black-100,
+        400: $gipi-common-black-100,
+        500: $gipi-common-white-100,
+        600: $gipi-common-white-100,
+        700: $gipi-common-white-100,
+        900: $gipi-common-white-100
     )
 );
-//
+
 $gipi-palette-warning: (
-    100 : $gipi-warning-100,
-    300 : $gipi-warning-300,
-    400 : $gipi-warning-400,
-    500 : $gipi-warning-500,
-    600 : $gipi-warning-600,
-    700 : $gipi-warning-700,
-    900 : $gipi-warning-900,
-    contrast: ( //
-        100 : $gipi-common-black-100,
-        300 : $gipi-common-black-100,
-        400 : $gipi-common-black-100,
-        500 : $gipi-common-white-100,
-        600 : $gipi-common-white-100,
-        700 : $gipi-common-white-100,
-        900 : $gipi-common-white-100,
+    100: $gipi-warning-100,
+    300: $gipi-warning-300,
+    400: $gipi-warning-400,
+    500: $gipi-warning-500,
+    600: $gipi-warning-600,
+    700: $gipi-warning-700,
+    900: $gipi-warning-900,
+    contrast: (
+        100: $gipi-common-black-100,
+        300: $gipi-common-black-100,
+        400: $gipi-common-black-100,
+        500: $gipi-common-white-100,
+        600: $gipi-common-white-100,
+        700: $gipi-common-white-100,
+        900: $gipi-common-white-100
     )
 );
-//
+
 $gipi-palette-danger: (
-    100 : $gipi-danger-100,
-    300 : $gipi-danger-300,
-    400 : $gipi-danger-400,
-    500 : $gipi-danger-500,
-    600 : $gipi-danger-600,
-    700 : $gipi-danger-700,
-    900 : $gipi-danger-900,
-    contrast: ( //
-        100 : $gipi-common-black-100,
-        300 : $gipi-common-black-100,
-        400 : $gipi-common-black-100,
-        500 : $gipi-common-white-100,
-        600 : $gipi-common-white-100,
-        700 : $gipi-common-white-100,
-        900 : $gipi-common-white-100,
+    100: $gipi-danger-100,
+    300: $gipi-danger-300,
+    400: $gipi-danger-400,
+    500: $gipi-danger-500,
+    600: $gipi-danger-600,
+    700: $gipi-danger-700,
+    900: $gipi-danger-900,
+    contrast: (
+        100: $gipi-common-black-100,
+        300: $gipi-common-black-100,
+        400: $gipi-common-black-100,
+        500: $gipi-common-white-100,
+        600: $gipi-common-white-100,
+        700: $gipi-common-white-100,
+        900: $gipi-common-white-100
     )
 );
-//
+
 $gipi-palette-common: (
-    white : ( // 100 is default
-        100 : $gipi-common-white-100,
-        200 : $gipi-common-white-200,
-        300 : $gipi-common-white-300,
-        400 : $gipi-common-white-400,
+    white: (
+        // 100 is default
+        100: $gipi-common-white-100,
+        200: $gipi-common-white-200,
+        300: $gipi-common-white-300,
+        400: $gipi-common-white-400
     ),
-    black : ( // 100 is default
-        100 : $gipi-common-black-100,
-        200 : $gipi-common-black-200,
-        300 : $gipi-common-black-300,
-        400 : $gipi-common-black-400,
+    black: (
+        // 100 is default
+        100: $gipi-common-black-100,
+        200: $gipi-common-black-200,
+        300: $gipi-common-black-300,
+        400: $gipi-common-black-400
     ),
-    gray : ( // 500 is default
-        50 : $gipi-common-gray-50,
-        100 : $gipi-common-gray-100,
-        200 : $gipi-common-gray-200,
-        300 : $gipi-common-gray-300,
-        400 : $gipi-common-gray-400,
-        500 : $gipi-common-gray-500,
-        600 : $gipi-common-gray-600,
-        700 : $gipi-common-gray-700,
-        800 : $gipi-common-gray-800,
-        900 : $gipi-common-gray-900,
-    ),
-    pastels : ( // No default color
-        primary : $gipi-common-pastels-primary,
-        secondary : $gipi-common-pastels-secondary,
-        success : $gipi-common-pastels-success,
-        info : $gipi-common-pastels-info,
-        warning : $gipi-common-pastels-warning,
-        danger : $gipi-common-pastels-danger,
+    gray: (
+        // 500 is default
+        50: $gipi-common-gray-50,
+        100: $gipi-common-gray-100,
+        200: $gipi-common-gray-200,
+        300: $gipi-common-gray-300,
+        400: $gipi-common-gray-400,
+        500: $gipi-common-gray-500,
+        600: $gipi-common-gray-600,
+        700: $gipi-common-gray-700,
+        800: $gipi-common-gray-800,
+        900: $gipi-common-gray-900
     ),
+    pastels: (
+        // No default color
+        primary: $gipi-common-pastels-primary,
+        secondary: $gipi-common-pastels-secondary,
+        success: $gipi-common-pastels-success,
+        info: $gipi-common-pastels-info,
+        warning: $gipi-common-pastels-warning,
+        danger: $gipi-common-pastels-danger
+    )
 );
 
-//
 @function gipi-colors($color, $tone) {
     @if map-has-key($gipi-palette-common, $color) {
         $lColor: map-get($gipi-palette-common, $color);

package/assets/styles/styles.scss

@@ -1,5 +1,5 @@
-@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");
-@import "~@angular/material/theming";
+@import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
+@import '~@angular/material/theming';
 
 @import './colors.scss';
 @import './variable.scss';
@@ -13,7 +13,9 @@ $gipi-danger: mat-palette($gipi-palette-danger, 500, 500);
 $gipi-theme: mat-light-theme($gipi-primary, $gipi-accent, $gipi-danger);
 @include angular-material-theme($gipi-theme);
 // Font
-$gipi-typography : mat-typography-config($font-family: "'Nunito', sans-serif");
+$gipi-typography: mat-typography-config(
+    $font-family: "'Nunito', sans-serif"
+);
 @include angular-material-typography($gipi-typography);
 
 :root,
@@ -37,10 +39,14 @@ body {
     font-size: 1.3rem;
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+input[type='search']::-webkit-search-cancel-button {
     display: none !important;
 }
 
+.mattooltip-line-break {
+    white-space: pre-wrap;
+}
+
 .select-input-search {
     .mat-form-field-wrapper {
         margin-left: 10px !important;
@@ -146,4 +152,47 @@ mat-icon {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-}
+}
+
+/** DatetimePicker */
+$gipi-mat-datetime-picker-selected-today-box-shadow-width: 1px;
+
+.gipi-mat-datetime-picker-calendar-body-cell-content {
+    &.gipi-mat-datetime-picker-calendar-body-selected {
+        background-color: $gipi-primary-500;
+        color: $gipi-common-white-100;
+    }
+
+    &.gipi-mat-datetime-picker-calendar-body-disabled > .gipi-mat-datetime-picker-calendar-body-selected {
+        background-color: rgba($gipi-primary-500, 0.4);
+    }
+
+    &.gipi-mat-datetime-picker-calendar-body-today {
+        &:not(.gipi-mat-datetime-picker-calendar-body-selected) {
+            border-color: $gipi-primary-500;
+        }
+
+        // &.gipi-mat-datetime-picker-calendar-body-selected {
+        //     box-shadow: inset 0 0 0 $gipi-mat-datetime-picker-selected-today-box-shadow-width
+        //         mat-color($gipi-primary-500, default-contrast);
+        // }
+    }
+}
+
+.gipi-mat-datetime-picker-clock-center {
+    background-color: $gipi-primary-500;
+}
+
+.gipi-mat-datetime-picker-clock-hand {
+    background-color: $gipi-primary-500;
+
+    &::before {
+        background-color: $gipi-primary-500;
+    }
+}
+
+.gipi-mat-datetime-picker-clock-cell {
+    &.gipi-mat-datetime-picker-clock-cell-selected {
+        background-color: lighten($gipi-primary-500, 5);
+    }
+}