Add sections module (#17)

.gitignore

@@ -45,7 +45,7 @@ Thumbs.db
 
 # Swagger Codegen
 swagger-codegen-cli.jar
-src/app/api/**/swagger-codegen
+src/app/**/swagger-codegen
 
-# Kontur.Focus Model
+# Generated models
-src/app/kontur-focus/**/gen-model
+src/app/**/gen-model

.prettierignore

@@ -4,7 +4,6 @@ node_modules
 dist
 build_utils
 coverage
-src/app/api/**/swagger-codegen
 schemes
+src/app/**/swagger-codegen
 src/app/**/gen-model
-

package.json

@@ -6,26 +6,28 @@
     "start": "ng serve --port 8000",
     "build": "ng build --prod --extraWebpackConfig webpack.extra.js",
     "test": "ng test",
+    "test-silent": "ng test --watch=false --browsers ChromeHeadless",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "prettier": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc,svg}\" --write",
+    "prettier": "prettier \"**/*.{html,js,ts,css,scss,md,json,prettierrc,svg}\"",
-    "check": "prettier \"**/*.{html,js,ts,css,md,json,prettierrc,svg}\" --list-different",
+    "prettify": "npm run prettier -- --write",
+    "check": "npm run prettier -- --list-different",
     "quicktype": "quicktype -s schema --just-types"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
+    "@angular/animations": "~7.2.14",
-    "@angular/cdk": "~7.1.0",
+    "@angular/cdk": "~7.3.7",
-    "@angular/common": "~7.1.0",
+    "@angular/common": "~7.2.14",
-    "@angular/compiler": "~7.1.0",
+    "@angular/compiler": "~7.2.14",
-    "@angular/core": "~7.1.0",
+    "@angular/core": "~7.2.14",
-    "@angular/flex-layout": "^7.0.0-beta.19",
+    "@angular/flex-layout": "^7.0.0-beta.24",
-    "@angular/forms": "~7.1.0",
+    "@angular/forms": "~7.2.14",
-    "@angular/material": "~7.1.0",
+    "@angular/material": "~7.3.7",
-    "@angular/material-moment-adapter": "~7.1.0",
+    "@angular/material-moment-adapter": "~7.3.7",
-    "@angular/platform-browser": "~7.1.0",
+    "@angular/platform-browser": "~7.2.14",
-    "@angular/platform-browser-dynamic": "~7.1.0",
+    "@angular/platform-browser-dynamic": "~7.2.14",
-    "@angular/router": "~7.1.0",
+    "@angular/router": "~7.2.14",
     "core-js": "^2.5.4",
     "d3-axis": "^1.0.12",
     "d3-scale": "^2.1.2",
@@ -34,39 +36,39 @@
     "hammerjs": "^2.0.8",
     "keycloak-angular": "^6.1.0",
     "lodash.get": "^4.4.2",
-    "moment": "^2.22.2",
+    "moment": "^2.24.0",
-    "pdfmake": "^0.1.54",
+    "pdfmake": "^0.1.56",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.1",
     "ts-keycode-enum": "^1.0.6",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
+    "@angular-devkit/build-angular": "~0.13.8",
-    "@angular/cli": "~7.1.0",
+    "@angular/cli": "~7.3.8",
-    "@angular/compiler-cli": "~7.1.0",
+    "@angular/compiler-cli": "~7.2.14",
-    "@angular/language-service": "~7.1.0",
+    "@angular/language-service": "~7.2.14",
     "@types/d3": "^5.7.0",
-    "@types/jasmine": "~2.8.8",
+    "@types/jasmine": "~3.3.12",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "~2.0.6",
     "@types/lodash.get": "^4.4.6",
     "@types/moment": "^2.13.0",
-    "@types/node": "~8.9.4",
+    "@types/node": "^11.13.10",
-    "@types/pdfmake": "^0.1.3",
+    "@types/pdfmake": "^0.1.5",
     "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "~2.0.5",
-    "karma-jasmine": "~1.1.2",
+    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "ngx-build-plus": "^7.2.3",
-    "prettier": "~1.15.2",
+    "prettier": "~1.17.0",
-    "protractor": "~5.4.0",
+    "protractor": "~5.4.2",
-    "quicktype": "^15.0.184",
+    "quicktype": "^15.0.187",
     "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
+    "tslint": "~5.16.0",
-    "typescript": "~3.1.6"
+    "typescript": "~3.2.4"
   }
 }

src/app/actionbar/actionbar.component.ts

@@ -1,4 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
+
 import { DropdownTriggerDirective } from '../dropdown/dropdown-trigger.directive';
 
 @Component({

src/app/analytics/analytics.component.scss

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

src/app/app.module.ts

@@ -3,36 +3,18 @@ import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { KeycloakService } from './auth/keycloak-stub';
 
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-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';
-import { AnalyticsModule } from './analytics/analytics.module';
 import { AuthModule } from './auth';
 import { initializer } from './initializer';
-import { TableModule } from './table';
 import { APIModule } from './api/api.module';
 import { ConfigService } from './config/config.service';
+import { SectionsModule } from './sections/sections.module';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [
+    imports: [BrowserModule, BrowserAnimationsModule, RouterModule, SectionsModule, APIModule, AuthModule],
-        BrowserModule,
-        BrowserAnimationsModule,
-        AppRoutingModule,
-        MainModule,
-        PartyMngModule,
-        AnalyticsModule,
-        DetailsModule,
-        PageNotFoundModule,
-        TableModule,
-        PageNotFoundModule,
-        APIModule,
-        AuthModule
-    ],
     providers: [
         IconRegistryService,
         ConfigService,

src/app/charts/bar-chart/_bar-chart-theme.scss

@@ -4,7 +4,9 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
-    .x.axis > .tick:first-of-type > text, .x.axis > .tick:last-of-type > text, .tick > line {
+    .x.axis > .tick:first-of-type > text,
+    .x.axis > .tick:last-of-type > text,
+    .tick > line {
         color: mat-color($foreground, divider);
     }
 

src/app/charts/bar-chart/bar-chart.component.scss

@@ -1,5 +1,6 @@
 @import '../../../styles/variables';
 
-.y.axis > path, .x.axis > path {
+.y.axis > path,
+.x.axis > path {
     color: transparent;
 }

src/app/components/table/_table-theme.scss

@@ -1,52 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin dsh-table-theme($theme) {
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .dsh {
-    &-table {
-      background: mat-color($background, card);
-
-      & thead, & tbody, & tfoot,
-      mat-header-row, mat-row, mat-footer-row,
-      [dsh-header-row], [dsh-row], [dsh-footer-row],
-      .dsh-table-sticky {
-        background: inherit;
-      }
-
-      & thead {
-        background: mat-color($background, background);
-      }
-    }
-
-    &-header-cell {
-      color: mat-color($foreground, secondary-text);
-    }
-
-    &-cell, &-footer-cell {
-      color: mat-color($foreground, text);
-    }
-
-    &-row, &-header-row, &-footer-row {
-      border-bottom-color: mat-color($foreground, divider);
-    }
-  }
-}
-
-@mixin dsh-table-typography($config) {
-  .dsh {
-    &-table {
-      font-family: mat-font-family($config);
-    }
-
-    &-header-cell {
-      font-size: mat-font-size($config, caption);
-      font-weight: mat-font-weight($config, body-2);
-    }
-
-    &-cell, &-footer-cell {
-      font-size: mat-font-size($config, body-1);
-    }
-  }
-}

src/app/components/table/index.ts

@@ -1 +0,0 @@
-export * from './public-api';

src/app/components/table/table.module.ts

@@ -1,46 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DshTableComponent } from './table';
-import { CdkTableModule } from '@angular/cdk/table';
-import {
-    DshCellDefDirective,
-    DshCellDirective,
-    DshColumnDefDirective,
-    DshFooterCellDefDirective,
-    DshFooterCellDirective,
-    DshHeaderCellDefDirective,
-    DshHeaderCellDirective
-} from './cell';
-import {
-    DshFooterRowComponent,
-    DshFooterRowDefDirective,
-    DshHeaderRowComponent,
-    DshHeaderRowDefDirective,
-    DshRowComponent,
-    DshRowDefDirective
-} from './row';
-import { CommonModule } from '@angular/common';
-import { MatTableModule } from '@angular/material';
-
-const EXPORTED_DECLARATIONS = [
-    DshTableComponent,
-    DshHeaderCellDefDirective,
-    DshHeaderRowDefDirective,
-    DshColumnDefDirective,
-    DshCellDefDirective,
-    DshRowDefDirective,
-    DshFooterCellDefDirective,
-    DshFooterRowDefDirective,
-    DshHeaderCellDirective,
-    DshCellDirective,
-    DshFooterCellDirective,
-    DshHeaderRowComponent,
-    DshRowComponent,
-    DshFooterRowComponent
-];
-
-@NgModule({
-    imports: [CdkTableModule, CommonModule, MatTableModule],
-    exports: EXPORTED_DECLARATIONS,
-    declarations: EXPORTED_DECLARATIONS
-})
-export class DshTableModule {}

src/app/components/table/table.scss

@@ -1,94 +0,0 @@
-@import '../../../styles/variables';
-
-$dsh-header-row-height: 56px;
-$dsh-row-height: 48px;
-$dsh-row-horizontal-padding: 24px;
-
-.dsh {
-  &-table {
-    display: block;
-    border-radius: 5px;
-    padding: 0;
-    border-spacing: 0;
-
-    thead,
-    tbody,
-    tfoot {
-      display: block;
-    }
-
-    thead {
-      border-radius: 5px;
-    }
-  }
-
-  &-header-row {
-    min-height: $dsh-header-row-height;
-  }
-
-  &-row, &-footer-row {
-    min-height: $dsh-row-height;
-  }
-
-  &-row, &-header-row, &-footer-row {
-    display: flex;
-    border-width: 0;
-    align-items: center;
-    box-sizing: border-box;
-
-    &::after {
-      display: inline-block;
-      min-height: inherit;
-      content: '';
-    }
-  }
-
-  &-row, &-footer-row {
-    border-bottom-width: 1px;
-    border-style: solid;
-  }
-
-  &-cell:first-of-type, &-header-cell:first-of-type, &-footer-cell:first-of-type {
-    padding-left: $dsh-row-horizontal-padding;
-
-    [dir='rtl'] & {
-      padding-left: 0;
-      padding-right: $dsh-row-horizontal-padding;
-    }
-  }
-
-  &-cell:last-of-type, &-header-cell:last-of-type, &-footer-cell:last-of-type {
-    padding-right: $dsh-row-horizontal-padding;
-
-    [dir='rtl'] & {
-      padding-right: 0;
-      padding-left: $dsh-row-horizontal-padding;
-    }
-  }
-
-  &-cell, &-header-cell, &-footer-cell {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    word-wrap: break-word;
-    min-height: inherit;
-    padding: 0;
-  }
-
-  &-header-row {
-    height: $dsh-header-row-height;
-  }
-
-  &-row, &-footer-row {
-    height: $dsh-row-height;
-  }
-
-  &-header-cell {
-    text-align: left;
-
-    [dir='rtl'] & {
-      text-align: right;
-    }
-  }
-}

src/app/config/config-stub.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+import { config as appConfig } from './config-stub';
+import { Config } from './config';
+
+@Injectable()
+export class ConfigStubService implements Config {
+    api: Config['api'];
+    daData: Config['daData'];
+    konturFocus: Config['konturFocus'];
+
+    constructor() {
+        for (const [name, config] of Object.entries(appConfig)) {
+            this[name] = config;
+        }
+    }
+
+    async init() {}
+}

src/app/config/config-stub.ts

@@ -0,0 +1,22 @@
+import { HttpTestingController } from '@angular/common/http/testing';
+
+import { Config } from './config';
+
+export const config: Config = {
+    api: {
+        capiEndpoint: 'http://localhost:8000'
+    },
+    daData: {
+        token: 'Token XXX',
+        suggestionsApiUrl: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest'
+    },
+    konturFocus: {
+        apiV3Url: 'https://focus-api.kontur.ru/api3'
+    }
+};
+
+export function mockConfig(httpMock: HttpTestingController) {
+    const req = httpMock.expectOne('/assets/appConfig.json');
+    req.flush(config);
+    return req;
+}

src/app/config/config.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
-type AppConfig = typeof import('../../assets/appConfig.json');
+import { Config } from './config';
-// tslint:disable-next-line:no-empty-interface
-interface Config extends AppConfig {}
 
 @Injectable()
 export class ConfigService implements Config {

src/app/config/config.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed, getTestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { ConfigService } from './config.service.js';
+import { mockConfig, config } from './config-stub.js';
+
+describe('ConfigService', () => {
+    function createService() {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule],
+            providers: [ConfigService]
+        });
+        const injector = getTestBed();
+        const service: ConfigService = injector.get(ConfigService);
+        const httpMock: HttpTestingController = injector.get(HttpTestingController);
+        return { injector, service, httpMock };
+    }
+
+    it('should load config', () => {
+        const { service, httpMock } = createService();
+        service.init().then(() => {
+            for (const [k, v] of Object.entries(config)) {
+                expect(service[k]).toEqual(v);
+            }
+        });
+        const req = mockConfig(httpMock);
+        expect(req.request.method).toBe('GET');
+    });
+});

src/app/config/config.ts

@@ -0,0 +1,5 @@
+type AppConfig = typeof import('../../assets/appConfig.json');
+
+// Interface is needed so that you can implement in the class
+// tslint:disable-next-line:no-empty-interface
+export interface Config extends AppConfig {}

src/app/dadata/dadata.spec.ts

@@ -8,6 +8,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DaDataModule } from './dadata.module';
 import { DaDataService } from './dadata.service';
 import { SuggestionType } from './model/type';
+import { ConfigService } from '../config/config.service';
+import { ConfigStubService } from '../config/config-stub.service';
 
 @Component({
     template: `
@@ -30,11 +32,6 @@ class SimpleDaDataAutocompleteComponent {
 }
 
 describe('DshDadata', () => {
-    const config = {
-        token: 'Token AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-        suggestionsApiUrl: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest'
-    };
-
     const suggestions = {
         suggestions: [
             {
@@ -93,7 +90,7 @@ describe('DshDadata', () => {
     function createDaDataService() {
         TestBed.configureTestingModule({
             imports: [HttpClientTestingModule],
-            providers: [DaDataService]
+            providers: [DaDataService, { provide: ConfigService, useClass: ConfigStubService }]
         });
         const injector = getTestBed();
         const service: DaDataService = injector.get(DaDataService);
@@ -109,17 +106,15 @@ describe('DshDadata', () => {
         TestBed.configureTestingModule({
             imports: [DaDataModule, MatFormFieldModule, ReactiveFormsModule, NoopAnimationsModule],
             declarations: [component, ...declarations],
-            providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }, ...providers]
+            providers: [
+                { provide: ComponentFixtureAutoDetect, useValue: true },
+                { provide: ConfigService, useClass: ConfigStubService },
+                ...providers
+            ]
         }).compileComponents();
         return TestBed.createComponent<T>(component);
     }
 
-    function mockConfig(httpMock: HttpTestingController) {
-        const req = httpMock.expectOne('/assets/dadata-config.json');
-        req.flush(config);
-        return req;
-    }
-
     describe('Component', () => {
         it('should init value', () => {
             const fixture = createComponent(SimpleDaDataAutocompleteComponent);
@@ -128,26 +123,14 @@ describe('DshDadata', () => {
     });
 
     describe('Service', () => {
-        it('should load config', () => {
-            const { service, httpMock } = createDaDataService();
-            service.config$.subscribe(c => {
-                expect(c).toEqual(config);
-            });
-            const req = mockConfig(httpMock);
-            expect(req.request.method).toBe('GET');
-        });
-
         it('should load suggestions', () => {
             const { service, httpMock } = createDaDataService();
-            service.config$.subscribe(() => {
+            service.getSuggestions(SuggestionType.party, 'тест').subscribe(s => {
-                service.getSuggestions(SuggestionType.party, 'тест').subscribe(s => {
+                expect(s).toEqual(suggestions.suggestions as any);
-                    expect(s).toEqual(suggestions.suggestions as any);
-                });
-                const req = httpMock.expectOne('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/party');
-                req.flush(suggestions);
-                expect(req.request.method).toBe('POST');
             });
-            mockConfig(httpMock);
+            const req = httpMock.expectOne('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/party');
+            req.flush(suggestions);
+            expect(req.request.method).toBe('POST');
         });
     });
 });

src/app/dropdown/dropdown-trigger.directive.ts

@@ -112,12 +112,12 @@ export class DropdownTriggerDirective implements OnDestroy {
                     }
                 ]),
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            width: this.dropdown.correctedWidth
+            width: this.dropdown.getCorrectedWidth()
         });
     }
 
     private updatePosition = () => {
-        this.overlayRef.updateSize({ width: this.dropdown.correctedWidth });
+        this.overlayRef.updateSize({ width: this.dropdown.getCorrectedWidth() });
         this.dropdown.triangleLeftOffset = this.getTriangleLeftOffset();
     };
 

src/app/dropdown/dropdown.component.ts

@@ -25,11 +25,11 @@ export class DropdownComponent {
     triangleLeftOffset: string;
     animationDone$ = new Subject();
 
-    get correctedWidth() {
+    getCorrectedWidth() {
         if (this.width === '100%') {
             return FULL_WIDTH;
         }
-        if (!this.width || (typeof this.width === 'string' && this.width.slice(-1) === '%')) {
+        if (this.isAutoSize(this.width)) {
             return this.width;
         }
         const widthPx: number = typeof this.width === 'string' ? parseFloat(this.width) : this.width;
@@ -38,4 +38,8 @@ export class DropdownComponent {
         }
         return widthPx;
     }
+
+    private isAutoSize(size: string | number) {
+        return !size || (typeof size === 'string' && size.slice(-1) === '%');
+    }
 }

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

@@ -3,4 +3,4 @@
 :host {
     display: block;
     margin-bottom: $card-header-margin;
-}
+}

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

@@ -5,5 +5,5 @@
     background-color: $card-background-color;
     padding: $card-padding;
     border-radius: $card-border-radius;
-    box-shadow: $card-shadow
+    box-shadow: $card-shadow;
 }

src/app/main/main.component.scss

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

src/app/sections/analytics/analytics.component.scss

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

src/app/sections/analytics/analytics.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { PeriodData, SegmentData } from '../charts/models/chart-data-models';
+
-import { ChartsService } from '../charts/charts.service';
+import { PeriodData, SegmentData } from '../../charts/models/chart-data-models';
+import { ChartsService } from '../../charts/charts.service';
 
 @Component({
     selector: 'dsh-app-analytics',

src/app/sections/analytics/analytics.module.ts

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { AnalyticsComponent } from './analytics.component';
-import { ToolbarModule } from '../toolbar';
+import { ToolbarModule } from '../../toolbar';
-import { BrandModule } from '../brand';
+import { BrandModule } from '../../brand';
-import { ActionbarModule } from '../actionbar';
+import { ActionbarModule } from '../../actionbar';
-import { LayoutModule } from '../layout';
+import { LayoutModule } from '../../layout';
-import { ChartsModule } from '../charts';
+import { ChartsModule } from '../../charts';
 import { AnalyticsService } from './analytics.service';
 
 @NgModule({

src/app/sections/analytics/index.ts

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

src/app/sections/details/details.component.scss

@@ -1,5 +1,5 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
-@import '../../styles/mixins.scss';
+@import '../../../styles/mixins.scss';
 
 mat-sidenav-container {
     @include fullscreen();

src/app/sections/details/details.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { toolbarOffset } from '../layout-settings';
+import { toolbarOffset } from '../../layout-settings';
 
 @Component({
     selector: 'dsh-details',

src/app/sections/details/details.module.ts

@@ -3,9 +3,9 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { DetailsComponent } from './details.component';
-import { BrandModule } from '../brand';
+import { BrandModule } from '../../brand';
-import { ToolbarModule } from '../toolbar';
+import { ToolbarModule } from '../../toolbar';
-import { ActionbarModule } from '../actionbar';
+import { ActionbarModule } from '../../actionbar';
 
 @NgModule({
     declarations: [DetailsComponent],

src/app/sections/main/main.component.scss

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

src/app/sections/main/main.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { DocumentService } from '../document/document.service';
+import { DocumentService } from '../../document/document.service';
-import { Family } from '../document/document-fonts-config';
+import { Family } from '../../document/document-fonts-config';
 
 @Component({
     selector: 'dsh-main',

src/app/sections/main/main.module.ts

@@ -2,10 +2,10 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MainComponent } from './main.component';
-import { BrandModule } from '../brand';
+import { BrandModule } from '../../brand';
-import { ToolbarModule } from '../toolbar';
+import { ToolbarModule } from '../../toolbar';
-import { ActionbarModule } from '../actionbar';
+import { ActionbarModule } from '../../actionbar';
-import { DocumentModule } from '../document/document.module';
+import { DocumentModule } from '../../document/document.module';
 
 @NgModule({
     declarations: [MainComponent],

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

@@ -1,5 +1,5 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
-@import '../../styles/mixins.scss';
+@import '../../../styles/mixins.scss';
 
 .display-2 {
     font-size: 24px;

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

@@ -5,12 +5,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule } from '@angular/material';
 
 import { PartyMngComponent } from './party-mgt.component';
-import { BrandModule } from '../brand';
+import { BrandModule } from '../../brand';
-import { ToolbarModule } from '../toolbar';
+import { ToolbarModule } from '../../toolbar';
-import { ActionbarModule } from '../actionbar';
+import { ActionbarModule } from '../../actionbar';
-import { FormControlsModule } from '../form-controls';
+import { FormControlsModule } from '../../form-controls';
-import { LayoutModule } from '../layout';
+import { LayoutModule } from '../../layout';
-import { DaDataModule } from '../dadata/dadata.module';
+import { DaDataModule } from '../../dadata/dadata.module';
 
 @NgModule({
     declarations: [PartyMngComponent],

src/app/sections/sections-routing.module.ts

@@ -5,7 +5,7 @@ import { MainComponent } from './main';
 import { PageNotFoundComponent } from './page-not-found';
 import { PartyMngComponent } from './party-mgt';
 import { DetailsComponent } from './details';
-import { AnalyticsComponent } from './analytics/analytics.component';
+import { AnalyticsComponent } from './analytics';
 import { TableComponent } from './table';
 
 const routes: Routes = [
@@ -39,4 +39,4 @@ const routes: Routes = [
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class SectionsRoutingModule {}

src/app/sections/sections.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+
+import { SectionsRoutingModule } from './sections-routing.module';
+import { MainModule } from './main';
+import { PartyMngModule } from './party-mgt';
+import { AnalyticsModule } from './analytics';
+import { DetailsModule } from './details';
+import { PageNotFoundModule } from './page-not-found';
+import { TableModule } from './table';
+
+@NgModule({
+    imports: [
+        SectionsRoutingModule,
+        MainModule,
+        PartyMngModule,
+        AnalyticsModule,
+        DetailsModule,
+        PageNotFoundModule,
+        TableModule
+    ],
+    declarations: [],
+    entryComponents: [],
+    providers: []
+})
+export class SectionsModule {}

src/app/sections/table/index.ts

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

src/app/sections/table/table.component.scss

@@ -1,5 +1,5 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
-@import '../../styles/mixins.scss';
+@import '../../../styles/mixins.scss';
 
 mat-sidenav-container {
     @include fullscreen();
@@ -27,4 +27,3 @@ mat-sidenav-container {
     height: 400px;
     overflow: auto;
 }
-

src/app/sections/table/table.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-
-import { toolbarOffset } from '../layout-settings';
 import { MatPaginator, MatTableDataSource } from '@angular/material';
 
+import { toolbarOffset } from '../../layout-settings';
+
 export interface PeriodicElement {
     name: string;
     position: number;

src/app/sections/table/table.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatPaginatorModule, MatTableModule } from '@angular/material';
+
+import { TableComponent } from './table.component';
+import { BrandModule } from '../../brand';
+import { ToolbarModule } from '../../toolbar';
+import { ActionbarModule } from '../../actionbar';
+import { DshTableModule } from '../../table';
+
+@NgModule({
+    declarations: [TableComponent],
+    imports: [
+        FlexLayoutModule,
+        MatSidenavModule,
+        BrandModule,
+        ToolbarModule,
+        ActionbarModule,
+        DshTableModule,
+        MatTableModule,
+        MatPaginatorModule
+    ]
+})
+export class TableModule {}

src/app/table/_table-theme.scss

@@ -0,0 +1,62 @@
+@import '~@angular/material/theming';
+
+@mixin dsh-table-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .dsh {
+        &-table {
+            background: mat-color($background, card);
+
+            & thead,
+            & tbody,
+            & tfoot,
+            mat-header-row,
+            mat-row,
+            mat-footer-row,
+            [dsh-header-row],
+            [dsh-row],
+            [dsh-footer-row],
+            .dsh-table-sticky {
+                background: inherit;
+            }
+
+            & thead {
+                background: mat-color($background, background);
+            }
+        }
+
+        &-header-cell {
+            color: mat-color($foreground, secondary-text);
+        }
+
+        &-cell,
+        &-footer-cell {
+            color: mat-color($foreground, text);
+        }
+
+        &-row,
+        &-header-row,
+        &-footer-row {
+            border-bottom-color: mat-color($foreground, divider);
+        }
+    }
+}
+
+@mixin dsh-table-typography($config) {
+    .dsh {
+        &-table {
+            font-family: mat-font-family($config);
+        }
+
+        &-header-cell {
+            font-size: mat-font-size($config, caption);
+            font-weight: mat-font-weight($config, body-2);
+        }
+
+        &-cell,
+        &-footer-cell {
+            font-size: mat-font-size($config, body-1);
+        }
+    }
+}

src/app/table/index.ts

@@ -1,2 +1 @@
-export * from './table.module';
+export * from './public-api';
-export * from './table.component';

src/app/table/table.module.ts

@@ -1,25 +1,46 @@
 import { NgModule } from '@angular/core';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import { DshTableComponent } from './table';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { CdkTableModule } from '@angular/cdk/table';
-import { MatPaginatorModule, MatTableModule } from '@angular/material';
+import {
+    DshCellDefDirective,
+    DshCellDirective,
+    DshColumnDefDirective,
+    DshFooterCellDefDirective,
+    DshFooterCellDirective,
+    DshHeaderCellDefDirective,
+    DshHeaderCellDirective
+} from './cell';
+import {
+    DshFooterRowComponent,
+    DshFooterRowDefDirective,
+    DshHeaderRowComponent,
+    DshHeaderRowDefDirective,
+    DshRowComponent,
+    DshRowDefDirective
+} from './row';
+import { CommonModule } from '@angular/common';
+import { MatTableModule } from '@angular/material';
 
-import { TableComponent } from './table.component';
+const EXPORTED_DECLARATIONS = [
-import { BrandModule } from '../brand';
+    DshTableComponent,
-import { ToolbarModule } from '../toolbar';
+    DshHeaderCellDefDirective,
-import { ActionbarModule } from '../actionbar';
+    DshHeaderRowDefDirective,
-import { DshTableModule } from '../components/table';
+    DshColumnDefDirective,
+    DshCellDefDirective,
+    DshRowDefDirective,
+    DshFooterCellDefDirective,
+    DshFooterRowDefDirective,
+    DshHeaderCellDirective,
+    DshCellDirective,
+    DshFooterCellDirective,
+    DshHeaderRowComponent,
+    DshRowComponent,
+    DshFooterRowComponent
+];
 
 @NgModule({
-    declarations: [TableComponent],
+    imports: [CdkTableModule, CommonModule, MatTableModule],
-    imports: [
+    exports: EXPORTED_DECLARATIONS,
-        FlexLayoutModule,
+    declarations: EXPORTED_DECLARATIONS
-        MatSidenavModule,
-        BrandModule,
-        ToolbarModule,
-        ActionbarModule,
-        DshTableModule,
-        MatTableModule,
-        MatPaginatorModule
-    ]
 })
-export class TableModule {}
+export class DshTableModule {}

src/app/table/table.scss

@@ -0,0 +1,105 @@
+@import '../../styles/variables';
+
+$dsh-header-row-height: 56px;
+$dsh-row-height: 48px;
+$dsh-row-horizontal-padding: 24px;
+
+.dsh {
+    &-table {
+        display: block;
+        border-radius: 5px;
+        padding: 0;
+        border-spacing: 0;
+
+        thead,
+        tbody,
+        tfoot {
+            display: block;
+        }
+
+        thead {
+            border-radius: 5px;
+        }
+    }
+
+    &-header-row {
+        min-height: $dsh-header-row-height;
+    }
+
+    &-row,
+    &-footer-row {
+        min-height: $dsh-row-height;
+    }
+
+    &-row,
+    &-header-row,
+    &-footer-row {
+        display: flex;
+        border-width: 0;
+        align-items: center;
+        box-sizing: border-box;
+
+        &::after {
+            display: inline-block;
+            min-height: inherit;
+            content: '';
+        }
+    }
+
+    &-row,
+    &-footer-row {
+        border-bottom-width: 1px;
+        border-style: solid;
+    }
+
+    &-cell:first-of-type,
+    &-header-cell:first-of-type,
+    &-footer-cell:first-of-type {
+        padding-left: $dsh-row-horizontal-padding;
+
+        [dir='rtl'] & {
+            padding-left: 0;
+            padding-right: $dsh-row-horizontal-padding;
+        }
+    }
+
+    &-cell:last-of-type,
+    &-header-cell:last-of-type,
+    &-footer-cell:last-of-type {
+        padding-right: $dsh-row-horizontal-padding;
+
+        [dir='rtl'] & {
+            padding-right: 0;
+            padding-left: $dsh-row-horizontal-padding;
+        }
+    }
+
+    &-cell,
+    &-header-cell,
+    &-footer-cell {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        word-wrap: break-word;
+        min-height: inherit;
+        padding: 0;
+    }
+
+    &-header-row {
+        height: $dsh-header-row-height;
+    }
+
+    &-row,
+    &-footer-row {
+        height: $dsh-row-height;
+    }
+
+    &-header-cell {
+        text-align: left;
+
+        [dir='rtl'] & {
+            text-align: right;
+        }
+    }
+}

src/styles.scss

@@ -1,14 +1,18 @@
-// Dependencies
 @import '~@angular/material/theming';
+
 // Utils
 @import './styles/functions';
+
 // Variables
 @import './styles/variables';
-@import "./styles/palletes";
+@import './styles/palletes';
+
+// Theme
+@import './styles/main-theme';
+
 // Components
-@import "./styles/main-theme";
 @import './app/dropdown/dropdown-theme';
-@import './app/components/table/table-theme';
+@import './app/table/table-theme';
 @import './app/charts/bar-chart/bar-chart-theme';
 
 @include mat-core();
@@ -23,5 +27,5 @@ $mat-theme: mat-light-theme($primary, $accent, $warn);
 @include angular-material-theme($mat-theme);
 @include dsh-main-theme($theme);
 @include dsh-dropdown-theme($theme);
-@include dsh-table-theme($theme)
+@include dsh-table-theme($theme);
-@include dsh-bar-chart-theme($theme)
+@include dsh-bar-chart-theme($theme);

src/styles/_functions.scss

@@ -0,0 +1,20 @@
+@import '~@angular/material/theming';
+@import 'variables';
+@import 'palletes';
+
+@function dsh-light-theme(
+    $primary,
+    $accent,
+    $warn: mat-palette($mat-red),
+    $foreground: $dsh-light-theme-foreground,
+    $background: $dsh-light-theme-background
+) {
+    @return (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+        is-dark: false,
+        foreground: $foreground,
+        background: $background
+    );
+}

src/styles/_main-theme.scss

@@ -1,13 +1,12 @@
 @import '~@angular/material/theming';
 
 @mixin dsh-main-theme($theme) {
-  $background: map-get($theme, background);
+    $background: map-get($theme, background);
 
-  body {
+    body {
-    font-size: 14px;
+        font-size: 14px;
-    font-family: 'Roboto', sans-serif;
+        font-family: 'Roboto', sans-serif;
-    margin: 0;
+        margin: 0;
-    background-color: mat-color($background, background);;
+        background-color: mat-color($background, background);
-  }
+    }
 }
-

src/styles/_palletes.scss

@@ -0,0 +1,108 @@
+@import 'variables';
+
+// Background palette for light themes.
+$dsh-light-theme-background: (
+    background: $background-color,
+    card: $white
+);
+
+// Background palette for dark themes.
+$dsh-dark-theme-background: (
+    background: #303030,
+    card: $black
+);
+
+// Foreground palette for light themes.
+$dsh-light-theme-foreground: (
+    base: black,
+    disabled-button: rgba($black, 0.26),
+    elevation: black,
+    divider: rgba($black, 0.27),
+    icon: rgba($black, 0.54),
+    icons: rgba($black, 0.54),
+    text: rgba($black, 0.87),
+    secondary-text: rgba($black, 0.67),
+    slider-min: rgba($black, 0.87),
+    slider-off: rgba($black, 0.26),
+    slider-off-active: rgba($black, 0.38)
+);
+
+// Foreground palette for dark themes.
+$dsh-dark-theme-foreground: (
+    base: white,
+    disabled-button: rgba($white, 0.3),
+    elevation: black,
+    divider: rgba($white, 0.27),
+    icon: white,
+    icons: white,
+    text: white,
+    secondary-text: rgba($white, 0.67),
+    slider-min: white,
+    slider-off: rgba($white, 0.3),
+    slider-off-active: rgba($white, 0.3)
+);
+
+$dsh-slateblue: (
+    50: #f4f0ff,
+    100: #f3f0ff,
+    200: #ded6ff,
+    300: #baadff,
+    400: #9385ff,
+    500: #685bff,
+    600: #4b43d9,
+    700: #312eb3,
+    800: #1d1f8c,
+    900: #141866,
+    A100: #ffffff,
+    A200: #ffffff,
+    A400: #dcdaff,
+    A700: #c4c1ff,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);
+$dsh-palegreen: (
+    50: #f0fff6,
+    100: #e8fff2,
+    200: #b6f2d3,
+    300: #87e6b8,
+    400: #5dd9a1,
+    500: #38cd8f,
+    600: #24a674,
+    700: #16805a,
+    800: #0b5940,
+    900: #063326,
+    A100: #e2ffef,
+    A200: #afffd3,
+    A400: #7cffb7,
+    A700: #63ffa9,
+    contrast: (
+        50: $dark-primary-text,
+        100: $dark-primary-text,
+        200: $dark-primary-text,
+        300: $light-primary-text,
+        400: $light-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
+        700: $light-primary-text,
+        800: $light-primary-text,
+        900: $light-primary-text,
+        A100: $dark-primary-text,
+        A200: $light-primary-text,
+        A400: $light-primary-text,
+        A700: $light-primary-text
+    )
+);

src/styles/functions.scss

@@ -1,14 +0,0 @@
-@import '~@angular/material/theming';
-@import 'variables';
-@import 'palletes';
-
-@function dsh-light-theme($primary, $accent, $warn: mat-palette($mat-red), $foreground: $dsh-light-theme-foreground, $background: $dsh-light-theme-background) {
-  @return (
-          primary: $primary,
-          accent: $accent,
-          warn: $warn,
-          is-dark: false,
-          foreground: $foreground,
-          background: $background
-  );
-}

src/styles/palletes.scss

@@ -1,108 +0,0 @@
-@import 'variables';
-
-// Background palette for light themes.
-$dsh-light-theme-background: (
-        background: $background-color,
-        card: $white
-);
-
-// Background palette for dark themes.
-$dsh-dark-theme-background: (
-        background: #303030,
-        card: $black
-);
-
-// Foreground palette for light themes.
-$dsh-light-theme-foreground: (
-        base:              black,
-        disabled-button:   rgba($black, 0.26),
-        elevation:         black,
-        divider:           rgba($black, 0.27),
-        icon:              rgba($black, 0.54),
-        icons:             rgba($black, 0.54),
-        text:              rgba($black, 0.87),
-        secondary-text:    rgba($black, 0.67),
-        slider-min:        rgba($black, 0.87),
-        slider-off:        rgba($black, 0.26),
-        slider-off-active: rgba($black, 0.38)
-);
-
-// Foreground palette for dark themes.
-$dsh-dark-theme-foreground: (
-        base:              white,
-        disabled-button:   rgba($white, 0.3),
-        elevation:         black,
-        divider:           rgba($white, 0.27),
-        icon:              white,
-        icons:             white,
-        text:              white,
-        secondary-text:    rgba($white, 0.67),
-        slider-min:        white,
-        slider-off:        rgba($white, 0.3),
-        slider-off-active: rgba($white, 0.3)
-);
-
-$dsh-slateblue: (
-        50: #f4f0ff,
-        100: #f3f0ff,
-        200: #ded6ff,
-        300: #baadff,
-        400: #9385ff,
-        500: #685bff,
-        600: #4b43d9,
-        700: #312eb3,
-        800: #1d1f8c,
-        900: #141866,
-        A100: #ffffff,
-        A200: #ffffff,
-        A400: #dcdaff,
-        A700: #c4c1ff,
-        contrast: (
-                50: $dark-primary-text,
-                100: $dark-primary-text,
-                200: $dark-primary-text,
-                300: $light-primary-text,
-                400: $light-primary-text,
-                500: $light-primary-text,
-                600: $light-primary-text,
-                700: $light-primary-text,
-                800: $light-primary-text,
-                900: $light-primary-text,
-                A100: $dark-primary-text,
-                A200: $light-primary-text,
-                A400: $light-primary-text,
-                A700: $light-primary-text
-        )
-);
-$dsh-palegreen: (
-        50: #f0fff6,
-        100: #e8fff2,
-        200: #b6f2d3,
-        300: #87e6b8,
-        400: #5dd9a1,
-        500: #38cd8f,
-        600: #24a674,
-        700: #16805a,
-        800: #0b5940,
-        900: #063326,
-        A100: #e2ffef,
-        A200: #afffd3,
-        A400: #7cffb7,
-        A700: #63ffa9,
-        contrast: (
-                50: $dark-primary-text,
-                100: $dark-primary-text,
-                200: $dark-primary-text,
-                300: $light-primary-text,
-                400: $light-primary-text,
-                500: $light-primary-text,
-                600: $light-primary-text,
-                700: $light-primary-text,
-                800: $light-primary-text,
-                900: $light-primary-text,
-                A100: $dark-primary-text,
-                A200: $light-primary-text,
-                A400: $light-primary-text,
-                A700: $light-primary-text
-        )
-);