@cocoar/ui-components 0.1.0-beta.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1879 @@
1
+ import * as _angular_core from '@angular/core';
2
+ import { Type, Provider, ElementRef, InjectionToken, AfterViewInit, OnDestroy, DestroyRef, TemplateRef, AfterContentInit } from '@angular/core';
3
+ import { ControlValueAccessor } from '@angular/forms';
4
+ import { SafeHtml } from '@angular/platform-browser';
5
+ import { OverlayScrollbars } from 'overlayscrollbars';
6
+ import { Observable } from 'rxjs';
7
+ import { HttpClient } from '@angular/common/http';
8
+ import { Temporal } from '@js-temporal/polyfill';
9
+
10
+ declare function coarProvideValueAccessor(type: () => Type<ControlValueAccessor>): Provider;
11
+ declare abstract class CoarControlValueAccessor<T> implements ControlValueAccessor {
12
+ protected readonly cvaDisabled: _angular_core.WritableSignal<boolean>;
13
+ protected cvaOnChange: (value: T) => void;
14
+ protected cvaOnTouched: () => void;
15
+ registerOnChange(fn: (value: T) => void): void;
16
+ registerOnTouched(fn: () => void): void;
17
+ setDisabledState(isDisabled: boolean): void;
18
+ abstract writeValue(value: T | null): void;
19
+ }
20
+
21
+ type CoarTextInputSize = 'xs' | 'sm' | 'md' | 'lg';
22
+ declare class CoarTextInputComponent extends CoarControlValueAccessor<string> {
23
+ /** Label text displayed above the input */
24
+ label: _angular_core.InputSignal<string>;
25
+ /** Placeholder text shown when input is empty */
26
+ placeholder: _angular_core.InputSignal<string>;
27
+ /** Current input value (two-way bindable with [(value)]) */
28
+ value: _angular_core.ModelSignal<string>;
29
+ /** Input size - matches button/checkbox sizes for consistent layouts */
30
+ size: _angular_core.InputSignal<CoarTextInputSize>;
31
+ /** Number of visible text rows (1 = single-line input, 2+ = textarea) */
32
+ rows: _angular_core.InputSignal<number>;
33
+ /** Disables the input (greyed out, not focusable) */
34
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
35
+ /** Makes the input read-only (focusable but not editable) */
36
+ readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
37
+ /** Marks the input as required, shows asterisk on label */
38
+ required: _angular_core.InputSignalWithTransform<boolean, unknown>;
39
+ /** Error message to display below the input */
40
+ error: _angular_core.InputSignal<string>;
41
+ /** Hint text displayed below the input */
42
+ hint: _angular_core.InputSignal<string>;
43
+ /** Show clear button when input has value and is focused/hovered */
44
+ clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
45
+ /** Text or symbol displayed before the input value */
46
+ prefix: _angular_core.InputSignal<string>;
47
+ /** Text or symbol displayed after the input value */
48
+ suffix: _angular_core.InputSignal<string>;
49
+ /** HTML id attribute for the input element */
50
+ id: _angular_core.InputSignal<string>;
51
+ /** HTML name attribute for form submission */
52
+ name: _angular_core.InputSignal<string>;
53
+ /** HTML autocomplete attribute */
54
+ autocomplete: _angular_core.InputSignal<string>;
55
+ /** Maximum character length */
56
+ maxlength: _angular_core.InputSignal<number | undefined>;
57
+ /** Emits when input value changes */
58
+ valueChange: _angular_core.OutputEmitterRef<string>;
59
+ /** Emits when input loses focus */
60
+ blurred: _angular_core.OutputEmitterRef<FocusEvent>;
61
+ /** Emits when input gains focus */
62
+ focused: _angular_core.OutputEmitterRef<FocusEvent>;
63
+ /** Emits when clear button is clicked */
64
+ clear: _angular_core.OutputEmitterRef<void>;
65
+ protected isFocused: _angular_core.WritableSignal<boolean>;
66
+ protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement | HTMLTextAreaElement> | undefined>;
67
+ protected isMultiline: _angular_core.Signal<boolean>;
68
+ protected isDisabled: _angular_core.Signal<boolean>;
69
+ protected showClearButton: _angular_core.Signal<boolean>;
70
+ protected hasError: _angular_core.Signal<boolean>;
71
+ protected displayMessage: _angular_core.Signal<string>;
72
+ private readonly autoId;
73
+ protected inputId: _angular_core.Signal<string>;
74
+ protected messageId: _angular_core.Signal<string>;
75
+ writeValue(value: string | null): void;
76
+ protected onInput(event: Event): void;
77
+ protected onFocus(event: FocusEvent): void;
78
+ protected onBlur(event: FocusEvent): void;
79
+ protected onClear(): void;
80
+ protected onLabelClick(): void;
81
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTextInputComponent, never>;
82
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTextInputComponent, "coar-text-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, ["[prefix]", "[suffix]", "[suffixAction]"], true, never>;
83
+ }
84
+
85
+ type CoarIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
86
+ /**
87
+ * COAR Icon Component
88
+ *
89
+ * Icon component supporting DI-provided icon registries.
90
+ *
91
+ * Usage:
92
+ * ```html
93
+ * <coar-icon name="settings" size="md"></coar-icon>
94
+ * ```
95
+ *
96
+ * Size tokens:
97
+ * - xs = 12px
98
+ * - sm = 16px
99
+ * - md = 20px (default)
100
+ * - lg = 24px
101
+ * - xl = 32px
102
+ * - auto = fills parent container (use padding on parent to control)
103
+ */
104
+ declare class CoarIconComponent {
105
+ private readonly iconService;
106
+ private readonly sanitizer;
107
+ private iconLoadVersion;
108
+ /**
109
+ * Icon identifier.
110
+ * Examples: "settings", "user"
111
+ */
112
+ name: _angular_core.InputSignal<string | undefined>;
113
+ /**
114
+ * Optional icon source key.
115
+ *
116
+ * - If omitted, the default source is used.
117
+ * - If multiple sources are registered, this can be used to target a specific one.
118
+ */
119
+ source: _angular_core.InputSignal<string | undefined>;
120
+ /**
121
+ * Icon size. Defaults to 'md' (20px).
122
+ * Can be a preset token (xs, sm, md, lg, xl, auto) or a custom CSS value (e.g., '42px', '3rem').
123
+ */
124
+ size: _angular_core.InputSignal<string>;
125
+ /**
126
+ * Rotation angle in degrees (0, 90, 180, 270, or any number).
127
+ */
128
+ rotate: _angular_core.InputSignal<number>;
129
+ /**
130
+ * Rotation transition animation.
131
+ * - Empty/undefined: No animation
132
+ * - Number: Duration in milliseconds (e.g., 300)
133
+ * - String: Full CSS transition value (e.g., '0.3s ease-in-out', '500ms cubic-bezier(0.4, 0, 0.2, 1)')
134
+ */
135
+ rotateTransition: _angular_core.InputSignal<string | number | undefined>;
136
+ /**
137
+ * Enable continuous spinning animation.
138
+ */
139
+ spin: _angular_core.InputSignalWithTransform<boolean, unknown>;
140
+ /**
141
+ * Icon color. Can be any valid CSS color value.
142
+ * Examples: 'red', '#ff0000', 'rgb(255, 0, 0)', 'var(--coar-text-semantic-error-bold)'
143
+ * Use 'inherit' to inherit the parent element's color.
144
+ */
145
+ color: _angular_core.InputSignal<string>;
146
+ /**
147
+ * Optional text label to display next to the icon.
148
+ */
149
+ label: _angular_core.InputSignal<string | number | undefined>;
150
+ /**
151
+ * Signal holding the sanitized SVG HTML ready for rendering.
152
+ */
153
+ protected sanitizedSvg: _angular_core.WritableSignal<SafeHtml | null>;
154
+ /**
155
+ * Signal indicating whether an icon is currently being loaded.
156
+ */
157
+ protected isLoading: _angular_core.WritableSignal<boolean>;
158
+ /**
159
+ * Check if the size is a preset token (xs, sm, md, lg, xl, auto).
160
+ */
161
+ protected isPresetSize(size: string): boolean;
162
+ /**
163
+ * Compute the CSS transition value for rotation.
164
+ */
165
+ protected getRotateTransitionValue(): string | null;
166
+ constructor();
167
+ /**
168
+ * Resolve an icon name to an SVG string.
169
+ *
170
+ * This is kept as a single observable chain so callers can cancel it.
171
+ */
172
+ private resolveIcon$;
173
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarIconComponent, never>;
174
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarIconComponent, "coar-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "source": { "alias": "source"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "rotateTransition": { "alias": "rotateTransition"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
175
+ }
176
+
177
+ /** Configuration for number formatting */
178
+ interface NumberFormatConfig {
179
+ readonly decimal: string;
180
+ readonly thousand: string;
181
+ }
182
+ /** Configuration for date formatting */
183
+ interface DateFormatConfig {
184
+ /** Date format pattern: 'dd.mm.yyyy', 'dd/mm/yyyy', 'mm/dd/yyyy', 'yyyy-mm-dd' */
185
+ readonly pattern: 'dd.mm.yyyy' | 'dd/mm/yyyy' | 'mm/dd/yyyy' | 'yyyy-mm-dd';
186
+ /** First day of week: 1 = Monday, 7 = Sunday */
187
+ readonly firstDayOfWeek: 1 | 7;
188
+ }
189
+ /** Complete locale configuration */
190
+ interface LocaleConfig {
191
+ readonly number: NumberFormatConfig;
192
+ readonly date: DateFormatConfig;
193
+ }
194
+ /**
195
+ * Service contract for locale-aware formatting.
196
+ * Provides formatting rules (not translations) for numbers, dates, etc.
197
+ *
198
+ * This handles "how to display" (1.000,50 vs 1,000.50),
199
+ * not "what text to show" (that's translation/i18n).
200
+ */
201
+ interface ICoarLocaleService {
202
+ /**
203
+ * Get number format configuration for a specific locale.
204
+ * @param locale - Optional locale identifier (e.g., 'de-AT', 'en-US'). If not provided, uses default locale.
205
+ * @returns Number format configuration with decimal and thousand separators
206
+ */
207
+ getNumberFormat(locale?: string): NumberFormatConfig;
208
+ /**
209
+ * Get date format configuration for a specific locale.
210
+ * @param locale - Optional locale identifier (e.g., 'de-AT', 'en-US'). If not provided, uses default locale.
211
+ * @returns Date format configuration with pattern and first day of week
212
+ */
213
+ getDateFormat(locale?: string): DateFormatConfig;
214
+ /**
215
+ * Get the current default locale identifier.
216
+ * @returns Current default locale (e.g., 'de-AT', 'en-US')
217
+ */
218
+ getDefaultLocale(): string;
219
+ /**
220
+ * Set the default locale used when no locale is explicitly specified.
221
+ * @param locale - Locale identifier (e.g., 'de-AT', 'en-US')
222
+ */
223
+ setDefaultLocale(locale: string): void;
224
+ /**
225
+ * Register a custom locale configuration.
226
+ * Useful for specialized formats (e.g., financial reports with space as thousand separator).
227
+ * @param id - Custom locale identifier (e.g., 'custom-finance')
228
+ * @param config - Partial locale configuration (only specify what you want to override)
229
+ */
230
+ registerLocale(id: string, config: Partial<LocaleConfig>): void;
231
+ }
232
+ /**
233
+ * Injection token for the locale service.
234
+ * Use this to inject the locale service in components.
235
+ *
236
+ * @example
237
+ * ```typescript
238
+ * private localeService = inject(COAR_LOCALE_SERVICE, { optional: true });
239
+ * ```
240
+ */
241
+ declare const COAR_LOCALE_SERVICE: InjectionToken<ICoarLocaleService>;
242
+ /**
243
+ * Default implementation of locale service.
244
+ * Uses browser's Intl.NumberFormat API for standard locales,
245
+ * with support for custom locale registration.
246
+ */
247
+ declare class CoarLocaleService implements ICoarLocaleService {
248
+ private defaultLocale;
249
+ private customLocales;
250
+ getDefaultLocale(): string;
251
+ setDefaultLocale(locale: string): void;
252
+ registerLocale(id: string, config: Partial<LocaleConfig>): void;
253
+ getNumberFormat(locale?: string): NumberFormatConfig;
254
+ getDateFormat(locale?: string): DateFormatConfig;
255
+ /**
256
+ * Extract default formatting rules from browser's Intl API
257
+ */
258
+ private getDefaults;
259
+ /**
260
+ * Detect date format based on locale.
261
+ *
262
+ * Uses Intl.DateTimeFormat to determine the date order for the locale,
263
+ * then maps to one of our supported patterns.
264
+ */
265
+ private detectDateFormat;
266
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarLocaleService, never>;
267
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarLocaleService>;
268
+ }
269
+
270
+ type CoarNumberInputSize = 'xs' | 'sm' | 'md' | 'lg';
271
+ type CoarNumberInputStepperButtons = 'none' | 'increment' | 'decrement' | 'both';
272
+ declare class CoarNumberInputComponent extends CoarControlValueAccessor<number | null> {
273
+ private readonly destroyRef;
274
+ private readonly localeService;
275
+ private maskitoInstance?;
276
+ /** Label text displayed above the input */
277
+ label: _angular_core.InputSignal<string>;
278
+ /** Placeholder text shown when input is empty */
279
+ placeholder: _angular_core.InputSignal<string>;
280
+ /**
281
+ * Current numeric value.
282
+ * Using model() for two-way binding support.
283
+ */
284
+ value: _angular_core.ModelSignal<number | null>;
285
+ /** Input size - matches button/checkbox sizes for consistent layouts */
286
+ size: _angular_core.InputSignal<CoarNumberInputSize>;
287
+ /** Minimum allowed value */
288
+ min: _angular_core.InputSignal<number | undefined>;
289
+ /** Maximum allowed value */
290
+ max: _angular_core.InputSignal<number | undefined>;
291
+ /** Step increment for arrows and keyboard */
292
+ step: _angular_core.InputSignal<number>;
293
+ /** Number of decimal places to display */
294
+ decimals: _angular_core.InputSignal<number>;
295
+ /** Disables the input (greyed out, not focusable) */
296
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
297
+ /** Makes the input read-only (focusable but not editable) */
298
+ readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
299
+ /** Marks the input as required, shows asterisk on label */
300
+ required: _angular_core.InputSignalWithTransform<boolean, unknown>;
301
+ /** Error message to display below the input */
302
+ error: _angular_core.InputSignal<string>;
303
+ /** Hint text displayed below the input */
304
+ hint: _angular_core.InputSignal<string>;
305
+ /** Show clear button when input has value and is focused/hovered */
306
+ clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
307
+ /**
308
+ * Controls visibility of increment/decrement stepper buttons.
309
+ * Supports both boolean attribute pattern and granular string control:
310
+ * - No attribute → no buttons
311
+ * - `stepperButtons` (attribute) → both buttons
312
+ * - `stepperButtons="increment"` → only increment
313
+ * - `stepperButtons="decrement"` → only decrement
314
+ * - `stepperButtons="both"` → both buttons (explicit)
315
+ * - `stepperButtons="none"` → no buttons (explicit)
316
+ */
317
+ stepperButtons: _angular_core.InputSignalWithTransform<CoarNumberInputStepperButtons, string | boolean>;
318
+ /** Text or symbol displayed before the input value */
319
+ prefix: _angular_core.InputSignal<string>;
320
+ /** Text or symbol displayed after the input value */
321
+ suffix: _angular_core.InputSignal<string>;
322
+ /**
323
+ * Locale identifier for number formatting (e.g., 'de-AT', 'en-US').
324
+ * Uses global locale service default if not specified.
325
+ */
326
+ locale: _angular_core.InputSignal<string | undefined>;
327
+ /**
328
+ * Number format configuration (decimal and thousand separators).
329
+ * If not provided, uses locale service default or falls back to { decimal: '.', thousand: '' }.
330
+ */
331
+ numberFormat: _angular_core.InputSignal<NumberFormatConfig | undefined>;
332
+ /** HTML id attribute for the input element */
333
+ id: _angular_core.InputSignal<string>;
334
+ /** HTML name attribute for form submission */
335
+ name: _angular_core.InputSignal<string>;
336
+ /** Emits when input value changes */
337
+ valueChange: _angular_core.OutputEmitterRef<number | null>;
338
+ /** Emits when input loses focus */
339
+ blurred: _angular_core.OutputEmitterRef<FocusEvent>;
340
+ /** Emits when input gains focus */
341
+ focused: _angular_core.OutputEmitterRef<FocusEvent>;
342
+ /** Emits when clear button is clicked */
343
+ clear: _angular_core.OutputEmitterRef<void>;
344
+ protected displayValue: _angular_core.WritableSignal<string>;
345
+ protected isFocused: _angular_core.WritableSignal<boolean>;
346
+ protected isDragging: _angular_core.WritableSignal<boolean>;
347
+ protected dragStartX: _angular_core.WritableSignal<number>;
348
+ protected dragStartValue: _angular_core.WritableSignal<number>;
349
+ protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
350
+ protected isDisabled: _angular_core.Signal<boolean>;
351
+ protected showClearButton: _angular_core.Signal<boolean>;
352
+ protected hasError: _angular_core.Signal<boolean>;
353
+ protected displayMessage: _angular_core.Signal<string>;
354
+ private readonly autoId;
355
+ protected inputId: _angular_core.Signal<string>;
356
+ protected messageId: _angular_core.Signal<string>;
357
+ protected iconSize: _angular_core.Signal<CoarIconSize>;
358
+ protected showIncrementButton: _angular_core.Signal<boolean>;
359
+ protected showDecrementButton: _angular_core.Signal<boolean>;
360
+ protected canDecrement: _angular_core.Signal<boolean>;
361
+ protected canIncrement: _angular_core.Signal<boolean>;
362
+ constructor();
363
+ /**
364
+ * Resolve number format configuration with priority chain:
365
+ * 1. numberFormat input (explicit config object)
366
+ * 2. localeService.getNumberFormat(locale) (service with locale override)
367
+ * 3. localeService.getNumberFormat() (service with default locale)
368
+ * 4. Hardcoded fallback { decimal: '.', thousand: '' }
369
+ */
370
+ private resolveNumberFormat;
371
+ private initializeMaskito;
372
+ protected formatValue(value: number | null): string;
373
+ /**
374
+ * Parse locale-formatted string (respects component's decimal/thousand separators).
375
+ * Used when user types or pastes into the input field.
376
+ */
377
+ protected parseValue(str: string): number | null;
378
+ protected clampValue(value: number): number;
379
+ protected onInput(event: Event): void;
380
+ protected onFocus(event: FocusEvent): void;
381
+ protected onBlur(event: FocusEvent): void;
382
+ protected commitValue(): void;
383
+ writeValue(value: number | null): void;
384
+ protected onClear(): void;
385
+ protected onLabelClick(): void;
386
+ protected increment(): void;
387
+ protected decrement(): void;
388
+ protected onKeyDown(event: KeyboardEvent): void;
389
+ protected onDragStart(event: MouseEvent): void;
390
+ protected onDragMove(event: MouseEvent): void;
391
+ protected onDragEnd(): void;
392
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarNumberInputComponent, never>;
393
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarNumberInputComponent, "coar-number-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "stepperButtons": { "alias": "stepperButtons"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "numberFormat": { "alias": "numberFormat"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, ["[prefix]", "[suffix]"], true, never>;
394
+ }
395
+
396
+ type CoarPasswordInputSize = 'xs' | 'sm' | 'md' | 'lg';
397
+ declare class CoarPasswordInputComponent extends CoarControlValueAccessor<string> {
398
+ /** Label text displayed above the input */
399
+ label: _angular_core.InputSignal<string>;
400
+ /** Placeholder text shown when input is empty */
401
+ placeholder: _angular_core.InputSignal<string>;
402
+ /**
403
+ * Current password value.
404
+ * Using model() for two-way binding support.
405
+ */
406
+ value: _angular_core.ModelSignal<string>;
407
+ /** Input size - matches other form elements for consistent layouts */
408
+ size: _angular_core.InputSignal<CoarPasswordInputSize>;
409
+ /** Disables the input (greyed out, not focusable) */
410
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
411
+ /** Makes the input read-only (focusable but not editable) */
412
+ readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
413
+ /** Marks the input as required, shows asterisk on label */
414
+ required: _angular_core.InputSignalWithTransform<boolean, unknown>;
415
+ /** Error message to display below the input */
416
+ error: _angular_core.InputSignal<string>;
417
+ /** Hint text displayed below the input */
418
+ hint: _angular_core.InputSignal<string>;
419
+ /** Show clear button when input has value and is focused/hovered */
420
+ clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
421
+ /** HTML id attribute for the input element */
422
+ id: _angular_core.InputSignal<string>;
423
+ /** HTML name attribute for form submission */
424
+ name: _angular_core.InputSignal<string>;
425
+ /** HTML autocomplete attribute for browser autofill */
426
+ autocomplete: _angular_core.InputSignal<string>;
427
+ /** Maximum character length */
428
+ maxlength: _angular_core.InputSignal<number | undefined>;
429
+ /** Emits when password value changes */
430
+ valueChange: _angular_core.OutputEmitterRef<string>;
431
+ /** Emits when input loses focus */
432
+ blurred: _angular_core.OutputEmitterRef<FocusEvent>;
433
+ /** Emits when input gains focus */
434
+ focused: _angular_core.OutputEmitterRef<FocusEvent>;
435
+ /** Emits when clear button is clicked */
436
+ clear: _angular_core.OutputEmitterRef<void>;
437
+ protected isFocused: _angular_core.WritableSignal<boolean>;
438
+ protected showPassword: _angular_core.WritableSignal<boolean>;
439
+ protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
440
+ protected inputType: _angular_core.Signal<"text" | "password">;
441
+ protected toggleIcon: _angular_core.Signal<"eye-open" | "eye-closed">;
442
+ protected toggleAriaLabel: _angular_core.Signal<"Hide password" | "Show password">;
443
+ protected isDisabled: _angular_core.Signal<boolean>;
444
+ protected showClearButton: _angular_core.Signal<boolean>;
445
+ protected hasError: _angular_core.Signal<boolean>;
446
+ protected displayMessage: _angular_core.Signal<string>;
447
+ private readonly autoId;
448
+ protected inputId: _angular_core.Signal<string>;
449
+ protected messageId: _angular_core.Signal<string>;
450
+ writeValue(value: string | null): void;
451
+ protected onInput(event: Event): void;
452
+ protected onFocus(event: FocusEvent): void;
453
+ protected onBlur(event: FocusEvent): void;
454
+ protected onClear(): void;
455
+ protected onLabelClick(): void;
456
+ protected togglePasswordVisibility(): void;
457
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPasswordInputComponent, never>;
458
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPasswordInputComponent, "coar-password-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "clear": "clear"; }, never, never, true, never>;
459
+ }
460
+
461
+ type CoarCheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
462
+ type CoarCheckboxState = 'checked' | 'unchecked' | 'indeterminate';
463
+ declare class CoarCheckboxComponent extends CoarControlValueAccessor<CoarCheckboxState | undefined> {
464
+ /** Label text displayed next to the checkbox */
465
+ label: _angular_core.InputSignal<string>;
466
+ /**
467
+ * Checkbox state: 'checked', 'unchecked', 'indeterminate', or undefined (pristine).
468
+ * Using model() for two-way binding support.
469
+ */
470
+ checked: _angular_core.ModelSignal<CoarCheckboxState | undefined>;
471
+ /** Disables the checkbox (greyed out, not focusable) */
472
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
473
+ /** Prevents changes but keeps normal appearance and focus */
474
+ readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
475
+ /** Marks as required, shows asterisk on label */
476
+ required: _angular_core.InputSignalWithTransform<boolean, unknown>;
477
+ /** Error message to display below the checkbox */
478
+ error: _angular_core.InputSignal<string>;
479
+ /** Hint text displayed below the checkbox */
480
+ hint: _angular_core.InputSignal<string>;
481
+ /** Checkbox size - matches input/button heights for consistent layouts */
482
+ size: _angular_core.InputSignal<CoarCheckboxSize>;
483
+ /** HTML id attribute for the checkbox element */
484
+ id: _angular_core.InputSignal<string>;
485
+ /** HTML name attribute for form submission */
486
+ name: _angular_core.InputSignal<string>;
487
+ /** Value submitted with form when checked */
488
+ value: _angular_core.InputSignal<string>;
489
+ /** Emits when state changes: 'checked' or 'unchecked' */
490
+ checkedChange: _angular_core.OutputEmitterRef<CoarCheckboxState>;
491
+ protected isFocused: _angular_core.WritableSignal<boolean>;
492
+ protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
493
+ protected isDisabled: _angular_core.Signal<boolean>;
494
+ protected isChecked: _angular_core.Signal<boolean>;
495
+ protected isIndeterminate: _angular_core.Signal<boolean>;
496
+ protected hasError: _angular_core.Signal<boolean>;
497
+ protected displayMessage: _angular_core.Signal<string>;
498
+ protected inputId: _angular_core.Signal<string>;
499
+ protected messageId: _angular_core.Signal<string>;
500
+ constructor();
501
+ writeValue(value: CoarCheckboxState | undefined | null): void;
502
+ protected onChange(event: Event): void;
503
+ protected onFocus(): void;
504
+ protected onBlur(): void;
505
+ protected onLabelClick(): void;
506
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarCheckboxComponent, never>;
507
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarCheckboxComponent, "coar-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
508
+ }
509
+
510
+ /**
511
+ * Theme options for the scrollbar appearance.
512
+ * - 'dark': Dark scrollbar theme (default)
513
+ * - 'light': Light scrollbar theme
514
+ */
515
+ type CoarScrollbarTheme = 'dark' | 'light';
516
+ /**
517
+ * Auto-hide behavior for the scrollbar.
518
+ * - 'never': Scrollbars are always visible
519
+ * - 'scroll': Scrollbars hide when not scrolling
520
+ * - 'leave': Scrollbars hide when pointer leaves the element
521
+ * - 'move': Scrollbars hide when pointer stops moving
522
+ */
523
+ type CoarScrollbarAutoHide = 'never' | 'scroll' | 'leave' | 'move';
524
+ /**
525
+ * Overflow behavior for each axis.
526
+ * - 'hidden': Content is clipped, no scrollbar
527
+ * - 'scroll': Always show scrollbar
528
+ * - 'visible-hidden': Content visible but no scrollbar
529
+ * - 'visible-scroll': Content visible with scrollbar
530
+ */
531
+ type CoarScrollbarOverflow = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';
532
+ /**
533
+ * Directive that applies custom overlay scrollbars to an element.
534
+ *
535
+ * Uses OverlayScrollbars library to replace native scrollbars with
536
+ * styleable overlay scrollbars while preserving native scroll behavior.
537
+ *
538
+ * @example
539
+ * ```html
540
+ * <!-- Basic usage -->
541
+ * <div coarScrollbar>Scrollable content</div>
542
+ *
543
+ * <!-- With options -->
544
+ * <div coarScrollbar [theme]="'light'" [autoHide]="'scroll'">
545
+ * Scrollable content
546
+ * </div>
547
+ *
548
+ * <!-- Horizontal only -->
549
+ * <div coarScrollbar [overflowX]="'scroll'" [overflowY]="'hidden'">
550
+ * Horizontal scrollable content
551
+ * </div>
552
+ * ```
553
+ */
554
+ declare class CoarScrollbarDirective implements AfterViewInit, OnDestroy {
555
+ private readonly elementRef;
556
+ private readonly ngZone;
557
+ /** Theme for scrollbar appearance */
558
+ readonly theme: _angular_core.InputSignal<CoarScrollbarTheme>;
559
+ /** Auto-hide behavior for scrollbars */
560
+ readonly autoHide: _angular_core.InputSignal<CoarScrollbarAutoHide>;
561
+ /** Delay in ms before auto-hide triggers */
562
+ readonly autoHideDelay: _angular_core.InputSignal<number>;
563
+ /** Whether clicking the track scrolls to that position */
564
+ readonly clickScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
565
+ /** Overflow behavior for x-axis */
566
+ readonly overflowX: _angular_core.InputSignal<CoarScrollbarOverflow>;
567
+ /** Overflow behavior for y-axis */
568
+ readonly overflowY: _angular_core.InputSignal<CoarScrollbarOverflow>;
569
+ /** Whether to defer initialization until browser is idle */
570
+ readonly defer: _angular_core.InputSignalWithTransform<boolean, unknown>;
571
+ /**
572
+ * Overscroll behavior to prevent scroll chaining to parent elements.
573
+ * - 'auto': Default browser behavior (scroll chains to parent)
574
+ * - 'contain': Prevents scroll chaining when reaching scroll boundaries
575
+ * - 'none': Prevents scroll chaining and disables bounce effects
576
+ */
577
+ readonly overscrollBehavior: _angular_core.InputSignal<"auto" | "none" | "contain">;
578
+ private osInstance;
579
+ private initialized;
580
+ constructor();
581
+ ngAfterViewInit(): void;
582
+ ngOnDestroy(): void;
583
+ /**
584
+ * Returns the OverlayScrollbars instance or null if not initialized.
585
+ */
586
+ getInstance(): OverlayScrollbars | null;
587
+ /**
588
+ * Scrolls to the specified position.
589
+ */
590
+ scrollTo(options: {
591
+ x?: number;
592
+ y?: number;
593
+ }): void;
594
+ /**
595
+ * Scrolls to the bottom of the scrollable content.
596
+ */
597
+ scrollToBottom(): void;
598
+ /**
599
+ * Scrolls to the top of the scrollable content.
600
+ */
601
+ scrollToTop(): void;
602
+ /**
603
+ * Updates the scrollbar (useful after dynamic content changes).
604
+ */
605
+ update(): void;
606
+ private deferInitialization;
607
+ private initialize;
608
+ private buildOptions;
609
+ private destroy;
610
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarScrollbarDirective, never>;
611
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarScrollbarDirective, "[coarScrollbar]", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "autoHide": { "alias": "autoHide"; "required": false; "isSignal": true; }; "autoHideDelay": { "alias": "autoHideDelay"; "required": false; "isSignal": true; }; "clickScroll": { "alias": "clickScroll"; "required": false; "isSignal": true; }; "overflowX": { "alias": "overflowX"; "required": false; "isSignal": true; }; "overflowY": { "alias": "overflowY"; "required": false; "isSignal": true; }; "defer": { "alias": "defer"; "required": false; "isSignal": true; }; "overscrollBehavior": { "alias": "overscrollBehavior"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
612
+ }
613
+
614
+ /**
615
+ * Represents a selectable option in select components.
616
+ *
617
+ * @template T - The type of the option value
618
+ */
619
+ interface CoarSelectOption<T = unknown> {
620
+ /** The value stored when this option is selected */
621
+ value: T;
622
+ /** The display label shown in the dropdown and selected state */
623
+ label: string;
624
+ /** Whether this option is disabled and cannot be selected */
625
+ disabled?: boolean;
626
+ /** Optional group this option belongs to (for grouped options) */
627
+ group?: string;
628
+ /** Optional icon to display next to the label */
629
+ icon?: string;
630
+ }
631
+
632
+ type CoarSelectSize = 'xs' | 'sm' | 'md' | 'lg';
633
+ /** Dropdown position relative to the trigger */
634
+ type CoarDropdownPosition = 'top' | 'bottom';
635
+ /**
636
+ * Base class providing shared functionality for all select components.
637
+ * Handles dropdown state, keyboard navigation, and common styling.
638
+ * Subclasses override openDropdown() to use the overlay system.
639
+ */
640
+ declare abstract class CoarSelectBase<T> extends CoarControlValueAccessor<T> {
641
+ protected readonly elementRef: ElementRef<any>;
642
+ protected readonly destroyRef: DestroyRef;
643
+ /** Label text displayed above the select */
644
+ label: _angular_core.InputSignal<string>;
645
+ /** Placeholder text shown when no option is selected */
646
+ placeholder: _angular_core.InputSignal<string>;
647
+ /** Available options to choose from */
648
+ options: _angular_core.InputSignal<CoarSelectOption<unknown>[]>;
649
+ /** Select size - matches button/input heights for consistent layouts */
650
+ size: _angular_core.InputSignal<CoarSelectSize>;
651
+ /** Disables the select (greyed out, not focusable) */
652
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
653
+ /** Makes the select read-only (focusable but not editable) */
654
+ readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
655
+ /** Marks the select as required, shows asterisk on label */
656
+ required: _angular_core.InputSignalWithTransform<boolean, unknown>;
657
+ /** Error message to display below the select */
658
+ error: _angular_core.InputSignal<string>;
659
+ /** Hint text displayed below the select */
660
+ hint: _angular_core.InputSignal<string>;
661
+ /** HTML id attribute for the select element */
662
+ id: _angular_core.InputSignal<string>;
663
+ /** HTML name attribute for form submission */
664
+ name: _angular_core.InputSignal<string>;
665
+ /** Enable search/filter functionality within the dropdown */
666
+ searchable: _angular_core.InputSignalWithTransform<boolean, unknown>;
667
+ /** Search input placeholder when searchable is enabled */
668
+ searchPlaceholder: _angular_core.InputSignal<string>;
669
+ /**
670
+ * Comparison function to match values with options.
671
+ * Use this when value objects come from different sources (e.g., API vs form).
672
+ *
673
+ * @example
674
+ * ```typescript
675
+ * // Compare Country objects by their ID
676
+ * compareById = (a: Country | null, b: Country | null) => a?.id === b?.id;
677
+ * ```
678
+ */
679
+ compareWith: _angular_core.InputSignal<((o1: unknown, o2: unknown) => boolean) | undefined>;
680
+ /** Force dropdown position ('auto' calculates based on available space) */
681
+ dropdownPositionPreference: _angular_core.InputSignal<"auto" | "top" | "bottom">;
682
+ /** Reference to the scrollbar directive for scroll control */
683
+ protected scrollbarRef: _angular_core.Signal<CoarScrollbarDirective | undefined>;
684
+ /** Reference to the options list container for scroll-into-view */
685
+ protected optionsListRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
686
+ /** Reference to the search input for focusing (when searchable) */
687
+ protected searchInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
688
+ /** DOM id for the dropdown search input (when searchable). */
689
+ protected searchInputId: _angular_core.Signal<string>;
690
+ /** Whether the dropdown is currently open */
691
+ protected isOpen: _angular_core.WritableSignal<boolean>;
692
+ /** Whether the select is focused */
693
+ protected isFocused: _angular_core.WritableSignal<boolean>;
694
+ /** Current search/filter query */
695
+ protected searchQuery: _angular_core.WritableSignal<string>;
696
+ /** Currently highlighted option index for keyboard navigation */
697
+ protected highlightedIndex: _angular_core.WritableSignal<number>;
698
+ /** Current dropdown position */
699
+ protected dropdownPosition: _angular_core.WritableSignal<CoarDropdownPosition>;
700
+ /** Combined disabled state from input and CVA */
701
+ protected isDisabled: _angular_core.Signal<boolean>;
702
+ /** Whether there's an error to display */
703
+ protected hasError: _angular_core.Signal<boolean>;
704
+ /** Message to display (error takes priority over hint) */
705
+ protected displayMessage: _angular_core.Signal<string>;
706
+ /** Generated unique ID for the select element */
707
+ protected inputId: _angular_core.Signal<string>;
708
+ /** ID for the message element (for aria-describedby) */
709
+ protected messageId: _angular_core.Signal<string>;
710
+ /** ID for the listbox element */
711
+ protected listboxId: _angular_core.Signal<string>;
712
+ /** Filtered options based on search query */
713
+ protected filteredOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
714
+ /**
715
+ * Options for display, reversed when dropdown opens to top.
716
+ * This ensures the first option is always nearest to the trigger.
717
+ */
718
+ protected displayOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
719
+ /**
720
+ * Check if a display index is highlighted.
721
+ * When reversed, converts display index to data index.
722
+ */
723
+ protected isHighlighted(displayIndex: number): boolean;
724
+ /**
725
+ * Set highlight from display index.
726
+ * When reversed, converts display index to data index.
727
+ */
728
+ protected setHighlightFromDisplay(displayIndex: number): void;
729
+ constructor();
730
+ /** Toggle dropdown open/closed state */
731
+ protected toggleDropdown(): void;
732
+ /**
733
+ * Open the dropdown.
734
+ * Subclasses MUST override this method to implement overlay-based dropdown.
735
+ */
736
+ protected openDropdown(): void;
737
+ /**
738
+ * Close the dropdown.
739
+ * Subclasses MUST override this method to implement overlay-based dropdown.
740
+ */
741
+ protected closeDropdown(): void;
742
+ /** Handle keyboard navigation */
743
+ protected onKeyDown(event: KeyboardEvent): void;
744
+ /** Move highlight to the next available option */
745
+ protected highlightNextOption(): void;
746
+ /** Move highlight to the previous available option */
747
+ protected highlightPreviousOption(): void;
748
+ /** Move highlight to the first available option */
749
+ protected highlightFirstOption(): void;
750
+ /** Move highlight to the last available option */
751
+ protected highlightLastOption(): void;
752
+ /** Scroll the highlighted option into view */
753
+ protected scrollToHighlighted(): void;
754
+ protected focusSearchInput(): void;
755
+ protected scrollOptionsToBottom(): void;
756
+ protected getOptionsListElement(): HTMLDivElement | null;
757
+ /**
758
+ * CSS selector for the highlighted option element.
759
+ * Each component defines its own selector based on its CSS class naming.
760
+ */
761
+ protected abstract get highlightedOptionSelector(): string;
762
+ /** Handle focus event */
763
+ protected onFocus(): void;
764
+ /** Handle blur event */
765
+ protected onBlur(): void;
766
+ /** Handle search input changes */
767
+ protected onSearchInput(event: Event): void;
768
+ /** Whether this select should close on document clicks outside its host element. */
769
+ protected shouldCloseOnOutsideClick(): boolean;
770
+ /** Setup click outside handler to close dropdown. */
771
+ protected installOutsideClickHandler(): void;
772
+ /** Abstract method to select the currently highlighted option */
773
+ protected abstract selectHighlightedOption(): void;
774
+ /** Abstract method to get the display text for the current selection */
775
+ abstract getDisplayText(): string;
776
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSelectBase<any>, never>;
777
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarSelectBase<any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "dropdownPositionPreference": { "alias": "dropdownPositionPreference"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
778
+ }
779
+
780
+ /**
781
+ * Single-select dropdown component.
782
+ *
783
+ * Allows selecting one option from a list with keyboard navigation,
784
+ * search/filter support, and full forms integration.
785
+ *
786
+ * @example
787
+ * ```html
788
+ * <coar-single-select
789
+ * label="Country"
790
+ * [options]="countries"
791
+ * [(value)]="selectedCountry"
792
+ * placeholder="Select a country"
793
+ * />
794
+ * ```
795
+ */
796
+ declare class CoarSingleSelectComponent<T = unknown> extends CoarSelectBase<T | null> {
797
+ private readonly overlayBuilder;
798
+ private readonly destroyRefLocal;
799
+ private readonly triggerRef;
800
+ private readonly dropdownTemplateRef;
801
+ private overlayRef;
802
+ /** Current selected value (two-way bindable with [(value)]) */
803
+ value: _angular_core.ModelSignal<T | null>;
804
+ /** Whether to show a clear button when a value is selected */
805
+ clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
806
+ /** Emits when the selected value changes */
807
+ valueChange: _angular_core.OutputEmitterRef<T | null>;
808
+ /** CSS selector for highlighted option (used by base class scrollToHighlighted) */
809
+ protected get highlightedOptionSelector(): string;
810
+ /** The currently selected option object */
811
+ protected selectedOption: _angular_core.Signal<CoarSelectOption<unknown> | null>;
812
+ /** Whether to show the clear button */
813
+ protected showClearButton: _angular_core.Signal<boolean>;
814
+ /** Display text for the current selection */
815
+ getDisplayText(): string;
816
+ /** Write value from forms API */
817
+ writeValue(value: T | null): void;
818
+ /** Select an option by its value */
819
+ selectOption(option: CoarSelectOption<T>): void;
820
+ /** Select the currently highlighted option */
821
+ protected selectHighlightedOption(): void;
822
+ /** Clear the current selection */
823
+ protected clearSelection(event: Event): void;
824
+ /** Check if an option is currently selected */
825
+ protected isSelected(option: CoarSelectOption): boolean;
826
+ protected shouldCloseOnOutsideClick(): boolean;
827
+ protected openDropdown(): void;
828
+ protected closeDropdown(): void;
829
+ private resolvePlacement;
830
+ private estimatePanelHeight;
831
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarSingleSelectComponent<any>, never>;
832
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarSingleSelectComponent<any>, "coar-single-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
833
+ }
834
+
835
+ /**
836
+ * Multi-select dropdown component.
837
+ *
838
+ * Allows selecting multiple options from a list with checkboxes,
839
+ * keyboard navigation, search/filter support, and full forms integration.
840
+ *
841
+ * @example
842
+ * ```html
843
+ * <coar-multi-select
844
+ * label="Skills"
845
+ * [options]="skills"
846
+ * [(value)]="selectedSkills"
847
+ * placeholder="Select skills..."
848
+ * />
849
+ * ```
850
+ */
851
+ declare class CoarMultiSelectComponent<T = unknown> extends CoarSelectBase<T[]> {
852
+ private readonly overlayBuilder;
853
+ private readonly triggerRef;
854
+ private readonly dropdownTemplateRef;
855
+ private overlayRef;
856
+ /** Current selected values (two-way bindable with [(value)]) */
857
+ value: _angular_core.ModelSignal<T[]>;
858
+ /** Whether to show a clear button when values are selected */
859
+ clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
860
+ /** Maximum number of selected items to display before showing count */
861
+ maxDisplayItems: _angular_core.InputSignal<number>;
862
+ /** Whether to show "Select All" option */
863
+ showSelectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
864
+ /** Emits when the selected values change */
865
+ valueChange: _angular_core.OutputEmitterRef<T[]>;
866
+ /** CSS selector for highlighted option (used by base class scrollToHighlighted) */
867
+ protected get highlightedOptionSelector(): string;
868
+ /** The currently selected option objects */
869
+ protected selectedOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
870
+ /** Whether to show the clear button */
871
+ protected showClearButton: _angular_core.Signal<boolean>;
872
+ /** Whether all options are selected */
873
+ protected allSelected: _angular_core.Signal<boolean>;
874
+ /** Whether some but not all options are selected */
875
+ protected someSelected: _angular_core.Signal<boolean>;
876
+ /** Display text for the current selection */
877
+ getDisplayText(): string;
878
+ /** Write value from forms API */
879
+ writeValue(value: T[] | null): void;
880
+ /** Toggle selection of an option */
881
+ toggleOption(option: CoarSelectOption<T>, event?: Event): void;
882
+ /** Select the currently highlighted option */
883
+ protected selectHighlightedOption(): void;
884
+ /** Toggle all options */
885
+ protected toggleAll(event?: Event): void;
886
+ /** Clear all selections */
887
+ protected clearSelection(event: Event): void;
888
+ /** Check if an option is currently selected */
889
+ protected isSelected(option: CoarSelectOption): boolean;
890
+ /** Handle keyboard for multi-select (space toggles instead of closing) */
891
+ protected onKeyDown(event: KeyboardEvent): void;
892
+ protected shouldCloseOnOutsideClick(): boolean;
893
+ protected openDropdown(): void;
894
+ protected closeDropdown(): void;
895
+ private resolvePlacement;
896
+ private estimatePanelHeight;
897
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarMultiSelectComponent<any>, never>;
898
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarMultiSelectComponent<any>, "coar-multi-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxDisplayItems": { "alias": "maxDisplayItems"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; }, never, never, true, never>;
899
+ }
900
+
901
+ /**
902
+ * Tag-based multi-select component.
903
+ *
904
+ * Displays selected items as removable tag chips with support for
905
+ * creating new tags on-the-fly (optional), keyboard navigation,
906
+ * and full forms integration.
907
+ *
908
+ * @example
909
+ * ```html
910
+ * <coar-tag-select
911
+ * label="Tags"
912
+ * [options]="availableTags"
913
+ * [(value)]="selectedTags"
914
+ * [allowCreate]="true"
915
+ * placeholder="Add tags..."
916
+ * />
917
+ * ```
918
+ */
919
+ declare class CoarTagSelectComponent<T = string> extends CoarSelectBase<T[]> {
920
+ private readonly overlayBuilder;
921
+ private readonly triggerRef;
922
+ private readonly dropdownTemplateRef;
923
+ private overlayRef;
924
+ /** Current selected values (two-way bindable with [(value)]) */
925
+ value: _angular_core.ModelSignal<T[]>;
926
+ /** Allow creating new tags that don't exist in options */
927
+ allowCreate: _angular_core.InputSignalWithTransform<boolean, unknown>;
928
+ /** Maximum number of tags that can be selected (0 = unlimited) */
929
+ maxTags: _angular_core.InputSignal<number>;
930
+ /** Text shown when creating a new tag */
931
+ createPrefix: _angular_core.InputSignal<string>;
932
+ /** Emits when the selected values change */
933
+ valueChange: _angular_core.OutputEmitterRef<T[]>;
934
+ /** Emits when a new tag is created */
935
+ tagCreated: _angular_core.OutputEmitterRef<T>;
936
+ /**
937
+ * Reference to the inline search input (tag-select uses inline input, not dropdown search).
938
+ * This is separate from the base class searchInputRef.
939
+ */
940
+ protected inlineInputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
941
+ /** CSS selector for highlighted option (used by base class scrollToHighlighted) */
942
+ protected get highlightedOptionSelector(): string;
943
+ /** The currently selected option objects */
944
+ protected selectedOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
945
+ /** Available options that aren't already selected */
946
+ protected availableOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
947
+ /**
948
+ * Available options for display, reversed when dropdown opens to top.
949
+ * This ensures the first option is always nearest to the trigger.
950
+ */
951
+ protected displayAvailableOptions: _angular_core.Signal<CoarSelectOption<unknown>[]>;
952
+ /**
953
+ * Check if a display index is highlighted (for availableOptions).
954
+ * When reversed, converts display index to data index.
955
+ */
956
+ protected isAvailableHighlighted(displayIndex: number): boolean;
957
+ /**
958
+ * Set highlight from display index (for availableOptions).
959
+ * When reversed, converts display index to data index.
960
+ */
961
+ protected setAvailableHighlightFromDisplay(displayIndex: number): void;
962
+ /** Whether the max tags limit has been reached */
963
+ protected maxReached: _angular_core.Signal<boolean>;
964
+ /** Whether to show the "Create" option */
965
+ protected showCreateOption: _angular_core.Signal<boolean>;
966
+ /** Display text for the current selection */
967
+ getDisplayText(): string;
968
+ /** Write value from forms API */
969
+ writeValue(value: T[] | null): void;
970
+ /** Add a tag from an option */
971
+ addTag(option: CoarSelectOption<T>): void;
972
+ /** Remove a tag by value */
973
+ removeTag(tagValue: T, event?: Event): void;
974
+ /** Create a new tag from the search query */
975
+ protected createTag(): void;
976
+ /** Select the currently highlighted option */
977
+ protected selectHighlightedOption(): void;
978
+ /** Handle keyboard for tag-select */
979
+ protected onKeyDown(event: KeyboardEvent): void;
980
+ /** Handle input changes */
981
+ protected onInputChange(event: Event): void;
982
+ /** Focus the inline input */
983
+ protected focusInput(): void;
984
+ /** Handle input focus */
985
+ protected onInputFocus(): void;
986
+ /** Handle input blur */
987
+ protected onInputBlur(): void;
988
+ /** Override to calculate highlighted index including create option */
989
+ protected highlightNextOption(): void;
990
+ /** Scroll highlighted option into view */
991
+ protected scrollToHighlighted(): void;
992
+ protected shouldCloseOnOutsideClick(): boolean;
993
+ protected openDropdown(): void;
994
+ protected closeDropdown(): void;
995
+ private resolvePlacement;
996
+ private estimatePanelHeight;
997
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTagSelectComponent<any>, never>;
998
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTagSelectComponent<any>, "coar-tag-select", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "allowCreate": { "alias": "allowCreate"; "required": false; "isSignal": true; }; "maxTags": { "alias": "maxTags"; "required": false; "isSignal": true; }; "createPrefix": { "alias": "createPrefix"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "tagCreated": "tagCreated"; }, never, never, true, never>;
999
+ }
1000
+
1001
+ type CoarIconRegisteredSource = Readonly<{
1002
+ key: string;
1003
+ isDefault: boolean;
1004
+ canProvideIconKeys: boolean;
1005
+ }>;
1006
+ declare class CoarIconService {
1007
+ private readonly builtInSource;
1008
+ private readonly sourceEntries;
1009
+ private readonly defaultSourceOverrides;
1010
+ private readonly sourceByKey;
1011
+ /**
1012
+ * Get an icon by name from a specific icon source.
1013
+ *
1014
+ * - If `sourceKey` is omitted, the default source is used.
1015
+ * - If no source is configured, this throws to make misconfiguration obvious.
1016
+ */
1017
+ getIcon(name: string, sourceKey?: string): Observable<string | null>;
1018
+ /**
1019
+ * List all registered icon sources.
1020
+ *
1021
+ * This is useful for UIs that allow users to browse icons grouped by source.
1022
+ */
1023
+ getRegisteredSources(): ReadonlyArray<CoarIconRegisteredSource>;
1024
+ /**
1025
+ * Get the available icon keys from a specific source.
1026
+ *
1027
+ * Throws if the source does not support listing keys.
1028
+ */
1029
+ getAvailableIconKeys(sourceKey?: string): Observable<readonly string[]>;
1030
+ clearCache(): void;
1031
+ clearIconCache(name: string): void;
1032
+ private getSourceOrThrow;
1033
+ private getSourceEntryOrThrow;
1034
+ private getDefaultSourceKeyOrThrow;
1035
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarIconService, never>;
1036
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarIconService>;
1037
+ }
1038
+
1039
+ interface CoarIconSource {
1040
+ getIcon(name: string): Observable<string | null>;
1041
+ getAvailableIconKeys?(): Observable<readonly string[]>;
1042
+ clearCache?(): void;
1043
+ clearIconCache?(name: string): void;
1044
+ }
1045
+ type CoarIconSourceEntry = Readonly<{
1046
+ key: string;
1047
+ source: CoarIconSource;
1048
+ }>;
1049
+ declare const COAR_ICON_SOURCE_ENTRY: InjectionToken<Readonly<{
1050
+ key: string;
1051
+ source: CoarIconSource;
1052
+ }>>;
1053
+ declare const COAR_DEFAULT_ICON_SOURCE_KEY: InjectionToken<string>;
1054
+ type ProvideCoarIconSourceOptions = Readonly<{
1055
+ key: string;
1056
+ source: CoarIconSource;
1057
+ }>;
1058
+ declare function provideCoarIconSource(options: ProvideCoarIconSourceOptions): Provider;
1059
+ type ProvideCoarIconMapSourceOptions = Readonly<{
1060
+ key: string;
1061
+ icons: Readonly<Record<string, string>>;
1062
+ }>;
1063
+ declare function provideCoarIconMapSource(options: ProvideCoarIconMapSourceOptions): Provider;
1064
+ declare function provideCoarDefaultIconSource(key: string): Provider;
1065
+ type ProvideCoarHttpIconSourceOptions = Readonly<{
1066
+ key: string;
1067
+ getUrl: (iconName: string) => string;
1068
+ getAvailableIconKeys?: (http: HttpClient) => Observable<readonly string[]>;
1069
+ }>;
1070
+ declare function provideCoarHttpIconSource(options: ProvideCoarHttpIconSourceOptions): Provider;
1071
+
1072
+ declare const COAR_BUILTIN_ICON_SOURCE_KEY: "coar-builtin";
1073
+ /**
1074
+ * Overrides (and/or adds) built-in icons while keeping the built-in set as a base.
1075
+ *
1076
+ * This registers a map source under the fixed key `coar-builtin`, so it replaces the
1077
+ * built-in fallback source inside `CoarIconService`.
1078
+ */
1079
+ declare function provideCoarIconBuiltInOverrides(overrides: Readonly<Record<string, string>>): Provider;
1080
+
1081
+ /**
1082
+ * Loading strategy for tab content:
1083
+ * - 'lazy': Content is only rendered when tab is active (default)
1084
+ * - 'eager': Content is always rendered, hidden when inactive
1085
+ */
1086
+ type TabLoadingStrategy = 'eager' | 'lazy';
1087
+ /**
1088
+ * Content type that can be passed to a tab.
1089
+ * Either a TemplateRef (from ng-template) or a Component class.
1090
+ */
1091
+ type TabContent = TemplateRef<unknown> | Type<unknown>;
1092
+ /**
1093
+ * Individual tab definition for use within CoarTabGroup.
1094
+ *
1095
+ * The tab label is provided as content projected into the component.
1096
+ * This allows simple text, icons, badges, or any custom HTML.
1097
+ *
1098
+ * @example Simple text label
1099
+ * ```html
1100
+ * <coar-tab id="home" [content]="homeTemplate">Home</coar-tab>
1101
+ * ```
1102
+ *
1103
+ * @example With icon
1104
+ * ```html
1105
+ * <coar-tab id="settings" [content]="SettingsComponent">⚙️ Settings</coar-tab>
1106
+ * ```
1107
+ *
1108
+ * @example Rich label with badge
1109
+ * ```html
1110
+ * <coar-tab id="messages" [content]="messagesTemplate">
1111
+ * Messages <span class="badge">5</span>
1112
+ * </coar-tab>
1113
+ * ```
1114
+ */
1115
+ declare class CoarTabComponent {
1116
+ /** Unique identifier for the tab */
1117
+ id: _angular_core.InputSignal<string>;
1118
+ /** Whether the tab is disabled */
1119
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
1120
+ /**
1121
+ * The content to display in the tab panel.
1122
+ * Can be either a TemplateRef (from ng-template) or a Component class.
1123
+ */
1124
+ content: _angular_core.InputSignal<TabContent>;
1125
+ /**
1126
+ * Inputs to pass when content is a Component.
1127
+ * Ignored when content is a TemplateRef.
1128
+ */
1129
+ contentInputs: _angular_core.InputSignal<Record<string, unknown>>;
1130
+ /**
1131
+ * Loading strategy for the tab content.
1132
+ * - 'lazy' (default): Content is only rendered when tab becomes active
1133
+ * - 'eager': Content is always rendered, just hidden when inactive
1134
+ */
1135
+ loadingStrategy: _angular_core.InputSignal<TabLoadingStrategy>;
1136
+ /** Template reference for the projected label content */
1137
+ labelTemplate: _angular_core.Signal<TemplateRef<unknown>>;
1138
+ /**
1139
+ * Whether the content is a Component (vs a TemplateRef)
1140
+ */
1141
+ get isComponent(): boolean;
1142
+ /**
1143
+ * Get content as TemplateRef (returns null if it's a component)
1144
+ */
1145
+ get templateContent(): TemplateRef<unknown> | null;
1146
+ /**
1147
+ * Get content as Component type (returns null if it's a template)
1148
+ */
1149
+ get componentContent(): Type<unknown> | null;
1150
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTabComponent, never>;
1151
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTabComponent, "coar-tab", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "contentInputs": { "alias": "contentInputs"; "required": false; "isSignal": true; }; "loadingStrategy": { "alias": "loadingStrategy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
1152
+ }
1153
+
1154
+ declare class CoarTabGroupComponent implements AfterContentInit {
1155
+ /** The currently active tab id */
1156
+ activeTab: _angular_core.InputSignal<string>;
1157
+ /** Emits when the active tab changes */
1158
+ activeTabChange: _angular_core.OutputEmitterRef<string>;
1159
+ /** All tab components projected into this group */
1160
+ tabs: _angular_core.Signal<readonly CoarTabComponent[]>;
1161
+ /** Internal active tab state */
1162
+ protected internalActiveTab: _angular_core.WritableSignal<string>;
1163
+ constructor();
1164
+ ngAfterContentInit(): void;
1165
+ /** Check if a tab is currently active */
1166
+ isActive(tabId: string): boolean;
1167
+ /**
1168
+ * Determines whether the content of a tab should be rendered.
1169
+ * - For 'eager' strategy: always render (content stays in DOM)
1170
+ * - For 'lazy' strategy: only render when active
1171
+ */
1172
+ shouldRenderContent(tab: CoarTabComponent): boolean;
1173
+ /** Select a tab by its id */
1174
+ selectTab(tabId: string): void;
1175
+ /** Handle keyboard navigation */
1176
+ onKeydown(event: KeyboardEvent, currentTabId: string): void;
1177
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTabGroupComponent, never>;
1178
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTabGroupComponent, "coar-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTabChange": "activeTabChange"; }, ["tabs"], never, true, never>;
1179
+ }
1180
+
1181
+ declare class CoarCodeBlockComponent {
1182
+ private readonly injector;
1183
+ /** The code to display */
1184
+ code: _angular_core.InputSignal<string>;
1185
+ /** Language for syntax highlighting */
1186
+ language: _angular_core.InputSignal<string>;
1187
+ /** Title/label for the code block */
1188
+ title: _angular_core.InputSignal<string>;
1189
+ /** Whether the code block can be collapsed */
1190
+ collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
1191
+ /** Whether the code block starts collapsed */
1192
+ collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
1193
+ /** Whether to show the copy button */
1194
+ showCopy: _angular_core.InputSignalWithTransform<boolean, unknown>;
1195
+ /** Whether to show line numbers */
1196
+ showLineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
1197
+ /** Maximum height before scrolling (0 = no limit) */
1198
+ maxHeight: _angular_core.InputSignal<number>;
1199
+ /** Internal collapsed state */
1200
+ protected isCollapsed: _angular_core.WritableSignal<boolean>;
1201
+ /** Copy feedback state */
1202
+ protected copyFeedback: _angular_core.WritableSignal<"error" | "idle" | "copied">;
1203
+ /** Highlighted code HTML */
1204
+ protected highlightedCode: _angular_core.Signal<string>;
1205
+ /** Highlighted code split by line for optional line-number rendering */
1206
+ protected highlightedLines: _angular_core.Signal<string[]>;
1207
+ constructor();
1208
+ /** Map common language aliases to Prism language names */
1209
+ private mapLanguage;
1210
+ /** Escape HTML for plain text fallback */
1211
+ private escapeHtml;
1212
+ /** Toggle collapsed state */
1213
+ toggleCollapsed(): void;
1214
+ /** Copy code to clipboard */
1215
+ copyCode(): Promise<void>;
1216
+ /** Get lines for line numbers */
1217
+ get lines(): number[];
1218
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarCodeBlockComponent, never>;
1219
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarCodeBlockComponent, "coar-code-block", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "showCopy": { "alias": "showCopy"; "required": false; "isSignal": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
1220
+ }
1221
+
1222
+ type CardColor = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
1223
+ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
1224
+ declare class CoarCardComponent {
1225
+ /**
1226
+ * Adds a box-shadow for elevation/depth.
1227
+ * Use as boolean attribute: `<coar-card elevated>` or `[elevated]="true"`
1228
+ */
1229
+ elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
1230
+ /**
1231
+ * Removes the border from the card, leaving only background color.
1232
+ * By default (false), cards have a visible border matching their color.
1233
+ * Use as boolean attribute: `<coar-card borderless>` or `[borderless]="true"`
1234
+ */
1235
+ borderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
1236
+ /** Card color scheme */
1237
+ color: _angular_core.InputSignal<CardColor>;
1238
+ /** Card padding size */
1239
+ padding: _angular_core.InputSignal<CardPadding>;
1240
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarCardComponent, never>;
1241
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarCardComponent, "coar-card", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["[coar-card-header]", "*", "[coar-card-footer]"], true, never>;
1242
+ }
1243
+
1244
+ type NoteColor = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
1245
+ type NotePadding = 'sm' | 'md' | 'lg';
1246
+ /**
1247
+ * A callout/note component for highlighting information.
1248
+ *
1249
+ * Features a colored left border and subtle background.
1250
+ * Use for tips, warnings, important information, or behavioral notes.
1251
+ *
1252
+ * @example
1253
+ * ```html
1254
+ * <coar-note color="info">
1255
+ * <strong>Note:</strong> This is important information.
1256
+ * </coar-note>
1257
+ *
1258
+ * <coar-note color="warning" padding="lg">
1259
+ * <h4>Warning</h4>
1260
+ * <p>Be careful with this action.</p>
1261
+ * </coar-note>
1262
+ * ```
1263
+ */
1264
+ declare class CoarNoteComponent {
1265
+ /**
1266
+ * Note color scheme.
1267
+ * Determines the left border color and background tint.
1268
+ * @default 'info'
1269
+ */
1270
+ color: _angular_core.InputSignal<NoteColor>;
1271
+ /**
1272
+ * Note padding size.
1273
+ * @default 'md'
1274
+ */
1275
+ padding: _angular_core.InputSignal<NotePadding>;
1276
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarNoteComponent, never>;
1277
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarNoteComponent, "coar-note", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
1278
+ }
1279
+
1280
+ type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
1281
+ type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
1282
+ declare class CoarButtonComponent {
1283
+ /** Button visual variant */
1284
+ variant: _angular_core.InputSignal<ButtonVariant>;
1285
+ /** Button size */
1286
+ size: _angular_core.InputSignal<ButtonSize>;
1287
+ /** Whether the button is disabled */
1288
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
1289
+ /** Whether the button is in loading state */
1290
+ loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
1291
+ /** Button type attribute */
1292
+ type: _angular_core.InputSignal<"button" | "reset" | "submit">;
1293
+ /** Icon to display before the label */
1294
+ iconStart: _angular_core.InputSignal<string | undefined>;
1295
+ /** Icon to display after the label */
1296
+ iconEnd: _angular_core.InputSignal<string | undefined>;
1297
+ /** Whether the button should take full width */
1298
+ fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
1299
+ /** Optional aria-label applied to the underlying <button> element */
1300
+ ariaLabel: _angular_core.InputSignal<string>;
1301
+ /** Emitted when the button is clicked (not emitted when disabled or loading) */
1302
+ clicked: _angular_core.OutputEmitterRef<MouseEvent>;
1303
+ /** Maps button size to appropriate icon size */
1304
+ protected readonly iconSize: _angular_core.Signal<CoarIconSize>;
1305
+ protected onClick(event: MouseEvent): void;
1306
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarButtonComponent, never>;
1307
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarButtonComponent, "coar-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
1308
+ }
1309
+
1310
+ type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
1311
+ type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
1312
+ declare class CoarBadgeComponent {
1313
+ /** Content to display in the badge (number, text, or icon) */
1314
+ content: _angular_core.InputSignal<string | number>;
1315
+ /** Badge visual variant */
1316
+ variant: _angular_core.InputSignal<BadgeVariant>;
1317
+ /** Badge size */
1318
+ size: _angular_core.InputSignal<BadgeSize>;
1319
+ /** Whether the badge should pulse/animate (for notifications) */
1320
+ pulse: _angular_core.InputSignalWithTransform<boolean, unknown>;
1321
+ /** Whether to show as a dot without content */
1322
+ dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
1323
+ /** Maximum number to display (shows "99+" if exceeded) */
1324
+ max: _angular_core.InputSignal<number | null>;
1325
+ /** Whether to show a border around the badge */
1326
+ bordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
1327
+ /** Computed display value */
1328
+ protected displayValue: _angular_core.Signal<string>;
1329
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarBadgeComponent, never>;
1330
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarBadgeComponent, "coar-badge", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pulse": { "alias": "pulse"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
1331
+ }
1332
+
1333
+ /**
1334
+ * Tag color variants - mirrors CardColor for visual consistency.
1335
+ * Tags are the "little brother" of Cards with the same color system.
1336
+ */
1337
+ type TagColor = 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'accent';
1338
+ /**
1339
+ * Tag size variants.
1340
+ * - sm: Compact tags for dense UIs (10px font)
1341
+ * - md: Default size (12px font)
1342
+ * - lg: Larger tags for emphasis (14px font)
1343
+ */
1344
+ type TagSize = 'sm' | 'md' | 'lg';
1345
+ /**
1346
+ * CoarTagComponent
1347
+ *
1348
+ * A compact label component for categorizing, labeling, or marking content.
1349
+ * Shares the same color system as CoarCard for visual consistency.
1350
+ *
1351
+ * Unlike badges (pill-shaped, for counts/notifications), tags use
1352
+ * slight rounding and support interactive features like closing.
1353
+ *
1354
+ * @example
1355
+ * ```html
1356
+ * <coar-tag>Default</coar-tag>
1357
+ * <coar-tag color="success">Published</coar-tag>
1358
+ * <coar-tag color="warning" closable (closed)="onRemove()">Draft</coar-tag>
1359
+ * ```
1360
+ */
1361
+ declare class CoarTagComponent {
1362
+ /**
1363
+ * Adds a box-shadow for elevation/depth.
1364
+ * Use as boolean attribute: `<coar-tag elevated>` or `[elevated]="true"`
1365
+ */
1366
+ elevated: _angular_core.InputSignalWithTransform<boolean, unknown>;
1367
+ /**
1368
+ * Removes the border from the tag, leaving only background color.
1369
+ * By default (false), tags have a visible border matching their color.
1370
+ * Use as boolean attribute: `<coar-tag borderless>` or `[borderless]="true"`
1371
+ */
1372
+ borderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
1373
+ /** Tag color scheme - matches Card colors */
1374
+ color: _angular_core.InputSignal<TagColor>;
1375
+ /** Tag size */
1376
+ size: _angular_core.InputSignal<TagSize>;
1377
+ /** Whether the tag can be closed/removed */
1378
+ closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
1379
+ /** Emitted when the close button is clicked */
1380
+ closed: _angular_core.OutputEmitterRef<void>;
1381
+ /** Handle close button click */
1382
+ protected onClose(event: MouseEvent): void;
1383
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTagComponent, never>;
1384
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTagComponent, "coar-tag", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "borderless": { "alias": "borderless"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
1385
+ }
1386
+
1387
+ /**
1388
+ * Content alignment options for the divider.
1389
+ * - 'center': Content is centered with lines on both sides (default)
1390
+ * - 'left': Content is aligned left with line on the right
1391
+ * - 'right': Content is aligned right with line on the left
1392
+ */
1393
+ type DividerAlign = 'left' | 'center' | 'right';
1394
+ /**
1395
+ * Visual style variants for the divider line.
1396
+ * - 'subtle': Light, unobtrusive divider (default)
1397
+ * - 'strong': More prominent divider
1398
+ */
1399
+ type DividerVariant = 'subtle' | 'strong';
1400
+ /**
1401
+ * A flexible divider component for visually separating content sections.
1402
+ *
1403
+ * Supports optional content (text, icons, etc.) via ng-content that can be
1404
+ * aligned left, center, or right. When content is present, the divider line
1405
+ * splits around it.
1406
+ *
1407
+ * @example
1408
+ * <!-- Simple divider -->
1409
+ * <coar-divider />
1410
+ *
1411
+ * @example
1412
+ * <!-- Divider with centered text -->
1413
+ * <coar-divider>OR</coar-divider>
1414
+ *
1415
+ * @example
1416
+ * <!-- Divider with left-aligned content -->
1417
+ * <coar-divider align="left">Section Title</coar-divider>
1418
+ */
1419
+ declare class CoarDividerComponent {
1420
+ /** Content alignment when ng-content is provided */
1421
+ align: _angular_core.InputSignal<DividerAlign>;
1422
+ /** Visual style variant */
1423
+ variant: _angular_core.InputSignal<DividerVariant>;
1424
+ /** Width of the divider as a percentage (0-100) */
1425
+ width: _angular_core.InputSignal<number>;
1426
+ /** Spacing above the divider in pixels */
1427
+ spacingTop: _angular_core.InputSignal<number>;
1428
+ /** Spacing below the divider in pixels */
1429
+ spacingBottom: _angular_core.InputSignal<number>;
1430
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarDividerComponent, never>;
1431
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarDividerComponent, "coar-divider", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "spacingTop": { "alias": "spacingTop"; "required": false; "isSignal": true; }; "spacingBottom": { "alias": "spacingBottom"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
1432
+ }
1433
+
1434
+ /**
1435
+ * A lightweight, hover/focus popover for rich tooltip-like content.
1436
+ *
1437
+ * Uses the overlay system for positioning with automatic placement and viewport clamping.
1438
+ */
1439
+ declare class CoarPopoverComponent {
1440
+ private readonly elementRef;
1441
+ private readonly destroyRef;
1442
+ private readonly popoverGroup;
1443
+ private readonly overlayBuilder;
1444
+ private static nextId;
1445
+ private readonly popoverId;
1446
+ protected readonly panelId: string;
1447
+ private overlayRef;
1448
+ protected readonly isOpen: _angular_core.WritableSignal<boolean>;
1449
+ constructor();
1450
+ /** Disable popover behavior (still renders trigger content). */
1451
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
1452
+ /** Enable hover/focus behavior (desktop-friendly). Default: false */
1453
+ openOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
1454
+ /** Enable click/tap behavior (touch-friendly). Default: false */
1455
+ openOnClick: _angular_core.InputSignalWithTransform<boolean, unknown>;
1456
+ /** Whether the panel should receive pointer events. Default: true */
1457
+ interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
1458
+ /** When a concrete placement is set, fall back to best-fit when it doesn't fit. Default: false */
1459
+ fallbackToBestFit: _angular_core.InputSignalWithTransform<boolean, unknown>;
1460
+ /** Whether the panel should be clamped into the viewport. Default: true */
1461
+ clampToViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
1462
+ /** When true, the popover is "pinned" open via click and won't close on hover out. */
1463
+ protected readonly pinnedByClick: _angular_core.WritableSignal<boolean>;
1464
+ private closeTimer;
1465
+ private readonly hoveringTrigger;
1466
+ private readonly hoveringPanel;
1467
+ private readonly closeOnDisable;
1468
+ private readonly syncClampToViewport;
1469
+ private readonly syncFallbackToBestFit;
1470
+ private readonly triggerRef;
1471
+ private readonly panelTemplateRef;
1472
+ private getAnchorElement;
1473
+ private readonly closeOnDocumentClick;
1474
+ private openInternal;
1475
+ onMouseEnter(): void;
1476
+ onMouseLeave(): void;
1477
+ onPanelMouseEnter(): void;
1478
+ onPanelMouseLeave(): void;
1479
+ onFocusIn(): void;
1480
+ onPanelFocusIn(): void;
1481
+ onTriggerClick(event: MouseEvent): void;
1482
+ onHostClick(event: MouseEvent): void;
1483
+ close(): void;
1484
+ onFocusOut(event: FocusEvent): void;
1485
+ onPanelFocusOut(event: FocusEvent): void;
1486
+ private scheduleHoverClose;
1487
+ private clearCloseTimer;
1488
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPopoverComponent, never>;
1489
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarPopoverComponent, "coar-popover", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "openOnHover": { "alias": "openOnHover"; "required": false; "isSignal": true; }; "openOnClick": { "alias": "openOnClick"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "fallbackToBestFit": { "alias": "fallbackToBestFit"; "required": false; "isSignal": true; }; "clampToViewport": { "alias": "clampToViewport"; "required": false; "isSignal": true; }; }, {}, never, ["[coarPopoverTrigger]", "[coarPopoverContent]"], true, never>;
1490
+ }
1491
+
1492
+ /**
1493
+ * Local coordination for popovers inside the same container (e.g. a date picker panel).
1494
+ *
1495
+ * Provided by a parent component to ensure only one popover in that scope is open at a time.
1496
+ */
1497
+ declare class CoarPopoverGroupService {
1498
+ private activeId;
1499
+ private activeClose;
1500
+ requestOpen(id: string, close: () => void): void;
1501
+ notifyClosed(id: string): void;
1502
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarPopoverGroupService, never>;
1503
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoarPopoverGroupService>;
1504
+ }
1505
+
1506
+ type CoarTooltipOverlayContent = string | TemplateRef<unknown> | Type<unknown>;
1507
+
1508
+ /** Tooltip placement preference - all 12 standard placements plus 'auto' for best-fit */
1509
+ type TooltipPlacement = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
1510
+ declare class CoarTooltipDirective {
1511
+ private readonly elementRef;
1512
+ private readonly destroyRef;
1513
+ private readonly injector;
1514
+ private readonly tooltipService;
1515
+ /** Tooltip content (string, TemplateRef, or Component type). */
1516
+ readonly coarTooltip: _angular_core.InputSignal<CoarTooltipOverlayContent | null>;
1517
+ /** Optional context for TemplateRef tooltips. */
1518
+ readonly coarTooltipContext: _angular_core.InputSignal<object | null>;
1519
+ /** Disable tooltip behavior. */
1520
+ readonly coarTooltipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
1521
+ /** Placement preference. Default: 'top'. Use 'auto' for best-fit. */
1522
+ readonly coarTooltipPlacement: _angular_core.InputSignal<TooltipPlacement>;
1523
+ /** Delay (ms) before opening on hover/focus. Default: 0 */
1524
+ readonly coarTooltipOpenDelay: _angular_core.InputSignalWithTransform<number, unknown>;
1525
+ /** Delay (ms) before closing on leave/blur. Default: 0 */
1526
+ readonly coarTooltipCloseDelay: _angular_core.InputSignalWithTransform<number, unknown>;
1527
+ /** Whether the tooltip should be clamped into the viewport. Default: true */
1528
+ readonly coarTooltipClampToViewport: _angular_core.InputSignalWithTransform<boolean, unknown>;
1529
+ /** When placement is explicit (not auto), fall back to best-fit when it doesn't fit. Default: false */
1530
+ readonly coarTooltipFallbackToBestFit: _angular_core.InputSignalWithTransform<boolean, unknown>;
1531
+ private readonly tooltipId;
1532
+ private overlayRef;
1533
+ private readonly overlayBuilder;
1534
+ private openTimerId;
1535
+ private closeTimerId;
1536
+ private openReason;
1537
+ private readonly hasContent;
1538
+ constructor();
1539
+ private clearTimers;
1540
+ private openInternal;
1541
+ private resolveOverlayPosition;
1542
+ private scheduleOpen;
1543
+ private scheduleClose;
1544
+ onMouseEnter(): void;
1545
+ onMouseLeave(): void;
1546
+ onFocusIn(): void;
1547
+ onFocusOut(event: FocusEvent): void;
1548
+ close(immediate?: boolean): void;
1549
+ open(): void;
1550
+ toggle(): void;
1551
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTooltipDirective, never>;
1552
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoarTooltipDirective, "[coarTooltip]", ["coarTooltip"], { "coarTooltip": { "alias": "coarTooltip"; "required": false; "isSignal": true; }; "coarTooltipContext": { "alias": "coarTooltipContext"; "required": false; "isSignal": true; }; "coarTooltipDisabled": { "alias": "coarTooltipDisabled"; "required": false; "isSignal": true; }; "coarTooltipPlacement": { "alias": "coarTooltipPlacement"; "required": false; "isSignal": true; }; "coarTooltipOpenDelay": { "alias": "coarTooltipOpenDelay"; "required": false; "isSignal": true; }; "coarTooltipCloseDelay": { "alias": "coarTooltipCloseDelay"; "required": false; "isSignal": true; }; "coarTooltipClampToViewport": { "alias": "coarTooltipClampToViewport"; "required": false; "isSignal": true; }; "coarTooltipFallbackToBestFit": { "alias": "coarTooltipFallbackToBestFit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
1553
+ }
1554
+
1555
+ /**
1556
+ * Available sizes for the label component.
1557
+ * Matches the component size system used by buttons and inputs.
1558
+ */
1559
+ type CoarLabelSize = 'xs' | 'sm' | 'md' | 'lg';
1560
+ /**
1561
+ * Standalone label component for consistent form labeling across the design system.
1562
+ *
1563
+ * @example
1564
+ * ```html
1565
+ * <coar-label size="sm" [required]="true">Email Address</coar-label>
1566
+ * <coar-text-input size="sm" placeholder="your@email.com" />
1567
+ * ```
1568
+ */
1569
+ declare class CoarLabelComponent {
1570
+ /**
1571
+ * Size of the label. Should match the size of the associated input/form element.
1572
+ * @default 'md'
1573
+ */
1574
+ readonly size: _angular_core.InputSignal<CoarLabelSize>;
1575
+ /**
1576
+ * Whether to show a required indicator (*) after the label text.
1577
+ * @default false
1578
+ */
1579
+ readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
1580
+ /**
1581
+ * The ID of the form element this label is associated with.
1582
+ * Sets the 'for' attribute for accessibility.
1583
+ */
1584
+ readonly for: _angular_core.InputSignal<string | undefined>;
1585
+ readonly text: _angular_core.InputSignal<string>;
1586
+ get isXs(): boolean;
1587
+ get isSm(): boolean;
1588
+ get isMd(): boolean;
1589
+ get isLg(): boolean;
1590
+ get forAttr(): string | null;
1591
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarLabelComponent, never>;
1592
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarLabelComponent, "coar-label", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
1593
+ }
1594
+
1595
+ type CoarTableVariant = 'default' | 'plain' | 'bordered';
1596
+ /**
1597
+ * A simple table component that provides consistent styling.
1598
+ *
1599
+ * Default styling uses alternating row colors (zebra stripes) for readability.
1600
+ * Use 'plain' variant for no stripes, or 'bordered' for full cell borders.
1601
+ *
1602
+ * Usage:
1603
+ * ```html
1604
+ * <coar-table>
1605
+ * <thead>
1606
+ * <tr>
1607
+ * <th>Property</th>
1608
+ * <th>Type</th>
1609
+ * </tr>
1610
+ * </thead>
1611
+ * <tbody>
1612
+ * <tr>
1613
+ * <td><code>name</code></td>
1614
+ * <td><code>string</code></td>
1615
+ * </tr>
1616
+ * </tbody>
1617
+ * </coar-table>
1618
+ * ```
1619
+ */
1620
+ declare class CoarTableComponent {
1621
+ /** Visual variant of the table: default (zebra stripes), plain (no stripes), bordered (cell borders) */
1622
+ variant: _angular_core.InputSignal<CoarTableVariant>;
1623
+ /** Whether to use compact padding */
1624
+ compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
1625
+ /** Whether rows should highlight on hover */
1626
+ hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
1627
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarTableComponent, never>;
1628
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarTableComponent, "coar-table", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
1629
+ }
1630
+
1631
+ type CoarDatePickerSize = 'xs' | 'sm' | 'md' | 'lg';
1632
+ /**
1633
+ * Represents a date marker for highlighting special dates (holidays, events, etc.)
1634
+ * Supports single dates or date ranges.
1635
+ */
1636
+ interface CoarDateMarker {
1637
+ /** Start date of the marker (or single date if no endDate) */
1638
+ startDate: Temporal.PlainDate;
1639
+ /** Optional end date for date ranges (inclusive) */
1640
+ endDate?: Temporal.PlainDate;
1641
+ /** Description shown as tooltip on hover */
1642
+ description: string;
1643
+ /** Optional custom CSS class for styling different marker types */
1644
+ cssClass?: string;
1645
+ }
1646
+ /**
1647
+ * Date picker component using Temporal API.
1648
+ *
1649
+ * Supports Temporal.PlainDate values for timezone-independent date selection.
1650
+ * Uses ISO string format internally for forms compatibility.
1651
+ *
1652
+ * @example
1653
+ * ```html
1654
+ * <coar-date-picker
1655
+ * label="Birth Date"
1656
+ * [(value)]="birthDate"
1657
+ * placeholder="Select date..."
1658
+ * />
1659
+ * ```
1660
+ */
1661
+ declare class CoarDatePickerComponent extends CoarControlValueAccessor<Temporal.PlainDate | null> {
1662
+ private readonly elementRef;
1663
+ private readonly destroyRef;
1664
+ private readonly localeService;
1665
+ private readonly overlayBuilder;
1666
+ private overlayRef;
1667
+ /** Label text displayed above the input */
1668
+ label: _angular_core.InputSignal<string>;
1669
+ /** Placeholder text when no date is selected */
1670
+ placeholder: _angular_core.InputSignal<string>;
1671
+ /** Size variant */
1672
+ size: _angular_core.InputSignal<CoarDatePickerSize>;
1673
+ /** Whether the picker is readonly */
1674
+ readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
1675
+ /** Whether the picker is disabled */
1676
+ disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
1677
+ /** Whether the field is required */
1678
+ required: _angular_core.InputSignalWithTransform<boolean, unknown>;
1679
+ /** Error state */
1680
+ error: _angular_core.InputSignalWithTransform<boolean, unknown>;
1681
+ /** Helper or error message */
1682
+ message: _angular_core.InputSignal<string>;
1683
+ /** Minimum selectable date */
1684
+ min: _angular_core.InputSignal<Temporal.PlainDate | null>;
1685
+ /** Maximum selectable date */
1686
+ max: _angular_core.InputSignal<Temporal.PlainDate | null>;
1687
+ /**
1688
+ * Locale identifier for date formatting (e.g., 'de-AT', 'en-US').
1689
+ * Uses global locale service default if not specified.
1690
+ */
1691
+ locale: _angular_core.InputSignal<string | undefined>;
1692
+ /**
1693
+ * Date format configuration (pattern and first day of week).
1694
+ * If not provided, uses locale service default or falls back to European format.
1695
+ */
1696
+ dateFormatConfig: _angular_core.InputSignal<DateFormatConfig | undefined>;
1697
+ /** Whether to show a "Today" button */
1698
+ showTodayButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
1699
+ /** Whether to show week numbers */
1700
+ showWeekNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
1701
+ /** Whether to highlight weekend days (Saturday/Sunday) with a subtle background */
1702
+ highlightWeekends: _angular_core.InputSignalWithTransform<boolean, unknown>;
1703
+ /** Date markers for highlighting special dates (holidays, events, etc.) */
1704
+ markers: _angular_core.InputSignal<CoarDateMarker[]>;
1705
+ /** Maximum number of lines shown in the marker popover (including "+N" line). */
1706
+ protected readonly markerPopoverMaxLines = 5;
1707
+ /**
1708
+ * Visible markers before switching to "+N other events".
1709
+ * With a max of 5 lines, we show 4 markers + one summary line.
1710
+ */
1711
+ protected readonly markerPopoverVisibleMarkers = 4;
1712
+ protected getVisibleMarkers(markers: CoarDateMarker[]): CoarDateMarker[];
1713
+ protected getHiddenMarkerCount(markers: CoarDateMarker[]): number;
1714
+ /** Current selected date (two-way bindable with [(value)]) */
1715
+ value: _angular_core.ModelSignal<Temporal.PlainDate | null>;
1716
+ /** Emitted when the selected date changes */
1717
+ valueChange: _angular_core.OutputEmitterRef<Temporal.PlainDate | null>;
1718
+ /** Emitted when the picker opens */
1719
+ opened: _angular_core.OutputEmitterRef<void>;
1720
+ /** Emitted when the picker closes */
1721
+ closed: _angular_core.OutputEmitterRef<void>;
1722
+ /** Unique ID counter for component instances */
1723
+ private static nextId;
1724
+ /** Unique ID for this component instance */
1725
+ private readonly uid;
1726
+ /** Maskito instance for input masking */
1727
+ private maskitoInstance?;
1728
+ /** ID for the label element */
1729
+ protected labelId: _angular_core.Signal<string>;
1730
+ /** ID for the input element */
1731
+ protected inputId: _angular_core.Signal<string>;
1732
+ /** ID for the calendar dropdown */
1733
+ protected calendarId: _angular_core.Signal<string>;
1734
+ /** Whether the calendar dropdown is open */
1735
+ protected isOpen: _angular_core.WritableSignal<boolean>;
1736
+ /** Calendar dropdown position (chosen before opening) */
1737
+ protected calendarPosition: _angular_core.WritableSignal<"top" | "bottom">;
1738
+ /** Currently viewed month/year in the calendar */
1739
+ protected viewDate: _angular_core.WritableSignal<Temporal.PlainYearMonth>;
1740
+ /** Focused date in the calendar (for keyboard navigation) */
1741
+ protected focusedDate: _angular_core.WritableSignal<Temporal.PlainDate | null>;
1742
+ /** Display value for the input field */
1743
+ protected displayValue: _angular_core.WritableSignal<string>;
1744
+ /** Days of week header (localized based on locale and firstDayOfWeek) */
1745
+ protected daysOfWeek: _angular_core.Signal<string[]>;
1746
+ /** Reference to the input element */
1747
+ protected inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
1748
+ /** Reference to the trigger element */
1749
+ protected triggerRef: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
1750
+ /** Reference to the calendar template (rendered via @cocoar/ui-overlay) */
1751
+ protected calendarTemplateRef: _angular_core.Signal<TemplateRef<unknown> | undefined>;
1752
+ /**
1753
+ * Effective date format configuration.
1754
+ * Priority: input dateFormatConfig > locale service > fallback
1755
+ */
1756
+ protected effectiveDateFormat: _angular_core.Signal<DateFormatConfig>;
1757
+ /** Get the date format pattern */
1758
+ protected dateFormat: _angular_core.Signal<"dd.mm.yyyy" | "dd/mm/yyyy" | "mm/dd/yyyy" | "yyyy-mm-dd">;
1759
+ /** Get the first day of week */
1760
+ protected firstDayOfWeek: _angular_core.Signal<1 | 7>;
1761
+ /** Get the separator character for the current date format */
1762
+ protected separator: _angular_core.Signal<"." | "/" | "-">;
1763
+ /** Get placeholder text based on date format */
1764
+ protected inputPlaceholder: _angular_core.Signal<string>;
1765
+ /**
1766
+ * Effective locale for calendar month/year display.
1767
+ * Priority: input locale > locale service default > browser locale
1768
+ */
1769
+ protected effectiveLocale: _angular_core.Signal<string>;
1770
+ /** Whether the picker has an error state */
1771
+ protected hasError: _angular_core.Signal<boolean>;
1772
+ /** Whether the picker is disabled */
1773
+ protected isDisabled: _angular_core.Signal<boolean>;
1774
+ /** Calendar grid for current view month */
1775
+ protected calendarDays: _angular_core.Signal<CalendarDay[]>;
1776
+ /** Month name for calendar header */
1777
+ protected viewMonth: _angular_core.Signal<string>;
1778
+ /** Year for calendar header */
1779
+ protected viewYear: _angular_core.Signal<number>;
1780
+ /** Week numbers for each row (6 rows) */
1781
+ protected weekNumbers: _angular_core.Signal<number[]>;
1782
+ /** Today's date */
1783
+ protected today: Temporal.PlainDate;
1784
+ constructor();
1785
+ /** Open the calendar dropdown */
1786
+ openCalendar(): void;
1787
+ /** Close the calendar dropdown */
1788
+ closeCalendar(): void;
1789
+ /** Toggle the calendar dropdown */
1790
+ toggleCalendar(): void;
1791
+ /** Select a date */
1792
+ selectDate(date: Temporal.PlainDate): void;
1793
+ /** Select today's date */
1794
+ selectToday(): void;
1795
+ /** Clear the selected date */
1796
+ clearDate(event: Event): void;
1797
+ /** Navigate to previous month */
1798
+ previousMonth(): void;
1799
+ /** Navigate to next month */
1800
+ nextMonth(): void;
1801
+ /** Navigate to previous year */
1802
+ previousYear(): void;
1803
+ /** Navigate to next year */
1804
+ nextYear(): void;
1805
+ /** Go to today's month */
1806
+ goToToday(): void;
1807
+ writeValue(value: Temporal.PlainDate | string | null): void;
1808
+ protected onTriggerClick(): void;
1809
+ protected onDocumentKeydown(event: KeyboardEvent): void;
1810
+ protected onTriggerKeydown(event: KeyboardEvent): void;
1811
+ private resolvePlacement;
1812
+ private estimatePanelHeight;
1813
+ /**
1814
+ * Handle input changes from typed or pasted date values.
1815
+ *
1816
+ * Parses the masked input and updates the value if valid.
1817
+ * Invalid or incomplete dates do not update the model.
1818
+ */
1819
+ protected onInputChange(event: Event): void;
1820
+ /**
1821
+ * Handle blur on the input field.
1822
+ *
1823
+ * If the input contains an invalid date, reset to the current value.
1824
+ */
1825
+ protected onInputBlur(): void;
1826
+ /**
1827
+ * Initialize Maskito for date input masking.
1828
+ *
1829
+ * Uses maskitoDateOptionsGenerator with the configured date format
1830
+ * to provide automatic formatting and validation while typing.
1831
+ */
1832
+ private initializeMaskito;
1833
+ /**
1834
+ * Convert Temporal.PlainDate to native Date for Maskito compatibility.
1835
+ */
1836
+ private temporalToDate;
1837
+ /**
1838
+ * Calculate ISO week number for a date.
1839
+ * ISO weeks start on Monday and week 1 contains the first Thursday of the year.
1840
+ */
1841
+ private calculateISOWeek;
1842
+ /**
1843
+ * Format a Temporal.PlainDate for display according to the configured format.
1844
+ */
1845
+ private formatDateForDisplay;
1846
+ /**
1847
+ * Parse a date string in the configured format to Temporal.PlainDate.
1848
+ * Returns null if the string is incomplete or invalid.
1849
+ */
1850
+ private parseDateFromInput;
1851
+ private createCalendarDay;
1852
+ /**
1853
+ * Find all markers that apply to the given date.
1854
+ * Checks if date falls within any marker's range.
1855
+ */
1856
+ private getMarkersForDate;
1857
+ private isDateDisabled;
1858
+ private moveFocus;
1859
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoarDatePickerComponent, never>;
1860
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<CoarDatePickerComponent, "coar-date-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "dateFormatConfig": { "alias": "dateFormatConfig"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showWeekNumbers": { "alias": "showWeekNumbers"; "required": false; "isSignal": true; }; "highlightWeekends": { "alias": "highlightWeekends"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
1861
+ }
1862
+ /** Internal type for calendar day rendering */
1863
+ interface CalendarDay {
1864
+ date: Temporal.PlainDate;
1865
+ day: number;
1866
+ isOutsideMonth: boolean;
1867
+ isToday: boolean;
1868
+ isSelected: boolean;
1869
+ isFocused: boolean;
1870
+ isDisabled: boolean;
1871
+ isWeekend: boolean;
1872
+ /** Markers applied to this date (if any) */
1873
+ markers: CoarDateMarker[];
1874
+ /** Optional CSS class from the first marker for styling */
1875
+ markerCssClass: string | null;
1876
+ }
1877
+
1878
+ export { COAR_BUILTIN_ICON_SOURCE_KEY, COAR_DEFAULT_ICON_SOURCE_KEY, COAR_ICON_SOURCE_ENTRY, COAR_LOCALE_SERVICE, CoarBadgeComponent, CoarButtonComponent, CoarCardComponent, CoarCheckboxComponent, CoarCodeBlockComponent, CoarControlValueAccessor, CoarDatePickerComponent, CoarDividerComponent, CoarIconComponent, CoarIconService, CoarLabelComponent, CoarLocaleService, CoarMultiSelectComponent, CoarNoteComponent, CoarNumberInputComponent, CoarPasswordInputComponent, CoarPopoverComponent, CoarPopoverGroupService, CoarScrollbarDirective, CoarSingleSelectComponent, CoarTabComponent, CoarTabGroupComponent, CoarTableComponent, CoarTagComponent, CoarTagSelectComponent, CoarTextInputComponent, CoarTooltipDirective, coarProvideValueAccessor, provideCoarDefaultIconSource, provideCoarHttpIconSource, provideCoarIconBuiltInOverrides, provideCoarIconMapSource, provideCoarIconSource };
1879
+ export type { BadgeSize, BadgeVariant, ButtonSize, ButtonVariant, CardColor, CardPadding, CoarCheckboxSize, CoarCheckboxState, CoarDateMarker, CoarDatePickerSize, CoarIconRegisteredSource, CoarIconSize, CoarIconSource, CoarIconSourceEntry, CoarLabelSize, CoarNumberInputSize, CoarNumberInputStepperButtons, CoarPasswordInputSize, CoarScrollbarAutoHide, CoarScrollbarOverflow, CoarScrollbarTheme, CoarSelectOption, CoarSelectSize, CoarTableVariant, CoarTextInputSize, DateFormatConfig, DividerAlign, DividerVariant, ICoarLocaleService, LocaleConfig, NoteColor, NotePadding, NumberFormatConfig, ProvideCoarHttpIconSourceOptions, ProvideCoarIconMapSourceOptions, ProvideCoarIconSourceOptions, TabContent, TabLoadingStrategy, TagColor, TagSize };