@gipisistemas/ng-core 1.0.67 → 1.0.68

package/assets/styles/colors.scss

@@ -0,0 +1,261 @@
+// Cores provisórias ---------------------------
+$gipi-input-border-provisory: rgba(0, 0, 0, .12);
+$gipi-input-color-provisory: #696969;
+// ---------------------------------------------
+// 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;
+// 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;
+// 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;
+// 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;
+// 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;
+// 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;
+// White
+$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;
+// 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;
+// 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-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,
+    )
+);
+//
+$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,
+    )
+);
+//
+$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,
+    )
+);
+//
+$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,
+    )
+);
+//
+$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,
+    )
+);
+//
+$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,
+    )
+);
+//
+$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,
+    ),
+    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,
+    ),
+);
+
+//
+@function gipi-colors($color, $tone) {
+    @if map-has-key($gipi-palette-common, $color) {
+        $lColor: map-get($gipi-palette-common, $color);
+
+        @if map-has-key($lColor, $tone) {
+            $lTone: map-get($lColor, $tone);
+            @return $lTone;
+        }
+
+        @warn "Unknow tone `#{$tone}` in color";
+    }
+
+    @warn "Unknow color `#{$color}` in palette";
+    @return null;
+}

package/assets/styles/layout-grid.scss

@@ -0,0 +1,146 @@
+@import './variable.scss';
+
+$row-prefix-cls: 'grid-row';
+$col-prefix-cls: 'grid-col';
+$grid-columns: 12;
+$class: '-sm';
+
+// Grid system
+.#{$row-prefix-cls} {
+    display: grid;
+    grid-template-columns: repeat($grid-columns, 1fr);
+    justify-items: stretch;
+    align-content: stretch;
+    justify-content: space-evenly;
+    align-items: stretch;
+    width: 100%;
+
+    &::before,
+    &::after {
+        display: flex;
+    }
+
+    // No wrap of flex
+    &-no-wrap {
+        flex-wrap: nowrap;
+    }
+}
+
+.#{$row-prefix-cls}-start {
+    justify-content: flex-start;
+}
+
+.#{$row-prefix-cls}-center {
+    justify-content: center;
+}
+
+.#{$row-prefix-cls}-end {
+    justify-content: flex-end;
+}
+
+.#{$row-prefix-cls}-space-between {
+    justify-content: space-between;
+}
+
+.#{$row-prefix-cls}-space-around {
+    justify-content: space-around;
+}
+
+.#{$row-prefix-cls}-space-evenly {
+    justify-content: space-evenly;
+}
+
+.#{$row-prefix-cls}-top {
+    align-items: flex-start;
+}
+
+.#{$row-prefix-cls}-middle {
+    align-items: center;
+}
+
+.#{$row-prefix-cls}-bottom {
+    align-items: flex-end;
+}
+
+.#{$col-prefix-cls} {
+    display: block;
+    position: relative;
+    max-width: 100%;
+}
+
+// mixins for grid system
+@mixin loop-grid-columns($index, $class) {
+    @if($index > 0) {
+        .#{$col-prefix-cls}-#{$index} {
+            grid-column: span $index;
+        }
+
+        .#{$col-prefix-cls}#{$class}-#{$index} {
+            grid-column: span $index !important;
+        }
+
+        .#{$col-prefix-cls}#{$class}-push-#{$index} {
+            left: percentage(($index / $grid-columns));
+        }
+
+        .#{$col-prefix-cls}#{$class}-pull-#{$index} {
+            right: percentage(($index / $grid-columns));
+        }
+
+        .#{$col-prefix-cls}#{$class}-offset-#{$index} {
+            margin-left: percentage(($index / $grid-columns));
+        }
+
+        .#{$col-prefix-cls}#{$class}-order-#{$index} {
+            order: $index;
+        }
+
+        @include loop-grid-columns(($index - 1), $class);
+    }
+}
+
+@mixin make-grid($class) {
+    @include loop-grid-columns($grid-columns, $class);
+}
+
+// Small grid
+// Columns, offsets, pushes, and pulls for the small device range, from phones to tablets.
+@media screen and (max-width: ($gipi-screen-xs - 1px)) {
+    $class: '-xs';
+    @include make-grid($class);
+}
+
+// Small grid
+// Columns, offsets, pushes, and pulls for the small device range, from phones to tablets.
+@media screen and (min-width: $gipi-screen-xs) and (max-width: ($gipi-screen-sm - 1px)) {
+    $class: '-sm';
+    @include make-grid($class);
+}
+
+// Medium grid
+// Columns, offsets, pushes, and pulls for the desktop device range.
+@media screen and (min-width: $gipi-screen-sm) and (max-width: ($gipi-screen-md - 1px)) {
+    $class: '-md';
+    @include make-grid($class);
+}
+
+// Large grid
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@media screen and (min-width: $gipi-screen-md) and (max-width: ($gipi-screen-lg - 1px)) {
+    $class: '-lg';
+    @include make-grid($class);
+}
+
+// Extra Large grid
+// Columns, offsets, pushes, and pulls for the full hd device range.
+@media screen and (min-width: $gipi-screen-lg) and (max-width: ($gipi-screen-xl - 1px)) {
+    $class: '-xl';
+    @include make-grid($class);
+}
+
+// Extra Large grid
+// Columns, offsets, pushes, and pulls for the full hd device range.
+@media screen and (min-width: $gipi-screen-xl) {
+    $class: '-xxl';
+    @include make-grid($class);
+}

package/assets/styles/styles.scss

@@ -0,0 +1,149 @@
+@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';
+@import './layout-grid.scss';
+//
+@include mat-core();
+// Colors
+$gipi-primary: mat-palette($gipi-palette-secondary, 500, 500);
+$gipi-accent: mat-palette($gipi-palette-primary, 500, 500);
+$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");
+@include angular-material-typography($gipi-typography);
+
+:root,
+html {
+    font-size: 62.5%;
+}
+
+*,
+*:before,
+*:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    height: 100vh;
+    font-weight: 400;
+    font-size: 1.3rem;
+}
+
+input[type="search"]::-webkit-search-cancel-button {
+    display: none !important;
+}
+
+.select-input-search {
+    .mat-form-field-wrapper {
+        margin-left: 10px !important;
+        margin-right: 10px !important;
+    }
+
+    .mat-form-field-infix {
+        margin-bottom: 5px !important;
+    }
+
+    .mat-input-element {
+        margin-bottom: 5px !important;
+    }
+}
+
+.mat-snack-bar-container {
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+}
+
+.alert {
+    background: $gipi-common-white-100;
+    border-radius: 3px;
+    padding: 2rem;
+    border-left: 5px solid $gipi-common-gray-500;
+    -webkit-box-shadow: -1px 2px 7px -1px rgba(0, 0, 0, 0.27);
+    -moz-box-shadow: -1px 2px 7px -1px rgba(0, 0, 0, 0.27);
+    box-shadow: -1px 2px 7px -1px rgba(0, 0, 0, 0.27);
+
+    mat-icon {
+        height: 3.5rem !important;
+        width: 3.5rem !important;
+        font-size: 3.5rem;
+        margin-bottom: 1px !important;
+    }
+
+    .title {
+        font-size: 1.6rem;
+        color: #606267;
+        line-height: 1.8rem;
+        letter-spacing: 0;
+        font-weight: 600 !important;
+        letter-spacing: -0.5 !important;
+        margin-bottom: 3px;
+    }
+
+    span {
+        font-size: 1.4rem;
+        color: #9ea0a9;
+        line-height: 1.7rem;
+        letter-spacing: 0;
+        font-weight: 400 !important;
+        letter-spacing: -0.5 !important;
+    }
+}
+
+.alert.success {
+    border-color: $gipi-success-500 !important;
+
+    mat-icon {
+        color: $gipi-success-500 !important;
+    }
+}
+
+.alert.error {
+    border-color: $gipi-danger-500 !important;
+
+    mat-icon {
+        color: $gipi-danger-500 !important;
+    }
+}
+
+.alert.warning {
+    border-color: $gipi-warning-500 !important;
+
+    mat-icon {
+        color: $gipi-warning-500 !important;
+    }
+}
+
+.alert.info {
+    border-color: $gipi-info-500 !important;
+
+    mat-icon {
+        color: $gipi-info-500 !important;
+    }
+}
+
+.select-position {
+    margin-top: 28px !important;
+}
+
+.noselect,
+button,
+ul,
+li,
+a,
+mat-icon {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}

package/assets/styles/theme.scss

@@ -0,0 +1,22 @@
+@import '~@angular/material/theming';
+@import "../styles/colors.scss";
+@import "../styles/variable.scss";
+//
+$gipi-primary: mat-palette($gipi-palette-secondary, 500, 500);
+$gipi-accent: mat-palette($gipi-palette-primary, 500, 500);
+$gipi-danger: mat-palette($gipi-palette-danger, 500, 500);
+$gipi-theme: mat-light-theme($gipi-primary, $gipi-accent, $gipi-danger);
+$gipi-typography : mat-typography-config($font-family: "'Nunito', sans-serif");
+//
+@include angular-material-theme($gipi-theme);
+@include angular-material-typography($gipi-typography);
+@include mat-core();
+// @media screen and (max-width: ($gipi-screen-sm - 1px)) {
+//     @include mat-core($gipi-typography-sm);
+// }
+// @media screen and (min-width: $gipi-screen-sm) and (max-width: ($gipi-screen-md - 1px)) {
+//     @include mat-core($gipi-typography-md);
+// }
+// @media screen and (min-width: $gipi-screen-md) {
+//     @include mat-core($gipi-typography-lg);
+// }

package/assets/styles/typography.scss

@@ -0,0 +1,54 @@
+@import '~@angular/material/theming';
+// Usado só por enquanto
+$gipi-typography : mat-typography-config($font-family: "'Nunito', sans-serif");
+// $gipi-typography : mat-typography-config( //Font
+//     $font-family: '"Lato", sans-serif',
+//     $display-4: mat-typography-level(11.2rem, 112px, 300, $letter-spacing: -0.05em),
+//     $display-3: mat-typography-level(5.6rem, 56px, 400, $letter-spacing: -0.02em),
+//     $display-2: mat-typography-level(4.5rem, 48px, 400, $letter-spacing: -0.005em),
+//     $display-1: mat-typography-level(3.4rem, 40px, 400),
+//     $headline: mat-typography-level(2.4rem, 32px, 400),
+//     $title: mat-typography-level(2rem, 32px, 500),
+//     $subheading-2: mat-typography-level(1.6rem, 28px, 400),
+//     $subheading-1: mat-typography-level(1.5rem, 24px, 400),
+//     $body-2: mat-typography-level(1.4rem, 24px, 500),
+//     $body-1: mat-typography-level(1.4rem, 20px, 400),
+//     $caption: mat-typography-level(1.2rem, 20px, 400),
+//     $button: mat-typography-level(1.4rem, 14, 500),
+//     $input: mat-typography-level(inherit, 1.125, 400));
+// $gipi-typography-sm : mat-typography-config( //Font
+//     $font-family: '"Lato", sans-serif',
+//     $display-1: mat-typography-level(5.2rem, 78px, 400),
+//     $headline: mat-typography-level(4rem, 60px, 400), // h1
+//     $title: mat-typography-level(3.2rem, 48px, 400), // h2
+//     $subheading-2: mat-typography-level(2.8rem, 42px, 400), // h3
+//     $subheading-1: mat-typography-level(2.4rem, 36px, 400), // h4
+//     $body-2: mat-typography-level(1.2rem, 18px, 400),
+//     $body-1: mat-typography-level(1.4rem, 21px, 400),
+//     $caption: mat-typography-level(1.2rem, 18px, 400),
+//     $button: mat-typography-level(.8rem, 8px, 400),
+//     $input: mat-typography-level(1.4rem, 1.125, 400));
+// $gipi-typography-md : mat-typography-config( //Font
+//     $font-family: '"Lato", sans-serif',
+//     $display-1: mat-typography-level(5.2rem, 78px, 400),
+//     $headline: mat-typography-level(4rem, 60px, 400), // h1
+//     $title: mat-typography-level(3.2rem, 48px, 400), // h2
+//     $subheading-2: mat-typography-level(2.8rem, 42px, 400), // h3
+//     $subheading-1: mat-typography-level(2.4rem, 36px, 400), // h4
+//     $body-2: mat-typography-level(1.2rem, 18px, 400),
+//     $body-1: mat-typography-level(1.4rem, 21px, 400),
+//     $caption: mat-typography-level(1.2rem, 18px, 400),
+//     $button: mat-typography-level(1.1rem, 11px, 400),
+//     $input: mat-typography-level(1.4rem, 1.125, 400));
+// $gipi-typography-lg : mat-typography-config( //Font
+//     $font-family: '"Lato", sans-serif',
+//     $display-1: mat-typography-level(5.2rem, 78px, 400),
+//     $headline: mat-typography-level(4rem, 60px, 400), // h1
+//     $title: mat-typography-level(3.2rem, 48px, 400), // h2
+//     $subheading-2: mat-typography-level(2.8rem, 42px, 400), // h3
+//     $subheading-1: mat-typography-level(2.4rem, 36px, 400), // h4
+//     $body-2: mat-typography-level(1.2rem, 18px, 400),
+//     $body-1: mat-typography-level(1.4rem, 21px, 400),
+//     $caption: mat-typography-level(1.2rem, 18px, 400),
+//     $button: mat-typography-level(1.4rem, 14px, 400),
+//     $input: mat-typography-level(1.4rem, 1.125, 400));

package/assets/styles/variable.scss

@@ -0,0 +1,41 @@
+// Globals
+$gipi-top-nav-height: 66px;
+$gipi-footer-height: 8px;
+
+// Se alterar o $gipi-top-nav-height e o $gipi-footer-height, tem que alterar aqui tbm.
+// Cálculo é: calc(100vh - $gipi-top-nav-height - $gipi-footer-height);
+$gipi-sidenav-container-height: calc(100vh - 66px - 8px);
+
+$gipi-sidenav-width-large: 248px;
+$gipi-sidenav-width-small: 76px;
+$gipi-sidenav-padding: .8rem 1.2rem;
+
+$gipi-zindex: 1;
+
+// Breakpoints baseados em https://github.com/angular/flex-layout/wiki/Responsive-API
+// Extra small screen / phone
+$gipi-screen-xs: 420px;
+
+// Small screen / tablet
+$gipi-screen-sm: 600px;
+
+// Medium screen / desktop
+$gipi-screen-md: 768px;
+
+// Large screen / wide desktop
+$gipi-screen-lg: 1366px;
+
+// Extra large screen / full hd
+$gipi-screen-xl: 1920px;
+
+// Paddings
+$padding-xs: 8px; // small items
+$padding-sm: 12px; // Form controls and items
+$padding-md: 16px; // small containers and buttons
+$padding-lg: 64px; // containers
+
+// Margins
+$margin-xs: 8px; // small items
+$margin-sm: 12px; // Form controls and items
+$margin-md: 16px; // small containers and buttons
+$margin-lg: 64px; // containers