FE-853: Label component (#34)

src/app/button-toggle/_button-toggle-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin mat-button-toggle-theme($theme) {
+@mixin dsh-button-toggle-theme($theme) {
     $primary: map-get($theme, primary);
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);

src/app/sections/inputs/inputs.component.html

@@ -14,5 +14,14 @@
             <mat-label>Сумма платежа</mat-label>
             <input matInput formControlName="sum" [textMask]="currencyMask" placeholder="0, 00" />
         </mat-form-field>
+        <dsh-status>Подтвержден</dsh-status>
+        <dsh-status color="success">Подтвержден</dsh-status>
+        <dsh-status color="pending">Подтвержден</dsh-status>
+        <dsh-status color="warn">Подтвержден</dsh-status>
+        <div>
+            <dsh-status color="success">Подтвержден</dsh-status>
+            <dsh-status color="warn"></dsh-status>
+            <dsh-status color="pending">Подтвержден</dsh-status>
+        </div>
     </dsh-card-content>
 </dsh-card>

src/app/sections/inputs/inputs.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { MatFormFieldModule, MatInputModule } from '@angular/material';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { InputsComponent } from './inputs.component';
-import { FormControlsModule } from '../../form-controls/form-controls.module';
-import { LayoutModule } from 'src/app/layout';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormControlsModule } from '../../form-controls';
+import { LayoutModule } from '../../layout';
+import { StatusModule } from '../../status';
 
 @NgModule({
     imports: [
@@ -15,7 +16,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         MatInputModule,
         FormControlsModule,
         LayoutModule,
-        FlexLayoutModule
+        FlexLayoutModule,
+        StatusModule
     ],
     declarations: [InputsComponent]
 })

src/app/status/_status-theme.scss

@@ -0,0 +1,49 @@
+@import '~@angular/material/theming';
+
+@mixin dsh-status-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $text: map-get($foreground, text);
+
+    $success-base: map-get($theme, success-base);
+    $pending-base: map-get($theme, pending-base);
+    $warn-base: map-get($theme, warn-base);
+
+    .dsh-status {
+        color: $text;
+
+        .dsh-status-icon {
+            background-color: $text;
+        }
+
+        &[color='success'] {
+            color: $success-base;
+
+            .dsh-status-icon {
+                background-color: $success-base;
+            }
+        }
+
+        &[color='pending'] {
+            color: $pending-base;
+
+            .dsh-status-icon {
+                background-color: $pending-base;
+            }
+        }
+
+        &[color='warn'] {
+            color: $warn-base;
+
+            .dsh-status-icon {
+                background-color: $warn-base;
+            }
+        }
+    }
+}
+
+@mixin dsh-status-typography($config) {
+    .dsh-status {
+        @include mat-typography-level-to-styles($config, body-1);
+    }
+}

src/app/status/index.ts

@@ -0,0 +1 @@
+export * from './status.module';

src/app/status/status.component.html

@@ -0,0 +1 @@
+<span class="dsh-status-icon"></span>&nbsp;<ng-content></ng-content>

src/app/status/status.component.scss

@@ -0,0 +1,14 @@
+$size: 10px;
+
+:host {
+    display: inline-block;
+}
+
+.dsh-status {
+    &-icon {
+        display: inline-block;
+        border-radius: 50%;
+        width: $size;
+        height: $size;
+    }
+}

src/app/status/status.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, HostBinding } from '@angular/core';
+
+export enum Color {
+    success = 'success',
+    pending = 'pending',
+    warn = 'warn'
+}
+
+@Component({
+    selector: 'dsh-status',
+    templateUrl: 'status.component.html',
+    styleUrls: ['status.component.scss']
+})
+export class StatusComponent {
+    @Input()
+    color: Color;
+
+    @HostBinding(`class.dsh-status`) baseClass = true;
+}

src/app/status/status.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { StatusComponent } from './status.component';
+
+@NgModule({
+    imports: [CommonModule],
+    declarations: [StatusComponent],
+    entryComponents: [StatusComponent],
+    exports: [StatusComponent]
+})
+export class StatusModule {}

src/styles/_palette.scss

@@ -77,6 +77,74 @@ $dsh-palegreen: (
     )
 );
 
+// base 400
+$dsh-success: (
+    50: #e7f8eb,
+    100: #c5ecce,
+    200: #9fe0af,
+    300: #75d58f,
+    400: #51cb76,
+    500: #25c15c,
+    600: #1ab152,
+    700: #059e46,
+    800: #008d3b,
+    900: #006d27,
+    A100: #cdffd7,
+    A200: #9affae,
+    A400: #67ff85,
+    A700: #4dff71,
+    contrast: (
+        50: $dark-text,
+        100: $dark-text,
+        200: $dark-text,
+        300: $dark-text,
+        400: $dark-text,
+        500: $dark-text,
+        600: $dark-text,
+        700: $light-text,
+        800: $light-text,
+        900: $light-text,
+        A100: $dark-text,
+        A200: $dark-text,
+        A400: $dark-text,
+        A700: $dark-text
+    )
+);
+
+// base 800
+$dsh-pending: (
+    50: #fff9e6,
+    100: #ffedc0,
+    200: #ffe39a,
+    300: #ffd976,
+    400: #ffcf63,
+    500: #ffc85d,
+    600: #ffbb58,
+    700: #ffaa54,
+    800: #fc9b51,
+    900: #f5824d,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #ffefdb,
+    A700: #ffe4c2,
+    contrast: (
+        50: $dark-text,
+        100: $dark-text,
+        200: $dark-text,
+        300: $dark-text,
+        400: $dark-text,
+        500: $dark-text,
+        600: $dark-text,
+        700: $dark-text,
+        800: $dark-text,
+        900: $dark-text,
+        A100: $dark-text,
+        A200: $dark-text,
+        A400: $dark-text,
+        A700: $dark-text
+    )
+);
+
 // base 300
 $dsh-warn: (
     50: #ffecef,

src/styles/_typography.scss

@@ -2,11 +2,13 @@
 @import '../app/button/button-theme';
 @import '../app/button-toggle/button-toggle-theme';
 @import '../app/state-nav/state-nav-theme';
+@import '../app/status/status-theme';
 
 @mixin dsh-typography($config) {
     @include dsh-button-typography($config);
     @include dsh-state-nav-typography($config);
     @include dsh-button-toggle-typography($config);
+    @include dsh-status-typography($config);
 }
 
 @function dsh-typography-config(

src/themes/dark.scss

@@ -44,13 +44,21 @@ $foreground: (
 );
 
 $theme: (
-    name: 'dark',
     primary: mat-palette($dsh-slateblue),
     accent: mat-palette($dsh-palegreen),
     warn: mat-palette($dsh-warn),
     is-dark: true,
     foreground: $foreground,
-    background: $background
+    background: $background,
+    /*
+     * Custom
+     *
+ */ name: 'dark',
+    success: mat-palette($dsh-success),
+    pending: mat-palette($dsh-pending),
+    success-base: mat-color(mat-palette($dsh-success), 400),
+    pending-base: mat-color(mat-palette($dsh-pending), 800),
+    warn-base: mat-color(mat-palette($dsh-warn), 300)
 );
 
 @include dsh-theme($theme);

src/themes/light.scss

@@ -16,12 +16,14 @@ $background: (
     disabled-button-toggle: map_get($mat-grey, 200),
     unselected-chip: map_get($mat-grey, 300),
     disabled-list-option: map_get($mat-grey, 200),
-    /* 
-        Overrides 
-    */ hover: map_get($dsh-gray, 200),
     /*
-       Custom
-    */ tooltip-shadow: 0 0 8px rgba(black, 0.2),
+     * Overrides
+     *
+ */ hover: map_get($dsh-gray, 200),
+    /*
+     * Custom
+     *
+ */ tooltip-shadow: 0 0 8px rgba(black, 0.2),
     tooltip-line-color: rgba(black, 0.1)
 );
 
@@ -39,26 +41,36 @@ $foreground: (
     icons: rgba(#000, 0.54),
     slider-off: rgba(#000, 0.26),
     slider-off-active: rgba(#000, 0.38),
-    /* 
-        Overrides 
-    */ text: #475166,
+    /*
+     * Overrides
+     *
+ */ text: #475166,
     slider-min: #475166,
     /*
-        Custom
-    */ axis-tick-color: rgba(black, 0.1),
+     * Custom
+     *
+ */ axis-tick-color: rgba(black, 0.1),
     x-axis-text-color: rgba(black, 0.3),
     y-axis-text-color: rgba(black, 0.5),
     legend-tooltip-date-color: rgba(black, 0.3)
 );
 
 $theme: (
-    name: 'light',
     primary: mat-palette($dsh-slateblue),
     accent: mat-palette($dsh-palegreen),
     warn: mat-palette($dsh-warn),
     is-dark: false,
     foreground: $foreground,
-    background: $background
+    background: $background,
+    /*
+     * Custom
+     *
+ */ name: 'light',
+    success: mat-palette($dsh-success),
+    pending: mat-palette($dsh-pending),
+    success-base: mat-color(mat-palette($dsh-success), 400),
+    pending-base: mat-color(mat-palette($dsh-pending), 800),
+    warn-base: mat-color(mat-palette($dsh-warn), 300)
 );
 
 @include dsh-theme($theme);

src/themes/theme.scss

@@ -10,6 +10,7 @@
 @import '../app/charts/legend-tooltip/legend-tooltip-theme';
 @import '../app/button/button-theme';
 @import '../app/button-toggle/button-toggle-theme';
+@import '../app/status/status-theme';
 
 @mixin dsh-theme($theme) {
     body.#{map-get($theme, name)} {
@@ -23,6 +24,7 @@
         @include dsh-state-nav-theme($theme);
         @include dsh-legend-tooltip-theme($theme);
         @include dsh-button-theme($theme);
-        @include mat-button-toggle-theme($theme);
+        @include dsh-button-toggle-theme($theme);
+        @include dsh-status-theme($theme);
     }
 }