feat(demo): organise sortablejs

packages/demo/src/app/app-routing.module.ts

@@ -17,6 +17,10 @@ const routes: Routes = [
     {
         path: 'pick-datetime',
         loadChildren: () => import('./pick-datetime/pick-datetime.module').then(m => m.AppPickDatetimeModule)
+    },
+    {
+        path: 'sortablejs',
+        loadChildren: () => import('./sortablejs/sortablejs.module').then(m => m.AppSortablejsModule)
     }
 ]
 

packages/demo/src/app/sortablejs/examples/multiple-lists/multiple-lists.component.ts

@@ -4,7 +4,7 @@ import {Options} from 'sortablejs';
 @Component({
   selector: 'app-multiple-lists',
   templateUrl: './multiple-lists.component.html',
-  styleUrls: ['./multiple-lists.component.css'],
+  styleUrls: ['./multiple-lists.component.scss'],
 })
 export class MultipleListsComponent {
 

packages/demo/src/app/sortablejs/examples/simple-sortable/simple-sortable.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-simple-sortable',
   templateUrl: './simple-sortable.component.html',
-  styleUrls: ['./simple-sortable.component.css'],
+  styleUrls: ['./simple-sortable.component.scss'],
 })
 export class SimpleSortableComponent {
 

packages/demo/src/app/sortablejs/examples/sortable-form-array/sortable-form-array.component.ts

@@ -4,7 +4,7 @@ import { UntypedFormArray, UntypedFormControl } from '@angular/forms';
 @Component({
   selector: 'app-sortable-form-array',
   templateUrl: './sortable-form-array.component.html',
-  styleUrls: ['./sortable-form-array.component.css'],
+  styleUrls: ['./sortable-form-array.component.scss'],
 })
 export class SortableFormArrayComponent {
 

packages/demo/src/app/sortablejs/examples/sortable-with-options/sortable-with-options.component.ts

@@ -4,7 +4,7 @@ import {Options} from 'sortablejs';
 @Component({
   selector: 'app-sortable-with-options',
   templateUrl: './sortable-with-options.component.html',
-  styleUrls: ['./sortable-with-options.component.css'],
+  styleUrls: ['./sortable-with-options.component.scss'],
 })
 export class SortableWithOptionsComponent {
 

packages/demo/src/app/sortablejs/sortablejs-routing.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { MultipleListsComponent } from './examples/multiple-lists/multiple-lists.component'
+import { SimpleSortableComponent } from './examples/simple-sortable/simple-sortable.component'
+import { SortableFormArrayComponent } from './examples/sortable-form-array/sortable-form-array.component'
+import { SortableWithOptionsComponent } from './examples/sortable-with-options/sortable-with-options.component'
+import { CrossComponentsMultipleListsComponent } from './test-cases/cross-components-multiple-lists/cross-components-multiple-lists.component'
+
+const routes: Routes = [
+    {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'sortable-array'
+    },
+    {
+        path: 'sortable-array',
+        component: SimpleSortableComponent
+    },
+    {
+        path: 'sortable-form-array',
+        component: SortableFormArrayComponent
+    },
+    {
+        path: 'custom-options',
+        component: SortableWithOptionsComponent
+    },
+    {
+        path: 'multiple-lists',
+        component: MultipleListsComponent
+    },
+    {
+        path: 'tests/cross-components-multiple-list',
+        component: CrossComponentsMultipleListsComponent
+    }
+]
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class AppSortablejsRouterModule { }

packages/demo/src/app/sortablejs/sortablejs.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core'
+
+@Component({
+    selector: 'app-sortablejs',
+    templateUrl: './sortablejs.component.html',
+    styleUrls: ['./sortablejs.component.scss']
+})
+export class AppSortablejsComponent {
+
+    navbarCollapsed = true
+
+    get showTestCases() {
+        return localStorage.getItem('showTestCases') === 'true'
+    }
+
+}

packages/demo/src/app/sortablejs/sortablejs.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
+import { SortablejsModule } from 'nxt-sortablejs'
+import { ExamplesModule } from './examples/examples.module'
+import { AppSortablejsRouterModule } from './sortablejs-routing.module'
+import { AppSortablejsComponent } from './sortablejs.component'
+import { TestCasesModule } from './test-cases/test-cases.module'
+
+@NgModule({
+    declarations: [
+        AppSortablejsComponent
+    ],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        AppSortablejsRouterModule,
+
+        // global settings
+        SortablejsModule.forRoot({
+            animation: 200
+        }),
+
+        BsDropdownModule.forRoot(),
+
+        ExamplesModule,
+        TestCasesModule
+    ],
+    bootstrap: [AppSortablejsComponent]
+})
+export class AppSortablejsModule { }

packages/demo/src/app/sortablejs/test-cases/cross-components-multiple-lists/child-component/child-component.component.ts

@@ -4,7 +4,7 @@ import {Options} from 'sortablejs';
 @Component({
   selector: 'app-child-component',
   templateUrl: './child-component.component.html',
-  styleUrls: ['./child-component.component.css'],
+  styleUrls: ['./child-component.component.scss'],
 })
 export class ChildComponentComponent {