├── src
    ├── assets
    │   ├── .gitkeep
    │   ├── thumbnail.png
    │   └── background.svg
    ├── app
    │   ├── app.component.scss
    │   ├── app.component.html
    │   ├── models
    │   │   ├── column.model.ts
    │   │   └── board.model.ts
    │   ├── app.component.ts
    │   ├── app-routing.module.ts
    │   ├── app.module.ts
    │   ├── pages
    │   │   └── main-view
    │   │   │   ├── main-view.component.spec.ts
    │   │   │   ├── main-view.component.html
    │   │   │   ├── main-view.component.ts
    │   │   │   └── main-view.component.scss
    │   └── app.component.spec.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.scss
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── index.html
    ├── tslint.json
    ├── main.ts
    ├── browserslist
    ├── main-styles.scss
    ├── test.ts
    ├── karma.conf.js
    └── polyfills.ts
├── e2e
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    ├── tsconfig.e2e.json
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── README.md
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <router-outlet></router-outlet>
2 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Devstackr/kanban-angular-layout/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/assets/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Devstackr/kanban-angular-layout/HEAD/src/assets/thumbnail.png


--------------------------------------------------------------------------------
/src/app/models/column.model.ts:
--------------------------------------------------------------------------------
1 | export class Column {
2 |     constructor(public name: string, public tasks: string[]) {}
3 | }


--------------------------------------------------------------------------------
/src/app/models/board.model.ts:
--------------------------------------------------------------------------------
1 | import { Column } from './column.model';
2 | 
3 | export class Board {
4 |     constructor(public name: string, public columns: Column[]) {}
5 | }


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | @import 'main-styles.scss';
4 | @import '../node_modules/bulma/bulma.sass';


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.scss']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'kanban';
10 | }
11 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Kanban</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('workspace-project App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getTitleText()).toEqual('Welcome to kanban!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | import { MainViewComponent } from './pages/main-view/main-view.component';
 4 | 
 5 | const routes: Routes = [
 6 |   { path: '', component: MainViewComponent }
 7 | ];
 8 | 
 9 | @NgModule({
10 |   imports: [RouterModule.forRoot(routes)],
11 |   exports: [RouterModule]
12 | })
13 | export class AppRoutingModule { }
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "target": "es5",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/main-styles.scss:
--------------------------------------------------------------------------------
 1 | // global styles and changing bulma variables
 2 | 
 3 | // Import Google Fonts
 4 | @import url('https://fonts.googleapis.com/css?family=Nunito:400,700|Lato:400,800,900');
 5 | 
 6 | $family-sans-serif: "Nunito", sans-serif;
 7 | 
 8 | // Update some of Bulma's component variables
 9 | $control-border-width: 2px;
10 | $input-border-color: transparent;
11 | $input-shadow: none;
12 | 
13 | /* GLOBAL STYLES */
14 | html, body {
15 |     height: 100%;
16 | }
17 | 
18 | html {
19 |     background-image: url('./assets/background.svg');
20 |     background-size: cover;
21 | 
22 |     overflow-y: auto !important;
23 | }


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | import { MainViewComponent } from './pages/main-view/main-view.component';
 7 | 
 8 | import {DragDropModule} from '@angular/cdk/drag-drop';
 9 | 
10 | @NgModule({
11 |   declarations: [
12 |     AppComponent,
13 |     MainViewComponent
14 |   ],
15 |   imports: [
16 |     BrowserModule,
17 |     AppRoutingModule,
18 |     DragDropModule
19 |   ],
20 |   providers: [],
21 |   bootstrap: [AppComponent]
22 | })
23 | export class AppModule { }
24 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # profiling files
12 | chrome-profiler-events.json
13 | speed-measure-plugin.json
14 | 
15 | # IDEs and editors
16 | /.idea
17 | .project
18 | .classpath
19 | .c9/
20 | *.launch
21 | .settings/
22 | *.sublime-workspace
23 | 
24 | # IDE - VSCode
25 | .vscode/*
26 | !.vscode/settings.json
27 | !.vscode/tasks.json
28 | !.vscode/launch.json
29 | !.vscode/extensions.json
30 | .history/*
31 | 
32 | # misc
33 | /.sass-cache
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | npm-debug.log
38 | yarn-error.log
39 | testem.log
40 | /typings
41 | 
42 | # System Files
43 | .DS_Store
44 | Thumbs.db
45 | 


--------------------------------------------------------------------------------
/src/app/pages/main-view/main-view.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { MainViewComponent } from './main-view.component';
 4 | 
 5 | describe('MainViewComponent', () => {
 6 |   let component: MainViewComponent;
 7 |   let fixture: ComponentFixture<MainViewComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ MainViewComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(MainViewComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/src/app/pages/main-view/main-view.component.html:
--------------------------------------------------------------------------------
 1 | <div class="root">
 2 |   <div class="navbar has-background-dark">
 3 |     <div class="navbar-brand">
 4 |       <div class="navbar-item">
 5 |         <h1 class="app-name has-gradient-text">kanban</h1>
 6 |       </div>
 7 |     </div>
 8 |   </div>
 9 | 
10 |   <div class="board">
11 | 
12 |     <div class="board-bar">
13 |       <p class="board-name">{{ board.name }}</p>
14 |     </div>
15 | 
16 |     <div class="board-wrapper">
17 | 
18 |       <div class="board-columns" cdkDropListGroup>
19 |         <div class="board-column" *ngFor="let column of board.columns">
20 | 
21 |           <div class="column-title">
22 |             {{ column.name }}
23 |           </div>
24 | 
25 |           <div class="tasks-container"
26 |           cdkDropList
27 |           [cdkDropListData]="column.tasks"
28 |           (cdkDropListDropped)="drop($event)">
29 |             <div class="task" *ngFor="let item of column.tasks" cdkDrag>
30 |               {{ item }}
31 |             </div>
32 |           </div>
33 |         </div>
34 | 
35 |       </div>
36 | 
37 |     </div>
38 | 
39 |   </div>
40 | 
41 | </div>


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'kanban'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('kanban');
27 |   });
28 | 
29 |   it('should render title in a h1 tag', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to kanban!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Kanban Layout with Draggable Cards in Angular
 2 | 
 3 | [![Application Design Illustration](/src/assets/thumbnail.png)](https://youtu.be/YGCDAXFWAZo)
 4 | 
 5 | ##### Watch the full tutorial on [Youtube](https://youtu.be/YGCDAXFWAZo)! 
 6 | 
 7 | 
 8 | ---
 9 | 
10 | ## Development server
11 | 
12 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
13 | 
14 | ## Code scaffolding
15 | 
16 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
17 | 
18 | ## Build
19 | 
20 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
21 | 
22 | ## Running unit tests
23 | 
24 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
25 | 
26 | ## Running end-to-end tests
27 | 
28 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
29 | 
30 | ## Further help
31 | 
32 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kanban",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "ng": "ng",
 6 |     "start": "ng serve",
 7 |     "build": "ng build",
 8 |     "test": "ng test",
 9 |     "lint": "ng lint",
10 |     "e2e": "ng e2e"
11 |   },
12 |   "private": true,
13 |   "dependencies": {
14 |     "@angular/animations": "~7.2.0",
15 |     "@angular/cdk": "^7.3.3",
16 |     "@angular/common": "~7.2.0",
17 |     "@angular/compiler": "~7.2.0",
18 |     "@angular/core": "~7.2.0",
19 |     "@angular/forms": "~7.2.0",
20 |     "@angular/platform-browser": "~7.2.0",
21 |     "@angular/platform-browser-dynamic": "~7.2.0",
22 |     "@angular/router": "~7.2.0",
23 |     "bulma": "^0.7.4",
24 |     "core-js": "^2.5.4",
25 |     "rxjs": "~6.3.3",
26 |     "tslib": "^1.9.0",
27 |     "zone.js": "~0.8.26"
28 |   },
29 |   "devDependencies": {
30 |     "@angular-devkit/build-angular": "~0.12.0",
31 |     "@angular/cli": "~7.2.1",
32 |     "@angular/compiler-cli": "~7.2.0",
33 |     "@angular/language-service": "~7.2.0",
34 |     "@types/node": "~8.9.4",
35 |     "@types/jasmine": "~2.8.8",
36 |     "@types/jasminewd2": "~2.0.3",
37 |     "codelyzer": "~4.5.0",
38 |     "jasmine-core": "~2.99.1",
39 |     "jasmine-spec-reporter": "~4.2.1",
40 |     "karma": "~3.1.1",
41 |     "karma-chrome-launcher": "~2.2.0",
42 |     "karma-coverage-istanbul-reporter": "~2.0.1",
43 |     "karma-jasmine": "~1.1.2",
44 |     "karma-jasmine-html-reporter": "^0.2.2",
45 |     "protractor": "~5.4.0",
46 |     "ts-node": "~7.0.0",
47 |     "tslint": "~5.11.0",
48 |     "typescript": "~3.2.2"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/app/pages/main-view/main-view.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 3 | import { Board } from 'src/app/models/board.model';
 4 | import { Column } from 'src/app/models/column.model';
 5 | 
 6 | @Component({
 7 |   selector: 'app-main-view',
 8 |   templateUrl: './main-view.component.html',
 9 |   styleUrls: ['./main-view.component.scss']
10 | })
11 | export class MainViewComponent implements OnInit {
12 | 
13 |   constructor() { }
14 | 
15 |   board: Board = new Board('Test Board', [
16 |     new Column('Ideas', [
17 |       "Some random idea",
18 |       "This is another random idea",
19 |       "build an awesome application"
20 |     ]),
21 |     new Column('Research', [
22 |       "Lorem ipsum",
23 |       "foo",
24 |       "This was in the 'Research' column"
25 |     ]),
26 |     new Column('Todo', [
27 |       'Get to work',
28 |       'Pick up groceries',
29 |       'Go home',
30 |       'Fall asleep'
31 |     ]),
32 |     new Column('Done', [
33 |       'Get up',
34 |       'Brush teeth',
35 |       'Take a shower',
36 |       'Check e-mail',
37 |       'Walk dog'
38 |     ])
39 |   ]);
40 | 
41 |   ngOnInit() {
42 |   }
43 | 
44 |   drop(event: CdkDragDrop<string[]>) {
45 |     if (event.previousContainer === event.container) {
46 |       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
47 |     } else {
48 |       transferArrayItem(event.previousContainer.data,
49 |         event.container.data,
50 |         event.previousIndex,
51 |         event.currentIndex);
52 |     }
53 |   }
54 | 
55 | 
56 | }
57 | 


--------------------------------------------------------------------------------
/src/app/pages/main-view/main-view.component.scss:
--------------------------------------------------------------------------------
  1 | .root {
  2 |     display: flex;
  3 |     flex-direction: column;
  4 |     height: 100%;
  5 | }
  6 | 
  7 | .app-name {
  8 |     font-size: 28px;
  9 |     font-family: 'Lato', sans-serif;
 10 |     font-weight: bold;
 11 | }
 12 | 
 13 | .has-gradient-text {
 14 |     background: -webkit-linear-gradient(#13f7f4, #2af598);
 15 |     -webkit-background-clip: text;
 16 |     -webkit-text-fill-color: transparent;
 17 | }
 18 | 
 19 | 
 20 | .board {
 21 |     display: flex;
 22 |     flex-direction: column;
 23 |     flex-grow: 1;
 24 | 
 25 |     // Override Automatic Minimum Size
 26 |     // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
 27 |     min-width: 0;
 28 |     min-height: 0;
 29 | 
 30 |     .board-bar {
 31 |         background: rgba(gray, 0.5);
 32 |         padding: 8px 15px;
 33 |     
 34 |         .board-name {
 35 |             font-size: 20px;
 36 |             font-weight: bold;
 37 |             color: white;
 38 |         }
 39 |     }
 40 | 
 41 |     .board-wrapper {
 42 |         display: flex;
 43 |         flex-grow: 1;
 44 |         overflow-x: auto;
 45 | 
 46 |         .board-columns {
 47 |             display: flex;
 48 |             flex-grow: 1;
 49 | 
 50 |             .board-column {
 51 |                 display: flex;
 52 |                 flex-direction: column;
 53 |                 flex-grow: 1;
 54 |                 flex-basis: 0; // to force the columns to all be the same size, regardless of content
 55 | 
 56 |                 min-width: 300px;
 57 |                 margin: 50px;
 58 |                 padding: 25px;
 59 | 
 60 |                 border-radius: 4px;
 61 | 
 62 |                 background: rgba(white, 0.5);
 63 | 
 64 |                 &:not(:first-child) {
 65 |                     margin-left: 0;
 66 |                 }
 67 | 
 68 |                 .column-title {
 69 |                     font-size: 20px;
 70 |                     font-weight: 800;
 71 |                     font-family: 'Lato', sans-serif;
 72 |                     text-transform: uppercase;
 73 |                     margin-bottom: 20px;
 74 |                 }
 75 |             }
 76 |         }
 77 |     }
 78 | }
 79 | 
 80 | 
 81 | .tasks-container {
 82 |     flex-grow: 1;
 83 |     overflow-y: auto; 
 84 | }
 85 | 
 86 | .task {
 87 |     display: flex;
 88 |     padding: 15px 12px;
 89 |     background: white;
 90 |     border-bottom: solid 1px #ddd;
 91 |     border-radius: 4px;
 92 | 
 93 |     margin-bottom: 15px;
 94 | 
 95 |     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.05),
 96 |     0 3px 14px 2px rgba(0, 0, 0, 0.05);
 97 | }
 98 | 
 99 | .cdk-drag-preview {
100 |     box-sizing: border-box;
101 |     border-radius: 4px;
102 |     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
103 |                 0 8px 10px 1px rgba(0, 0, 0, 0.14),
104 |                 0 3px 14px 2px rgba(0, 0, 0, 0.12);
105 | }
106 | 
107 | .cdk-drag-placeholder {
108 |     opacity: 0;
109 | }
110 | 
111 | .cdk-drag-animating {
112 |     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
113 | }
114 | 
115 | .tasks-container.cdk-drop-list-dragging .task:not(.cdk-drag-placeholder) {
116 |     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
117 | }


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "no-output-on-prefix": true,
121 |     "use-input-property-decorator": true,
122 |     "use-output-property-decorator": true,
123 |     "use-host-property-decorator": true,
124 |     "no-input-rename": true,
125 |     "no-output-rename": true,
126 |     "use-life-cycle-interface": true,
127 |     "use-pipe-transform-interface": true,
128 |     "component-class-suffix": true,
129 |     "directive-class-suffix": true
130 |   }
131 | }
132 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
22 |  *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
23 |  */
24 | 
25 | // import 'core-js/es6/symbol';
26 | // import 'core-js/es6/object';
27 | // import 'core-js/es6/function';
28 | // import 'core-js/es6/parse-int';
29 | // import 'core-js/es6/parse-float';
30 | // import 'core-js/es6/number';
31 | // import 'core-js/es6/math';
32 | // import 'core-js/es6/string';
33 | // import 'core-js/es6/date';
34 | // import 'core-js/es6/array';
35 | // import 'core-js/es6/regexp';
36 | // import 'core-js/es6/map';
37 | // import 'core-js/es6/weak-map';
38 | // import 'core-js/es6/set';
39 | 
40 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
41 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
42 | 
43 | /** IE10 and IE11 requires the following for the Reflect API. */
44 | // import 'core-js/es6/reflect';
45 | 
46 | /**
47 |  * Web Animations `@angular/platform-browser/animations`
48 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
49 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
50 |  */
51 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
52 | 
53 | /**
54 |  * By default, zone.js will patch all possible macroTask and DomEvents
55 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
56 |  * because those flags need to be set before `zone.js` being loaded, and webpack
57 |  * will put import in the top of bundle, so user need to create a separate file
58 |  * in this directory (for example: zone-flags.ts), and put the following flags
59 |  * into that file, and then add the following code before importing zone.js.
60 |  * import './zone-flags.ts';
61 |  *
62 |  * The flags allowed in zone-flags.ts are listed here.
63 |  *
64 |  * The following flags will work for all browsers.
65 |  *
66 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
67 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
68 |  * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
69 |  *
70 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
71 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
72 |  *
73 |  *  (window as any).__Zone_enable_cross_context_check = true;
74 |  *
75 |  */
76 | 
77 | /***************************************************************************************************
78 |  * Zone JS is required by default for Angular itself.
79 |  */
80 | import 'zone.js/dist/zone';  // Included with Angular CLI.
81 | 
82 | 
83 | /***************************************************************************************************
84 |  * APPLICATION IMPORTS
85 |  */
86 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "kanban": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "styleext": "scss"
 14 |         }
 15 |       },
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/kanban",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "src/tsconfig.app.json",
 25 |             "assets": [
 26 |               "src/favicon.ico",
 27 |               "src/assets"
 28 |             ],
 29 |             "styles": [
 30 |               "src/styles.scss"
 31 |             ],
 32 |             "scripts": []
 33 |           },
 34 |           "configurations": {
 35 |             "production": {
 36 |               "fileReplacements": [
 37 |                 {
 38 |                   "replace": "src/environments/environment.ts",
 39 |                   "with": "src/environments/environment.prod.ts"
 40 |                 }
 41 |               ],
 42 |               "optimization": true,
 43 |               "outputHashing": "all",
 44 |               "sourceMap": false,
 45 |               "extractCss": true,
 46 |               "namedChunks": false,
 47 |               "aot": true,
 48 |               "extractLicenses": true,
 49 |               "vendorChunk": false,
 50 |               "buildOptimizer": true,
 51 |               "budgets": [
 52 |                 {
 53 |                   "type": "initial",
 54 |                   "maximumWarning": "2mb",
 55 |                   "maximumError": "5mb"
 56 |                 }
 57 |               ]
 58 |             }
 59 |           }
 60 |         },
 61 |         "serve": {
 62 |           "builder": "@angular-devkit/build-angular:dev-server",
 63 |           "options": {
 64 |             "browserTarget": "kanban:build"
 65 |           },
 66 |           "configurations": {
 67 |             "production": {
 68 |               "browserTarget": "kanban:build:production"
 69 |             }
 70 |           }
 71 |         },
 72 |         "extract-i18n": {
 73 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 74 |           "options": {
 75 |             "browserTarget": "kanban:build"
 76 |           }
 77 |         },
 78 |         "test": {
 79 |           "builder": "@angular-devkit/build-angular:karma",
 80 |           "options": {
 81 |             "main": "src/test.ts",
 82 |             "polyfills": "src/polyfills.ts",
 83 |             "tsConfig": "src/tsconfig.spec.json",
 84 |             "karmaConfig": "src/karma.conf.js",
 85 |             "styles": [
 86 |               "src/styles.scss"
 87 |             ],
 88 |             "scripts": [],
 89 |             "assets": [
 90 |               "src/favicon.ico",
 91 |               "src/assets"
 92 |             ]
 93 |           }
 94 |         },
 95 |         "lint": {
 96 |           "builder": "@angular-devkit/build-angular:tslint",
 97 |           "options": {
 98 |             "tsConfig": [
 99 |               "src/tsconfig.app.json",
100 |               "src/tsconfig.spec.json"
101 |             ],
102 |             "exclude": [
103 |               "**/node_modules/**"
104 |             ]
105 |           }
106 |         }
107 |       }
108 |     },
109 |     "kanban-e2e": {
110 |       "root": "e2e/",
111 |       "projectType": "application",
112 |       "prefix": "",
113 |       "architect": {
114 |         "e2e": {
115 |           "builder": "@angular-devkit/build-angular:protractor",
116 |           "options": {
117 |             "protractorConfig": "e2e/protractor.conf.js",
118 |             "devServerTarget": "kanban:serve"
119 |           },
120 |           "configurations": {
121 |             "production": {
122 |               "devServerTarget": "kanban:serve:production"
123 |             }
124 |           }
125 |         },
126 |         "lint": {
127 |           "builder": "@angular-devkit/build-angular:tslint",
128 |           "options": {
129 |             "tsConfig": "e2e/tsconfig.e2e.json",
130 |             "exclude": [
131 |               "**/node_modules/**"
132 |             ]
133 |           }
134 |         }
135 |       }
136 |     }
137 |   },
138 |   "defaultProject": "kanban"
139 | }


--------------------------------------------------------------------------------
/src/assets/background.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"><path d="M886,559L915,338L698,461Z" fill="#d2f19f" stroke="#d2f19f" stroke-width="1.51"/><path d="M915,338L663,266L698,461Z" fill="#e3f69e" stroke="#e3f69e" stroke-width="1.51"/><path d="M915,338L976,204L663,266Z" fill="#e6f89e" stroke="#e6f89e" stroke-width="1.51"/><path d="M1172,242L976,204L915,338Z" fill="#dcf4a0" stroke="#dcf4a0" stroke-width="1.51"/><path d="M698,461L818,779L886,559Z" fill="#c4ef9f" stroke="#c4ef9f" stroke-width="1.51"/><path d="M886,559L1190,592L915,338Z" fill="#c2ed9f" stroke="#c2ed9f" stroke-width="1.51"/><path d="M818,779L1013,760L886,559Z" fill="#b3eda0" stroke="#b3eda0" stroke-width="1.51"/><path d="M698,461L449,707L818,779Z" fill="#caf2a0" stroke="#caf2a0" stroke-width="1.51"/><path d="M663,266L460,469L698,461Z" fill="#e8f89e" stroke="#e8f89e" stroke-width="1.51"/><path d="M1112,734L1190,592L886,559Z" fill="#b0eba0" stroke="#b0eba0" stroke-width="1.51"/><path d="M1190,592L1172,242L915,338Z" fill="#caf19f" stroke="#caf19f" stroke-width="1.51"/><path d="M663,266L473,257L460,469Z" fill="#f5fc9e" stroke="#f5fc9e" stroke-width="1.51"/><path d="M447,205L473,257L663,266Z" fill="#fcfba1" stroke="#fcfba1" stroke-width="1.51"/><path d="M976,204L803,40L663,266Z" fill="#e7ecad" stroke="#e7ecad" stroke-width="1.51"/><path d="M961,-92L803,40L976,204Z" fill="#dddbbe" stroke="#dddbbe" stroke-width="1.51"/><path d="M1013,760L1112,734L886,559Z" fill="#aeeca0" stroke="#aeeca0" stroke-width="1.51"/><path d="M803,40L447,205L663,266Z" fill="#f3f0ad" stroke="#f3f0ad" stroke-width="1.51"/><path d="M473,257L354,382L460,469Z" fill="#f3f8a2" stroke="#f3f8a2" stroke-width="1.51"/><path d="M460,469L449,707L698,461Z" fill="#dbf49e" stroke="#dbf49e" stroke-width="1.51"/><path d="M328,630L449,707L460,469Z" fill="#d9f0a4" stroke="#d9f0a4" stroke-width="1.51"/><path d="M818,779L1024,914L1013,760Z" fill="#a3eba2" stroke="#a3eba2" stroke-width="1.51"/><path d="M1013,760L1024,914L1112,734Z" fill="#9feca1" stroke="#9feca1" stroke-width="1.51"/><path d="M449,707L676,883L818,779Z" fill="#bdf2a1" stroke="#bdf2a1" stroke-width="1.51"/><path d="M447,205L354,382L473,257Z" fill="#fdfba2" stroke="#fdfba2" stroke-width="1.51"/><path d="M1172,242L1233,170L976,204Z" fill="#d6eda8" stroke="#d6eda8" stroke-width="1.51"/><path d="M1290,153L1233,170L1172,242Z" fill="#d1ecab" stroke="#d1ecab" stroke-width="1.51"/><path d="M1190,592L1294,615L1172,242Z" fill="#b7eea0" stroke="#b7eea0" stroke-width="1.51"/><path d="M1112,734L1294,615L1190,592Z" fill="#a7eca1" stroke="#a7eca1" stroke-width="1.51"/><path d="M676,883L1024,914L818,779Z" fill="#a8eda3" stroke="#a8eda3" stroke-width="1.51"/><path d="M1112,734L1351,888L1294,615Z" fill="#99eca2" stroke="#99eca2" stroke-width="1.51"/><path d="M354,382L328,630L460,469Z" fill="#e4f0a6" stroke="#e4f0a6" stroke-width="1.51"/><path d="M449,707L395,831L676,883Z" fill="#c6f6a0" stroke="#c6f6a0" stroke-width="1.51"/><path d="M1233,170L961,-92L976,204Z" fill="#d7e0b8" stroke="#d7e0b8" stroke-width="1.51"/><path d="M1438,266L1290,153L1172,242Z" fill="#cdf0a7" stroke="#cdf0a7" stroke-width="1.51"/><path d="M1228,-161L961,-92L1233,170Z" fill="#cfd5c5" stroke="#cfd5c5" stroke-width="1.51"/><path d="M803,40L595,-165L447,205Z" fill="#f0dec1" stroke="#f0dec1" stroke-width="1.51"/><path d="M328,630L395,831L449,707Z" fill="#cef0a7" stroke="#cef0a7" stroke-width="1.51"/><path d="M961,-92L750,-179L803,40Z" fill="#e0d6c5" stroke="#e0d6c5" stroke-width="1.51"/><path d="M1294,615L1438,266L1172,242Z" fill="#c1f2a0" stroke="#c1f2a0" stroke-width="1.51"/><path d="M447,205L239,142L354,382Z" fill="#fdf2ad" stroke="#fdf2ad" stroke-width="1.51"/><path d="M750,-179L595,-165L803,40Z" fill="#e9d9c4" stroke="#e9d9c4" stroke-width="1.51"/><path d="M395,831L599,1047L676,883Z" fill="#b7f1a5" stroke="#b7f1a5" stroke-width="1.51"/><path d="M676,883L951,1125L1024,914Z" fill="#98e8a8" stroke="#98e8a8" stroke-width="1.51"/><path d="M1024,914L1351,888L1112,734Z" fill="#93eba4" stroke="#93eba4" stroke-width="1.51"/><path d="M951,1125L1104,1030L1024,914Z" fill="#87e5aa" stroke="#87e5aa" stroke-width="1.51"/><path d="M354,382L66,405L328,630Z" fill="#e5e7b1" stroke="#e5e7b1" stroke-width="1.51"/><path d="M204,90L239,142L307,-136Z" fill="#f4d1d2" stroke="#f4d1d2" stroke-width="1.51"/><path d="M1294,615L1572,469L1438,266Z" fill="#b0efa1" stroke="#b0efa1" stroke-width="1.51"/><path d="M1104,1030L1351,888L1024,914Z" fill="#88e8a8" stroke="#88e8a8" stroke-width="1.51"/><path d="M1351,888L1470,697L1294,615Z" fill="#93eca2" stroke="#93eca2" stroke-width="1.51"/><path d="M1104,1030L1340,1247L1351,888Z" fill="#71e4ac" stroke="#71e4ac" stroke-width="1.51"/><path d="M599,1047L951,1125L676,883Z" fill="#9ee9a9" stroke="#9ee9a9" stroke-width="1.51"/><path d="M189,907L395,831L328,630Z" fill="#c7eaae" stroke="#c7eaae" stroke-width="1.51"/><path d="M189,907L350,952L395,831Z" fill="#bde8b1" stroke="#bde8b1" stroke-width="1.51"/><path d="M395,831L350,952L599,1047Z" fill="#b9efa9" stroke="#b9efa9" stroke-width="1.51"/><path d="M239,142L66,405L354,382Z" fill="#f8ebb3" stroke="#f8ebb3" stroke-width="1.51"/><path d="M307,-136L239,142L447,205Z" fill="#f8dcc6" stroke="#f8dcc6" stroke-width="1.51"/><path d="M961,-92L1017,-274L750,-179Z" fill="#dbd5c4" stroke="#dbd5c4" stroke-width="1.51"/><path d="M1290,153L1228,-161L1233,170Z" fill="#ccdcbe" stroke="#ccdcbe" stroke-width="1.51"/><path d="M1294,-149L1228,-161L1290,153Z" fill="#c9d5c6" stroke="#c9d5c6" stroke-width="1.51"/><path d="M951,1125L1089,1122L1104,1030Z" fill="#7ee3ac" stroke="#7ee3ac" stroke-width="1.51"/><path d="M1228,-161L1017,-274L961,-92Z" fill="#d3d4c5" stroke="#d3d4c5" stroke-width="1.51"/><path d="M750,-179L603,-324L595,-165Z" fill="#eddac4" stroke="#eddac4" stroke-width="1.51"/><path d="M374,1147L627,1153L599,1047Z" fill="#a8ecab" stroke="#a8ecab" stroke-width="1.51"/><path d="M599,1047L774,1225L951,1125Z" fill="#95e7ac" stroke="#95e7ac" stroke-width="1.51"/><path d="M951,1125L935,1307L1089,1122Z" fill="#83e3ac" stroke="#83e3ac" stroke-width="1.51"/><path d="M1470,697L1572,469L1294,615Z" fill="#9eeca1" stroke="#9eeca1" stroke-width="1.51"/><path d="M1518,-62L1294,-149L1290,153Z" fill="#c4d6c6" stroke="#c4d6c6" stroke-width="1.51"/><path d="M1228,-161L1141,-320L1017,-274Z" fill="#d0d5c5" stroke="#d0d5c5" stroke-width="1.51"/><path d="M1518,-62L1290,153L1438,266Z" fill="#c5e4b6" stroke="#c5e4b6" stroke-width="1.51"/><path d="M1470,697L1532,713L1572,469Z" fill="#95eaa4" stroke="#95eaa4" stroke-width="1.51"/><path d="M1351,888L1532,713L1470,697Z" fill="#8aeca3" stroke="#8aeca3" stroke-width="1.51"/><path d="M-40,303L66,405L239,142Z" fill="#f8e3bd" stroke="#f8e3bd" stroke-width="1.51"/><path d="M1017,-274L789,-334L750,-179Z" fill="#dfd6c5" stroke="#dfd6c5" stroke-width="1.51"/><path d="M595,-165L307,-136L447,205Z" fill="#f8dbc7" stroke="#f8dbc7" stroke-width="1.51"/><path d="M603,-324L307,-136L595,-165Z" fill="#f7ddc4" stroke="#f7ddc4" stroke-width="1.51"/><path d="M627,1153L774,1225L599,1047Z" fill="#9de9ac" stroke="#9de9ac" stroke-width="1.51"/><path d="M66,405L44,537L328,630Z" fill="#dddfb9" stroke="#dddfb9" stroke-width="1.51"/><path d="M350,952L374,1147L599,1047Z" fill="#afebad" stroke="#afebad" stroke-width="1.51"/><path d="M59,752L189,907L328,630Z" fill="#c8e2b7" stroke="#c8e2b7" stroke-width="1.51"/><path d="M789,-334L603,-324L750,-179Z" fill="#e9d9c4" stroke="#e9d9c4" stroke-width="1.51"/><path d="M1017,-274L1141,-320L789,-334Z" fill="#d7d4c4" stroke="#d7d4c4" stroke-width="1.51"/><path d="M1411,-268L1141,-320L1228,-161Z" fill="#c9d5c5" stroke="#c9d5c5" stroke-width="1.51"/><path d="M1572,469L1630,241L1438,266Z" fill="#baf2a3" stroke="#baf2a3" stroke-width="1.51"/><path d="M1804,394L1630,241L1572,469Z" fill="#adeea6" stroke="#adeea6" stroke-width="1.51"/><path d="M44,537L59,752L328,630Z" fill="#d2dfba" stroke="#d2dfba" stroke-width="1.51"/><path d="M189,907L374,1147L350,952Z" fill="#b2e4b6" stroke="#b2e4b6" stroke-width="1.51"/><path d="M627,1153L764,1365L774,1225Z" fill="#99e8ac" stroke="#99e8ac" stroke-width="1.51"/><path d="M462,1313L374,1147L392,1336Z" fill="#abe9b1" stroke="#abe9b1" stroke-width="1.51"/><path d="M1638,67L1518,-62L1438,266Z" fill="#bedfbc" stroke="#bedfbc" stroke-width="1.51"/><path d="M1294,-149L1411,-268L1228,-161Z" fill="#c7d6c6" stroke="#c7d6c6" stroke-width="1.51"/><path d="M307,-136L179,-138L204,90Z" fill="#f3ccd7" stroke="#f3ccd7" stroke-width="1.51"/><path d="M204,90L-40,303L239,142Z" fill="#f8dbc6" stroke="#f8dbc6" stroke-width="1.51"/><path d="M245,-273L179,-138L307,-136Z" fill="#f3cdd6" stroke="#f3cdd6" stroke-width="1.51"/><path d="M764,1365L935,1307L774,1225Z" fill="#90e6ac" stroke="#90e6ac" stroke-width="1.51"/><path d="M774,1225L935,1307L951,1125Z" fill="#8be4ac" stroke="#8be4ac" stroke-width="1.51"/><path d="M1340,1247L1582,915L1351,888Z" fill="#6ae5ab" stroke="#6ae5ab" stroke-width="1.51"/><path d="M1351,888L1582,915L1532,713Z" fill="#7eeaa5" stroke="#7eeaa5" stroke-width="1.51"/><path d="M66,405L-48,534L44,537Z" fill="#ded7c3" stroke="#ded7c3" stroke-width="1.51"/><path d="M44,537L-48,534L59,752Z" fill="#d2d6c3" stroke="#d2d6c3" stroke-width="1.51"/><path d="M-163,145L-40,303L204,90Z" fill="#f5d2d1" stroke="#f5d2d1" stroke-width="1.51"/><path d="M-40,303L-48,534L66,405Z" fill="#e7d8c4" stroke="#e7d8c4" stroke-width="1.51"/><path d="M1630,241L1638,67L1438,266Z" fill="#bfeaaf" stroke="#bfeaaf" stroke-width="1.51"/><path d="M1532,713L1750,496L1572,469Z" fill="#96e8a5" stroke="#96e8a5" stroke-width="1.51"/><path d="M1340,1247L1104,1030L1089,1122Z" fill="#74e3ad" stroke="#74e3ad" stroke-width="1.51"/><path d="M1583,-214L1411,-268L1518,-62Z" fill="#bdd5c7" stroke="#bdd5c7" stroke-width="1.51"/><path d="M1518,-62L1411,-268L1294,-149Z" fill="#c2d6c6" stroke="#c2d6c6" stroke-width="1.51"/><path d="M-70,-164L-163,145L204,90Z" fill="#eebee5" stroke="#eebee5" stroke-width="1.51"/><path d="M603,-324L245,-273L307,-136Z" fill="#f6d7cc" stroke="#f6d7cc" stroke-width="1.51"/><path d="M1833,683L1750,496L1532,713Z" fill="#89e7a8" stroke="#89e7a8" stroke-width="1.51"/><path d="M1630,241L1798,135L1638,67Z" fill="#b7e3b7" stroke="#b7e3b7" stroke-width="1.51"/><path d="M462,1313L764,1365L627,1153Z" fill="#a1eaac" stroke="#a1eaac" stroke-width="1.51"/><path d="M374,1147L462,1313L627,1153Z" fill="#abedab" stroke="#abedab" stroke-width="1.51"/><path d="M392,1336L374,1147L138,1210Z" fill="#aae2b9" stroke="#aae2b9" stroke-width="1.51"/><path d="M1229,1474L1340,1247L1089,1122Z" fill="#71e3ad" stroke="#71e3ad" stroke-width="1.51"/><path d="M1445,1304L1340,1247L1229,1474Z" fill="#67e3ad" stroke="#67e3ad" stroke-width="1.51"/><path d="M1750,496L1804,394L1572,469Z" fill="#a0eaa7" stroke="#a0eaa7" stroke-width="1.51"/><path d="M2095,588L1804,394L1750,496Z" fill="#8ee5ab" stroke="#8ee5ab" stroke-width="1.51"/><path d="M1766,-35L1583,-214L1518,-62Z" fill="#b5d3ca" stroke="#b5d3ca" stroke-width="1.51"/><path d="M1766,-35L1518,-62L1638,67Z" fill="#b4d2ca" stroke="#b4d2ca" stroke-width="1.51"/><path d="M462,1313L392,1336L764,1365Z" fill="#a7ecab" stroke="#a7ecab" stroke-width="1.51"/><path d="M138,1210L374,1147L189,907Z" fill="#a8ddbe" stroke="#a8ddbe" stroke-width="1.51"/><path d="M245,-273L139,-283L179,-138Z" fill="#f1c9da" stroke="#f1c9da" stroke-width="1.51"/><path d="M603,-324L139,-283L245,-273Z" fill="#f5d3d0" stroke="#f5d3d0" stroke-width="1.51"/><path d="M1804,394L1798,135L1630,241Z" fill="#b6efa9" stroke="#b6efa9" stroke-width="1.51"/><path d="M-142,807L-42,984L59,752Z" fill="#bcd4c7" stroke="#bcd4c7" stroke-width="1.51"/><path d="M59,752L-42,984L189,907Z" fill="#bad8c4" stroke="#bad8c4" stroke-width="1.51"/><path d="M1582,915L1833,683L1532,713Z" fill="#7be8a7" stroke="#7be8a7" stroke-width="1.51"/><path d="M1804,394L1950,287L1798,135Z" fill="#b0efaa" stroke="#b0efaa" stroke-width="1.51"/><path d="M1791,987L1833,683L1582,915Z" fill="#66e5ac" stroke="#66e5ac" stroke-width="1.51"/><path d="M-40,303L-251,535L-48,534Z" fill="#e2d7c4" stroke="#e2d7c4" stroke-width="1.51"/><path d="M-48,534L-142,807L59,752Z" fill="#cad5c5" stroke="#cad5c5" stroke-width="1.51"/><path d="M-70,-164L204,90L179,-138Z" fill="#efc3e1" stroke="#efc3e1" stroke-width="1.51"/><path d="M-42,984L138,1210L189,907Z" fill="#abd6c7" stroke="#abd6c7" stroke-width="1.51"/><path d="M-251,535L-142,807L-48,534Z" fill="#d1d5c5" stroke="#d1d5c5" stroke-width="1.51"/><path d="M1798,135L1766,-35L1638,67Z" fill="#b1d7c5" stroke="#b1d7c5" stroke-width="1.51"/><path d="M1340,1247L1666,1199L1582,915Z" fill="#55e1b0" stroke="#55e1b0" stroke-width="1.51"/><path d="M1229,1474L1089,1122L935,1307Z" fill="#7ce3ac" stroke="#7ce3ac" stroke-width="1.51"/><path d="M139,-283L-70,-164L179,-138Z" fill="#efc1e2" stroke="#efc1e2" stroke-width="1.51"/><path d="M-314,351L-251,535L-40,303Z" fill="#e9d9c4" stroke="#e9d9c4" stroke-width="1.51"/><path d="M-163,145L-228,172L-40,303Z" fill="#f6d5cd" stroke="#f6d5cd" stroke-width="1.51"/><path d="M-270,-17L-228,172L-163,145Z" fill="#f1c8db" stroke="#f1c8db" stroke-width="1.51"/><path d="M1666,1199L1791,987L1582,915Z" fill="#4de0b2" stroke="#4de0b2" stroke-width="1.51"/><path d="M-87,1454L1229,1474L764,1365Z" fill="#a0eaac" stroke="#a0eaac" stroke-width="1.51"/><path d="M764,1365L1229,1474L935,1307Z" fill="#83e3ac" stroke="#83e3ac" stroke-width="1.51"/><path d="M1583,1375L1666,1199L1445,1304Z" fill="#50e0b1" stroke="#50e0b1" stroke-width="1.51"/><path d="M1445,1304L1666,1199L1340,1247Z" fill="#5ae2af" stroke="#5ae2af" stroke-width="1.51"/><path d="M2095,588L1750,496L1833,683Z" fill="#81e3ac" stroke="#81e3ac" stroke-width="1.51"/><path d="M2095,588L1950,287L1804,394Z" fill="#96e7ac" stroke="#96e7ac" stroke-width="1.51"/><path d="M1798,135L2040,-30L1766,-35Z" fill="#a7d1cc" stroke="#a7d1cc" stroke-width="1.51"/><path d="M392,1336L-87,1454L764,1365Z" fill="#aae5b5" stroke="#aae5b5" stroke-width="1.51"/><path d="M138,1210L122,1324L392,1336Z" fill="#a8dcc0" stroke="#a8dcc0" stroke-width="1.51"/><path d="M-74,1199L122,1324L138,1210Z" fill="#a5d2cb" stroke="#a5d2cb" stroke-width="1.51"/><path d="M-74,1199L138,1210L-42,984Z" fill="#a3cecf" stroke="#a3cecf" stroke-width="1.51"/><path d="M-228,172L-314,351L-40,303Z" fill="#f8ddc4" stroke="#f8ddc4" stroke-width="1.51"/><path d="M-270,-17L-314,351L-228,172Z" fill="#f4d1d2" stroke="#f4d1d2" stroke-width="1.51"/><path d="M-312,828L-142,807L-251,535Z" fill="#c8d5c6" stroke="#c8d5c6" stroke-width="1.51"/><path d="M-312,828L-42,984L-142,807Z" fill="#b9d4c8" stroke="#b9d4c8" stroke-width="1.51"/><path d="M-383,1027L-74,1199L-42,984Z" fill="#a4cecf" stroke="#a4cecf" stroke-width="1.51"/><path d="M-70,-164L-270,-17L-163,145Z" fill="#ecbbe8" stroke="#ecbbe8" stroke-width="1.51"/><path d="M1229,1474L1583,1375L1445,1304Z" fill="#60e3ae" stroke="#60e3ae" stroke-width="1.51"/><path d="M2011,938L2016,830L1791,987Z" fill="#48dfb2" stroke="#48dfb2" stroke-width="1.51"/><path d="M-70,-164L-171,-234L-270,-17Z" fill="#ecbbe8" stroke="#ecbbe8" stroke-width="1.51"/><path d="M139,-283L-171,-234L-70,-164Z" fill="#ecbbe8" stroke="#ecbbe8" stroke-width="1.51"/><path d="M-314,351L-312,828L-251,535Z" fill="#d5d4c4" stroke="#d5d4c4" stroke-width="1.51"/><path d="M1996,-366L1748,-373L1766,-35Z" fill="#a8cfce" stroke="#a8cfce" stroke-width="1.51"/><path d="M1766,-35L1748,-373L1583,-214Z" fill="#b1d1cc" stroke="#b1d1cc" stroke-width="1.51"/><path d="M1583,-214L1748,-373L1411,-268Z" fill="#b8d4c9" stroke="#b8d4c9" stroke-width="1.51"/><path d="M1411,-268L1748,-373L1141,-320Z" fill="#c0d6c6" stroke="#c0d6c6" stroke-width="1.51"/><path d="M1141,-320L1748,-373L789,-334Z" fill="#cbd5c5" stroke="#cbd5c5" stroke-width="1.51"/><path d="M1791,987L2016,830L1833,683Z" fill="#5ee2ae" stroke="#5ee2ae" stroke-width="1.51"/><path d="M1871,1162L1791,987L1666,1199Z" fill="#32dcb5" stroke="#32dcb5" stroke-width="1.51"/><path d="M1790,1339L1871,1162L1666,1199Z" fill="#32dcb5" stroke="#32dcb5" stroke-width="1.51"/><path d="M139,-283L-255,-221L-171,-234Z" fill="#ecbbe8" stroke="#ecbbe8" stroke-width="1.51"/><path d="M-171,-234L-255,-221L-270,-17Z" fill="#ecbbe8" stroke="#ecbbe8" stroke-width="1.51"/><path d="M-270,-17L-255,-221L-314,351Z" fill="#eec0e3" stroke="#eec0e3" stroke-width="1.51"/><path d="M1950,287L2090,208L1798,135Z" fill="#abe6b4" stroke="#abe6b4" stroke-width="1.51"/><path d="M2016,830L2095,588L1833,683Z" fill="#6fe3ad" stroke="#6fe3ad" stroke-width="1.51"/><path d="M2180,402L2090,208L1950,287Z" fill="#a8ecab" stroke="#a8ecab" stroke-width="1.51"/><path d="M2285,787L2159,527L2095,588Z" fill="#79e3ac" stroke="#79e3ac" stroke-width="1.51"/><path d="M1871,1162L2011,938L1791,987Z" fill="#2edcb6" stroke="#2edcb6" stroke-width="1.51"/><path d="M2090,208L2040,-30L1798,135Z" fill="#a7dac2" stroke="#a7dac2" stroke-width="1.51"/><path d="M1871,1162L2097,1196L2011,938Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M1583,1375L1790,1339L1666,1199Z" fill="#42deb3" stroke="#42deb3" stroke-width="1.51"/><path d="M1931,1349L1790,1339L1583,1375Z" fill="#33ddb5" stroke="#33ddb5" stroke-width="1.51"/><path d="M2090,208L2299,39L2040,-30Z" fill="#a6d6c6" stroke="#a6d6c6" stroke-width="1.51"/><path d="M2095,588L2159,527L1950,287Z" fill="#90e5ac" stroke="#90e5ac" stroke-width="1.51"/><path d="M2285,787L2095,588L2016,830Z" fill="#6ae3ad" stroke="#6ae3ad" stroke-width="1.51"/><path d="M-312,828L-383,1027L-42,984Z" fill="#b2d2cb" stroke="#b2d2cb" stroke-width="1.51"/><path d="M-74,1199L-87,1454L122,1324Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M-314,351L-383,1027L-312,828Z" fill="#c7d6c6" stroke="#c7d6c6" stroke-width="1.51"/><path d="M2159,527L2180,402L1950,287Z" fill="#99e8ac" stroke="#99e8ac" stroke-width="1.51"/><path d="M-357,1240L-87,1454L-74,1199Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M122,1324L-87,1454L392,1336Z" fill="#a6d7c5" stroke="#a6d7c5" stroke-width="1.51"/><path d="M2040,-30L1996,-366L1766,-35Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M2274,-218L1996,-366L2040,-30Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M2011,938L2209,909L2016,830Z" fill="#4ee0b1" stroke="#4ee0b1" stroke-width="1.51"/><path d="M1790,1339L1931,1349L1871,1162Z" fill="#1ddbb7" stroke="#1ddbb7" stroke-width="1.51"/><path d="M2248,1444L1931,1349L1583,1375Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M-383,1027L-357,1240L-74,1199Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M2097,1196L2209,909L2011,938Z" fill="#2ddcb6" stroke="#2ddcb6" stroke-width="1.51"/><path d="M2159,527L2285,787L2180,402Z" fill="#81e3ac" stroke="#81e3ac" stroke-width="1.51"/><path d="M1931,1349L2097,1196L1871,1162Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M2252,1212L2285,787L2209,909Z" fill="#3bddb4" stroke="#3bddb4" stroke-width="1.51"/><path d="M2209,909L2285,787L2016,830Z" fill="#58e2af" stroke="#58e2af" stroke-width="1.51"/><path d="M2180,402L2299,39L2090,208Z" fill="#abe7b3" stroke="#abe7b3" stroke-width="1.51"/><path d="M2285,787L2299,39L2180,402Z" fill="#98e8ac" stroke="#98e8ac" stroke-width="1.51"/><path d="M-357,1240L-357,1431L-87,1454Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M-383,1027L-357,1431L-357,1240Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M2299,39L2312,-98L2040,-30Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M2285,787L2312,-98L2299,39Z" fill="#abeaaf" stroke="#abeaaf" stroke-width="1.51"/><path d="M2312,-98L2274,-218L2040,-30Z" fill="#a3ced0" stroke="#a3ced0" stroke-width="1.51"/><path d="M2248,1444L2252,1212L2097,1196Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M2097,1196L2252,1212L2209,909Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M1931,1349L2248,1444L2097,1196Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M2252,1212L2248,1444L2285,787Z" fill="#00dab8" stroke="#00dab8" stroke-width="1.51"/><path d="M1229,1474L2248,1444L1583,1375Z" fill="#41deb3" stroke="#41deb3" stroke-width="1.51"/></svg>


--------------------------------------------------------------------------------