Color Palette
An inline swatch grid as a form editor — Kendo's ColorPalette: a built-in preset (default, basic, office, material, monochrome) or your own list, in an APG role="grid" with one roving tab stop and real DOM focus on the tiles. The selected tile carries aria-selected and a checkmark colored for contrast.
Works standalone via [(value)], with Signal Forms via [formField], and with reactive/template forms via formControl/ngModel.
Getting started
Arrows move by tile / row (RTL-mirrored; the grid neither wraps nor crosses rows), Home/End to the row edges, Ctrl+Home/Ctrl+End to the corners; Enter, Space or a click picks. The value is the swatch string exactly as listed.
Value: #4a86e8
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeColorPalette } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeColorPalette],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- An APG role="grid" of swatches with ONE roving tab stop (the
selected tile, else the first). Arrows move by tile / row (RTL-mirrored,
no wrap), Home/End to the row edges, Ctrl+Home/End to the corners,
Enter/Space or a click picks. The value is the swatch string as listed. -->
<oge-color-palette label="Tag color" [(value)]="tag" />
`,
})
export class Demo {
protected readonly tag = signal<string | null>('#4a86e8');
}Presets
palette takes a preset name — 'default' | 'basic' | 'office' | 'material' | 'monochrome' — and each preset brings its own column count. OGE_COLOR_PALETTE_PRESETS exports the data for building around the same sets.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeColorPalette } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeColorPalette],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- Built-in presets: 'default' | 'basic' | 'office' | 'material' |
'monochrome' — each brings its own column count. -->
<oge-color-palette label="Office" palette="office" [(value)]="office" />
<oge-color-palette label="Material" palette="material" [(value)]="material" />
`,
})
export class Demo {
protected readonly office = signal<string | null>('#4472c4');
protected readonly material = signal<string | null>('#009688');
}Custom swatches
Pass your own CSS colors (unparseable entries are dropped), a columns count and a fixed tileSize in px — the grid then shrink-wraps the tiles instead of sharing the width.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeColorPalette } from '@oge-ui/inputs';
@Component({
selector: 'demo-root',
imports: [OgeColorPalette],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- Your own list (any CSS color text; unparseable entries are
dropped), an explicit column count and a fixed tile size in px. -->
<oge-color-palette
label="Brand swatches"
[palette]="brand"
[columns]="4"
[tileSize]="32"
[(value)]="swatch"
/>
`,
})
export class Demo {
protected readonly brand = [
'#0f172a', '#334155', '#64748b', '#cbd5e1',
'#4f46e5', '#7c3aed', '#db2777', '#f59e0b',
];
protected readonly swatch = signal<string | null>('#7c3aed');
}Inside a form
A FormValueControl and a ControlValueAccessor: formControl, ngModel and [formField] all bind it. Disabling the control takes every tile out of the Tab sequence.
Valid: false
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeColorPalette } from '@oge-ui/inputs';
import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'demo-root',
imports: [OgeColorPalette, ReactiveFormsModule],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- FormValueControl + ControlValueAccessor: formControl, ngModel
and [formField] all bind it; disabling the control takes every tile out
of the Tab sequence. -->
<oge-color-palette label="Label color" palette="basic" [formControl]="color" />
`,
})
export class Demo {
protected readonly color = new FormControl<string | null>(null, [
Validators.required,
]);
}