ngx-wapp-components 1.8.2 → 1.8.3

package/src/styles/_variables.scss

@@ -0,0 +1,674 @@
+.heading1 {
+    font-size: 2.6666666666666665rem; //32px
+    line-height: 3rem; //36px
+    font-weight: bold;
+}
+
+.heading2 {
+    font-size: 2.3333333333333335rem; //28px
+    line-height: 2.6666666666666665rem; //32px
+    font-weight: bold;
+}
+
+.heading3 {
+    font-size: 2rem; //24px
+    line-height: 2.3333333333333335rem; //28px
+    font-weight: bold;
+}
+
+.heading4 {
+    font-size: 1.6666666666666667rem; //20px
+    line-height: 2rem; //24px
+    font-weight: 400;
+}
+
+.heading5 {
+    font-size: 1.5rem; //18px
+    line-height: 1.8333333333333333rem; //22px
+    font-weight: 600;
+}
+
+.heading6 {
+    font-size: 1.3333333333333333rem; //16px
+    line-height: 1.6666666666666667rem; //20px
+    font-weight: 400;
+}
+
+.subtitle1 {
+    font-size: 1.1666666666666667rem; //14px
+    line-height: 1.3333333333333333rem; //16px
+    font-weight: 600;
+}
+
+.subtitle2 {
+    font-size: 1rem; //12px
+    line-height: 1.3333333333333333rem; //16px
+    font-weight: 600;
+}
+
+.body{
+    font-size: 1rem; //12px
+    line-height: 1.3333333333333333rem; //16px 
+    font-weight: 400;
+}
+
+.caption{
+    font-size: 0.6666666666666666rem; //8px
+    line-height: 1rem; //12px
+    font-weight: 400; 
+}
+
+/* VARIABLES */
+$heading1: (
+    font-size: 2.6666666666666665rem, //32px
+    line-height: 3rem, //36px
+    font-weight: bold
+);
+
+$heading2: (
+    font-size: 2.3333333333333335rem, //28px
+    line-height: 2.6666666666666665rem, //32px
+    font-weight: bold
+);
+
+$heading3: (
+    font-size: 2rem, //24px
+    line-height: 2.3333333333333335rem, //28px
+    font-weight: bold
+);
+
+$heading4: (
+    font-size: 1.6666666666666667rem, //20px
+    line-height: 2rem, //24px
+    font-weight: 400
+);
+
+$heading5: (
+    font-size: 1.5rem, //18px
+    line-height: 1.8333333333333333rem, //22px
+    font-weight: 600
+);
+
+$heading6: (
+    font-size: 1.3333333333333333rem, //16px
+    line-height: 1.6666666666666667rem, //20px
+    font-weight: 400
+);
+
+$subtitle1: (
+    font-size: 1.1666666666666667rem, //14px
+    line-height: 1.3333333333333333rem, //16px
+    font-weight: 600
+);
+
+$subtitle2: (
+    font-size: 1rem, //12px
+    line-height: 1.3333333333333333rem, //16px
+    font-weight: 600
+);
+
+$body: (
+    font-size: 1rem, //12px
+    line-height: 1.3333333333333333rem, //16px 
+    font-weight: 400
+); 
+
+$caption: (
+    font-size: 0.6666666666666666rem, //8px
+    line-height: 1rem, //12px
+    font-weight: 400
+);
+
+$primaryColor: #1f5b72 !default;
+$primaryLightColor: #d6f2ff !default;
+$primaryDarkColor: #10485d !default;
+$primaryDarkerColor: #003345 !default;
+$primaryTextColor: #ffffff !default;
+$primary50:#d6f2ff !default;
+$primary100:#b5dced !default;
+$primary200:#95c1d6 !default;
+$primary300:#73a6be !default;
+$primary400:#5991ac !default;
+$primary500:#3c7e9a !default;
+$primary600:#2e6f88 !default;
+$primary700:#1f5b72 !default;
+$primary800:#10485d !default;
+$primary900:#003345 !default;
+
+$highlightBg: #e0f5fc !default;
+$highlightTextColor: $primaryDarkerColor !default;
+
+/* Secondary */
+$secondary50: #d6f2ff;
+$secondary100: #b0e4f7;
+$secondary200: #7bd2f2;
+$secondary300: #44c0ed;
+$secondary400: #00b2eb;
+$secondary500: #00a6e9;
+$secondary600: #0098da;
+$secondary700: #0085c7;
+$secondary800: #0074b4;
+$secondary900: #005593;
+
+/*Tertiary*/
+$tertiary900: #007170;
+$tertiary800: #00959d;
+$tertiary700: #00a9b6;
+$tertiary600: #00bfd1;
+$tertiary500: #00d0e5;
+$tertiary400: #00d8e7;
+$tertiary300: #00e0eb;
+$tertiary200: #72eaf0;
+$tertiary100: #aef2f5;
+$tertiary50: #dffafb;
+
+/*Grey scale*/
+$black: #000000;
+$black958: #0e1013;
+$black928: #17181b;
+$black900: #202124;
+$black868: #282a2d;
+$black846: #2e3134;
+$black800: #3c4043;
+$black700: #5f6368;
+$black600: #80868b;
+$black500: #9aa0a6;
+$black400: #bdc1c6;
+$black300: #dadce0;
+$black200: #e8eaed;
+$black100: #f1f3f4;
+$black50: #f8f9fa;
+$white: #ffffff;
+
+/* Status */
+$statusSuccess1: #00DB5D;
+$statusSuccess2: #46FF9B;
+$statusSuccess3: #B3FFD3;
+$statusWarning1: #EEAE00;
+$statusWarning2: #FFCD46;
+$statusWarning3: #FFECB8;
+$statusError1: #E50000;
+$statusError2: #FF5555;
+$statusError3: #FFBDBD;
+$statusInfo1: #009DFD;
+$statusInfo2: #62C3FF;
+$statusInfo3: #C2E8FF;
+
+/* Texts */
+$text846: #2E3134;
+$text700: #5F6368;
+$text500: #9aa0a6;
+$textWhite: #FFFFFF;
+
+.text846 {
+    color: $text846;
+};
+
+.text700{ 
+    color: $text700;
+};
+
+.text500{ 
+    color: $text500;
+};
+
+.textWhite{ 
+    color: $textWhite;
+};
+
+
+/* Charts */
+$charts900: #003345;
+$charts800: #10485d;
+$charts700: #1f5b72;
+$charts600: #2e6f88;
+$charts500: #3c7e9a;
+$charts400: #5991ac;
+$charts300: #73a6be;
+$charts200: #95c1d6;
+$charts100: #b5dced;
+$charts50: #d6f2ff;
+
+$chartsSecondary600: #0098da; 
+$chartsSecondary400: #00b2eb;
+$chartsSecondary200: #7bd2f2;
+
+/* Optional */
+$darkBlue1: #0020C7;
+$darkBlue2: #4765FF;
+$darkBlue3: #ADBAFF;
+$purple1: #7B00C7;
+$purple2: #B947FF;
+$purple3: #E0ADFF;
+$pink1: #C700B3;
+$pink2: #FF61EF;
+$pink3: #FFADF7;
+$green1: #87C700;
+$green2: #CCFF61;
+$green3: #E5FFAD;
+
+/*Spacing*/
+$spacingXXS: 4px;
+$spacingXSM: 6px;
+$spacingXS: 8px;
+$spacingS: 12px;
+$spacingM: 16px;
+$spacingL: 20px;
+$spacingXL: 24px;
+$spacingXXL: 28px;
+$spacingXXXL: 32px;
+$spacing4XL: 36px;
+$spacing5XL: 40px;
+
+$spacingZero: 0px;
+$spacingNone: none;
+
+/*Spacing*/
+.spacingXXS {
+    padding: 4px;
+}
+
+.spacingXSM {
+    padding: 6px;
+}
+
+.spacingXS {
+    padding: 8px;
+}
+
+.spacingS {
+    padding: 12px;
+}
+
+.spacingM {
+    padding: 16px;
+}
+
+.spacingL {
+    padding: 20px;
+}
+
+.spacingXL {
+    padding: 24px;
+}
+
+.spacingXXL {
+    padding: 28px;
+}
+
+.spacingXXXL {
+    padding: 32px;
+}
+
+$borderRadius: 8px;
+$checkboxBorderRadius: 4px;
+$borderWidth: 1px;
+$boxShadowContainer: 0px 4px 8px 0px rgba($black,0.1);
+$paginatorBackgroundHoverColor: #f1f5f9;
+$tableBorderWidth: 0 0 1px 0;
+$tableBorder: 1px;
+$borderNone: none;
+
+.focus {
+    box-shadow: 0px 0px 8px 0px rgba($secondary500, 0.50);
+}
+
+.hover {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $secondary400;
+}
+
+.input-generic-valid {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $statusSuccess3;
+}
+
+.input-generic-valid-focus {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $statusSuccess3 !important;
+    box-shadow: 0px 0px 8px 0px rgba($statusSuccess2, 0.50) !important;
+    padding-left: 16px;
+}
+
+.input-generic-warning {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $statusWarning3 !important;
+}
+
+.input-generic-warning-focus {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $statusWarning3 !important;
+    box-shadow: 0px 0px 8px 0px rgba($statusWarning2, 0.50) !important;
+    padding-left: 16px;
+}
+
+.input-generic-error-focus {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $statusError3 !important;
+    box-shadow: 0px 0px 8px 0px rgba($statusError2, 0.50) !important; 
+    padding-left: 16px;
+}
+
+.input-generic-error {
+    border-radius: $borderRadius;
+    border: $borderWidth solid $statusError3;
+}
+
+.toggle-small-typography {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+}
+
+/*BUTTONS*/
+
+//Small
+.w-button-small-label-text-typography{
+    @extend .body;
+}
+
+.w-button-small-text-label-text-typography{
+    @extend .subtitle2;
+}
+
+.w-button-small-tertiary-label-text{
+    @extend .w-button-small-label-text-typography;
+    color: $text846;
+}
+
+.w-button-small-text-label-text{
+    @extend .w-button-small-text-label-text-typography;
+    color: $text846;
+}
+
+.w-button-small-icon-text{
+    font-size: 12px;//16px
+}
+
+.w-control-button-small-label-text{
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+}
+
+.w-control-button-x-small-icon-text{
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.w-control-button-small-icon-text{
+    font-size: 8px;
+    font-weight: bold;
+}
+
+//Medium
+.w-button-medium-label-text-typography{
+    font-size: 16px;
+    font-weight: normal;//bold
+    line-height: 16px;
+}
+
+.w-button-medium-tertiary-label-text{
+    @extend .w-button-medium-label-text-typography;
+    color: $text846;
+}
+
+.w-button-medium-icon-text{
+    font-size: 16px;;
+}
+
+.w-control-button-medium-label-text{
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 16px;
+}
+
+.w-control-button-medium-icon-text{
+    font-size: 12px;
+    font-weight: bold;
+}
+
+//Large
+.w-button-large-label-text-typography{
+    font-size: 20px;
+    font-weight: normal;//bold
+    line-height: 24px;
+}
+
+.w-button-large-tertiary-label-text{
+    @extend .w-button-large-label-text-typography;
+    color: $text846;
+}
+
+.w-button-x-small-label-text{
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 10px;
+}
+
+.w-button-small-only-label-text{ //subtitle2
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+}
+
+.w-button-large-icon-text{
+    font-size: 24px;
+}
+
+/*VIEW*/
+
+.w-view-small-label-text-typography{
+    @extend .subtitle2; 
+}
+
+.w-view-small-label-text{
+    @extend .w-view-small-label-text-typography;
+    color: $text846;
+}
+
+.w-view-small-value-text-typography{
+    @extend .body; 
+}
+
+.w-view-small-value-text{
+    @extend .w-view-small-value-text-typography;
+    color: $text846;
+}
+
+/*INPUT*/
+
+.w-input-no-label-height{
+    height: 36px;
+}
+
+.w-input-disabled{
+    background-color: $black100;
+    border-color: $black200;
+    opacity: 1;
+}
+
+//Small
+.w-input-small-label-text-typography{
+    @extend .subtitle2;
+}
+
+.w-input-small-label-text{
+    @extend .w-input-small-label-text-typography;
+    color: $text846; 
+}
+
+.w-input-small-label-disabled{ 
+    @extend .w-input-small-label-text; 
+    color: $text500; 
+}
+
+.w-input-small-label-text-content{
+    padding: $spacingS $spacingXS $spacingXS $spacingZero;
+    margin: $spacingZero; 
+}
+
+.w-input-small-label-text-content-no-top{
+    padding-top: $spacingZero; 
+}
+
+.w-input-small-placeholder-text-typography{
+    @extend .body;
+}
+
+.w-input-small-placeholder-text{
+    @extend .w-input-small-placeholder-text-typography;
+    color: $text846;
+}
+
+.w-input-small-placeholder-text-only-color{
+    color: $text846;
+}
+
+.w-input-small-placeholder-text-disabled{
+    @extend .w-input-small-placeholder-text-typography;
+    color: $text700;
+}
+
+.w-input-small-placeholder-text-disabled-only-color{
+    color: $text700;
+}
+
+.w-input-small-text-icon{
+    color: $text846;
+}
+
+.w-input-small-select-options-text{
+    @extend .body;
+    color: $text846;
+}
+
+//Medium
+.w-input-medium-label-text-typography{
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 16px;
+}
+
+.w-input-medium-label-text{
+    @extend .w-input-medium-label-text-typography;
+    color: $text846;
+}
+
+.w-input-medium-label-disabled{
+    @extend .w-input-medium-label-text; 
+    color: $text500; 
+}
+
+.w-input-medium-placeholder-text-typography{
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.w-input-medium-placeholder-text{
+    @extend .w-input-medium-placeholder-text-typography;
+    color: $text846;
+}
+
+.w-input-medium-placeholder-text-only-color{
+    color: $text846;
+}
+
+.w-input-medium-placeholder-text-disabled{
+    @extend .w-input-medium-placeholder-text-typography;
+    color: $text700;
+}
+
+.w-input-medium-placeholder-text-disabled-only-color{
+    color: $text700;
+}
+
+.w-input-medium-text-icon{
+    color: $text846;
+}
+
+.w-input-medium-select-options-text{
+    font-size: 16px;
+    font-weight: 400;//600;
+    line-height: 24px;
+    color: $text846;
+}
+
+//Alert Messages
+.w-input-success-alert-text {
+    @extend .caption; 
+    color: $statusSuccess1;
+    padding: $spacingXS $spacingXS $spacingZero $spacingXS;
+    margin-top: $spacingZero;
+}
+
+.w-input-warning-alert-text {
+    @extend .caption; 
+    color: $statusWarning1;
+    padding: $spacingXS $spacingXS $spacingZero $spacingXS;
+    margin-top: $spacingZero;
+}
+
+.w-input-error-alert-text {
+    @extend .caption; 
+    color: $statusError1;
+    padding: $spacingXS $spacingXS $spacingZero $spacingXS;
+    margin-top: $spacingZero;
+}
+
+.w-input-alert-message-height {
+    height: 32px;
+}
+
+//SIDEBAR
+.w-sidebar-title-text{
+    @extend .subtitle1;
+    color: $text846;
+}
+
+//PANEL
+.w-panel-title-text{
+    @extend .subtitle1;
+    color: $text846;
+}
+
+.w-panel-subtitle-text{
+    @extend .subtitle2;
+    color: $text846;
+}
+
+.w-panel-content{
+    @extend .body;
+    color: $text700;
+}
+
+//TABS
+.w-tab-text{
+    @extend .subtitle1;
+    color: $text846;
+}
+
+//CHIP
+.w-chip-text{
+    @extend .body;
+    color: $text846;
+}
+
+//BADGE
+.w-badge-text{
+    font-size: 8px;
+    font-weight: 700;
+    line-height: 8px;
+}
+
+/* TABLES */
+.w-table-th-text{
+    @extend .subtitle2;
+    color: $text846; 
+}
+
+.w-table-td-text{
+    @extend .body;
+    color: $text700;
+}

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}