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/angular.json b/examples-standalone/kendoangular-landing-page/angular.json index 9d2e3c4d..96e0e03d 100644 --- a/examples-standalone/kendoangular-landing-page/angular.json +++ b/examples-standalone/kendoangular-landing-page/angular.json @@ -22,6 +22,11 @@ ], "tsConfig": "tsconfig.app.json", "assets": [ + { + "glob": "**/*", + "input": "src/assets/", + "output": "/assets/" + }, { "glob": "**/*", "input": "public" @@ -29,7 +34,7 @@ ], "styles": [ { - "input": "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue-a11y.scss" + "input": "node_modules/@progress/kendo-theme-default/dist/default-ocean-blue.scss" }, "src/styles.css" ], @@ -84,6 +89,11 @@ ], "tsConfig": "tsconfig.spec.json", "assets": [ + { + "glob": "**/*", + "input": "src/assets/", + "output": "/assets/" + }, { "glob": "**/*", "input": "public" 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/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()" >
-
- -

Please fill in your profile information to continue

-
-
Personal Information @@ -69,10 +64,6 @@

Kendo Angular Dialog

-
- - -
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/editor/editor.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.html index ecb26299..ae03d7a6 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.html +++ b/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.html @@ -1,5 +1,5 @@
- + @@ -58,7 +58,6 @@ -
diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.ts b/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.ts index 4b4ed9c1..5c628f2c 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.ts +++ b/examples-standalone/kendoangular-landing-page/src/app/components/editor/editor.component.ts @@ -10,7 +10,10 @@ import { KENDO_TOOLBAR } from "@progress/kendo-angular-toolbar"; }) export class EditorComponent { public value = ` -

+

+ Angular Kendoka +
+

The Kendo Angular UI Editor allows your users to edit HTML in a familiar, user-friendly way.
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks and lists. The widget outputs identical HTML across all major browsers, follows 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..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 @@ -15,12 +15,44 @@ } .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 +} + +.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); diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.css b/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.css index 99566b49..cbb7500b 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.css +++ b/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.css @@ -16,8 +16,12 @@ kendo-formfield { .k-radio-list-horizontal { display: flex; + flex-flow: row wrap; gap: 1rem; } +.k-radio-list-horizontal input[type="radio"] { + margin-right: -0.65rem; +} .k-radio:checked, .k-radio.k-checked { diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.html index a007a642..6a1f39fb 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.html +++ b/examples-standalone/kendoangular-landing-page/src/app/components/header/bottom-right/bottom-right.component.html @@ -38,7 +38,7 @@ [attr.id]="'water-' + item.value" /> diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.css b/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.css index 6b320fd6..739124af 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.css +++ b/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.css @@ -78,4 +78,11 @@ .k-sort-icon { color: #5777EA!important; +} +.k-master-row, +.k-table-row { + --kendo-line-height: 4px; +} +.k-pager-numbers button { + width: 30px; } \ No newline at end of file diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.html b/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.html index 2ac7242f..932d9ea9 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.html +++ b/examples-standalone/kendoangular-landing-page/src/app/components/header/transactions-dashboard/transactions-dashboard.component.html @@ -11,7 +11,7 @@ [navigable]="true" [height]="302" [style.width.px]="586" - size="small" + scrollable="none" > 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..a5c0ef84 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: 41px; + 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 78d0fecc..2cc8a421 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,11 +1,25 @@

+
- + diff --git a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.ts b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.ts index d100c45c..29593bce 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.ts +++ b/examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.ts @@ -1,5 +1,5 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { DrawerSelectEvent, KENDO_DRAWER } from '@progress/kendo-angular-layout'; +import { DrawerSelectEvent, KENDO_DRAWER, KENDO_LAYOUT } from '@progress/kendo-angular-layout'; import { alignJustifyIcon, cellsMergeVerticallyIcon, @@ -21,7 +21,7 @@ import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons'; @Component({ selector: 'app-layout', encapsulation: ViewEncapsulation.None, - imports: [KENDO_DRAWER, KENDO_BUTTONS, LayoutComponent], + imports: [KENDO_DRAWER, KENDO_BUTTONS, KENDO_LAYOUT, LayoutComponent], templateUrl: './my-layout.component.html', styleUrl: './my-layout.component.css', }) @@ -56,4 +56,6 @@ export class MyLayoutComponent { public onSelect(ev: DrawerSelectEvent): void { this.selected = ev.item.text; } + public kendokaAvatar = "assets/kendoka-angular.png"; + } 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 1674e942..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,58 +1,74 @@ -import { Component, OnInit } from "@angular/core"; -import { FormBuilder, FormGroup, ReactiveFormsModule } from "@angular/forms"; -import { KENDO_DROPDOWNLIST } from "@progress/kendo-angular-dropdowns"; -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 { MessageService } from "@progress/kendo-angular-l10n"; +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'; + +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 }], - templateUrl: "./scheduler.component.html", - styleUrls: ["./scheduler.component.css"], + providers: [ + { provide: MessageService, useClass: SchedulerMessageService }, + { provide: LOCALE_ID, useValue: 'en' }, + ], + 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: any[] = [ - { text: "English", value: "en" }, - { text: "Spanish", value: "es" }, + public languages: LanguageOption[] = [ + { text: 'English', value: 'en' }, + { text: 'Spanish', value: 'es' }, ]; - public selectedLanguage: any = { text: "English", value: "en-US" }; - constructor(private formBuilder: FormBuilder, private messages: MessageService) { + public selectedLanguage: any = { text: 'English', value: 'en-US' }; + constructor( + private formBuilder: FormBuilder, + private messages: MessageService, + @Inject(LOCALE_ID) public localeId: string, + public intlService: IntlService + ) { this.createFormGroup = this.createFormGroup.bind(this); } @@ -104,11 +120,12 @@ export class SchedulerComponent { } } - public handleOrientationChange(orientation: "horizontal" | "vertical"): void { + public handleOrientationChange(orientation: 'horizontal' | 'vertical'): void { this.orientation = orientation; } - public changeLanguage(language: string): void { + 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/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/app/services/scheduler-message.service.ts b/examples-standalone/kendoangular-landing-page/src/app/services/scheduler-message.service.ts index 8c81576d..29af2450 100644 --- a/examples-standalone/kendoangular-landing-page/src/app/services/scheduler-message.service.ts +++ b/examples-standalone/kendoangular-landing-page/src/app/services/scheduler-message.service.ts @@ -24,15 +24,85 @@ const localizationData: { [key: string]: LocalizationData } = { es: { rtl: false, messages: { - "kendo.scheduler.today": "Hoy", - "kendo.scheduler.allDay": "todo el dia", - "kendo.scheduler.showWorkDay": "Mostrar horas laborables", - "kendo.scheduler.showFullDay": "Mostrar día completo", "kendo.scheduler.agendaViewTitle": "Agenda", - "kendo.scheduler.dayViewTitle": "Día", + "kendo.scheduler.allDay": "todo el día", + "kendo.scheduler.allEvents": "Todos los eventos", + "kendo.scheduler.calendarToday": "Hoy", + "kendo.scheduler.cancel": "Cancelar", + "kendo.scheduler.save": "Save", + "kendo.scheduler.editorEventTitle": "Título", + "kendo.scheduler.editorEventStart": "Inicio", + "kendo.scheduler.editorEventStartTimeZone": "Zona horaria de inicio", + "kendo.scheduler.editorEventEnd": "Fin", + "kendo.scheduler.editorEventEndTimeZone": "Zona horaria final", + "kendo.scheduler.dateHeader": "Fecha", + "kendo.scheduler.dayViewTitle": "Título", + "kendo.scheduler.deleteConfirmation": "¿Está seguro que quiere eliminar este evento?", + "kendo.scheduler.deleteDialogTitle": "Eliminar evento", + "kendo.scheduler.deleteOccurrence": "Delete current occurrence", + "kendo.scheduler.deleteRecurringConfirmation": + "Do you want to delete only this event occurrence or the whole series?", + "kendo.scheduler.deleteRecurringDialogTitle": + "¿Quiere eliminar esta ocurrencia del evento o la serie completa?", + "kendo.scheduler.deleteSeries": "Eliminar la serie", + "kendo.scheduler.deleteTitle": "Eliminar evento", + "kendo.scheduler.destroy": "Eliminar", + "kendo.scheduler.editOccurrence": "Editar ocurrencia actual", + "kendo.scheduler.editorEventAllDay": "Todo el día", + "kendo.scheduler.editorEventDescription": "Descripción", + "kendo.scheduler.editorEventSeparateTimeZones": "Usar zonas horarias separadas para el inicio y el fin", + "kendo.scheduler.editorEventTimeZone": "Zona horaria de fin", + "kendo.scheduler.editorTitle": "Título", + "kendo.scheduler.editRecurringConfirmation": + "¿Quiere editar esta ocurrencia del evento o la serie completa?", + "kendo.scheduler.editRecurringDialogTitle": "Editar elemento recurrente", + "kendo.scheduler.editSeries": "Editar la serie", + "kendo.scheduler.eventHeader": "Evento", + "kendo.scheduler.monthViewTitle": "Mes", + "kendo.scheduler.multiDayViewTitle": "Multi-Day", + "kendo.scheduler.nextTitle": "Siguiente", + "kendo.scheduler.previousTitle": "Anterior", + "kendo.scheduler.recurrenceEditorDailyInterval": "día(s)", + "kendo.scheduler.recurrenceEditorDailyRepeatEvery": "Repetir cada:", + "kendo.scheduler.recurrenceEditorEndAfter": "Después", + "kendo.scheduler.recurrenceEditorEndLabel": "Fin", + "kendo.scheduler.recurrenceEditorEndNever": "Nunca", + "kendo.scheduler.recurrenceEditorEndOccurrence": "ocurrencia(s)", + "kendo.scheduler.recurrenceEditorEndOn": "On", + "kendo.scheduler.recurrenceEditorFrequenciesDaily": "Diariamente", + "kendo.scheduler.recurrenceEditorFrequenciesMonthly": "Mensualmente", + "kendo.scheduler.recurrenceEditorFrequenciesNever": "Nunca", + "kendo.scheduler.recurrenceEditorFrequenciesWeekly": "Semanalmente", + "kendo.scheduler.recurrenceEditorFrequenciesYearly": "Anualmente", + "kendo.scheduler.recurrenceEditorMonthlyDay": "Día", + "kendo.scheduler.recurrenceEditorMonthlyInterval": "mes(es)", + "kendo.scheduler.recurrenceEditorMonthlyRepeatEvery": "Repetir cada:", + "kendo.scheduler.recurrenceEditorMonthlyRepeatOn": "Repetir en:", + "kendo.scheduler.recurrenceEditorOffsetPositionsFirst": "primero", + "kendo.scheduler.recurrenceEditorOffsetPositionsFourth": "cuarto", + "kendo.scheduler.recurrenceEditorOffsetPositionsLast": "último", + "kendo.scheduler.recurrenceEditorOffsetPositionsSecond": "segundo", + "kendo.scheduler.recurrenceEditorOffsetPositionsThird": "tercero", + "kendo.scheduler.recurrenceEditorRepeat": "Repetir", + "kendo.scheduler.recurrenceEditorWeekdaysDay": "día", + "kendo.scheduler.recurrenceEditorWeekdaysWeekday": "día de semana", + "kendo.scheduler.recurrenceEditorWeekdaysWeekendday": "Día de fin de semana", + "kendo.scheduler.recurrenceEditorWeeklyInterval": "semana(s)", + "kendo.scheduler.recurrenceEditorWeeklyRepeatEvery": "Repetir cada:", + "kendo.scheduler.recurrenceEditorWeeklyRepeatOn": "Repetir en:", + "kendo.scheduler.recurrenceEditorYearlyInterval": "año(s)", + "kendo.scheduler.recurrenceEditorYearlyOf": "de", + "kendo.scheduler.recurrenceEditorYearlyRepeatEvery": "Repetir cada:", + "kendo.scheduler.recurrenceEditorYearlyRepeatOn": "Repetir en:", + "kendo.scheduler.showFullDay": "Mostrar día completo", + "kendo.scheduler.showWorkDay": "Mostrar horas laborables", + "kendo.scheduler.timeHeader": "Hora", + "kendo.scheduler.timelineMonthViewTitle": "Timeline Month", + "kendo.scheduler.timelineViewTitle": "Línea de tiempo", + "kendo.scheduler.timelineWeekViewTitle": "Timeline Week", + "kendo.scheduler.today": "Hoy", "kendo.scheduler.weekViewTitle": "Semana", "kendo.scheduler.workWeekViewTitle": "Semana laboral", - "kendo.scheduler.monthViewTitle": "Mes", }, }, }; diff --git a/examples-standalone/kendoangular-landing-page/src/assets/kendoka-angular.png b/examples-standalone/kendoangular-landing-page/src/assets/kendoka-angular.png new file mode 100644 index 00000000..144a5175 Binary files /dev/null and b/examples-standalone/kendoangular-landing-page/src/assets/kendoka-angular.png differ diff --git a/examples-standalone/kendoangular-landing-page/src/assets/kendoka.png b/examples-standalone/kendoangular-landing-page/src/assets/kendoka.png new file mode 100644 index 00000000..89dacef3 Binary files /dev/null and b/examples-standalone/kendoangular-landing-page/src/assets/kendoka.png differ 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)); 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);