kiFlA6>{3vK|MVf}Ut~gb(c035BGiMe@^_rZ|J{kps5{qf
z3rV|=QbOmavs7iI;xu=eWZYkK`0TmqwU!X_L1H;y<|@+k+M4{dzTCjZ+K9G&k~$<4
QGzEmX;ykgn2M%Zd4;H-jsQ>@~
literal 0
HcmV?d00001
diff --git a/examples-standalone/kendoangular-landing-page/src/main.ts b/examples-standalone/kendoangular-landing-page/src/main.ts
index f8908bc7..264174ca 100644
--- a/examples-standalone/kendoangular-landing-page/src/main.ts
+++ b/examples-standalone/kendoangular-landing-page/src/main.ts
@@ -1,18 +1,15 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { provideRouter, withHashLocation } from '@angular/router';
-import { APP_BASE_HREF } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
+import { bootstrapApplication } from "@angular/platform-browser";
+import { provideRouter, withHashLocation } from "@angular/router";
+import { APP_BASE_HREF } from "@angular/common";
+import { provideAnimations } from "@angular/platform-browser/animations";
-import { AppComponent } from './app/app.component';
-import { routes } from './app/app.routes';
+import { AppComponent } from "./app/app.component";
+import { routes } from "./app/app.routes";
bootstrapApplication(AppComponent, {
- providers: [
- provideRouter(
- routes,
- withHashLocation()
- ),
- { provide: APP_BASE_HREF, useValue: '/overview/' },
- provideAnimations()
- ]
-}).catch(err => console.error(err));
\ No newline at end of file
+ providers: [
+ provideRouter(routes, withHashLocation()),
+ { provide: APP_BASE_HREF, useValue: "/overview/" },
+ provideAnimations(),
+ ],
+}).catch((err) => console.error(err));
From 3a9e83061b515ec7c6d76ad9deac8dd3e6d9f948 Mon Sep 17 00:00:00 2001
From: Yanmario Menev <49076727+yanmariomenev@users.noreply.github.com>
Date: Mon, 28 Apr 2025 17:14:04 +0300
Subject: [PATCH 3/7] chore: update dialogs and add prettierr config
---
.../kendoangular-landing-page/.prettierignore | 3 +
.../kendoangular-landing-page/.prettierrc | 5 ++
.../components/dialogs/dialogs.component.css | 31 +++-----
.../components/dialogs/dialogs.component.html | 13 +---
.../components/dialogs/dialogs.component.ts | 30 ++++----
.../scheduler/scheduler.component.ts | 77 +++++++++----------
.../src/app/services/locale.service.ts | 11 ---
7 files changed, 73 insertions(+), 97 deletions(-)
create mode 100644 examples-standalone/kendoangular-landing-page/.prettierignore
create mode 100644 examples-standalone/kendoangular-landing-page/.prettierrc
delete mode 100644 examples-standalone/kendoangular-landing-page/src/app/services/locale.service.ts
diff --git a/examples-standalone/kendoangular-landing-page/.prettierignore b/examples-standalone/kendoangular-landing-page/.prettierignore
new file mode 100644
index 00000000..01d9367c
--- /dev/null
+++ b/examples-standalone/kendoangular-landing-page/.prettierignore
@@ -0,0 +1,3 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
\ No newline at end of file
diff --git a/examples-standalone/kendoangular-landing-page/.prettierrc b/examples-standalone/kendoangular-landing-page/.prettierrc
new file mode 100644
index 00000000..af385bcb
--- /dev/null
+++ b/examples-standalone/kendoangular-landing-page/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "printWidth": 120,
+ "tabWidth": 4
+}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.css b/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.css
index f88dcb7c..c9714aa5 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.css
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.css
@@ -25,22 +25,14 @@
font-size: 20px;
}
-.window-content {
- padding: 15px;
-}
-
-.window-header {
- display: flex;
- align-items: center;
- margin-bottom: 20px;
- padding-bottom: 15px;
- border-bottom: 1px solid #eee;
+kendo-window {
+ --kendo-window-titlebar-bg: #3f51b5;
+ --kendo-window-titlebar-text: white;
+ margin-top: 0;
}
-.window-header .k-icon {
- font-size: 24px;
- margin-right: 10px;
- color: #ff6358;
+.window-content {
+ padding: 15px;
}
.success-message,
@@ -57,11 +49,6 @@
border-left-color: #2196f3;
}
-kendo-window {
- --kendo-window-titlebar-bg: #3f51b5;
- --kendo-window-titlebar-text: white;
-}
-
.k-form-field {
margin-bottom: 15px;
}
@@ -75,12 +62,14 @@ fieldset {
legend {
padding: 0 10px;
- font-weight: 500;
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 5px;
color: #455a64;
}
.k-actions {
- margin-top: 20px;
+ margin-top: 15px;
}
@media (max-width: 768px) {
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.html
index 4d42870a..de5e5cc4 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.html
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.html
@@ -32,18 +32,13 @@ Kendo Angular Dialog
title="Complete Your Profile"
[minWidth]="320"
[width]="500"
- [height]="590"
- [top]="160"
+ [height]="430"
+ [top]="80"
[resizable]="true"
[draggable]="true"
(close)="closeWindow()"
>
-
-
-
-
-
-
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.ts b/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.ts
index 7ef04c92..aefbd42a 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.ts
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/dialogs/dialogs.component.ts
@@ -1,23 +1,23 @@
-import { Component } from "@angular/core";
-import { FormsModule } from "@angular/forms";
-import { KENDO_BUTTONS } from "@progress/kendo-angular-buttons";
-import { KENDO_DATEINPUTS } from "@progress/kendo-angular-dateinputs";
-import { KENDO_DIALOGS } from "@progress/kendo-angular-dialog";
-import { KENDO_INPUTS } from "@progress/kendo-angular-inputs";
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
+import { KENDO_DATEINPUTS } from '@progress/kendo-angular-dateinputs';
+import { KENDO_DIALOGS } from '@progress/kendo-angular-dialog';
+import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
@Component({
- selector: "app-dialogs",
+ selector: 'app-dialogs',
imports: [KENDO_DIALOGS, KENDO_BUTTONS, KENDO_INPUTS, KENDO_DATEINPUTS, FormsModule],
- templateUrl: "./dialogs.component.html",
- styleUrl: "./dialogs.component.css",
+ templateUrl: './dialogs.component.html',
+ styleUrl: './dialogs.component.css',
})
export class DialogsComponent {
public windowOpened = true;
public formSubmitted = false;
- public firstName = "";
- public lastName = "";
+ public firstName = '';
+ public lastName = '';
public dialogOpened = false;
- public confirmationResult = "";
+ public confirmationResult = '';
public openWindow(): void {
this.windowOpened = true;
@@ -47,8 +47,8 @@ export class DialogsComponent {
public reset(): void {
this.formSubmitted = false;
- this.confirmationResult = "";
- this.firstName = "";
- this.lastName = "";
+ this.confirmationResult = '';
+ this.firstName = '';
+ this.lastName = '';
}
}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/scheduler/scheduler.component.ts b/examples-standalone/kendoangular-landing-page/src/app/components/scheduler/scheduler.component.ts
index 74d6262c..d13b731b 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/scheduler/scheduler.component.ts
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/scheduler/scheduler.component.ts
@@ -1,74 +1,73 @@
-import { ChangeDetectorRef, Component, Inject, LOCALE_ID } from "@angular/core";
-import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms";
-import { KENDO_DROPDOWNLIST } from "@progress/kendo-angular-dropdowns";
-import { CldrIntlService, IntlService } from "@progress/kendo-angular-intl";
-import { MessageService } from "@progress/kendo-angular-l10n";
-import { CreateFormGroupArgs, KENDO_SCHEDULER } from "@progress/kendo-angular-scheduler";
-import { KENDO_TOOLBAR } from "@progress/kendo-angular-toolbar";
-import { customModelFields, displayDate, sampleDataWithCustomSchema } from "../../data/scheduler-data";
-import { SchedulerMessageService } from "../../services/scheduler-message.service";
+import { Component, Inject, LOCALE_ID } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { KENDO_DROPDOWNLIST } from '@progress/kendo-angular-dropdowns';
+import { CldrIntlService, IntlService } from '@progress/kendo-angular-intl';
+import { MessageService } from '@progress/kendo-angular-l10n';
+import { CreateFormGroupArgs, KENDO_SCHEDULER } from '@progress/kendo-angular-scheduler';
+import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
+import { customModelFields, displayDate, sampleDataWithCustomSchema } from '../../data/scheduler-data';
+import { SchedulerMessageService } from '../../services/scheduler-message.service';
-import "@progress/kendo-angular-intl/locales/en/all";
-import "@progress/kendo-angular-intl/locales/es/all";
+import '@progress/kendo-angular-intl/locales/en/all';
+import '@progress/kendo-angular-intl/locales/es/all';
interface LanguageOption {
text: string;
value: string;
}
@Component({
- selector: "app-scheduler",
+ selector: 'app-scheduler',
imports: [KENDO_SCHEDULER, KENDO_TOOLBAR, KENDO_DROPDOWNLIST, ReactiveFormsModule],
providers: [
{ provide: MessageService, useClass: SchedulerMessageService },
- { provide: LOCALE_ID, useValue: "en" },
+ { provide: LOCALE_ID, useValue: 'en' },
],
- templateUrl: "./scheduler.component.html",
- styleUrls: ["./scheduler.component.css"],
+ templateUrl: './scheduler.component.html',
+ styleUrls: ['./scheduler.component.css'],
})
export class SchedulerComponent {
public selectedDate: Date = displayDate;
public events: any[] = sampleDataWithCustomSchema;
- public currentView: string = "day";
+ public currentView: string = 'day';
public modelFields = customModelFields;
- public orientation: "horizontal" | "vertical" = "horizontal";
+ public orientation: 'horizontal' | 'vertical' = 'horizontal';
public formGroup!: FormGroup;
- public group: any = { resources: ["Rooms", "Persons"] };
+ public group: any = { resources: ['Rooms', 'Persons'] };
public resources = [
{
- name: "Rooms",
+ name: 'Rooms',
data: [
- { text: "Meeting Room 101", value: 1, color: "#5392E4" },
- { text: "Meeting Room 201", value: 2, color: "#FF7272" },
+ { text: 'Meeting Room 101', value: 1, color: '#5392E4' },
+ { text: 'Meeting Room 201', value: 2, color: '#FF7272' },
],
- field: "RoomID",
- valueField: "value",
- textField: "text",
- colorField: "color",
+ field: 'RoomID',
+ valueField: 'value',
+ textField: 'text',
+ colorField: 'color',
},
{
- name: "Persons",
+ name: 'Persons',
data: [
- { text: "Peter", value: 1, color: "#5392E4" },
- { text: "Alex", value: 2, color: "#54677B" },
+ { text: 'Peter', value: 1, color: '#5392E4' },
+ { text: 'Alex', value: 2, color: '#54677B' },
],
- field: "PersonIDs",
- valueField: "value",
- textField: "text",
- colorField: "color",
+ field: 'PersonIDs',
+ valueField: 'value',
+ textField: 'text',
+ colorField: 'color',
},
];
public languages: LanguageOption[] = [
- { text: "English", value: "en" },
- { text: "Spanish", value: "es" },
+ { text: 'English', value: 'en' },
+ { text: 'Spanish', value: 'es' },
];
- public selectedLanguage: any = { text: "English", value: "en-US" };
+ public selectedLanguage: any = { text: 'English', value: 'en-US' };
constructor(
private formBuilder: FormBuilder,
private messages: MessageService,
@Inject(LOCALE_ID) public localeId: string,
- public intlService: IntlService,
- private cdr: ChangeDetectorRef
+ public intlService: IntlService
) {
this.createFormGroup = this.createFormGroup.bind(this);
}
@@ -121,12 +120,12 @@ export class SchedulerComponent {
}
}
- public handleOrientationChange(orientation: "horizontal" | "vertical"): void {
+ public handleOrientationChange(orientation: 'horizontal' | 'vertical'): void {
this.orientation = orientation;
}
public changeLanguage(language: LanguageOption): void {
const svc = this.messages;
- svc.language = svc.language === "es" ? "en" : "es";
+ svc.language = svc.language === 'es' ? 'en' : 'es';
(this.intlService as CldrIntlService).localeId = language.value;
}
}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/services/locale.service.ts b/examples-standalone/kendoangular-landing-page/src/app/services/locale.service.ts
deleted file mode 100644
index 7ad49595..00000000
--- a/examples-standalone/kendoangular-landing-page/src/app/services/locale.service.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-import { CldrIntlService } from '@progress/kendo-angular-intl';
-import '@progress/kendo-angular-intl/locales/es/all';
-
-@Injectable()
-export class MyService extends CldrIntlService {
- constructor() {
- super('es-ES');
- }
-
-}
From 71d96acb88d73f6536d7ffd54d1405af2d364c49 Mon Sep 17 00:00:00 2001
From: Georgi Slavov
Date: Mon, 28 Apr 2025 19:17:25 +0300
Subject: [PATCH 4/7] chore: fix initial comments for layout, grid, treeview,
conversationalui
---
.../conversational-ui.component.html | 5 +-
.../conversational-ui.component.ts | 114 +---
.../grid/dynamic-grid.component.css | 6 +-
.../layout/my-layout.component.html | 10 +-
.../treeview/treeview.component.html | 4 +-
.../src/app/data/ai-prompt-data.ts | 33 +
.../src/app/data/dynamic-data.ts | 623 +++++++++---------
.../src/app/services/data.service.ts | 11 +-
.../kendoangular-landing-page/src/styles.css | 2 +-
9 files changed, 394 insertions(+), 414 deletions(-)
create mode 100644 examples-standalone/kendoangular-landing-page/src/app/data/ai-prompt-data.ts
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.html
index 9d4194cf..68789e7e 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.html
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.html
@@ -10,15 +10,12 @@
-
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.ts b/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.ts
index 354e12b4..0c3549e1 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.ts
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/conversational-ui/conversational-ui.component.ts
@@ -1,85 +1,42 @@
-import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
-import { KENDO_BUTTONS } from "@progress/kendo-angular-buttons";
+import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
+import { guid } from '@progress/kendo-angular-common';
import {
- CommandExecuteEvent,
KENDO_CONVERSATIONALUI,
Message,
- PromptCommand,
PromptOutput,
PromptRequestEvent,
SendMessageEvent,
User,
-} from "@progress/kendo-angular-conversational-ui";
-import { KENDO_INPUTS } from "@progress/kendo-angular-inputs";
-import { KENDO_LAYOUT } from "@progress/kendo-angular-layout";
-import {
- bellIcon,
- eyeIcon,
- infoCircleIcon,
- questionCircleIcon,
- SVGIcon,
- warningCircleIcon,
- xIcon,
-} from "@progress/kendo-svg-icons";
-
-import { from, merge, Observable, Subject } from "rxjs";
-import { map, scan } from "rxjs/operators";
-import { ChatService } from "./chat.service";
+} from '@progress/kendo-angular-conversational-ui';
+import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
+import { KENDO_LAYOUT } from '@progress/kendo-angular-layout';
+import { eyeIcon, SVGIcon, xIcon } from '@progress/kendo-svg-icons';
+import { from, merge, Observable, Subject } from 'rxjs';
+import { map, scan } from 'rxjs/operators';
+import { defaultResponse, promptData } from '../../data/ai-prompt-data';
+import { ChatService } from './chat.service';
@Component({
- selector: "app-conversational-ui",
+ selector: 'app-conversational-ui',
imports: [CommonModule, KENDO_CONVERSATIONALUI, KENDO_BUTTONS, KENDO_INPUTS, KENDO_LAYOUT],
providers: [ChatService],
- templateUrl: "./conversational-ui.component.html",
- styleUrl: "./conversational-ui.component.css",
+ templateUrl: './conversational-ui.component.html',
+ styleUrl: './conversational-ui.component.css',
})
export class ConversationalUiComponent {
- public closeIcon: SVGIcon = xIcon;
- public eye: SVGIcon = eyeIcon;
public feed: Observable;
-
+ public promptOutputs: PromptOutput[] = [];
+ public activeView: number = 0;
public readonly user: User = {
id: 1,
};
-
public readonly bot: User = {
id: 0,
};
-
- public promptOutputs: PromptOutput[] = [];
- public activeView: number = 0;
- public idCounter = 0;
-
- public commands: PromptCommand[] = [
- {
- text: "Command text 1",
- id: 0,
- icon: "bell",
- svgIcon: bellIcon,
- },
- {
- text: "Command text 2",
- id: 1,
- icon: "info",
- svgIcon: infoCircleIcon,
- },
- {
- text: "Command text 3",
- id: 2,
- icon: "question",
- svgIcon: questionCircleIcon,
- },
- {
- text: "Command text 4",
- id: 3,
- icon: "warning",
- svgIcon: warningCircleIcon,
- },
- ];
-
- public suggestions: string[] = ["Generate out-of-office email template", "Write a LinkedIn post on the importance of work/life balance"];
+ public promptSuggestions = promptData.map((s) => s.suggestion);
private local: Subject = new Subject();
@@ -88,16 +45,16 @@ export class ConversationalUiComponent {
author: this.bot,
suggestedActions: [
{
- type: "reply",
- value: "Neat!",
+ type: 'reply',
+ value: 'Neat!',
},
{
- type: "reply",
- value: "Thanks, but this is boring.",
+ type: 'reply',
+ value: 'Thanks, but this is boring.',
},
],
timestamp: new Date(),
- text: "Hello, this is a demo bot. I don`t do much, but I can count symbols!",
+ text: 'Hello, this is a demo bot. I don`t do much, but I can count symbols!',
};
this.feed = merge(
@@ -135,23 +92,18 @@ export class ConversationalUiComponent {
this.activeView = 1;
}
- public onCommandExecute(ev: CommandExecuteEvent): void {
- this.createPromptOutput(ev);
- this.activeView = 1;
- }
+ private createPromptOutput(ev: PromptRequestEvent): void {
+ const response = promptData.find((s) => s.suggestion === ev.prompt);
- private createPromptOutput(ev: PromptRequestEvent | CommandExecuteEvent): void {
- this.idCounter += 1;
- const newOutput = {
- title: ev.isRetry ? "Retry test title" : "Test title",
- id: this.idCounter,
- prompt: (ev as PromptRequestEvent).prompt
- ? (ev as PromptRequestEvent).prompt
- : (ev as CommandExecuteEvent).command.text,
- output: "Test content",
+ const output: PromptOutput = {
+ id: guid(),
+ title: ev.prompt,
+ output: response?.response || defaultResponse,
+ prompt: ev.prompt,
isRetry: ev.isRetry,
- commandId: (ev as PromptRequestEvent).prompt ? null : (ev as CommandExecuteEvent).command.id,
};
- this.promptOutputs.unshift(newOutput as PromptOutput);
+
+ this.promptOutputs.unshift(output);
+ this.activeView = 1;
}
}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css
index 22357cb2..383ba1ae 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css
@@ -15,12 +15,12 @@
}
.red {
- color: #f31700;
+ color: #d51923;
}
.green {
- color: #37b400;
+ color: #278200;
}
.k-grid .k-table-row.k-table-alt-row {
background-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html
index 78d0fecc..9e5e7eae 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html
@@ -5,7 +5,15 @@
-
+
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/treeview/treeview.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/treeview/treeview.component.html
index 46cd72e5..f9e091bc 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/treeview/treeview.component.html
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/treeview/treeview.component.html
@@ -1,6 +1,6 @@
-
TreeView - Multiple Selection Mode with Checkboxes
+
Multiple Selection Mode with Checkboxes
-
TreeView - Drag and Drop Support
+
Drag and Drop Support
({
- id: index + 1,
- assetType: assetTypes[Math.floor(Math.random() * assetTypes.length)],
- status: statuses[Math.floor(Math.random() * statuses.length)],
- company: companies[Math.floor(Math.random() * companies.length)],
- price: prices[Math.floor(Math.random() * prices.length)],
- change: changes[Math.floor(Math.random() * changes.length)],
-}));
diff --git a/examples-standalone/kendoangular-landing-page/src/app/services/data.service.ts b/examples-standalone/kendoangular-landing-page/src/app/services/data.service.ts
index d0e22049..887b7235 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/services/data.service.ts
+++ b/examples-standalone/kendoangular-landing-page/src/app/services/data.service.ts
@@ -1,11 +1,10 @@
import { Injectable } from '@angular/core';
-import { Observable, BehaviorSubject, from } from 'rxjs';
-import { delay, map, take } from 'rxjs/operators';
-import { data, prices, changes, assetTypes, statuses, companies } from '../data/dynamic-data';
-import { DynamicGridItem } from '../models/dynamic-grid-item';
-import { CompositeFilterDescriptor, FilterDescriptor, SortDescriptor, State } from '@progress/kendo-data-query';
-import { process, orderBy, filterBy } from '@progress/kendo-data-query';
import { GridDataResult } from '@progress/kendo-angular-grid';
+import { process, State } from '@progress/kendo-data-query';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { assetTypes, changes, companies, prices, statuses } from '../data/dynamic-data';
+import { DynamicGridItem } from '../models/dynamic-grid-item';
@Injectable({
providedIn: 'root',
diff --git a/examples-standalone/kendoangular-landing-page/src/styles.css b/examples-standalone/kendoangular-landing-page/src/styles.css
index 47d12d97..7f8d5954 100644
--- a/examples-standalone/kendoangular-landing-page/src/styles.css
+++ b/examples-standalone/kendoangular-landing-page/src/styles.css
@@ -1,5 +1,5 @@
:root {
- --kendo-font-family: "Roboto", sans-serif;
+ --kendo-font-family: 'Roboto', sans-serif;
}
body {
font-family: var(--kendo-font-family);
From e8dba29784bff2c3978f20df0479434ea9017d98 Mon Sep 17 00:00:00 2001
From: Yanmario Menev <49076727+yanmariomenev@users.noreply.github.com>
Date: Tue, 29 Apr 2025 17:27:30 +0300
Subject: [PATCH 5/7] chore: update chip styling
---
.../grid/dynamic-grid.component.css | 32 +++++++++++++++++++
.../grid/dynamic-grid.component.html | 8 +++--
.../components/grid/dynamic-grid.component.ts | 13 --------
3 files changed, 37 insertions(+), 16 deletions(-)
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css
index 383ba1ae..3231414e 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.css
@@ -21,6 +21,38 @@
.green {
color: #278200;
}
+
.k-grid .k-table-row.k-table-alt-row {
background-color: transparent;
}
+
+.status-chip-filled,
+.status-chip-filled:hover {
+ background-color: rgb(0, 88, 233);
+ border-color: var(--kendo-color-info-emphasis, #4082ef);
+ color: rgb(255, 255, 255);
+}
+
+.status-chip-open,
+.status-chip-open:hover {
+ background-color: rgb(40, 133, 0);
+ border-color: var(--kendo-color-success-emphasis, #37b400);
+ color: rgb(255, 255, 255);
+}
+
+.status-chip-rejected,
+.status-chip-rejected:hover {
+ background-color: rgb(235, 23, 0);
+ border-color: var(--kendo-color-error-emphasis, #d51923);
+ color: rgb(255, 255, 255);
+}
+.k-chip {
+ width: 45px;
+ height: 10px;
+}
+.k-chip-content {
+ justify-content: center;
+ font-weight: 400;
+ font-size: 10px;
+ font-family: 'Roboto', sans-serif;
+}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.html
index 51bfa95b..10af831f 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.html
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.html
@@ -115,9 +115,11 @@
{{ column.title }}
- {{
- dataItem.status
- }}
+
+ {{ dataItem.status }}
+
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.ts b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.ts
index 71c8d3d8..e7b13e09 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.ts
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/grid/dynamic-grid.component.ts
@@ -107,19 +107,6 @@ export class DynamicGridComponent implements OnInit, OnDestroy {
this.dataService.updateRefreshInterval(event);
}
- public getThemeColor(status: string): ChipThemeColor {
- switch (status) {
- case 'Filled':
- return 'info';
- case 'Open':
- return 'success';
- case 'Rejected':
- return 'error';
- default:
- return 'base';
- }
- }
-
public getAssetTypeIcon(assetType: string): SafeHtml {
if (assetType === 'Real Estate') {
return this.domSanitizer.bypassSecurityTrustHtml(realEstateIcon);
From 82fe0f59f7f3397fbbeddd2e7ff95ff8d5410de1 Mon Sep 17 00:00:00 2001
From: Yanmario Menev <49076727+yanmariomenev@users.noreply.github.com>
Date: Tue, 29 Apr 2025 17:47:03 +0300
Subject: [PATCH 6/7] chore: update layout demo
---
.../components/layout/my-layout.component.css | 19 +++++++++++++-----
.../layout/my-layout.component.html | 8 +++++++-
.../components/layout/my-layout.component.ts | 6 ++++--
.../src/assets/kendoka-angular.png | Bin 0 -> 12967 bytes
4 files changed, 25 insertions(+), 8 deletions(-)
create mode 100644 examples-standalone/kendoangular-landing-page/src/assets/kendoka-angular.png
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.css b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.css
index 8859b9d0..9188b0b6 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.css
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.css
@@ -31,21 +31,30 @@ html {
.custom-toolbar {
width: 100%;
- background-color: #f6f6f6;
- line-height: 10px;
+ height: 48px;
+ background-color: #757575;
border-bottom: inset;
border-bottom-width: 1px;
padding: 3px;
- color: #656565;
+ color: #ffffff;
flex-shrink: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.custom-toolbar kendo-avatar {
+ margin-right: 10px;
}
+
.mail-box {
font-weight: bold;
font-size: 17px;
+ padding-left: 8px;
}
h5 {
- font-size: 1.25rem!important;
+ font-size: 1.25rem !important;
font-weight: 500;
margin: 0;
padding: 0;
-}
\ No newline at end of file
+}
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html
index 9e5e7eae..cd95e427 100644
--- a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html
+++ b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html
@@ -1,8 +1,14 @@