chore: add menu window

telerik · Sep 19, 2024 · 61823cc · 61823cc
1 parent 80b6e05
commit 61823cc
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 103 deletions.
diff --git a/examples-standalone/coffee-warehouse/angular.json b/examples-standalone/coffee-warehouse/angular.json
@@ -22,7 +22,6 @@
           "builder": "@angular-devkit/build-angular:application",
           "options": {
             "allowedCommonJsDependencies": [
-              "hammerjs",
               "@progress/kendo-angular-intl/locales/en/all",
               "@progress/kendo-angular-intl/locales/es/all",
               "@progress/kendo-angular-intl/locales/fr/all"
@@ -36,25 +35,14 @@
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets",
-              {
-                "glob": "**/*",
-                "input": "node_modules/@progress/kendo-theme-bootstrap/dist",
-                "output": "/assets/kendo-theme-bootstrap/dist"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@progress/kendo-theme-default/dist",
-                "output": "/assets/kendo-theme-default/dist"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/@progress/kendo-theme-material/dist",
-                "output": "/assets/kendo-theme-material/dist"
-              }
+              "src/assets"
             ],
             "styles": [
-              "src/styles/main.scss"
+              "src/styles/main.scss",
+              {
+                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
+              },
+              "node_modules/@progress/kendo-theme-utils/dist/all.css"
             ],
             "scripts": [],
             "extractLicenses": false,

diff --git a/examples-standalone/coffee-warehouse/package-lock.json b/examples-standalone/coffee-warehouse/package-lock.json
diff --git a/examples-standalone/coffee-warehouse/package.json b/examples-standalone/coffee-warehouse/package.json
@@ -49,9 +49,10 @@
     "@progress/kendo-drawing": "^1.20.4",
     "@progress/kendo-licensing": "^1.3.5",
     "@progress/kendo-svg-icons": "^3.1.0",
+    "@progress/kendo-theme-bootstrap": "^9.0.0",
     "@progress/kendo-theme-default": "^9.0.0",
     "@progress/kendo-theme-material": "^9.0.0",
-    "@progress/kendo-theme-bootstrap": "^9.0.0",
+    "@progress/kendo-theme-utils": "^9.0.0",
     "hammerjs": "^2.0.8",
     "rxjs": "~7.8.1",
     "tslib": "^2.7.0",

diff --git a/examples-standalone/coffee-warehouse/src/app/app.module.ts b/examples-standalone/coffee-warehouse/src/app/app.module.ts
@@ -33,6 +33,8 @@ import { NotificationModule } from '@progress/kendo-angular-notification';
 import { IconsModule } from "@progress/kendo-angular-icons";
 import { MessageService } from '@progress/kendo-angular-l10n';
 
+import { MenuWindowComponent } from './components/menu-window/menu-window.component';
+
 const drawerRoutes = [
     { path: '', component: TeamComponent },
     { path: 'dashboard', component: DashboardComponent },
@@ -47,6 +49,7 @@ import '@progress/kendo-angular-intl/locales/en/all';
 import '@progress/kendo-angular-intl/locales/es/all';
 import '@progress/kendo-angular-intl/locales/fr/all';
 import { SettingsListComponent } from './components/accessibility-menu/settings-list/settings-list.component';
+import { WindowModule } from '@progress/kendo-angular-dialog';
 
 @NgModule({
     declarations: [
@@ -60,7 +63,8 @@ import { SettingsListComponent } from './components/accessibility-menu/settings-
         InfoComponent,
         TeamComponent,
         NumericTextboxButtonsComponent,
-        SettingsListComponent
+        SettingsListComponent,
+        MenuWindowComponent
     ],
     imports: [
         BrowserModule,
@@ -84,7 +88,8 @@ import { SettingsListComponent } from './components/accessibility-menu/settings-
         DropDownsModule,
         RouterModule.forRoot(drawerRoutes),
         NotificationModule,
-        IconsModule
+        IconsModule,
+        WindowModule
     ],
     providers: [
         { provide: MessageService, useClass: CustomMessagesService },

diff --git a/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts b/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { accessibilityIcon, SVGIcon } from '@progress/kendo-svg-icons';
+
+@Component({
+    selector: 'app-menu-window',
+    template: `
+        <kendo-button
+            #button
+            [svgIcon]="a11yIcon"
+            size="large" 
+            themeColor="inverse"
+            (click)="toggle()"></kendo-button>
+        <kendo-window *ngIf="show"
+            [top]="top"
+            [left]="left"
+            [width]="400"
+            (close)="show = false;">
+            Window content
+        </kendo-window>
+    `
+})
+export class MenuWindowComponent implements OnInit {
+    @ViewChild('button') public button: ButtonComponent;
+    public a11yIcon: SVGIcon = accessibilityIcon;
+    public show = false;
+    public left: number;
+    public top: number;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    public toggle(): void {
+        if (!this.show) {
+            const {bottom, left, width} = this.button.element.getBoundingClientRect();
+            this.top = bottom;
+            this.left = left - 400 + width;
+        }
+
+        this.show = !this.show;
+    }
+}
diff --git a/examples-standalone/coffee-warehouse/src/app/header/header.commponent.html b/examples-standalone/coffee-warehouse/src/app/header/header.commponent.html
@@ -39,6 +39,7 @@ <h2 *ngIf="selectedPage">{{ this.customMsgService.translate(selectedPage.toLower
                 </ng-template>
             </kendo-dropdownlist>
         </div>
+        <app-menu-window></app-menu-window>
 
         <kendo-avatar imageSrc="assets/user.jpg" shape="circle"> </kendo-avatar>
     </div>

diff --git a/examples-standalone/coffee-warehouse/src/index.html b/examples-standalone/coffee-warehouse/src/index.html
@@ -8,8 +8,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
-
-        <link id="theme" rel="stylesheet" href="assets/kendo-theme-default/dist/all.css" />
     </head>
     <body>
         <app-root></app-root>

diff --git a/examples-standalone/coffee-warehouse/tsconfig.json b/examples-standalone/coffee-warehouse/tsconfig.json
@@ -5,7 +5,7 @@
     "allowJs": true,
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
@@ -28,6 +28,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": false
   }
 }