chore: add combobox

telerik · Sep 19, 2024 · 4a6d271 · 4a6d271
1 parent 430e46b
commit 4a6d271
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 37 deletions.
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
@@ -32,7 +32,7 @@ export class MenuWindowComponent implements OnInit {
 
     public toggle(): void {
         if (!this.windowRef) {
-            const {bottom, left, width} = this.button.element.getBoundingClientRect();
+            const {bottom, left, width} = document.querySelector('.k-appbar')!.getBoundingClientRect();
 
             this.windowRef = this.windowService.open({
                 width: 400,

diff --git a/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html b/...standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.html
@@ -1,46 +1,54 @@
+<kendo-combobox
+    [data]="disabilitiesData"
+    textField="text"
+    valueField="text"></kendo-combobox>
+
 <kendo-expansionpanel title="Accessibility settings" [(expanded)]="settingsExpanded">
     <form class="k-form k-form-md">
-        <kendo-formfield>
-            <kendo-label text="Text size:"></kendo-label>
-            <kendo-numeric-textbox-buttons (valueChange)="settingChange('textSize', $event)" [(value)]="textSize"></kendo-numeric-textbox-buttons>
-        </kendo-formfield>
-        <kendo-formfield>
-            <kendo-label text="Color theme:"></kendo-label>
-            <kendo-buttongroup selection="single">
-                <kendo-button size="large" (click)="settingChange('colorTheme', 'contrast')" [selected]="colorTheme === 'contrast'">Contrast</kendo-button>
-                <kendo-button size="large" (click)="settingChange('colorTheme', 'dark')" [selected]="colorTheme === 'dark'">Dark</kendo-button>
-            </kendo-buttongroup>
-        </kendo-formfield>
+        <fieldset>
+            <legend>Accessibility Settings</legend>
+            <kendo-formfield>
+                <kendo-label text="Text size:"></kendo-label>
+                <kendo-numeric-textbox-buttons (valueChange)="settingChange('textSize', $event)" [(value)]="textSize"></kendo-numeric-textbox-buttons>
+            </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label text="Color theme:"></kendo-label>
+                <kendo-buttongroup selection="single">
+                    <kendo-button size="large" (click)="settingChange('colorTheme', 'contrast')" [selected]="colorTheme === 'contrast'">Contrast</kendo-button>
+                    <kendo-button size="large" (click)="settingChange('colorTheme', 'dark')" [selected]="colorTheme === 'dark'">Dark</kendo-button>
+                </kendo-buttongroup>
+            </kendo-formfield>
 
-        <kendo-formfield>
-            <kendo-label text="Font:"></kendo-label>
-            <kendo-buttongroup selection="single">
-                <kendo-button size="large" (click)="settingChange('font', 'legible')" [selected]="font === 'legible'">Legible Font</kendo-button>
-                <kendo-button size="large" (click)="settingChange('font', 'dyslexia')" [selected]="font === 'dyslexia'">Dyslexia Font</kendo-button>
-            </kendo-buttongroup>
-        </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label text="Font:"></kendo-label>
+                <kendo-buttongroup selection="single">
+                    <kendo-button size="large" (click)="settingChange('font', 'legible')" [selected]="font === 'legible'">Legible Font</kendo-button>
+                    <kendo-button size="large" (click)="settingChange('font', 'dyslexia')" [selected]="font === 'dyslexia'">Dyslexia Font</kendo-button>
+                </kendo-buttongroup>
+            </kendo-formfield>
 
-        <kendo-formfield>
-            <kendo-label text="Common:"></kendo-label>
-            <kendo-button size="large" [toggleable]="true" (click)="settingChange('underlineLinks', !underlineLinks)">Underiline Links</kendo-button>
-        </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label text="Common:"></kendo-label>
+                <kendo-button size="large" [toggleable]="true" (click)="settingChange('underlineLinks', !underlineLinks)">Underiline Links</kendo-button>
+            </kendo-formfield>
 
-        <kendo-formfield>
-            <kendo-button size="large" [toggleable]="true" (click)="settingChange('pauseAnimations', !pauseAnimations)">Pause Animation</kendo-button>
-        </kendo-formfield>
+            <kendo-formfield>
+                <kendo-button size="large" [toggleable]="true" (click)="settingChange('pauseAnimations', !pauseAnimations)">Pause Animation</kendo-button>
+            </kendo-formfield>
 
-        <kendo-formfield>
-            <kendo-button size="large" [toggleable]="true" (click)="settingChange('lgSizeWidgets', !lgSizeWidgets)">Large Size Widgets</kendo-button>
-        </kendo-formfield>
+            <kendo-formfield>
+                <kendo-button size="large" [toggleable]="true" (click)="settingChange('lgSizeWidgets', !lgSizeWidgets)">Large Size Widgets</kendo-button>
+            </kendo-formfield>
 
-        <kendo-formfield>
-            <kendo-label text="Line Height:"></kendo-label>
-            <kendo-numeric-textbox-buttons (valueChange)="settingChange('lineHeight', $event)" [(value)]="lineHeight"></kendo-numeric-textbox-buttons>
-        </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label text="Line Height:"></kendo-label>
+                <kendo-numeric-textbox-buttons (valueChange)="settingChange('lineHeight', $event)" [(value)]="lineHeight"></kendo-numeric-textbox-buttons>
+            </kendo-formfield>
 
-        <kendo-formfield>
-            <kendo-label text="Letter Spacing:"></kendo-label>
-            <kendo-numeric-textbox-buttons (valueChange)="settingChange('letterSpacing', $event)" [(value)]="letterSpacing"></kendo-numeric-textbox-buttons>
-        </kendo-formfield>
+            <kendo-formfield>
+                <kendo-label text="Letter Spacing:"></kendo-label>
+                <kendo-numeric-textbox-buttons (valueChange)="settingChange('letterSpacing', $event)" [(value)]="letterSpacing"></kendo-numeric-textbox-buttons>
+            </kendo-formfield>
+        </fieldset>
     </form>
 </kendo-expansionpanel>
diff --git a/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts b/...s-standalone/coffee-warehouse/src/app/components/settings-list/settings-list.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { SettingsService } from './settings.service';
+import { groupBy } from '@progress/kendo-data-query';
 
 const defaulFont = 'defaultFont';
 const defaultTheme = 'defaultTheme';
@@ -44,6 +45,46 @@ export class SettingsListComponent {
         };
     }
 
+    public defaultSettings = {
+        textSize: 16,
+        colorTheme: defaultTheme,
+        font: defaulFont,
+        underlineLinks: false,
+        pauseAnimations: false,
+        lgSizeWidgets: false,
+        lineHeight: 1.2,
+        letterSpacing: 1
+    }
+
+    public disabilitiesData: any[] = groupBy([{
+            type: 'Visual Impairments',
+            text: 'Low Vision'
+        }, {
+            type: 'Visual Impairments',
+            text: 'Color Blindness'
+        }, {
+            type: 'Visual Impairments',
+            text: 'Blindness'
+        }, {
+            type: 'Hearing Impairments',
+            text: 'Deafness'
+        }, {
+            type: 'Hearing Impairments',
+            text: 'Hard of Hearing'
+        }, {
+            type: 'Motor Impairments',
+            text: 'Limited Mobility'
+        }, {
+            type: 'Motor Impairments',
+            text: 'Tremors'
+        }, {
+            type: 'Cognitive Disabilities',
+            text: 'Dyslexia'
+        }, {
+            type: 'Cognitive Disabilities',
+            text: 'ADHD'
+        }], [{field: 'type'}]);
+
     constructor(private settingsService: SettingsService) { }
 
     public settingChange(setting: string, value: any): void {