FE-716: Layout modules (#3)

.prettierrc

@@ -4,5 +4,11 @@
     "useTabs": false,
     "tabWidth": 4,
     "semi": true,
-    "bracketSpacing": true
+    "bracketSpacing": true,
+    "overrides": [
+        {
+            "files": "*.svg",
+            "options": { "parser": "html" }
+        }
+    ]
 }

package.json

@@ -8,8 +8,8 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "prettier": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc}\" --write",
-    "check": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc}\" --list-different"
+    "prettier": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc,svg}\" --write",
+    "check": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc,svg}\" --list-different"
   },
   "private": true,
   "dependencies": {

src/app/actionbar/actionbar.component.html

@@ -0,0 +1,5 @@
+<div class="actionbar" fxLayout>
+    <div class="circle">
+        <div class="wrapper"><mat-icon class="user-icon" svgIcon="user"></mat-icon></div>
+    </div>
+</div>

src/app/actionbar/actionbar.component.scss

@@ -0,0 +1,36 @@
+@import '../../styles/variables.scss';
+
+$circle-color: $white;
+$circle-shadow: $turquoise-shadow;
+
+.actionbar {
+    height: $toolbar-item-height;
+}
+
+.circle {
+    border: none;
+    outline: none;
+    background-color: $circle-color;
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    text-align: center;
+    transition: 0.2s;
+    box-shadow: $circle-shadow;
+    &:active {
+        transform: scale(0.9);
+    }
+    &:hover {
+        cursor: pointer;
+        background-color: lighten($circle-color, 10%);
+    }
+}
+
+.wrapper {
+    padding: 12px 0;
+}
+
+.user-icon {
+    height: 16px;
+    width: 17px;
+}

src/app/actionbar/actionbar.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dsh-actionbar',
+    templateUrl: './actionbar.component.html',
+    styleUrls: ['./actionbar.component.scss']
+})
+export class ActionbarComponent {}

src/app/actionbar/actionbar.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ActionbarComponent } from './actionbar.component';
+
+@NgModule({
+    declarations: [ActionbarComponent],
+    imports: [MatIconModule],
+    exports: [ActionbarComponent]
+})
+export class ActionbarModule {}

src/app/actionbar/index.ts

@@ -0,0 +1,2 @@
+export * from './actionbar.module';
+export * from './actionbar.component';

src/app/app-routing.module.ts

@@ -1,7 +1,29 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+import { MainComponent } from './main';
+import { PageNotFoundComponent } from './page-not-found';
+import { PartyMngComponent } from './party-mgt';
+import { DetailsComponent } from './details';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: MainComponent
+    },
+    {
+        path: 'organization/create',
+        component: PartyMngComponent
+    },
+    {
+        path: 'details',
+        component: DetailsComponent
+    },
+    {
+        path: '**',
+        component: PageNotFoundComponent
+    }
+];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,64 +1 @@
-<div fxLayout="column" fxLayoutGap="20px">
-    <form fxLayout="column" fxLayoutGap="5px" [formGroup]="form">
-        <mat-form-field>
-            <mat-label>Название магазина</mat-label>
-            <input id="shopName" type="text" formControlName="shopName" required matInput />
-            <mat-error *ngIf="form.controls.shopName.invalid">Введите коректное значение</mat-error>
-        </mat-form-field>
-        <div fxLayout fxLayoutGap="10px">
-            <mat-form-field fxFlex>
-                <mat-label>Категория магазина</mat-label>
-                <mat-select formControlName="category">
-                    <mat-option value="One">One</mat-option>
-                    <mat-option value="Two">Two</mat-option>
-                    <mat-option value="Three">Three</mat-option>
-                </mat-select>
-                <mat-hint>Hint</mat-hint>
-            </mat-form-field>
-            <mat-form-field fxFlex>
-                <mat-label>Дата создания</mat-label>
-                <input
-                    id="creationDate"
-                    formControlName="creationDate"
-                    type="text"
-                    matInput
-                    [matDatepicker]="picker"
-                    placeholder="дд.мм.гггг"
-                />
-                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                <mat-datepicker #picker></mat-datepicker>
-            </mat-form-field>
-        </div>
-        <mat-form-field>
-            <mat-label>Документы</mat-label>
-            <input
-                id="document"
-                type="text"
-                formControlName="document"
-                placeholder="Выбирите значение"
-                aria-label="Number"
-                matInput
-                [matAutocomplete]="auto"
-            />
-            <mat-autocomplete #auto="matAutocomplete">
-                <mat-option value="One">One</mat-option>
-                <mat-option value="Two">Two</mat-option>
-                <mat-option value="Three">Three</mat-option>
-            </mat-autocomplete>
-        </mat-form-field>
-        <mat-form-field>
-            <mat-label>Комментарий</mat-label>
-            <textarea id="comment" type="textarea" formControlName="comment" matInput rows="5"></textarea>
-            <mat-hint>Hint</mat-hint>
-        </mat-form-field>
-        <section fxLayout="column" fxLayoutGap="15px">
-            <mat-checkbox id="checked" formControlName="checked" color="primary">Check me!</mat-checkbox>
-            <mat-radio-group id="radio" formControlName="radio" fxLayout fxLayoutGap="15px">
-                <mat-radio-button color="primary" value="1">Option 1</mat-radio-button>
-                <mat-radio-button color="primary" value="2">Option 2</mat-radio-button>
-            </mat-radio-group>
-            <mat-slide-toggle id="slided" formControlName="slided" color="primary">Slide me!</mat-slide-toggle>
-        </section>
-    </form>
-    <button mat-raised-button color="accent">Сохранить</button>
-</div>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,25 +1,13 @@
 import { Component } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { ActivatedRoute } from '@angular/router';
+
+import { IconRegistryService, IconName } from './icon-registry.service';
 
 @Component({
     selector: 'dsh-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    templateUrl: './app.component.html'
 })
 export class AppComponent {
-    form: FormGroup;
-
-    constructor(private fb: FormBuilder, private router: ActivatedRoute) {
-        this.form = this.fb.group({
-            shopName: ['', Validators.required],
-            category: [''],
-            creationDate: [''],
-            document: ['One'],
-            comment: [''],
-            checked: [false],
-            radio: [''],
-            slided: [false]
-        });
+    constructor(private iconRegistryService: IconRegistryService) {
+        this.iconRegistryService.register([IconName.logo, IconName.user]);
     }
 }

src/app/app.module.ts

@@ -1,12 +1,14 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { UiKitModule } from './ui-kit/ui-kit.module';
+import { MainModule } from './main';
+import { PartyMngModule } from './party-mgt';
+import { DetailsModule } from './details';
+import { PageNotFoundModule } from './page-not-found';
+import { IconRegistryService } from './icon-registry.service';
 
 @NgModule({
     declarations: [AppComponent],
@@ -14,11 +16,12 @@ import { UiKitModule } from './ui-kit/ui-kit.module';
         BrowserModule,
         BrowserAnimationsModule,
         AppRoutingModule,
-        FormsModule,
-        ReactiveFormsModule,
-        FlexLayoutModule,
-        UiKitModule
+        MainModule,
+        PartyMngModule,
+        DetailsModule,
+        PageNotFoundModule
     ],
+    providers: [IconRegistryService],
     bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/brand/brand.component.html

@@ -0,0 +1 @@
+<div class="brand"><mat-icon [routerLink]="navigationLink" svgIcon="logo"></mat-icon></div>

src/app/brand/brand.component.scss

@@ -0,0 +1,12 @@
+@import '../../styles/variables.scss';
+
+.brand {
+    height: $toolbar-item-height;
+}
+
+mat-icon {
+    height: 41px;
+    width: 81px;
+    cursor: pointer;
+    outline: none;
+}

src/app/brand/brand.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'dsh-brand',
+    templateUrl: './brand.component.html',
+    styleUrls: ['./brand.component.scss']
+})
+export class BrandComponent {
+    @Input() navigationLink = '/';
+}

src/app/brand/brand.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+
+import { BrandComponent } from './brand.component';
+
+@NgModule({
+    declarations: [BrandComponent],
+    imports: [RouterModule, MatIconModule, HttpClientModule],
+    exports: [BrandComponent]
+})
+export class BrandModule {}

src/app/brand/index.ts

@@ -0,0 +1,2 @@
+export * from './brand.module';
+export * from './brand.component';

src/app/details/details.component.html

@@ -0,0 +1,11 @@
+<mat-sidenav-container autosize>
+    <mat-sidenav class="side-menu" opened mode="side">
+        <div class="brand" fxLayout fxLayoutAlign="start center">
+            <dsh-brand [fxFlexOffset]="toolbarOffset"></dsh-brand>
+        </div>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <dsh-toolbar> <dsh-actionbar fxLayout fxLayoutAlign="end"></dsh-actionbar> </dsh-toolbar>
+        <div class="content">Content</div>
+    </mat-sidenav-content>
+</mat-sidenav-container>

src/app/details/details.component.scss

@@ -0,0 +1,19 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+mat-sidenav-container {
+    @include container($turquoise);
+    @include fullscreen();
+}
+
+.content {
+    @include content($content-padding, $content-max-width);
+}
+
+.brand {
+    height: $toolbar-height;
+}
+
+.side-menu {
+    width: 220px;
+}

src/app/details/details.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { toolbarOffset } from '../layout-settings';
+
+@Component({
+    selector: 'dsh-details',
+    templateUrl: './details.component.html',
+    styleUrls: ['./details.component.scss']
+})
+export class DetailsComponent {
+    toolbarOffset = toolbarOffset;
+}

src/app/details/details.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { DetailsComponent } from './details.component';
+import { BrandModule } from '../brand';
+import { ToolbarModule } from '../toolbar';
+import { ActionbarModule } from '../actionbar';
+
+@NgModule({
+    declarations: [DetailsComponent],
+    imports: [FlexLayoutModule, MatSidenavModule, BrandModule, ToolbarModule, ActionbarModule]
+})
+export class DetailsModule {}

src/app/details/index.ts

@@ -0,0 +1,2 @@
+export * from './details.module';
+export * from './details.component';

src/app/form-controls/form-controls.module.ts

@@ -4,13 +4,13 @@ import {
     MatSelectModule,
     MatCheckboxModule,
     MatDatepickerModule,
-    MatButtonModule,
     MatAutocompleteModule,
     MatRadioModule,
     MatSlideToggleModule,
+    MAT_DATE_FORMATS,
     DateAdapter,
     MAT_DATE_LOCALE,
-    MAT_DATE_FORMATS,
+    MAT_RIPPLE_GLOBAL_OPTIONS,
     MAT_FORM_FIELD_DEFAULT_OPTIONS
 } from '@angular/material';
 import {
@@ -18,7 +18,6 @@ import {
     MAT_MOMENT_DATE_FORMATS,
     MomentDateAdapter
 } from '@angular/material-moment-adapter';
-import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
 
 @NgModule({
     imports: [
@@ -28,8 +27,7 @@ import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
         MatDatepickerModule,
         MatAutocompleteModule,
         MatRadioModule,
-        MatSlideToggleModule,
-        MatButtonModule
+        MatSlideToggleModule
     ],
     exports: [
         MatInputModule,
@@ -38,8 +36,7 @@ import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
         MatDatepickerModule,
         MatAutocompleteModule,
         MatRadioModule,
-        MatSlideToggleModule,
-        MatButtonModule
+        MatSlideToggleModule
     ],
     providers: [
         { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
@@ -50,4 +47,4 @@ import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
         { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
     ]
 })
-export class UiKitModule {}
+export class FormControlsModule {}

src/app/form-controls/index.ts

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

src/app/icon-registry.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
+
+export enum IconName {
+    logo = 'logo',
+    user = 'user'
+}
+
+@Injectable()
+export class IconRegistryService {
+    constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {}
+
+    register(names: IconName[]) {
+        names.forEach(name =>
+            this.matIconRegistry.addSvgIcon(
+                name,
+                this.domSanitizer.bypassSecurityTrustResourceUrl(`../assets/${name}.svg`)
+            )
+        );
+    }
+}

src/app/layout-settings.ts

@@ -0,0 +1 @@
+export const toolbarOffset = '35px';

src/app/layout/card/card-content/card-content.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/layout/card/card-content/card-content.component.scss

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

src/app/layout/card/card-content/card-content.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dsh-card-content',
+    templateUrl: './card-content.component.html',
+    styleUrls: ['./card-content.component.scss']
+})
+export class CardContentComponent {}

src/app/layout/card/card-header/card-header.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/layout/card/card-header/card-header.component.scss

@@ -0,0 +1,6 @@
+@import '../../../../styles/variables.scss';
+
+:host {
+    display: block;
+    margin-bottom: $card-header-margin;
+}

src/app/layout/card/card-header/card-header.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dsh-card-header',
+    templateUrl: './card-header.component.html',
+    styleUrls: ['./card-header.component.scss']
+})
+export class CardHeaderComponent {}

src/app/layout/card/card-header/card-title/card-title.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/layout/card/card-header/card-title/card-title.component.scss

@@ -0,0 +1,3 @@
+:host {
+    font-size: 18px;
+}

src/app/layout/card/card-header/card-title/card-title.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dsh-card-title',
+    templateUrl: './card-title.component.html',
+    styleUrls: ['./card-title.component.scss']
+})
+export class CardTitleComponent {
+    constructor() {}
+}

src/app/layout/card/card.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/layout/card/card.component.scss

@@ -0,0 +1,9 @@
+@import '../../../styles/variables.scss';
+
+:host {
+    display: block;
+    background-color: $card-background-color;
+    padding: $card-padding;
+    border-radius: $card-border-radius;
+    box-shadow: $card-shadow
+}

src/app/layout/card/card.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dsh-card',
+    templateUrl: './card.component.html',
+    styleUrls: ['./card.component.scss']
+})
+export class CardComponent {}

src/app/layout/card/card.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+
+import { CardComponent } from './card.component';
+import { CardContentComponent } from './card-content/card-content.component';
+import { CardHeaderComponent } from './card-header/card-header.component';
+import { CardTitleComponent } from './card-header/card-title/card-title.component';
+
+@NgModule({
+    declarations: [CardComponent, CardContentComponent, CardHeaderComponent, CardTitleComponent],
+    exports: [CardComponent, CardContentComponent, CardHeaderComponent, CardTitleComponent],
+    providers: []
+})
+export class CardModule {}

src/app/layout/card/index.ts

@@ -0,0 +1,2 @@
+export * from './card.module';
+export * from './card.component';

src/app/layout/index.ts

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

src/app/layout/layout.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { CardModule } from './card';
+
+@NgModule({
+    imports: [CardModule],
+    exports: [CardModule]
+})
+export class LayoutModule {}

src/app/main/index.ts

@@ -0,0 +1,2 @@
+export * from './main.module';
+export * from './main.component';

src/app/main/main.component.html

@@ -0,0 +1,11 @@
+<div class="container">
+    <dsh-toolbar>
+        <div fxLayout>
+            <dsh-brand fxFlex="100px"></dsh-brand>
+            <dsh-actionbar fxFlex="grow" fxLayoutAlign="end"></dsh-actionbar>
+        </div>
+    </dsh-toolbar>
+    <div class="content">
+        <button (click)="create()">Создать организацию</button> <button (click)="details()">Детали</button>
+    </div>
+</div>

src/app/main/main.component.scss

@@ -0,0 +1,11 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+.container {
+    @include container($turquoise);
+    @include fullscreen();
+}
+
+.content {
+    @include content($content-padding, $content-max-width);
+}

src/app/main/main.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'dsh-main',
+    templateUrl: './main.component.html',
+    styleUrls: ['./main.component.scss']
+})
+export class MainComponent {
+    constructor(private router: Router) {}
+
+    create() {
+        this.router.navigate(['organization/create']);
+    }
+
+    details() {
+        this.router.navigate(['details']);
+    }
+}

src/app/main/main.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { MainComponent } from './main.component';
+import { BrandModule } from '../brand';
+import { ToolbarModule } from '../toolbar';
+import { ActionbarModule } from '../actionbar';
+
+@NgModule({
+    declarations: [MainComponent],
+    imports: [FlexLayoutModule, BrandModule, ToolbarModule, ActionbarModule]
+})
+export class MainModule {}

src/app/page-not-found/index.ts

@@ -0,0 +1,2 @@
+export * from './page-not-found.module';
+export * from './page-not-found.component';

src/app/page-not-found/page-not-found.component.html

@@ -0,0 +1,2 @@
+<div>404</div>
+<button (click)="back()">Back</button>

src/app/page-not-found/page-not-found.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'dsh-page-not-found',
+    templateUrl: './page-not-found.component.html'
+})
+export class PageNotFoundComponent {
+    constructor(private router: Router) {}
+
+    back() {
+        this.router.navigate(['']);
+    }
+}

src/app/page-not-found/page-not-found.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+@NgModule({
+    declarations: [PageNotFoundComponent],
+    imports: [RouterModule],
+    exports: [PageNotFoundComponent]
+})
+export class PageNotFoundModule {}

src/app/party-mgt/index.ts

@@ -0,0 +1,2 @@
+export * from './party-mgt.module';
+export * from './party-mgt.component';

src/app/party-mgt/party-mgt.component.html

@@ -0,0 +1,97 @@
+<div class="container">
+    <dsh-toolbar>
+        <div fxLayout>
+            <dsh-brand fxFlex="100px"></dsh-brand>
+            <dsh-actionbar fxFlex="grow" fxLayoutAlign="end"></dsh-actionbar>
+        </div>
+    </dsh-toolbar>
+    <div class="content">
+        <div fxLayout="column" fxLayoutGap="30px">
+            <div class="display-2">Анкета подключения</div>
+            <div fxLayout fxLayoutGap="30px">
+                <dsh-card fxFlex="70">
+                    <dsh-card-header> <dsh-card-title>Контактные данные</dsh-card-title> </dsh-card-header>
+                    <dsh-card-content>
+                        <div fxLayout="column" fxLayoutGap="20px">
+                            <form fxLayout="column" fxLayoutGap="5px" [formGroup]="form">
+                                <mat-form-field>
+                                    <mat-label>Название магазина</mat-label>
+                                    <input id="shopName" type="text" formControlName="shopName" required matInput />
+                                    <mat-error *ngIf="form.controls.shopName.invalid"
+                                        >Введите коректное значение</mat-error
+                                    >
+                                </mat-form-field>
+                                <div fxLayout fxLayoutGap="10px">
+                                    <mat-form-field fxFlex>
+                                        <mat-label>Категория магазина</mat-label>
+                                        <mat-select formControlName="category">
+                                            <mat-option value="One">One</mat-option>
+                                            <mat-option value="Two">Two</mat-option>
+                                            <mat-option value="Three">Three</mat-option>
+                                        </mat-select>
+                                        <mat-hint>Hint</mat-hint>
+                                    </mat-form-field>
+                                    <mat-form-field fxFlex>
+                                        <mat-label>Дата создания</mat-label>
+                                        <input
+                                            id="creationDate"
+                                            formControlName="creationDate"
+                                            type="text"
+                                            matInput
+                                            [matDatepicker]="picker"
+                                            placeholder="дд.мм.гггг"
+                                        />
+                                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                        <mat-datepicker #picker></mat-datepicker>
+                                    </mat-form-field>
+                                </div>
+                                <mat-form-field>
+                                    <mat-label>Документы</mat-label>
+                                    <input
+                                        id="document"
+                                        type="text"
+                                        formControlName="document"
+                                        placeholder="Выбирите значение"
+                                        aria-label="Number"
+                                        matInput
+                                        [matAutocomplete]="auto"
+                                    />
+                                    <mat-autocomplete #auto="matAutocomplete">
+                                        <mat-option value="One">One</mat-option>
+                                        <mat-option value="Two">Two</mat-option>
+                                        <mat-option value="Three">Three</mat-option>
+                                    </mat-autocomplete>
+                                </mat-form-field>
+                                <mat-form-field>
+                                    <mat-label>Комментарий</mat-label>
+                                    <textarea
+                                        id="comment"
+                                        type="textarea"
+                                        formControlName="comment"
+                                        matInput
+                                        rows="5"
+                                    ></textarea>
+                                    <mat-hint>Hint</mat-hint>
+                                </mat-form-field>
+                                <section fxLayout="column" fxLayoutGap="15px">
+                                    <mat-checkbox id="checked" formControlName="checked" color="primary"
+                                        >Check me!</mat-checkbox
+                                    >
+                                    <mat-radio-group id="radio" formControlName="radio" fxLayout fxLayoutGap="15px">
+                                        <mat-radio-button color="primary" value="1">Option 1</mat-radio-button>
+                                        <mat-radio-button color="primary" value="2">Option 2</mat-radio-button>
+                                    </mat-radio-group>
+                                    <mat-slide-toggle id="slided" formControlName="slided" color="primary"
+                                        >Slide me!</mat-slide-toggle
+                                    >
+                                </section>
+                            </form>
+                            <button mat-raised-button color="accent">Сохранить</button>
+                        </div>
+                    </dsh-card-content>
+                </dsh-card>
+                <dsh-card fxFlex="30"> </dsh-card>
+            </div>
+        </div>
+    </div>
+</div>

src/app/party-mgt/party-mgt.component.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+.display-2 {
+    font-size: 24px;
+}
+
+.container {
+    @include container($turquoise);
+}
+
+.content {
+    @include content($content-padding, $content-max-width);
+}

src/app/party-mgt/party-mgt.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+    templateUrl: './party-mgt.component.html',
+    styleUrls: ['./party-mgt.component.scss']
+})
+export class PartyMngComponent {
+    form: FormGroup;
+
+    constructor(private fb: FormBuilder) {
+        this.form = this.fb.group({
+            shopName: ['', Validators.required],
+            category: [''],
+            creationDate: [''],
+            document: ['One'],
+            comment: [''],
+            checked: [false],
+            radio: [''],
+            slided: [false]
+        });
+    }
+}

src/app/party-mgt/party-mgt.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material';
+
+import { PartyMngComponent } from './party-mgt.component';
+import { BrandModule } from '../brand';
+import { ToolbarModule } from '../toolbar';
+import { ActionbarModule } from '../actionbar';
+import { FormControlsModule } from '../form-controls';
+import { LayoutModule } from '../layout';
+
+@NgModule({
+    declarations: [PartyMngComponent],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        MatButtonModule,
+        FlexLayoutModule,
+        FormControlsModule,
+        LayoutModule,
+        BrandModule,
+        ToolbarModule,
+        ActionbarModule
+    ]
+})
+export class PartyMngModule {}

src/app/toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './toolbar.module';
+export * from './toolbar.component';

src/app/toolbar/toolbar.component.html

@@ -0,0 +1,5 @@
+<div class="toolbar" fxLayout fxLayoutAlign="start center">
+    <div [fxFlex]="toolbarOffset"></div>
+    <div fxFlex="grow"><ng-content></ng-content></div>
+    <div [fxFlex]="toolbarOffset"></div>
+</div>

src/app/toolbar/toolbar.component.scss

@@ -0,0 +1,6 @@
+@import '../../styles/variables.scss';
+
+.toolbar {
+    user-select: none;
+    height: $toolbar-height;
+}

src/app/toolbar/toolbar.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { toolbarOffset } from '../layout-settings';
+
+@Component({
+    selector: 'dsh-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls: ['./toolbar.component.scss']
+})
+export class ToolbarComponent {
+    toolbarOffset = toolbarOffset;
+}

src/app/toolbar/toolbar.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { ToolbarComponent } from './toolbar.component';
+
+@NgModule({
+    declarations: [ToolbarComponent],
+    imports: [FlexLayoutModule],
+    exports: [ToolbarComponent]
+})
+export class ToolbarModule {}

src/assets/logo.svg

@@ -0,0 +1,37 @@
+<svg width="81" height="41" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="a" d="M0 .12h22.08v20.02H0z" />
+        <path id="c" d="M0 .04h22.65v20.02H0z" />
+        <path id="e" d="M0 .12h4.76v4.77H0z" />
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(25.9 .35)">
+            <mask id="b" fill="#fff"><use xlink:href="#a" /></mask>
+            <path
+                d="M4.62.12h9.8c4.43 0 6.88 1.33 6.88 5.02 0 3.23-.86 3.92-2.47 4.44 1.99.67 3.25 1.53 3.25 4.67 0 4.3-2.16 5.89-6.68 5.89H0V4.04C0 1.38 1.9.12 4.62.12zm.17 10s.7-1.9 2.44-1.9h7.33c1.3 0 1.96-1 1.96-2.33 0-1.21-.66-2-1.99-2H7.1C5.7 3.9 4.8 4.98 4.8 5.98v4.16zm0 8.38s.67-2.14 2.68-2.14h6.92c2.56 0 2.9-.58 2.9-2.34 0-1.53-.25-2.25-2.73-2.25H7.3c-1.6 0-2.51 1.2-2.51 2.61v4.12z"
+                fill="#1A0D00"
+                mask="url(#b)"
+            />
+        </g>
+        <path
+            d="M56.07 10.65l2.82-2.31 7.2-6.16A6.19 6.19 0 0 1 70.23.87h3l-10.22 9.37L73.7 20.9h-2.35c-3.42 0-5.27-2-5.27-2l-5.57-5.15c-1.72-1.61-4.44-1.42-4.44-1.42v5.3c0 1.53-.8 3.27-3.3 3.27h-1.49V4.16c0-3.62 4.79-3.3 4.79-3.3v9.79z"
+            fill="#1A0D00"
+        />
+        <g transform="translate(0 .82)">
+            <mask id="d" fill="#fff"><use xlink:href="#c" /></mask>
+            <path
+                d="M18.1 13.4c2.57-.73 4.2-3.26 4.2-6.32C22.3 1.4 19.35.04 15.2.04H3.46C.49.04 0 2.84 0 4.02v16.04h1.57c2.52 0 3.2-1.48 3.2-3.4v-2.54h7.49a3 3 0 0 1 2.75 1.49c.55.85 1.2 1.85 1.54 2.4.7 1.08 1.85 2.05 4.3 2.05h1.8s-3.46-5.1-4.56-6.66m-3.3-3.26H6.95c-.85 0-1.73.37-2.18 1.72V6.22c0-1.1.9-2.2 2.36-2.2h7.64c2.13 0 2.74.96 2.74 3.06 0 2.17-.7 3.06-2.74 3.06"
+                fill="#1A0D00"
+                mask="url(#d)"
+            />
+        </g>
+        <path
+            d="M15.64 27.33h-2.15c-.17 0-.33 0-.48.02h-.04c-2.04.13-2.72 1.02-3.08 1.78-.37-.76-1.04-1.65-3.08-1.78h-.05l-.47-.02H4.14c-2.68 0-4.14 1.54-4.14 3.3v6.18s1.38.12 1.38-1.13V30.9c0-1.53 1.11-2.42 3.1-2.42H5.9c.84 0 1.54.14 2.08.42.58.31.98.8 1.14 1.49l.02.07v.04c.04.19.06.38.06.6v5.7s1.38.14 1.38-1.09V31.1c0-.2.02-.4.05-.59v-.04l.02-.07c.16-.68.57-1.18 1.15-1.5a4.52 4.52 0 0 1 2.07-.4H15.3c2 0 3.1.88 3.1 2.4v5.92s1.38.13 1.38-1.1v-5.08c0-1.76-1.45-3.3-4.13-3.3M25.8 27.33h3.8c3.14 0 4.13 1.75 4.13 3.72v2.07c0 2-1.09 3.72-4.15 3.72H25.8c-2.8 0-4.14-1.3-4.14-3.72v-2.07c0-2.09 1.15-3.72 4.14-3.72m.1 8.36h3.58c1.73 0 2.87-.73 2.87-2.57v-2.07c0-1.65-1.01-2.57-2.85-2.57h-3.6c-1.88 0-2.86.73-2.86 2.57v2.07c0 1.73.98 2.57 2.86 2.57M43.1 27.33h-3.65c-3.1 0-4.13 1.84-4.13 3.95v5.53s1.38.08 1.38-1.16V31.1c0-1.65 1.11-2.6 2.76-2.6H43.1c1.65 0 2.76.95 2.76 2.6v5.72s1.38.12 1.38-1.1v-4.43c0-2.1-1.04-3.95-4.14-3.95M50.83 32.2v.92c0 1.96 1.13 2.57 2.62 2.57h4.49c1.12 0 1.76-.44 2.05-1.09.46-1 1.53-.79 1.53-.79 0 1.38-.75 3.03-3.35 3.03H53.5c-2.76 0-4.06-1.18-4.06-3.52v-2.5c0-1.72 1.42-3.49 4.02-3.49h3.99c2.72 0 4.06 1.58 4.06 3.34v1.53h-10.7zm6.76-3.72h-4.33c-1.38 0-2.35.94-2.43 2.38v.98s.22-.79 1.13-.79h8.18c0-1.59-.96-2.57-2.55-2.57zM64.55 28.23c.25.47 2.36 4.33 3.37 6.22.69 1.28.83 1.02.83 1.02s2.57-5.93 3.05-7.12c.48-1.2 1.87-1 1.87-1l-4.75 10.71c-.84 1.92-1.57 2.82-3.91 2.82h-.46s-.16-1.15.8-1.15c1.19 0 1.82-.52 2.82-2.91 0 0-.34.05-.97-1.14-.36-.69-4.57-8.34-4.57-8.34s1.38-.12 1.92.9"
+            fill="#1A0D00"
+        />
+        <g transform="translate(75.82 15.9)">
+            <mask id="f" fill="#fff"><use xlink:href="#e" /></mask>
+            <path d="M4.76 2.5A2.38 2.38 0 1 1 0 2.5a2.38 2.38 0 0 1 4.76 0" fill="#00CF8B" mask="url(#f)" />
+        </g>
+    </g>
+</svg>

src/assets/user.svg

@@ -0,0 +1,11 @@
+<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(1 1)" stroke="#475166" fill="none" fill-rule="evenodd">
+        <circle cx="7.5" cy="4.5" r="4.5" />
+        <path d="M5 4.5a2.5 2.5 0 0 0 5 0" stroke-linecap="round" />
+        <path
+            d="M.17 14c1.58-2.34 4.5-3.5 7.33-3.5 2.86 0 5.82 1.2 7.38 3.57"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </g>
+</svg>

src/index.html

@@ -7,8 +7,10 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
-
-        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;subset=cyrillic" rel="stylesheet" />
+        <link
+            href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;subset=cyrillic"
+            rel="stylesheet"
+        />
     </head>
     <body>
         <dsh-root></dsh-root>

src/styles.scss

@@ -4,6 +4,8 @@
 
 body {
     font-size: 14px;
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
 }
 
 $das-slateblue: (

src/styles/mixins.scss

@@ -0,0 +1,17 @@
+@mixin fullscreen() {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+@mixin content($padding, $max-width) {
+    padding: $padding;
+    max-width: $max-width;
+    margin: 0 auto;
+}
+
+@mixin container($backgroud-color) {
+    background-color: $backgroud-color;
+}

src/styles/variables.scss

@@ -0,0 +1,17 @@
+$turquoise: #f1f7fb;
+$white: #ffffff;
+
+$turquoise-shadow: 0 8px 20px 0 rgba(174, 188, 230, 0.24);
+
+$toolbar-height: 80px;
+$toolbar-item-height: 50px;
+
+$content-max-width: 1128px;
+$content-padding: 30px;
+
+$card-background-color: $white;
+$card-padding: 30px;
+$card-border-radius: 4px;
+$card-shadow: $turquoise-shadow;
+
+$card-header-margin: 30px;