bg video with form content test ready only at dashboard

package-lock.json

@@ -1872,6 +1872,30 @@
         }
       }
     },
+    "@progress/jszip-esm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@progress/jszip-esm/-/jszip-esm-1.0.2.tgz",
+      "integrity": "sha512-9pkPImokVc3jgBh69Dh+d5jL/BpFQKhlvTgkjP74M6Bn/XcWDLHxMeLa4/jUPPa3b9pKtZPSSF3Sht5RVZ8A+Q==",
+      "requires": {
+        "@progress/pako-esm": "^1.0.1"
+      }
+    },
+    "@progress/kendo-angular-buttons": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-buttons/-/kendo-angular-buttons-5.5.1.tgz",
+      "integrity": "sha512-ri0FYQhlg8tHrbIXdHdjGIAF1uJZfU67jehraOK1eeZmdWe3PSyYjbtEuGrSYnFxCfDbY+lZqLHf13A4Lv3SJg==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-common": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-common/-/kendo-angular-common-1.2.3.tgz",
@@ -1888,6 +1912,94 @@
         }
       }
     },
+    "@progress/kendo-angular-dateinputs": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-dateinputs/-/kendo-angular-dateinputs-4.3.2.tgz",
+      "integrity": "sha512-U4vG2CwtQGPZPm6tNgaDti+zS+tgIoexuQRPiWC8UAF2h3OzM22LBObp5FkezF05iJNO+I+D20plG+9f4ylS9A==",
+      "requires": {
+        "@progress/kendo-common": "^0.2.0",
+        "@progress/kendo-date-math": "^1.1.0",
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-angular-dialog": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-dialog/-/kendo-angular-dialog-4.2.2.tgz",
+      "integrity": "sha512-t1Ux78ZWfnNrr2cvYTOvwRdrf5NaQVitAfGTdw85LowCZSPk1l4uwXm5hZ6S7VrzeDa6nE5XHnUnCnUYO/G6Rw==",
+      "requires": {
+        "@progress/kendo-popup-common": "^1.2.3",
+        "@progress/kendo-schematics": "^1.2.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-angular-dropdowns": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-dropdowns/-/kendo-angular-dropdowns-4.3.2.tgz",
+      "integrity": "sha512-4FDp5FJSJpOrEQAZXyHDidG7nBxGWwBQkonYWsuhcu481iRVnmetxNLJRgxFESfw2GHpq+dneL13dBrndhskuA==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-angular-excel-export": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-excel-export/-/kendo-angular-excel-export-3.1.5.tgz",
+      "integrity": "sha512-RUTia9k7mqyXd9uMR10qitOo13J+20jLf0KHvKEtlrA9RGRY+2Na1maxQwWy6EZn7G/tJoFlupFUX27HUXQhbw==",
+      "requires": {
+        "@progress/kendo-file-saver": "^1.0.0",
+        "@progress/kendo-ooxml": "^1.6.1",
+        "@progress/kendo-schematics": "^1.1.0",
+        "@telerik/kendo-intl": "^2.1.1",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-angular-grid": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-grid/-/kendo-angular-grid-4.8.0.tgz",
+      "integrity": "sha512-FpPp8Kn3OScFxL/9/5CsvsEqiq7s4hSQA2G3v5mzKdiKsLp3yuTiGZ0W81d5e8Ci8HFmqWqIOqoWXJOrgiaFEA==",
+      "requires": {
+        "@progress/kendo-common": "^0.2.0",
+        "@progress/kendo-file-saver": "^1.0.0",
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-icons": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-icons/-/kendo-angular-icons-0.2.1.tgz",
@@ -1904,6 +2016,48 @@
         }
       }
     },
+    "@progress/kendo-angular-inputs": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-inputs/-/kendo-angular-inputs-6.7.2.tgz",
+      "integrity": "sha512-XrZcHzVz4Ho/AoJ2zXb35fjrFeyw9esP34ZFBbAfsRfvCf3NLcOK+lU3uaOJ/7r363hMTHv5JvxZ+cPfVamvOw==",
+      "requires": {
+        "@progress/kendo-common": "^0.1.1",
+        "@progress/kendo-schematics": "^1.1.0",
+        "@telerik/kendo-draggable": "^2.0.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "@progress/kendo-common": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.1.1.tgz",
+          "integrity": "sha512-ekEjcFsL3eBHWjh+cO+I/d2RVN7P2pDBI903jmp/dj0ojV3eu+V0u/AYWmvrNEqjeax4sx+qhSnO5iJNB391iQ==",
+          "requires": {
+            "tslib": "^1.7.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-angular-intl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-intl/-/kendo-angular-intl-2.0.3.tgz",
+      "integrity": "sha512-kqmSULtL4l976nBUkkeWLygqC0d2O+KWRPnCqcSrWHTo06ISvTrTxaVs1TP0ISofcsyj6q1uVA2Zrl+tOB6j5w==",
+      "requires": {
+        "@telerik/kendo-intl": "^2.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-l10n": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-l10n/-/kendo-angular-l10n-2.0.2.tgz",
@@ -1935,6 +2089,23 @@
         }
       }
     },
+    "@progress/kendo-angular-pdf-export": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-pdf-export/-/kendo-angular-pdf-export-2.0.4.tgz",
+      "integrity": "sha512-I1Fn91QmSCvmFjoNCSWp5jMhyJQBrBma3Wc0u0ncsvJ3gYhxOGqofQlyjcqy7NxhXa+cloZL+1YivC3aCaMQ6A==",
+      "requires": {
+        "@progress/kendo-file-saver": "^1.0.1",
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-popup": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-popup/-/kendo-angular-popup-3.0.6.tgz",
@@ -1952,6 +2123,73 @@
         }
       }
     },
+    "@progress/kendo-common": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.2.1.tgz",
+      "integrity": "sha512-/2U4Tu8jVCgEFfIsGUkfXeSQyLBIZYOiuLEZ/lizqME6WcySTn0H1i/HTWswr2BZ5El+69Ac5DEC3ffGoF9m7g==",
+      "requires": {
+        "tslib": "^1.7.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-data-query": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-data-query/-/kendo-data-query-1.5.4.tgz",
+      "integrity": "sha512-Z64LiLtM4a6MQ3MBHD79XQLvkW0HvQMI3mGR7LAzBfvWVeQJdSerNM4gVRisw3pxqmA1/UJNVZyaVPGNhPh/2A==",
+      "requires": {
+        "tslib": "^1.7.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-date-math": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-date-math/-/kendo-date-math-1.5.1.tgz",
+      "integrity": "sha512-/PsYT6heUHpMOu5hKC9AcF4U4cRNFLSUAyVVAkFEm6w7OsqlCA7XQjVmnxL3+439qFPe0JZ1QEw3CwGAqn9njQ==",
+      "requires": {
+        "tslib": "^1.7.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@progress/kendo-drawing": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-drawing/-/kendo-drawing-1.9.3.tgz",
+      "integrity": "sha512-25tRjqAnLy5Lry3EBynI/2qRphyecQHSV8+LgDpJmrdsnNH7z7ANfjy/nAXUjTVpWhPp/Wn96tPu73JGF6geFg==",
+      "requires": {
+        "@progress/pako-esm": "^1.0.1"
+      }
+    },
+    "@progress/kendo-file-saver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-file-saver/-/kendo-file-saver-1.1.0.tgz",
+      "integrity": "sha512-26iPl67d0izUlzU6p98QM5f/spOK3QCdmSJrEzGakw1Yp0qyFmp2V9uKeswfWgX0NhKmJApWjlAxxrtRvYjHYA=="
+    },
+    "@progress/kendo-ooxml": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-ooxml/-/kendo-ooxml-1.6.1.tgz",
+      "integrity": "sha512-Ya9xdCep9A03dzCfrro+lzuRoQq9btkVlhoQkeTCuZ76u+9I0/aFLSU15axZhFz+jahtXioU6lFntyPi0zkyAw==",
+      "requires": {
+        "@progress/jszip-esm": "^1.0.2",
+        "@progress/pako-esm": "^1.0.1"
+      }
+    },
     "@progress/kendo-popup-common": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@progress/kendo-popup-common/-/kendo-popup-common-1.7.0.tgz",
@@ -1972,6 +2210,11 @@
       "resolved": "https://registry.npmjs.org/@progress/kendo-theme-default/-/kendo-theme-default-4.25.0.tgz",
       "integrity": "sha512-H7Dhuxi+r0kuhkNgcHg1FseTy+MV1vZuf3TsIP9QEa2LOvWmQnCl892VDpZaJeRIa6EZ30r1CC80YVto+dKX4g=="
     },
+    "@progress/pako-esm": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@progress/pako-esm/-/pako-esm-1.0.1.tgz",
+      "integrity": "sha512-O4A3b1EuE9Xe1pC3Xz9Tcn1M/CYrL71f4y/5TXeytOVTkmkzBgYW97fYP2f+54H0e0erWRaqV/kUUB/a8Uxfbw=="
+    },
     "@schematics/angular": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-10.2.0.tgz",
@@ -2004,6 +2247,11 @@
       "resolved": "https://registry.npmjs.org/@telerik/kendo-draggable/-/kendo-draggable-2.2.0.tgz",
       "integrity": "sha512-78ofOzRpisqPjG51LfLQ4FEWoGJXs4PkzyJSdVklyFw6gtAnj/T6dp7mHIMj8BivVkN9FjNgf4Eo/mdYs9fusQ=="
     },
+    "@telerik/kendo-intl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@telerik/kendo-intl/-/kendo-intl-2.2.0.tgz",
+      "integrity": "sha512-NYBXSzknwOZjdEWB62a5xXBuzNzHatNTT+0n7NvIotEyHl6wpcfVnqOkQ2DnrwN9VI0YzhPT9hbAhc+njUxQpw=="
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",

package.json

@@ -20,7 +20,10 @@
     "@angular/platform-browser": "~10.2.0",
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
+    "@progress/kendo-angular-buttons": "^5.0.0",
     "@progress/kendo-angular-common": "^1.0.0",
+    "@progress/kendo-angular-dialog": "^4.2.2",
+    "@progress/kendo-angular-grid": "^4.8.0",
     "@progress/kendo-angular-icons": "^0.2.1",
     "@progress/kendo-angular-l10n": "^2.0.0",
     "@progress/kendo-angular-menu": "^2.0.4",
@@ -29,7 +32,15 @@
     "@progress/kendo-theme-default": "latest",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "@progress/kendo-angular-dropdowns": "^4.0.0",
+    "@progress/kendo-angular-inputs": "^6.0.0",
+    "@progress/kendo-angular-intl": "^2.0.0",
+    "@progress/kendo-data-query": "^1.0.0",
+    "@progress/kendo-drawing": "^1.5.12",
+    "@progress/kendo-angular-excel-export": "^3.0.0",
+    "@progress/kendo-angular-dateinputs": "^4.0.0",
+    "@progress/kendo-angular-pdf-export": "^2.0.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.0",

src/app/app.component.html

@@ -1,13 +1,12 @@
 
 <div class=topMenuBar >
-  <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
+  <!-- <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon> -->
   <kendo-menu [items]="items"> </kendo-menu>
 </div>
 
 <router-outlet></router-outlet>
 
 
-
 <hr>
 
 <kendo-menu>

src/app/app.module.ts

@@ -6,12 +6,20 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 //Kendo
 import { MenuModule, ContextMenuModule } from '@progress/kendo-angular-menu';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { DialogsModule } from '@progress/kendo-angular-dialog';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { GridModule } from '@progress/kendo-angular-grid';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+
 //App
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AuthComponent } from './auth/auth.component';
 
+
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -24,7 +32,11 @@ import { AuthComponent } from './auth/auth.component';
     MenuModule,
     ContextMenuModule,
     BrowserAnimationsModule,
-    //IconsModule
+    DialogsModule,
+    ButtonsModule,
+    GridModule,
+    InputsModule,
+    IconsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dashboard/dashboard.component.html

@@ -1 +1,132 @@
 <p>dashboard works!</p>
+
+<div class="example-wrapper">
+    <div class="row">
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ColorGradient</p>
+            <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ColorPalette</p>
+            <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>ColorPicker</p>
+            <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
+        </div>
+        <div class="col-xs-12 col-sm-6 example-col">
+            <p>MaskedTextBox</p>
+            <kendo-maskedtextbox
+                [mask]="'9-000'"
+            ></kendo-maskedtextbox>
+        </div>
+    </div>
+ </div>
+<hr> 
+
+<kendo-grid [data]="gridData" >
+    <kendo-grid-column field="ProductID" title="ID" width="40">
+    </kendo-grid-column>
+    <kendo-grid-column field="ProductName" title="Name" width="250">
+    </kendo-grid-column>
+    <kendo-grid-column field="Category.CategoryName" title="Category">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitPrice" title="Price" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+        <ng-template kendoGridCellTemplate let-dataItem>
+            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
+        </ng-template>
+    </kendo-grid-column>
+</kendo-grid>
+
+
+<!-- <div #target class="target">
+    <p class="placeholder">Right-click to open Context menu</p>
+  </div>
+  <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
+
+  <div class="example-wrapper">
+    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('dialog')">Open dialog</button>
+    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('window')">Open window</button>
+    
+    <kendo-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
+        <p style="margin: 30px; text-align: center;">Are you sure you want to
+        continue?</p>
+        
+
+        <div class="example-wrapper">
+            <div class="row">
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorGradient</p>
+                    <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorPalette</p>
+                    <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorPicker</p>
+                    <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>MaskedTextBox</p>
+                    <kendo-maskedtextbox
+                        [mask]="'9-000'"
+                    ></kendo-maskedtextbox>
+                </div>
+            </div>
+         </div>
+ 
+
+        <kendo-menu>
+            <kendo-menu-item text="My Web Site" icon="folder">
+                <kendo-menu-item text="images" icon="folder">
+                    <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
+                    <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
+                    <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
+                </kendo-menu-item>
+                <kendo-menu-item text="resources" icon="folder">
+                    <kendo-menu-item text="pdf" icon="folder">
+                        <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
+                        <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
+                    </kendo-menu-item>
+                    <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
+                </kendo-menu-item>
+                <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
+                <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
+                <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
+                <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
+            </kendo-menu-item>
+          </kendo-menu>
+
+        <kendo-dialog-actions>
+            <button kendoButton (click)="action('no')">No</button>
+            <button kendoButton (click)="action('yes')" primary="true">Yes</button>
+        </kendo-dialog-actions>
+    </kendo-dialog>
+
+    <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
+      <p style="text-align: center;">Additional info</p>
+      <kendo-grid [data]="gridData" [height]="410">
+        <kendo-grid-column field="ProductID" title="ID" width="40">
+        </kendo-grid-column>
+        <kendo-grid-column field="ProductName" title="Name" width="250">
+        </kendo-grid-column>
+        <kendo-grid-column field="Category.CategoryName" title="Category">
+        </kendo-grid-column>
+        <kendo-grid-column field="UnitPrice" title="Price" width="80">
+        </kendo-grid-column>
+        <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+        </kendo-grid-column>
+        <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+            <ng-template kendoGridCellTemplate let-dataItem>
+                <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
+            </ng-template>
+        </kendo-grid-column>
+    </kendo-grid>
+
+    </kendo-window>
+  </div>

src/app/dist/app.module.js

@@ -13,10 +13,16 @@ var platform_browser_1 = require("@angular/platform-browser");
 var animations_1 = require("@angular/platform-browser/animations");
 //Kendo
 var kendo_angular_menu_1 = require("@progress/kendo-angular-menu");
+var kendo_angular_icons_1 = require("@progress/kendo-angular-icons");
+var kendo_angular_dialog_1 = require("@progress/kendo-angular-dialog");
+var kendo_angular_buttons_1 = require("@progress/kendo-angular-buttons");
+var kendo_angular_grid_1 = require("@progress/kendo-angular-grid");
+var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
 //App
 var app_component_1 = require("./app.component");
 var app_routing_module_1 = require("./app-routing.module");
 var dashboard_component_1 = require("./dashboard/dashboard.component");
+var auth_component_1 = require("./auth/auth.component");
 var AppModule = /** @class */ (function () {
     function AppModule() {
     }
@@ -24,7 +30,8 @@ var AppModule = /** @class */ (function () {
         core_1.NgModule({
             declarations: [
                 app_component_1.AppComponent,
-                dashboard_component_1.DashboardComponent
+                dashboard_component_1.DashboardComponent,
+                auth_component_1.AuthComponent
             ],
             imports: [
                 platform_browser_1.BrowserModule,
@@ -32,6 +39,11 @@ var AppModule = /** @class */ (function () {
                 kendo_angular_menu_1.MenuModule,
                 kendo_angular_menu_1.ContextMenuModule,
                 animations_1.BrowserAnimationsModule,
+                kendo_angular_dialog_1.DialogsModule,
+                kendo_angular_buttons_1.ButtonsModule,
+                kendo_angular_grid_1.GridModule,
+                kendo_angular_inputs_1.InputsModule,
+                kendo_angular_icons_1.IconsModule
             ],
             providers: [],
             bootstrap: [app_component_1.AppComponent]

src/index.html

@@ -9,5 +9,46 @@
 </head>
 <body>
   <app-root></app-root>
+
+  <style>
+#bgVideo {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: -1;
+}
+
+    body { 
+    margin: 0; 
+    background-size: cover; 
+    background-image: url('../img/login-bg1.jpg');
+}
+
+.vimeo-container {
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+
+iframe {
+  box-sizing: border-box;
+  width: 177.77777778vh;
+  height: 56.25vw;
+  min-width: 100%;
+  min-height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+  </style>
+
+  <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0"
+  frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+
 </body>
 </html>