@guildofgleks/ui 21.2.4 → 21.3.0
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.
- package/README.md +320 -204
- package/fesm2022/guildofgleks-ui.mjs +6829 -1676
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/presets/one-dark.css +48 -0
- package/src/styles/presets/one-light.css +47 -0
- package/src/styles/presets/slate.css +55 -0
- package/src/styles/theme.css +1643 -978
- package/src/styles/utilities.css +170 -69
- package/types/guildofgleks-ui.d.ts +2287 -324
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { TemplateRef,
|
|
2
|
+
import { TemplateRef, DoCheck, Signal, ModelSignal, ElementRef, InjectionToken, Type, Injector, OnDestroy, Provider } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
import * as _angular_platform_browser from '@angular/platform-browser';
|
|
5
5
|
import * as _guildofgleks_ui from '@guildofgleks/ui';
|
|
6
6
|
|
|
7
7
|
type GogSize = 'xsm' | 'sm' | 'md' | 'lg' | 'slg';
|
|
8
8
|
type GogVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
9
|
+
/**
|
|
10
|
+
* Which way a component lays its children out. Shared rather than re-declared per component:
|
|
11
|
+
* `gog-radio-group`, `gog-slider`, `gog-divider`, `gog-tabs` and `gog-button-toggle-group` all
|
|
12
|
+
* mean the same thing by it, and `roving-focus.ts` picks its arrow pair from this.
|
|
13
|
+
*/
|
|
14
|
+
type GogOrientation = 'horizontal' | 'vertical';
|
|
9
15
|
type GogSpinnerVariant = 'runic' | 'ring' | 'custom';
|
|
10
16
|
type GogTagVariant = 'success' | 'danger' | 'warning' | 'info';
|
|
11
17
|
type GogTagShape = 'rounded' | 'pill';
|
|
12
18
|
type GogSkeletonShape = 'text' | 'circle' | 'rect';
|
|
13
19
|
type GogSkeletonAnimation = 'pulse' | 'wave' | 'none';
|
|
14
20
|
type GogPaginatorRangeMode = 'window' | 'ellipsis';
|
|
21
|
+
type GogSliderOrientation = GogOrientation;
|
|
15
22
|
type GogScrollAxis = 'vertical' | 'horizontal' | 'both';
|
|
16
23
|
type GogScrollSize = 'normal' | 'thin';
|
|
17
24
|
/**
|
|
@@ -26,10 +33,63 @@ type GogScrollSize = 'normal' | 'thin';
|
|
|
26
33
|
* affordances (rubber-banding, pull-to-refresh) for this instance.
|
|
27
34
|
*/
|
|
28
35
|
type GogScrollOverscrollBehavior = 'auto' | 'contain' | 'none';
|
|
36
|
+
/**
|
|
37
|
+
* Which side of the trigger the tooltip bubble renders on. `'auto'` (the default) picks
|
|
38
|
+
* whichever of the four sides has room for the bubble, preferring top, then bottom, then
|
|
39
|
+
* right, then left — see `resolveTooltipPlacement` in `tooltip-position.ts`. An explicit
|
|
40
|
+
* side still flips to its opposite if the requested side has no room but the opposite does.
|
|
41
|
+
*/
|
|
42
|
+
type GogTooltipPosition = 'auto' | 'top' | 'bottom' | 'left' | 'right';
|
|
43
|
+
/**
|
|
44
|
+
* Where a field's label sits once it "floats" out of its resting position (overlapping the
|
|
45
|
+
* field like a placeholder) on focus or once the field has content. `'none'` (the default)
|
|
46
|
+
* keeps today's static label-above-the-field layout — nothing floats.
|
|
47
|
+
* - `'in'` — floats up but stays fully inside the field's border.
|
|
48
|
+
* - `'on'` — floats up until vertically centered on the top border line.
|
|
49
|
+
* - `'over'` — floats all the way above the field, outside the border.
|
|
50
|
+
*/
|
|
51
|
+
type GogFloatLabelVariant = 'none' | 'in' | 'on' | 'over';
|
|
52
|
+
/**
|
|
53
|
+
* Which end of a dropdown panel the search box sticks to. Matches `gog-multiselect`'s
|
|
54
|
+
* `controlsPosition` vocabulary — the same idea applied to its select-all row.
|
|
55
|
+
*/
|
|
56
|
+
type GogDropdownFilterPosition = 'top' | 'bottom';
|
|
57
|
+
/** How `gog-divider` paints its rule. */
|
|
58
|
+
type GogDividerVariant = 'solid' | 'dashed' | 'dotted';
|
|
59
|
+
/**
|
|
60
|
+
* Which corner of its host a `gogBadge` sits on. Named by block/inline edge rather than
|
|
61
|
+
* left/right so it follows the writing direction in an RTL layout.
|
|
62
|
+
*/
|
|
63
|
+
type GogBadgePosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
|
|
64
|
+
/**
|
|
65
|
+
* - `'determinate'` — the bar reflects `value`.
|
|
66
|
+
* - `'indeterminate'` — work of unknown length; the bar animates and reports no value to
|
|
67
|
+
* assistive tech, which is what marks it indeterminate.
|
|
68
|
+
* - `'buffer'` — `value` plus a second, lighter `buffer` level ahead of it (streaming/preload).
|
|
69
|
+
*/
|
|
70
|
+
type GogProgressbarMode = 'determinate' | 'indeterminate' | 'buffer';
|
|
71
|
+
/**
|
|
72
|
+
* `gog-progressbar`'s colour. Wider than `GogTagVariant` by one: progress is usually just
|
|
73
|
+
* "the app is working", which is the accent colour rather than any of the four status hues —
|
|
74
|
+
* so `'accent'` is the default and the status names are the exception.
|
|
75
|
+
*/
|
|
76
|
+
type GogProgressbarVariant = 'accent' | 'success' | 'danger' | 'warning' | 'info';
|
|
77
|
+
/**
|
|
78
|
+
* - `'joined'` — one segmented control, buttons sharing borders (Material's look).
|
|
79
|
+
* - `'separated'` — discrete buttons with a gap between them.
|
|
80
|
+
*/
|
|
81
|
+
type GogButtonToggleAppearance = 'joined' | 'separated';
|
|
82
|
+
/** How the tab headers distribute along the tablist. `'stretch'` makes them share the width. */
|
|
83
|
+
type GogTabsAlign = 'start' | 'center' | 'end' | 'stretch';
|
|
84
|
+
/** Whether `gog-datepicker` picks one day or a start/end pair. */
|
|
85
|
+
type GogDateSelectionMode = 'single' | 'range';
|
|
86
|
+
/** Clock convention for `gog-datepicker`'s time section. */
|
|
87
|
+
type GogHourFormat = '12' | '24';
|
|
29
88
|
|
|
30
89
|
declare class ButtonComponent {
|
|
31
90
|
variant: _angular_core.InputSignal<GogVariant>;
|
|
32
|
-
size
|
|
91
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
92
|
+
size: _angular_core.InputSignal<GogSize | undefined>;
|
|
33
93
|
disabled: _angular_core.InputSignal<boolean>;
|
|
34
94
|
fullWidth: _angular_core.InputSignal<boolean>;
|
|
35
95
|
type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
@@ -56,9 +116,16 @@ declare class ButtonComponent {
|
|
|
56
116
|
/** Logically blocked from activating (disabled OR loading), used to guard click handling. */
|
|
57
117
|
protected isDisabled: _angular_core.Signal<boolean>;
|
|
58
118
|
private static readonly SPINNER_SIZE_BY_BUTTON_SIZE;
|
|
59
|
-
protected spinnerSize: _angular_core.Signal<GogSize>;
|
|
60
119
|
private readonly globalConfig;
|
|
120
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
121
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
122
|
+
protected spinnerSize: _angular_core.Signal<GogSize>;
|
|
61
123
|
protected readonly resolvedDebounce: _angular_core.Signal<number>;
|
|
124
|
+
/**
|
|
125
|
+
* The single size modifier, replacing one `[class.gog-btn--<size>]` binding per size.
|
|
126
|
+
* Always emitted — `gog-btn` has a rule for every size, `md` included.
|
|
127
|
+
*/
|
|
128
|
+
protected readonly sizeClass: _angular_core.Signal<string>;
|
|
62
129
|
private readonly destroyRef;
|
|
63
130
|
private readonly click$;
|
|
64
131
|
constructor();
|
|
@@ -106,6 +173,12 @@ declare class GogAccordionChevronDirective {
|
|
|
106
173
|
declare class AccordionComponent {
|
|
107
174
|
private static nextUid;
|
|
108
175
|
readonly items: _angular_core.InputSignal<GogAccordionItem[]>;
|
|
176
|
+
/**
|
|
177
|
+
* The single size modifier, replacing one `[class.gog-accordion--<size>]` binding per size.
|
|
178
|
+
* Empty for `'lg'`: that is this component's default size, and its tokens are what every
|
|
179
|
+
* `--gog-accordion-*` chain bottoms out at, so it has no modifier rule of its own.
|
|
180
|
+
*/
|
|
181
|
+
protected readonly sizeClass: _angular_core.Signal<string>;
|
|
109
182
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
110
183
|
readonly expandFirst: _angular_core.InputSignal<boolean>;
|
|
111
184
|
readonly multi: _angular_core.InputSignal<boolean>;
|
|
@@ -125,7 +198,7 @@ declare class AccordionComponent {
|
|
|
125
198
|
* Left unset by default since not every accordion instance represents document structure
|
|
126
199
|
* (e.g. one nested inside a card).
|
|
127
200
|
*/
|
|
128
|
-
readonly headingLevel: _angular_core.InputSignal<
|
|
201
|
+
readonly headingLevel: _angular_core.InputSignal<2 | 3 | 4 | 5 | 6 | undefined>;
|
|
129
202
|
/**
|
|
130
203
|
* Two-way bindable set of currently open item ids. Exposed as a model so consumers
|
|
131
204
|
* can drive the accordion externally (e.g. `[(openIds)]="mySet"`) instead of only
|
|
@@ -173,11 +246,21 @@ declare class CollapsibleComponent {
|
|
|
173
246
|
/** Two-way bindable open state: `[(open)]="signal"`. */
|
|
174
247
|
readonly open: _angular_core.ModelSignal<boolean>;
|
|
175
248
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
249
|
+
/**
|
|
250
|
+
* Closes the panel once focus leaves both the trigger and the content — e.g. Tabbing past
|
|
251
|
+
* the last focusable element inside, or a click landing somewhere else on the page. Off by
|
|
252
|
+
* default: plenty of consumers (an FAQ list, a settings section someone reads top to bottom)
|
|
253
|
+
* want the panel to stay open regardless of where focus goes next, so this is opt-in rather
|
|
254
|
+
* than baked in.
|
|
255
|
+
*/
|
|
256
|
+
readonly collapseOnFocusOut: _angular_core.InputSignal<boolean>;
|
|
257
|
+
private readonly elementRef;
|
|
176
258
|
private readonly uid;
|
|
177
259
|
readonly contentId: _angular_core.Signal<string>;
|
|
178
260
|
toggle(): void;
|
|
261
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
179
262
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
|
|
180
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleComponent, "gog-collapsible", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
|
|
263
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleComponent, "gog-collapsible", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "collapseOnFocusOut": { "alias": "collapseOnFocusOut"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
|
|
181
264
|
}
|
|
182
265
|
|
|
183
266
|
/**
|
|
@@ -202,22 +285,1513 @@ declare class GogCollapsibleContentDirective {
|
|
|
202
285
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogCollapsibleContentDirective, "[gogCollapsibleContent]", never, {}, {}, never, never, true, never>;
|
|
203
286
|
}
|
|
204
287
|
|
|
205
|
-
|
|
288
|
+
type GogDropdownDirection = 'auto' | 'up' | 'down';
|
|
289
|
+
interface GogDropdownPlacement {
|
|
290
|
+
direction: 'up' | 'down';
|
|
291
|
+
top: number;
|
|
292
|
+
left: number;
|
|
293
|
+
width: number;
|
|
294
|
+
maxHeight: number;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/**
|
|
298
|
+
* `'manual'` (default): the field shows `errorMessage` for as long as it is non-empty — the
|
|
299
|
+
* consumer decides when to clear it, e.g.
|
|
300
|
+
* `errorMessage="control.invalid && control.touched ? 'Required' : ''"`.
|
|
301
|
+
*
|
|
302
|
+
* `'auto'`: shown once the attached form control has been touched and is invalid — the
|
|
303
|
+
* consumer only supplies the message text, not the timing. Requires a
|
|
304
|
+
* `[formControl]` / `formControlName` on the element; without one this falls back to
|
|
305
|
+
* `'manual'`, since there is no control state to key off.
|
|
306
|
+
*/
|
|
307
|
+
type GogErrorDisplay = 'auto' | 'manual';
|
|
308
|
+
|
|
309
|
+
/**
|
|
310
|
+
* How a collection-driven component reads one field off a consumer's own object.
|
|
311
|
+
*
|
|
312
|
+
* A `string` is a property name, or a dot-path into a nested one (`'profile.city'`). A function
|
|
313
|
+
* is anything else. This is what lets `gog-select` / `gog-multiselect` take a consumer's real
|
|
314
|
+
* DTO instead of forcing everything through a `{ id, name }` shape first.
|
|
315
|
+
*/
|
|
316
|
+
type GogOptionAccessor<TOption, TResult> = string | ((option: TOption) => TResult);
|
|
317
|
+
/** Resolves `field` against `source`, following dot-paths (e.g. `"address.city"`). */
|
|
318
|
+
declare function getByPath(source: unknown, field: string): unknown;
|
|
319
|
+
/** Applies an accessor — a property path or a function — to one option. */
|
|
320
|
+
declare function readOption<TOption, TResult>(option: TOption, accessor: GogOptionAccessor<TOption, TResult>): TResult;
|
|
321
|
+
/**
|
|
322
|
+
* Whether two resolved option values refer to the same option.
|
|
323
|
+
*
|
|
324
|
+
* Primitives are compared as strings, so a `formControl` holding `'1'` still matches an option
|
|
325
|
+
* whose value is the number `1` — the library behaved this way before option values could be
|
|
326
|
+
* anything, and forms routinely stringify. Objects are compared by identity instead: coercing
|
|
327
|
+
* them would make every plain object equal to every other (`"[object Object]"`).
|
|
328
|
+
*/
|
|
329
|
+
declare function isSameOptionValue(a: unknown, b: unknown): boolean;
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* Custom markup for the trigger's chevron, on `gog-select` and `gog-multiselect`:
|
|
333
|
+
*
|
|
334
|
+
* ```html
|
|
335
|
+
* <gog-select [options]="opts">
|
|
336
|
+
* <ng-template gogDropdownChevron><gog-icon name="sort" /></ng-template>
|
|
337
|
+
* </gog-select>
|
|
338
|
+
* ```
|
|
339
|
+
*/
|
|
340
|
+
declare class GogDropdownChevronDirective {
|
|
341
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
342
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogDropdownChevronDirective, never>;
|
|
343
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogDropdownChevronDirective, "[gogDropdownChevron]", never, {}, {}, never, never, true, never>;
|
|
344
|
+
}
|
|
345
|
+
/** Context handed to a `gogDropdownOption` template. */
|
|
346
|
+
interface GogDropdownOptionContext<TOption> {
|
|
347
|
+
/** The consumer's own option object, untouched. */
|
|
348
|
+
$implicit: TOption;
|
|
349
|
+
selected: boolean;
|
|
350
|
+
disabled: boolean;
|
|
351
|
+
/** The resolved label, so a custom row can decorate it rather than re-derive it. */
|
|
352
|
+
label: string;
|
|
353
|
+
}
|
|
354
|
+
/**
|
|
355
|
+
* Custom markup for one option row, on `gog-select` and `gog-multiselect`:
|
|
356
|
+
*
|
|
357
|
+
* ```html
|
|
358
|
+
* <gog-select [options]="users" optionLabel="fullName" optionValue="id" [(value)]="userId">
|
|
359
|
+
* <ng-template gogDropdownOption let-user let-selected="selected">
|
|
360
|
+
* <img [src]="user.avatar" alt="" /> {{ user.fullName }}
|
|
361
|
+
* </ng-template>
|
|
362
|
+
* </gog-select>
|
|
363
|
+
* ```
|
|
364
|
+
*/
|
|
365
|
+
declare class GogDropdownOptionDirective<TOption = unknown> {
|
|
366
|
+
readonly templateRef: TemplateRef<GogDropdownOptionContext<TOption>>;
|
|
367
|
+
static ngTemplateContextGuard<TOption>(_dir: GogDropdownOptionDirective<TOption>, ctx: unknown): ctx is GogDropdownOptionContext<TOption>;
|
|
368
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogDropdownOptionDirective<any>, never>;
|
|
369
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogDropdownOptionDirective<any>, "[gogDropdownOption]", never, {}, {}, never, never, true, never>;
|
|
370
|
+
}
|
|
371
|
+
/**
|
|
372
|
+
* The shape the listbox controls assume when their accessor inputs are left at their defaults.
|
|
373
|
+
*
|
|
374
|
+
* It is no longer required: `optionLabel` / `optionValue` / `optionDisabled` accept any property
|
|
375
|
+
* path or function, so a consumer can pass their own DTO straight through. This interface just
|
|
376
|
+
* describes what the *default* accessors (`'name'` / `'id'` / `'disabled'`) expect to find.
|
|
377
|
+
*/
|
|
378
|
+
interface GogDropdownOption {
|
|
379
|
+
id: string | number;
|
|
380
|
+
name: string;
|
|
381
|
+
disabled?: boolean;
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* Shared behaviour for the listbox-style controls: open/close, placement, the
|
|
385
|
+
* append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
|
|
386
|
+
* plumbing. Subclasses supply only what actually differs — the value type, the panel
|
|
387
|
+
* markup, and the BEM class names used to find the trigger and the options.
|
|
388
|
+
*
|
|
389
|
+
* Exported because it appears in the public type signatures of the components that
|
|
390
|
+
* extend it; it is not meant to be used or subclassed by consumers.
|
|
391
|
+
*/
|
|
392
|
+
declare abstract class GogDropdownBase<TValue, TOption = GogDropdownOption> implements ControlValueAccessor, DoCheck {
|
|
393
|
+
private static nextUid;
|
|
394
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
395
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
396
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
397
|
+
readonly options: _angular_core.InputSignal<TOption[]>;
|
|
398
|
+
/**
|
|
399
|
+
* How to read an option's visible text — a property path (`'name'`, `'profile.title'`) or a
|
|
400
|
+
* function. Defaults to `'name'`, matching `GogDropdownOption`.
|
|
401
|
+
*/
|
|
402
|
+
readonly optionLabel: _angular_core.InputSignal<GogOptionAccessor<TOption, string>>;
|
|
403
|
+
/**
|
|
404
|
+
* How to read the value this control emits for an option. A property path or a function, or
|
|
405
|
+
* `null` to emit **the option object itself** — which is what lets a consumer keep their own
|
|
406
|
+
* DTO end to end instead of mapping ids back to objects on every change.
|
|
407
|
+
*
|
|
408
|
+
* Defaults to `'id'`, matching `GogDropdownOption`, so existing code is unaffected.
|
|
409
|
+
*/
|
|
410
|
+
readonly optionValue: _angular_core.InputSignal<GogOptionAccessor<TOption, unknown> | null>;
|
|
411
|
+
/** How to read whether an option is disabled. Defaults to `'disabled'`. */
|
|
412
|
+
readonly optionDisabled: _angular_core.InputSignal<GogOptionAccessor<TOption, boolean>>;
|
|
413
|
+
/**
|
|
414
|
+
* Whether to offer a clear button once something is selected. Unset, falls back to
|
|
415
|
+
* `GOG_CONFIG.control.clearable`, then to the control's own default.
|
|
416
|
+
*/
|
|
417
|
+
readonly clearable: _angular_core.InputSignal<boolean | undefined>;
|
|
418
|
+
/** Accessible name for the clear button. */
|
|
419
|
+
readonly clearAriaLabel: _angular_core.InputSignal<string>;
|
|
420
|
+
/**
|
|
421
|
+
* Smallest width the trigger may shrink to, as any CSS length. Only meaningful with
|
|
422
|
+
* `[fullWidth]="false"`, where the trigger otherwise sizes to whatever is currently selected
|
|
423
|
+
* and can collapse to almost nothing on a short option. Left unset it falls back to the
|
|
424
|
+
* `--gog-{select,multiselect}-min-width` token.
|
|
425
|
+
*/
|
|
426
|
+
readonly minWidth: _angular_core.InputSignal<string | null>;
|
|
427
|
+
/**
|
|
428
|
+
* Whether the panel shows a search box that narrows the option list. Unset, falls back to
|
|
429
|
+
* `GOG_CONFIG.dropdown.filter`, then to `false`.
|
|
430
|
+
*/
|
|
431
|
+
readonly filter: _angular_core.InputSignal<boolean | undefined>;
|
|
432
|
+
readonly filterPlaceholder: _angular_core.InputSignal<string>;
|
|
433
|
+
/**
|
|
434
|
+
* Which end of the panel the search box sticks to. Named to match `gog-multiselect`'s
|
|
435
|
+
* `controlsPosition`, which is the same idea for its select-all row. Unset, falls back to
|
|
436
|
+
* `GOG_CONFIG.dropdown.filterPosition`, then to `'top'`.
|
|
437
|
+
*/
|
|
438
|
+
readonly filterPosition: _angular_core.InputSignal<GogDropdownFilterPosition | undefined>;
|
|
439
|
+
/** Shown in place of the list when the query matches nothing. */
|
|
440
|
+
readonly filterEmptyMessage: _angular_core.InputSignal<string>;
|
|
441
|
+
/**
|
|
442
|
+
* How an option is matched against the query. Left null, the resolved `optionLabel` is
|
|
443
|
+
* matched case-insensitively as a substring — pass a function to search other fields, match
|
|
444
|
+
* on a prefix, or plug in your own fuzzy matcher.
|
|
445
|
+
*/
|
|
446
|
+
readonly filterMatch: _angular_core.InputSignal<((option: TOption, query: string) => boolean) | null>;
|
|
447
|
+
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
448
|
+
/**
|
|
449
|
+
* See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
|
|
450
|
+
* `'manual'` — matching every other control in the library.
|
|
451
|
+
*/
|
|
452
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
453
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
454
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
455
|
+
/** Unset, falls back to `GOG_CONFIG.dropdown.direction`, then to `'auto'`. */
|
|
456
|
+
readonly dropdownDirection: _angular_core.InputSignal<GogDropdownDirection | undefined>;
|
|
457
|
+
/**
|
|
458
|
+
* Explicit stacking order for the panel. Left unset the panel falls back to the
|
|
459
|
+
* stylesheet's `--gog-dropdown-z`, so the default lives in CSS where a consumer can
|
|
460
|
+
* retheme it, rather than being baked into the component.
|
|
461
|
+
*/
|
|
462
|
+
readonly dropdownZIndex: _angular_core.InputSignal<number | null>;
|
|
463
|
+
/**
|
|
464
|
+
* Fixed panel width as any CSS length (`'320px'`, `'40ch'`, `'100%'`, …), applied only
|
|
465
|
+
* when `appendToBody` is set. Left unset the panel matches the trigger's width, same as
|
|
466
|
+
* the inline panel already does via CSS.
|
|
467
|
+
*/
|
|
468
|
+
readonly dropdownWidth: _angular_core.InputSignal<string | null>;
|
|
469
|
+
/**
|
|
470
|
+
* Fixed panel max-height as any CSS length, applied only when `appendToBody` is set.
|
|
471
|
+
* `px`, `%` and `vh` also feed the up/down placement math (see `resolveCssLengthPx`); any
|
|
472
|
+
* other unit still renders correctly but is invisible to that heuristic, so the panel may
|
|
473
|
+
* pick the "wrong" side close to a viewport edge. Left unset the panel keeps the existing
|
|
474
|
+
* viewport-derived, auto-flipping height.
|
|
475
|
+
*/
|
|
476
|
+
readonly dropdownMaxHeight: _angular_core.InputSignal<string | null>;
|
|
477
|
+
/** Unset, falls back to `GOG_CONFIG.dropdown.appendToBody`, then to `false`. */
|
|
478
|
+
readonly appendToBody: _angular_core.InputSignal<boolean | undefined>;
|
|
479
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
480
|
+
/**
|
|
481
|
+
* @deprecated since 21.3.0 (2026-08-07) — project an `<ng-template gogDropdownChevron>` into
|
|
482
|
+
* the control instead. Removed in 21.5.0.
|
|
483
|
+
*/
|
|
484
|
+
readonly chevronTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
485
|
+
/** Projected `gogDropdownChevron` template; wins over the deprecated `chevronTemplate`. */
|
|
486
|
+
protected readonly chevronSlot: Signal<GogDropdownChevronDirective | undefined>;
|
|
487
|
+
/**
|
|
488
|
+
* Full width of the container by default, matching every other field-style control.
|
|
489
|
+
* Set to `false` to shrink the trigger to fit its selected label instead.
|
|
490
|
+
*/
|
|
491
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
492
|
+
/** Unset, falls back to `GOG_CONFIG.floatLabel.variant`, then to `'none'` (off). */
|
|
493
|
+
readonly floatLabel: _angular_core.InputSignal<GogFloatLabelVariant | undefined>;
|
|
494
|
+
/** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
|
|
495
|
+
readonly floatLabelShowPlaceholder: _angular_core.InputSignal<boolean | undefined>;
|
|
496
|
+
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
497
|
+
/** Projected `gogDropdownOption` template, if the consumer supplied one. */
|
|
498
|
+
protected readonly optionSlot: Signal<GogDropdownOptionDirective<any> | undefined>;
|
|
499
|
+
/** An option's visible text, via `optionLabel`. */
|
|
500
|
+
protected labelOf(option: TOption): string;
|
|
501
|
+
/**
|
|
502
|
+
* The value this control emits for an option, via `optionValue` — or the option object
|
|
503
|
+
* itself when `optionValue` is `null`.
|
|
504
|
+
*/
|
|
505
|
+
protected valueOf(option: TOption): unknown;
|
|
506
|
+
/** Whether an option is disabled, via `optionDisabled`. Anything falsy counts as enabled. */
|
|
507
|
+
protected isOptionDisabled(option: TOption): boolean;
|
|
508
|
+
/** Context for a projected `gogDropdownOption` row. */
|
|
509
|
+
protected optionContext(option: TOption, selected: boolean): GogDropdownOptionContext<TOption>;
|
|
510
|
+
/** Shared by both controls to match a resolved option value against the current value. */
|
|
511
|
+
protected sameValue(a: unknown, b: unknown): boolean;
|
|
512
|
+
/** The `<ng-template>` holding the panel markup, rendered inline or into `<body>`. */
|
|
513
|
+
protected abstract readonly panelTemplate: Signal<TemplateRef<unknown> | undefined>;
|
|
514
|
+
/** Declared by the subclass so each control keeps its own value type. */
|
|
515
|
+
protected abstract readonly value: ModelSignal<TValue>;
|
|
516
|
+
/** Value applied when a form writes `null` / the control is reset. */
|
|
517
|
+
protected abstract readonly emptyValue: TValue;
|
|
518
|
+
/** BEM class of one option button, used to collect keyboard-navigable elements. */
|
|
519
|
+
protected abstract readonly optionClass: string;
|
|
520
|
+
/** BEM class of the focusable trigger. */
|
|
521
|
+
protected abstract readonly triggerClass: string;
|
|
522
|
+
/**
|
|
523
|
+
* BEM block that carries the size modifier — `.gog-select` vs `.gog-ms-wrapper`. Separate
|
|
524
|
+
* from `triggerClass` because in `gog-multiselect` the two are different elements.
|
|
525
|
+
*/
|
|
526
|
+
protected abstract readonly sizeBlockClass: string;
|
|
527
|
+
/** BEM block of the panel, which repeats the size modifier when appended to `<body>`. */
|
|
528
|
+
protected abstract readonly panelBlockClass: string;
|
|
529
|
+
/** Whether the control currently has a selection — drives the float-label "filled" state. */
|
|
530
|
+
protected abstract readonly hasFloatValue: Signal<boolean>;
|
|
531
|
+
/**
|
|
532
|
+
* Spacing tokens feeding the height estimate. Overridable so each control keeps the
|
|
533
|
+
* `--gog-<block>-*` names it already exposes to consumers for theming.
|
|
534
|
+
*/
|
|
535
|
+
protected readonly optionGapToken: string;
|
|
536
|
+
protected readonly optionsPaddingToken: string;
|
|
537
|
+
/** Keep in sync with the real `max-height` on the subclass's `__dropdown` block. */
|
|
538
|
+
protected readonly panelMaxHeightToken: string;
|
|
539
|
+
/** Estimated row height fed into the placement math; not a real layout property. */
|
|
540
|
+
protected readonly optionHeightToken: string;
|
|
541
|
+
/** Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids. */
|
|
542
|
+
protected readonly uid: number;
|
|
543
|
+
protected readonly elRef: ElementRef<any>;
|
|
544
|
+
protected readonly isBrowser: boolean;
|
|
545
|
+
private readonly document;
|
|
546
|
+
private readonly appRef;
|
|
547
|
+
private readonly destroyRef;
|
|
548
|
+
private readonly ngControl;
|
|
549
|
+
private readonly globalConfig;
|
|
550
|
+
private readonly overlay;
|
|
551
|
+
/** Set from `(focus)`/`(blur)` on the trigger — see `onFocusIn`/`onFocusOut`. */
|
|
552
|
+
protected readonly isFocused: _angular_core.WritableSignal<boolean>;
|
|
553
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
554
|
+
protected readonly resolvedSize: Signal<GogSize>;
|
|
555
|
+
protected readonly resolvedErrorDisplay: Signal<GogErrorDisplay>;
|
|
556
|
+
protected readonly resolvedAppendToBody: Signal<boolean>;
|
|
557
|
+
protected readonly resolvedDropdownDirection: Signal<GogDropdownDirection>;
|
|
558
|
+
/**
|
|
559
|
+
* The single size modifier for the wrapper, replacing one `[class.<block>--<size>]` binding
|
|
560
|
+
* per size. Empty for `'md'`: that is the default size and has no modifier rule of its own —
|
|
561
|
+
* every `--gog-<block>-size-*` chain bottoms out at the `md` tokens.
|
|
562
|
+
*/
|
|
563
|
+
protected readonly sizeClass: Signal<string>;
|
|
564
|
+
/**
|
|
565
|
+
* Same modifier repeated on the panel, but only when it is appended to `<body>` — outside
|
|
566
|
+
* the component's subtree the panel no longer inherits the wrapper's size tokens, so it has
|
|
567
|
+
* to carry them itself. See the `--portal` blocks in the component stylesheets.
|
|
568
|
+
*/
|
|
569
|
+
protected readonly panelSizeClass: Signal<string>;
|
|
570
|
+
private readonly cvaDisabled;
|
|
571
|
+
private readonly errorState;
|
|
572
|
+
protected readonly isDisabled: Signal<boolean>;
|
|
573
|
+
protected readonly dropdownDirectionState: _angular_core.WritableSignal<"up" | "down">;
|
|
574
|
+
protected readonly panelPlacement: _angular_core.WritableSignal<GogDropdownPlacement | null>;
|
|
575
|
+
/**
|
|
576
|
+
* Stacking order to write onto the panel, or null to leave it to the stylesheet.
|
|
577
|
+
*
|
|
578
|
+
* Only needed when appending to `<body>`: an inline panel inherits `--gog-dropdown-z` from
|
|
579
|
+
* its surroundings — which is how a dropdown inside a dialog ends up above the dialog —
|
|
580
|
+
* but an appended one sits outside that subtree and inherits nothing, so the value has
|
|
581
|
+
* to be resolved from the trigger and written out explicitly.
|
|
582
|
+
*/
|
|
583
|
+
protected readonly panelZIndex: _angular_core.WritableSignal<number | null>;
|
|
584
|
+
/**
|
|
585
|
+
* Explicit panel width, or null to let it size to its own content.
|
|
586
|
+
*
|
|
587
|
+
* The panel used to be pinned to the trigger's width, which broke a trigger narrower than its
|
|
588
|
+
* options: with `[fullWidth]="false"` the trigger shrinks to the *current* selection, so
|
|
589
|
+
* picking a short option cut the longer ones off in the list. It now sizes to its content with
|
|
590
|
+
* the trigger width as a floor — see `resolvedPanelMinWidth`.
|
|
591
|
+
*/
|
|
592
|
+
protected readonly resolvedPanelWidth: Signal<string | null>;
|
|
593
|
+
/** The trigger's width, used as the panel's minimum so it never renders narrower than it. */
|
|
594
|
+
protected readonly resolvedPanelMinWidth: Signal<string | null>;
|
|
595
|
+
/** `dropdownMaxHeight`, or the viewport-derived max-height from `panelPlacement`. */
|
|
596
|
+
protected readonly resolvedPanelMaxHeight: Signal<string | null>;
|
|
597
|
+
protected readonly hasError: Signal<boolean>;
|
|
598
|
+
protected readonly visibleError: Signal<string>;
|
|
599
|
+
/**
|
|
600
|
+
* Each control supplies its own default: `gog-multiselect` shipped a clear button before
|
|
601
|
+
* `clearable` existed, so it keeps one; `gog-select` opts in.
|
|
602
|
+
*/
|
|
603
|
+
protected abstract readonly clearableByDefault: boolean;
|
|
604
|
+
private readonly clearableState;
|
|
605
|
+
/** Whether to render the clear button right now — see `GogClearableState`. */
|
|
606
|
+
protected readonly showClear: Signal<boolean>;
|
|
607
|
+
protected readonly resolvedFilter: Signal<boolean>;
|
|
608
|
+
protected readonly resolvedFilterPosition: Signal<GogDropdownFilterPosition>;
|
|
609
|
+
/** Current search text. Cleared whenever the panel closes, so reopening starts fresh. */
|
|
610
|
+
protected readonly filterQuery: _angular_core.WritableSignal<string>;
|
|
611
|
+
/**
|
|
612
|
+
* The options actually rendered. Everything downstream — the loops, the keyboard navigation
|
|
613
|
+
* target list, the panel height estimate, and multiselect's select-all — reads this rather
|
|
614
|
+
* than `options()`, so filtering stays consistent instead of only hiding rows visually.
|
|
615
|
+
*/
|
|
616
|
+
protected readonly visibleOptions: Signal<TOption[]>;
|
|
617
|
+
protected onFilterInput(event: Event): void;
|
|
618
|
+
/** Resets the control to its empty value and notifies any attached form. */
|
|
619
|
+
protected clearValue(event: Event): void;
|
|
620
|
+
/**
|
|
621
|
+
* `hasFloatValue` is wrapped in a `computed` rather than passed straight through: these
|
|
622
|
+
* field initializers run before the *subclass's* do, so `this.hasFloatValue` is still
|
|
623
|
+
* undefined right here. The arrow defers the read until the signal is first evaluated, by
|
|
624
|
+
* which time the subclass has assigned it.
|
|
625
|
+
*/
|
|
626
|
+
private readonly floatLabelState;
|
|
627
|
+
protected readonly resolvedFloatLabel: Signal<GogFloatLabelVariant>;
|
|
628
|
+
protected readonly isFloatLabelActive: Signal<boolean>;
|
|
629
|
+
protected readonly isFloatLabelFloated: Signal<boolean>;
|
|
630
|
+
protected readonly effectivePlaceholder: Signal<string>;
|
|
631
|
+
/** Measured once per open rather than per scroll tick — see `refreshPanelMetrics`. */
|
|
632
|
+
private optionGap;
|
|
633
|
+
private optionsPadding;
|
|
634
|
+
private maxPanelHeight;
|
|
635
|
+
private optionHeight;
|
|
636
|
+
private repositionFrame;
|
|
637
|
+
private onChangeFn;
|
|
638
|
+
private onTouchedFn;
|
|
639
|
+
constructor();
|
|
640
|
+
/**
|
|
641
|
+
* Binds the click-outside and reposition listeners only for as long as the panel is
|
|
642
|
+
* open. Bound permanently — as host listeners were — every dropdown on the page runs a
|
|
643
|
+
* handler on every document click and every scroll frame, whether or not it is showing
|
|
644
|
+
* anything.
|
|
645
|
+
*/
|
|
646
|
+
private bindWhileOpen;
|
|
647
|
+
ngDoCheck(): void;
|
|
648
|
+
writeValue(val: TValue | null): void;
|
|
649
|
+
registerOnChange(fn: (val: TValue) => void): void;
|
|
650
|
+
registerOnTouched(fn: () => void): void;
|
|
651
|
+
setDisabledState(isDisabled: boolean): void;
|
|
652
|
+
/** Bound to `(focus)` on the trigger — only drives the float-label floated state. */
|
|
653
|
+
protected onFocusIn(): void;
|
|
654
|
+
/** Bound to `(blur)` on the trigger — only drives the float-label floated state. */
|
|
655
|
+
protected onFocusOut(): void;
|
|
656
|
+
protected toggle(): void;
|
|
657
|
+
protected open(): void;
|
|
658
|
+
protected close(): void;
|
|
659
|
+
/** Writes a new selection out to both the model and the attached form control. */
|
|
660
|
+
protected commitValue(next: TValue): void;
|
|
661
|
+
protected markTouched(): void;
|
|
662
|
+
private closeIfClickedOutside;
|
|
663
|
+
/**
|
|
664
|
+
* Coalesces bursts of scroll/resize events into one reposition per frame. Placement
|
|
665
|
+
* reads layout, so running it per event is what makes a scroll janky.
|
|
666
|
+
*/
|
|
667
|
+
private scheduleReposition;
|
|
668
|
+
/** Jumps from the trigger into the option list on ArrowDown/ArrowUp while open. */
|
|
669
|
+
protected onTriggerArrowKeydown(event: Event): void;
|
|
670
|
+
protected onOptionKeydown(event: KeyboardEvent): void;
|
|
671
|
+
protected focusTrigger(): void;
|
|
672
|
+
/** Extra chrome stacked above the options (e.g. a select-all row), in px. */
|
|
673
|
+
protected extraPanelHeight(): number;
|
|
674
|
+
private enabledOptionElements;
|
|
675
|
+
private attachOverlay;
|
|
676
|
+
/**
|
|
677
|
+
* Reads the spacing tokens that feed the height estimate. Done once per open instead of
|
|
678
|
+
* on every scroll tick, because `getComputedStyle` forces a style recalculation and the
|
|
679
|
+
* tokens cannot change while the panel is on screen.
|
|
680
|
+
*/
|
|
681
|
+
private refreshPanelMetrics;
|
|
682
|
+
/**
|
|
683
|
+
* Rough height, used only to choose up/down and to cap `max-height` before the panel
|
|
684
|
+
* has been laid out. Deliberately an estimate: measuring would require rendering the
|
|
685
|
+
* panel first, which is what we are trying to position. A resolvable `dropdownMaxHeight`
|
|
686
|
+
* replaces the row-count guess outright, since it is exact rather than estimated.
|
|
687
|
+
*/
|
|
688
|
+
private estimatePanelHeight;
|
|
689
|
+
/**
|
|
690
|
+
* The trigger's own rect, not the whole component's — a label above it or an error
|
|
691
|
+
* message below it sit in normal document flow and are not part of what the panel needs
|
|
692
|
+
* to clear. This also keeps `appendToBody` placement consistent with the inline panel,
|
|
693
|
+
* which is already positioned purely relative to the trigger via CSS.
|
|
694
|
+
*/
|
|
695
|
+
private triggerRect;
|
|
696
|
+
/** The stacking order the panel would have had if it were still inside the subtree. */
|
|
697
|
+
private resolvePanelZIndex;
|
|
698
|
+
private updatePlacement;
|
|
699
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogDropdownBase<any, any>, never>;
|
|
700
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogDropdownBase<any, any>, never, never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "filterPosition": { "alias": "filterPosition"; "required": false; "isSignal": true; }; "filterEmptyMessage": { "alias": "filterEmptyMessage"; "required": false; "isSignal": true; }; "filterMatch": { "alias": "filterMatch"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dropdownDirection": { "alias": "dropdownDirection"; "required": false; "isSignal": true; }; "dropdownZIndex": { "alias": "dropdownZIndex"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "dropdownMaxHeight": { "alias": "dropdownMaxHeight"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "chevronTemplate": { "alias": "chevronTemplate"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatLabelShowPlaceholder": { "alias": "floatLabelShowPlaceholder"; "required": false; "isSignal": true; }; }, {}, ["chevronSlot", "optionSlot"], never, true, never>;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
/**
|
|
704
|
+
* A text field that suggests options as you type.
|
|
705
|
+
*
|
|
706
|
+
* ```html
|
|
707
|
+
* <gog-autocomplete
|
|
708
|
+
* [options]="users"
|
|
709
|
+
* optionLabel="profile.fullName"
|
|
710
|
+
* [optionValue]="null"
|
|
711
|
+
* [(value)]="user"
|
|
712
|
+
* (gogSearch)="load($event)"
|
|
713
|
+
* [loading]="loading()"
|
|
714
|
+
* />
|
|
715
|
+
* ```
|
|
716
|
+
*
|
|
717
|
+
* Shares `GogDropdownBase` with `gog-select` — placement, the append-to-body overlay, the
|
|
718
|
+
* option accessors, float label, error state and `ControlValueAccessor` all come from there.
|
|
719
|
+
* What makes it a separate control rather than a mode of `gog-select` is the trigger: here it
|
|
720
|
+
* is a real `<input>`, which changes the ARIA contract completely. The input keeps DOM focus
|
|
721
|
+
* the whole time and the highlighted option is pointed at with `aria-activedescendant`, where
|
|
722
|
+
* a listbox moves focus onto the option itself.
|
|
723
|
+
*/
|
|
724
|
+
declare class AutocompleteComponent<TOption = GogDropdownOption, TValue = string | number | null> extends GogDropdownBase<TValue, TOption> {
|
|
725
|
+
readonly inputId: _angular_core.InputSignal<string>;
|
|
726
|
+
/**
|
|
727
|
+
* Two-way bindable selected value: `[(value)]="signal"`. Carries whatever `optionValue`
|
|
728
|
+
* resolves to — an id by default, or the option object itself when `optionValue` is `null`.
|
|
729
|
+
*/
|
|
730
|
+
readonly value: _angular_core.ModelSignal<TValue>;
|
|
731
|
+
/**
|
|
732
|
+
* Whether to narrow `options` in the browser as the user types.
|
|
733
|
+
*
|
|
734
|
+
* Leave it on for a list you already hold. Turn it **off** when `gogSearch` fetches an
|
|
735
|
+
* already-filtered list from a server: filtering that answer a second time against the same
|
|
736
|
+
* query is the classic double-filtering bug, and it silently drops rows whose match the
|
|
737
|
+
* server found in a field this component cannot see.
|
|
738
|
+
*/
|
|
739
|
+
readonly filterLocal: _angular_core.InputSignal<boolean>;
|
|
740
|
+
/** How many characters before the panel opens at all. */
|
|
741
|
+
readonly minLength: _angular_core.InputSignal<number | undefined>;
|
|
742
|
+
/** Milliseconds of quiet before `gogSearch` fires. `0` emits on every keystroke. */
|
|
743
|
+
readonly searchDebounce: _angular_core.InputSignal<number | undefined>;
|
|
744
|
+
/** Shows a spinner in the trailing slot — for a server-backed source that is still loading. */
|
|
745
|
+
readonly loading: _angular_core.InputSignal<boolean>;
|
|
746
|
+
/** Shown in place of the list when nothing matches. */
|
|
747
|
+
readonly emptyMessage: _angular_core.InputSignal<string>;
|
|
748
|
+
/**
|
|
749
|
+
* Whether free text that matches no option is discarded when the field loses focus.
|
|
750
|
+
*
|
|
751
|
+
* On (the default) the field always ends up reflecting a real selection: editing is treated
|
|
752
|
+
* as transient, so the current `value` survives keystrokes and Escape or blur snaps the text
|
|
753
|
+
* back to it.
|
|
754
|
+
*
|
|
755
|
+
* Off, what the user typed is itself meaningful — a create-as-you-type flow. The text is left
|
|
756
|
+
* alone on blur and `value` is dropped as soon as it stops matching, so the two never
|
|
757
|
+
* disagree. Read the typed text from `gogSearch` rather than from `value`.
|
|
758
|
+
*/
|
|
759
|
+
readonly forceSelection: _angular_core.InputSignal<boolean>;
|
|
760
|
+
/** The current query, debounced. Wire a server-side lookup to this. */
|
|
761
|
+
readonly gogSearch: _angular_core.OutputEmitterRef<string>;
|
|
762
|
+
protected readonly panelTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
763
|
+
/** A cleared autocomplete is `null`, whatever `TValue` the consumer bound. */
|
|
764
|
+
protected readonly emptyValue: TValue;
|
|
765
|
+
protected readonly optionClass = "gog-autocomplete__option";
|
|
766
|
+
protected readonly triggerClass = "gog-autocomplete__control";
|
|
767
|
+
protected readonly sizeBlockClass = "gog-autocomplete";
|
|
768
|
+
protected readonly panelBlockClass = "gog-autocomplete__dropdown";
|
|
769
|
+
/** Opt-in, matching `gog-select` and `gog-inputfield`. */
|
|
770
|
+
protected readonly clearableByDefault = false;
|
|
771
|
+
protected readonly optionGapToken = "--gog-autocomplete-option-gap";
|
|
772
|
+
protected readonly panelMaxHeightToken = "--gog-autocomplete-panel-max-height";
|
|
773
|
+
protected readonly optionHeightToken = "--gog-autocomplete-option-height";
|
|
774
|
+
private readonly config;
|
|
775
|
+
private readonly ownDestroyRef;
|
|
776
|
+
protected readonly triggerId: _angular_core.Signal<string>;
|
|
777
|
+
protected readonly listboxId: _angular_core.Signal<string>;
|
|
778
|
+
protected readonly labelId: _angular_core.Signal<string>;
|
|
779
|
+
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
780
|
+
protected optionId(index: number): string;
|
|
781
|
+
protected readonly resolvedMinLength: _angular_core.Signal<number>;
|
|
782
|
+
private readonly resolvedDebounce;
|
|
783
|
+
/** What is actually in the `<input>`. Not the same thing as the committed `value`. */
|
|
784
|
+
protected readonly query: _angular_core.WritableSignal<string>;
|
|
785
|
+
/**
|
|
786
|
+
* Which option the arrows have highlighted. `-1` means none — Enter then does nothing rather
|
|
787
|
+
* than committing whichever row happened to be first, which is what stops a fast typist from
|
|
788
|
+
* selecting something they never looked at.
|
|
789
|
+
*/
|
|
790
|
+
protected readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
791
|
+
protected readonly selectedOption: _angular_core.Signal<NonNullable<TOption> | null>;
|
|
792
|
+
protected readonly selectedLabel: _angular_core.Signal<string>;
|
|
793
|
+
protected readonly hasFloatValue: _angular_core.Signal<boolean>;
|
|
794
|
+
/**
|
|
795
|
+
* Local filtering, replacing the base's panel-filter behaviour: here the query comes from the
|
|
796
|
+
* trigger, not from a search box inside the panel. Overriding this rather than duplicating a
|
|
797
|
+
* second filtered list keeps the keyboard targets, the empty state and the panel height
|
|
798
|
+
* estimate all reading the same set.
|
|
799
|
+
*/
|
|
800
|
+
protected readonly visibleOptions: _angular_core.Signal<TOption[]>;
|
|
801
|
+
protected readonly activeOptionId: _angular_core.Signal<string | null>;
|
|
802
|
+
private searchTimer;
|
|
803
|
+
constructor();
|
|
804
|
+
protected isSelected(option: TOption): boolean;
|
|
805
|
+
protected onInput(event: Event): void;
|
|
806
|
+
/**
|
|
807
|
+
* The input owns its arrow keys; the base's option-focusing handlers are deliberately not
|
|
808
|
+
* wired up here. Moving DOM focus into the list would take the caret out of the field, which
|
|
809
|
+
* is exactly what a combobox must not do.
|
|
810
|
+
*/
|
|
811
|
+
protected onInputKeydown(event: KeyboardEvent): void;
|
|
812
|
+
protected onOptionClick(option: TOption, event: MouseEvent): void;
|
|
813
|
+
/**
|
|
814
|
+
* Keeps the caret in the field while an option is clicked. Without it the input blurs first,
|
|
815
|
+
* `forceSelection` wipes the text, and the click lands on a list that has already closed.
|
|
816
|
+
*/
|
|
817
|
+
protected onOptionMousedown(event: MouseEvent): void;
|
|
818
|
+
protected onInputFocus(): void;
|
|
819
|
+
protected onInputBlur(): void;
|
|
820
|
+
protected close(): void;
|
|
821
|
+
/** Clearing has to empty the *text* as well; the base only knows about the value. */
|
|
822
|
+
protected clearValue(event: Event): void;
|
|
823
|
+
private pick;
|
|
824
|
+
/** Snaps the field back to whatever `value` holds — the empty string when nothing is picked. */
|
|
825
|
+
private restoreSelectedText;
|
|
826
|
+
private moveActive;
|
|
827
|
+
private setActive;
|
|
828
|
+
private scrollActiveIntoView;
|
|
829
|
+
private scheduleSearch;
|
|
830
|
+
private cancelPendingSearch;
|
|
831
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteComponent<any, any>, never>;
|
|
832
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutocompleteComponent<any, any>, "gog-autocomplete", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "filterLocal": { "alias": "filterLocal"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "searchDebounce": { "alias": "searchDebounce"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "forceSelection": { "alias": "forceSelection"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "gogSearch": "gogSearch"; }, never, never, true, never>;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
/**
|
|
836
|
+
* A count or status dot pinned to the corner of another element.
|
|
837
|
+
*
|
|
838
|
+
* ```html
|
|
839
|
+
* <gog-button gogBadge="12" badgeAriaLabel="12 непрочитанных">Входящие</gog-button>
|
|
840
|
+
* <gog-icon name="info" gogBadge badgeDot />
|
|
841
|
+
* ```
|
|
842
|
+
*
|
|
843
|
+
* A **directive, not a component**, because a badge decorates something that already exists —
|
|
844
|
+
* a button, an icon, an avatar. As a component it would have to wrap its host, which changes
|
|
845
|
+
* that host's layout, and it would duplicate `gog-tag` for the sake of one different radius.
|
|
846
|
+
*
|
|
847
|
+
* It renders **nothing at all** when the value is `0`, `null` or empty and `badgeDot` is off:
|
|
848
|
+
* a badge reading "0" is the defining bug of this component class, so it is not reachable.
|
|
849
|
+
*/
|
|
850
|
+
declare class GogBadgeDirective {
|
|
851
|
+
/** The badge content. Numbers above `badgeMax` render as `N+`. */
|
|
852
|
+
readonly gogBadge: _angular_core.InputSignal<string | number | null>;
|
|
853
|
+
readonly badgePosition: _angular_core.InputSignal<GogBadgePosition>;
|
|
854
|
+
/** Reuses the library's semantic colour set — the same four names `gog-tag` takes. */
|
|
855
|
+
readonly badgeVariant: _angular_core.InputSignal<GogTagVariant>;
|
|
856
|
+
/** Renders a bare dot with no text: "something changed here", with no count to give. */
|
|
857
|
+
readonly badgeDot: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
858
|
+
readonly badgeMax: _angular_core.InputSignal<number>;
|
|
859
|
+
/** Keeps the badge out of the DOM without removing the directive. */
|
|
860
|
+
readonly badgeHidden: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
861
|
+
/**
|
|
862
|
+
* What assistive tech should hear instead of the bare number.
|
|
863
|
+
*
|
|
864
|
+
* Left empty, the badge text is announced inline with the host's own label, which reads as
|
|
865
|
+
* "Входящие 12" — acceptable, and what Material does. Set this and the visible badge becomes
|
|
866
|
+
* `aria-hidden` while this wording is announced in its place, so the host reads as
|
|
867
|
+
* "Входящие, 12 непрочитанных" instead.
|
|
868
|
+
*/
|
|
869
|
+
readonly badgeAriaLabel: _angular_core.InputSignal<string>;
|
|
870
|
+
private readonly hostRef;
|
|
871
|
+
private readonly renderer;
|
|
872
|
+
private readonly isBrowser;
|
|
873
|
+
private badgeEl;
|
|
874
|
+
private descriptionEl;
|
|
875
|
+
/** `0` and `''` count as "nothing to show" — see the class comment. */
|
|
876
|
+
private readonly hasContent;
|
|
877
|
+
protected readonly visible: _angular_core.Signal<boolean>;
|
|
878
|
+
protected readonly text: _angular_core.Signal<string>;
|
|
879
|
+
private readonly classNames;
|
|
880
|
+
constructor();
|
|
881
|
+
private render;
|
|
882
|
+
private removeDescription;
|
|
883
|
+
private teardown;
|
|
884
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogBadgeDirective, never>;
|
|
885
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogBadgeDirective, "[gogBadge]", never, { "gogBadge": { "alias": "gogBadge"; "required": false; "isSignal": true; }; "badgePosition": { "alias": "badgePosition"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; "badgeDot": { "alias": "badgeDot"; "required": false; "isSignal": true; }; "badgeMax": { "alias": "badgeMax"; "required": false; "isSignal": true; }; "badgeHidden": { "alias": "badgeHidden"; "required": false; "isSignal": true; }; "badgeAriaLabel": { "alias": "badgeAriaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
type GogIconName = 'check' | 'close' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'calendar' | 'clock' | 'sort' | 'sort-up' | 'sort-down' | 'success' | 'error' | 'warning' | 'info' | 'checkbox' | 'checkbox-checked' | 'eye' | 'eye-off';
|
|
889
|
+
declare const ICON_DEFS: Record<GogIconName, string>;
|
|
890
|
+
|
|
891
|
+
declare class IconComponent {
|
|
892
|
+
private readonly sanitizer;
|
|
893
|
+
readonly name: _angular_core.InputSignal<GogIconName>;
|
|
894
|
+
readonly template: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
895
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
896
|
+
readonly ariaHidden: _angular_core.InputSignal<boolean>;
|
|
897
|
+
protected readonly ariaLabel: _angular_core.Signal<string | null>;
|
|
898
|
+
protected readonly iconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
|
|
899
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
900
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "gog-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaHidden": { "alias": "ariaHidden"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/** Context handed to a `gogButtonToggleOption` template. */
|
|
904
|
+
interface GogButtonToggleOptionContext<TOption> {
|
|
905
|
+
/** The consumer's own option object, untouched. */
|
|
906
|
+
$implicit: TOption;
|
|
907
|
+
selected: boolean;
|
|
908
|
+
disabled: boolean;
|
|
909
|
+
/** The resolved label, so custom markup can decorate it rather than re-derive it. */
|
|
910
|
+
label: string;
|
|
911
|
+
}
|
|
912
|
+
/**
|
|
913
|
+
* Custom markup for one button in the group:
|
|
914
|
+
*
|
|
915
|
+
* ```html
|
|
916
|
+
* <gog-button-toggle-group [options]="views">
|
|
917
|
+
* <ng-template gogButtonToggleOption let-view let-selected="selected">
|
|
918
|
+
* <gog-icon [name]="view.icon" /> {{ view.title }}
|
|
919
|
+
* </ng-template>
|
|
920
|
+
* </gog-button-toggle-group>
|
|
921
|
+
* ```
|
|
922
|
+
*/
|
|
923
|
+
declare class GogButtonToggleOptionDirective<TOption = unknown> {
|
|
924
|
+
readonly templateRef: TemplateRef<GogButtonToggleOptionContext<TOption>>;
|
|
925
|
+
static ngTemplateContextGuard<TOption>(_dir: GogButtonToggleOptionDirective<TOption>, ctx: unknown): ctx is GogButtonToggleOptionContext<TOption>;
|
|
926
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogButtonToggleOptionDirective<any>, never>;
|
|
927
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogButtonToggleOptionDirective<any>, "[gogButtonToggleOption]", never, {}, {}, never, never, true, never>;
|
|
928
|
+
}
|
|
929
|
+
/**
|
|
930
|
+
* A row of buttons where one — or, with `multiple`, several — can be picked.
|
|
931
|
+
*
|
|
932
|
+
* ```html
|
|
933
|
+
* <gog-button-toggle-group [options]="alignments" [(value)]="align" />
|
|
934
|
+
* <gog-button-toggle-group [options]="tools" [multiple]="true" [(value)]="active" />
|
|
935
|
+
* ```
|
|
936
|
+
*
|
|
937
|
+
* Takes the consumer's own objects through `optionLabel` / `optionValue` / `optionDisabled`
|
|
938
|
+
* accessors — the same ones `gog-select` uses — rather than a fixed `{ id, label }` shape.
|
|
939
|
+
*
|
|
940
|
+
* **Single and multiple are different widgets to assistive tech, not a cosmetic switch.**
|
|
941
|
+
* Single mode is a radio group: `role="radiogroup"` / `role="radio"` with `aria-checked`, and
|
|
942
|
+
* the arrow keys move *and* select, because that is what a radio group does. Multiple mode is
|
|
943
|
+
* a toolbar of independent toggles: `role="group"` with `aria-pressed`, arrows only move and
|
|
944
|
+
* Space toggles. Getting this backwards is the usual defect in this component.
|
|
945
|
+
*/
|
|
946
|
+
declare class ButtonToggleGroupComponent<TOption = unknown, TValue = unknown> implements ControlValueAccessor {
|
|
947
|
+
readonly options: _angular_core.InputSignal<TOption[]>;
|
|
948
|
+
readonly optionLabel: _angular_core.InputSignal<GogOptionAccessor<TOption, string>>;
|
|
949
|
+
/**
|
|
950
|
+
* How an option turns into the emitted value. `null` emits the **option object itself**,
|
|
951
|
+
* exactly as `gog-select` does, so a consumer's DTO survives the round trip.
|
|
952
|
+
*/
|
|
953
|
+
readonly optionValue: _angular_core.InputSignal<GogOptionAccessor<TOption, unknown> | null>;
|
|
954
|
+
readonly optionDisabled: _angular_core.InputSignal<GogOptionAccessor<TOption, boolean>>;
|
|
955
|
+
/** Optional leading icon per option. Unset means no icons anywhere in the group. */
|
|
956
|
+
readonly optionIcon: _angular_core.InputSignal<GogOptionAccessor<TOption, GogIconName | null> | null>;
|
|
957
|
+
/** Whether more than one option can be active at a time. */
|
|
958
|
+
readonly multiple: _angular_core.InputSignal<boolean>;
|
|
959
|
+
readonly appearance: _angular_core.InputSignal<GogButtonToggleAppearance>;
|
|
960
|
+
readonly orientation: _angular_core.InputSignal<GogOrientation>;
|
|
961
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
962
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
963
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
964
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
965
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
966
|
+
/**
|
|
967
|
+
* Two-way bindable selection: `[(value)]="signal"`. A single value in single mode, an array
|
|
968
|
+
* in `multiple` mode. Also drivable through `formControl` / `formControlName`.
|
|
969
|
+
*/
|
|
970
|
+
readonly value: _angular_core.ModelSignal<TValue | TValue[] | null>;
|
|
971
|
+
protected readonly optionSlot: _angular_core.Signal<GogButtonToggleOptionDirective<any> | undefined>;
|
|
972
|
+
private readonly buttonRefs;
|
|
973
|
+
private readonly ngControl;
|
|
974
|
+
private readonly cvaDisabled;
|
|
975
|
+
private readonly globalConfig;
|
|
976
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
977
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
978
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
979
|
+
/** The current selection as an array, whatever mode the group is in. */
|
|
980
|
+
private readonly selectedValues;
|
|
981
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
982
|
+
/**
|
|
983
|
+
* A roving tabindex: the group is one tab stop and the arrows move within it. The *selected*
|
|
984
|
+
* option is the one that keeps `tabindex="0"` so Tab returns to where the user left off;
|
|
985
|
+
* with nothing selected, the first enabled option takes it, since a group nobody can Tab
|
|
986
|
+
* into is unreachable by keyboard.
|
|
987
|
+
*/
|
|
988
|
+
protected readonly tabStopIndex: _angular_core.Signal<number>;
|
|
989
|
+
private onChange;
|
|
990
|
+
private onTouched;
|
|
991
|
+
constructor();
|
|
992
|
+
writeValue(val: TValue | TValue[] | null): void;
|
|
993
|
+
registerOnChange(fn: (val: TValue | TValue[] | null) => void): void;
|
|
994
|
+
registerOnTouched(fn: () => void): void;
|
|
995
|
+
setDisabledState(isDisabled: boolean): void;
|
|
996
|
+
protected labelOf(option: TOption): string;
|
|
997
|
+
protected iconOf(option: TOption): GogIconName | null;
|
|
998
|
+
protected valueOf(option: TOption): unknown;
|
|
999
|
+
protected isOptionDisabled(option: TOption): boolean;
|
|
1000
|
+
protected isSelected(option: TOption): boolean;
|
|
1001
|
+
protected optionContext(option: TOption): GogButtonToggleOptionContext<TOption>;
|
|
1002
|
+
protected onOptionClick(option: TOption): void;
|
|
1003
|
+
/**
|
|
1004
|
+
* Arrow keys. In single mode moving also selects — that is the radio-group contract, and it
|
|
1005
|
+
* is why `role="radio"` is only used there. In multiple mode the arrows are pure navigation
|
|
1006
|
+
* and Space/Enter (handled natively by the `<button>`) does the toggling.
|
|
1007
|
+
*/
|
|
1008
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
1009
|
+
protected onBlur(): void;
|
|
1010
|
+
private commit;
|
|
1011
|
+
private setValue;
|
|
1012
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonToggleGroupComponent<any, any>, never>;
|
|
1013
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonToggleGroupComponent<any, any>, "gog-button-toggle-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "optionIcon": { "alias": "optionIcon"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["optionSlot"], never, true, never>;
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
/**
|
|
1017
|
+
* Marks a tab's content as **lazy**: it is built the first time the tab is shown, and kept
|
|
1018
|
+
* alive afterwards.
|
|
1019
|
+
*
|
|
1020
|
+
* ```html
|
|
1021
|
+
* <gog-tab label="Отчёт">
|
|
1022
|
+
* <ng-template gogTabContent><app-expensive-report /></ng-template>
|
|
1023
|
+
* </gog-tab>
|
|
1024
|
+
* ```
|
|
1025
|
+
*
|
|
1026
|
+
* Without it, content written directly inside `<gog-tab>` renders immediately and is merely
|
|
1027
|
+
* hidden while inactive — which is what you want for cheap content, because it preserves
|
|
1028
|
+
* scroll position, un-submitted input and any state the DOM is holding. Which behaviour you
|
|
1029
|
+
* get is decided by whether this template is present; there is no `lazy` input to keep in sync.
|
|
1030
|
+
*/
|
|
1031
|
+
declare class GogTabContentDirective {
|
|
1032
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
1033
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogTabContentDirective, never>;
|
|
1034
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogTabContentDirective, "[gogTabContent]", never, {}, {}, never, never, true, never>;
|
|
1035
|
+
}
|
|
1036
|
+
/**
|
|
1037
|
+
* One tab inside a `<gog-tabs>`. Declares its own header text and holds its own content.
|
|
1038
|
+
*
|
|
1039
|
+
* ```html
|
|
1040
|
+
* <gog-tabs>
|
|
1041
|
+
* <gog-tab label="Профиль"><app-profile /></gog-tab>
|
|
1042
|
+
* <gog-tab label="Настройки" iconName="info" [disabled]="!canEdit">…</gog-tab>
|
|
1043
|
+
* </gog-tabs>
|
|
1044
|
+
* ```
|
|
1045
|
+
*/
|
|
1046
|
+
declare class TabComponent {
|
|
1047
|
+
private static nextUid;
|
|
1048
|
+
private readonly uid;
|
|
1049
|
+
/** Header text. */
|
|
1050
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1051
|
+
/** Optional leading icon in the header. */
|
|
1052
|
+
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
1053
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1054
|
+
readonly panelId: string;
|
|
1055
|
+
readonly headerId: string;
|
|
1056
|
+
private readonly tabsState;
|
|
1057
|
+
/** Identity comparison against the group's current tab — no index bookkeeping either side. */
|
|
1058
|
+
readonly active: _angular_core.Signal<boolean>;
|
|
1059
|
+
protected readonly lazySlot: _angular_core.Signal<GogTabContentDirective | undefined>;
|
|
1060
|
+
/**
|
|
1061
|
+
* Latches on first activation and never resets, so a lazy tab pays its build cost once and
|
|
1062
|
+
* then behaves like an eager one — revisiting it does not rebuild the subtree or lose what
|
|
1063
|
+
* the user typed into it.
|
|
1064
|
+
*/
|
|
1065
|
+
private readonly everActivated;
|
|
1066
|
+
protected readonly shouldRenderLazy: _angular_core.Signal<boolean>;
|
|
1067
|
+
constructor();
|
|
1068
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
|
|
1069
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "gog-tab", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["lazySlot"], ["*"], true, never>;
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
/**
|
|
1073
|
+
* What a `gog-tab` needs from the `gog-tabs` it sits in: which tab is currently showing.
|
|
1074
|
+
*
|
|
1075
|
+
* A token rather than injecting the component directly, purely to keep the import graph
|
|
1076
|
+
* acyclic — `tabs.component.ts` has to import `TabComponent` for its `contentChildren`, so the
|
|
1077
|
+
* tab cannot import the group back. Both sides depend on this file, which depends on neither.
|
|
1078
|
+
*/
|
|
1079
|
+
interface GogTabsState {
|
|
1080
|
+
/** The active tab instance, compared by identity. `null` when the group has no tabs. */
|
|
1081
|
+
readonly activeTab: Signal<unknown | null>;
|
|
1082
|
+
}
|
|
1083
|
+
declare const GOG_TABS_STATE: InjectionToken<GogTabsState>;
|
|
1084
|
+
|
|
1085
|
+
/** Context handed to a `gogTabHeader` template. */
|
|
1086
|
+
interface GogTabHeaderContext {
|
|
1087
|
+
/** The `gog-tab` this header belongs to. */
|
|
1088
|
+
$implicit: TabComponent;
|
|
1089
|
+
active: boolean;
|
|
1090
|
+
disabled: boolean;
|
|
1091
|
+
index: number;
|
|
1092
|
+
}
|
|
1093
|
+
/**
|
|
1094
|
+
* Custom markup for a tab's header button:
|
|
1095
|
+
*
|
|
1096
|
+
* ```html
|
|
1097
|
+
* <gog-tabs>
|
|
1098
|
+
* <ng-template gogTabHeader let-tab let-active="active">
|
|
1099
|
+
* {{ tab.label() }} <gog-tag *ngIf="active">•</gog-tag>
|
|
1100
|
+
* </ng-template>
|
|
1101
|
+
* <gog-tab label="Входящие">…</gog-tab>
|
|
1102
|
+
* </gog-tabs>
|
|
1103
|
+
* ```
|
|
1104
|
+
*/
|
|
1105
|
+
declare class GogTabHeaderDirective {
|
|
1106
|
+
readonly templateRef: TemplateRef<GogTabHeaderContext>;
|
|
1107
|
+
static ngTemplateContextGuard(_dir: GogTabHeaderDirective, ctx: unknown): ctx is GogTabHeaderContext;
|
|
1108
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogTabHeaderDirective, never>;
|
|
1109
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogTabHeaderDirective, "[gogTabHeader]", never, {}, {}, never, never, true, never>;
|
|
1110
|
+
}
|
|
1111
|
+
/**
|
|
1112
|
+
* A tablist over projected `<gog-tab>` children.
|
|
1113
|
+
*
|
|
1114
|
+
* ```html
|
|
1115
|
+
* <gog-tabs [(activeIndex)]="index" align="start">
|
|
1116
|
+
* <gog-tab label="Профиль"><app-profile /></gog-tab>
|
|
1117
|
+
* <gog-tab label="Настройки"><app-settings /></gog-tab>
|
|
1118
|
+
* </gog-tabs>
|
|
1119
|
+
* ```
|
|
1120
|
+
*
|
|
1121
|
+
* The header row is built from each tab's own `label` / `iconName` / `disabled`, so a tab is
|
|
1122
|
+
* declared in exactly one place. Overflowing headers scroll inside a `<gog-scroll>` rather than
|
|
1123
|
+
* a native `overflow-x`, per the library's styling contract — a native scrollbar is the one
|
|
1124
|
+
* piece of chrome no `--gog-*` token can reach.
|
|
1125
|
+
*/
|
|
1126
|
+
declare class TabsComponent implements GogTabsState {
|
|
1127
|
+
readonly tabs: _angular_core.Signal<readonly TabComponent[]>;
|
|
1128
|
+
/** Two-way bindable index of the visible tab: `[(activeIndex)]="signal"`. */
|
|
1129
|
+
readonly activeIndex: _angular_core.ModelSignal<number>;
|
|
1130
|
+
readonly align: _angular_core.InputSignal<GogTabsAlign>;
|
|
1131
|
+
readonly orientation: _angular_core.InputSignal<GogOrientation>;
|
|
1132
|
+
readonly size: _angular_core.InputSignal<GogSize>;
|
|
1133
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
1134
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1135
|
+
/** Emits the newly active index whenever it changes, including via keyboard. */
|
|
1136
|
+
readonly gogTabChange: _angular_core.OutputEmitterRef<number>;
|
|
1137
|
+
protected readonly headerSlot: _angular_core.Signal<GogTabHeaderDirective | undefined>;
|
|
1138
|
+
private readonly headerRefs;
|
|
1139
|
+
/**
|
|
1140
|
+
* The index actually shown. Clamped, and never a disabled tab: `activeIndex` is a plain
|
|
1141
|
+
* number a consumer can set to anything, and silently showing nothing would be worse than
|
|
1142
|
+
* falling back to the nearest usable tab.
|
|
1143
|
+
*/
|
|
1144
|
+
protected readonly resolvedIndex: _angular_core.Signal<number>;
|
|
1145
|
+
/** Read by each `gog-tab` through `GOG_TABS_STATE`; see `tabs-state.ts`. */
|
|
1146
|
+
readonly activeTab: _angular_core.Signal<TabComponent | null>;
|
|
1147
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
1148
|
+
protected selectIndex(index: number): void;
|
|
1149
|
+
protected headerContext(tab: TabComponent, index: number): GogTabHeaderContext;
|
|
1150
|
+
/**
|
|
1151
|
+
* Arrows move focus and activate in one step — the "automatic activation" variant of the
|
|
1152
|
+
* ARIA tabs pattern, which suits panels that are already in the DOM. Home/End jump to the
|
|
1153
|
+
* first/last enabled tab.
|
|
1154
|
+
*/
|
|
1155
|
+
protected onHeaderKeydown(event: KeyboardEvent): void;
|
|
1156
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
|
|
1157
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "gog-tabs", never, { "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; "gogTabChange": "gogTabChange"; }, ["tabs", "headerSlot"], ["*"], true, never>;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
/**
|
|
1161
|
+
* Custom markup for the checkbox's tick:
|
|
1162
|
+
*
|
|
1163
|
+
* ```html
|
|
1164
|
+
* <ng-template gogCheckboxIcon><my-icon /></ng-template>
|
|
1165
|
+
* ```
|
|
1166
|
+
*/
|
|
1167
|
+
declare class GogCheckboxIconDirective {
|
|
1168
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
1169
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogCheckboxIconDirective, never>;
|
|
1170
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogCheckboxIconDirective, "[gogCheckboxIcon]", never, {}, {}, never, never, true, never>;
|
|
1171
|
+
}
|
|
1172
|
+
declare class CheckboxComponent implements ControlValueAccessor {
|
|
1173
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1174
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1175
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
1176
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
1177
|
+
readonly indeterminate: _angular_core.InputSignal<boolean>;
|
|
1178
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1179
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
1180
|
+
/**
|
|
1181
|
+
* @deprecated since 21.3.0 (2026-08-07) — project an `<ng-template gogCheckboxIcon>` into the component instead. Removed in 21.5.0.
|
|
1182
|
+
*/
|
|
1183
|
+
readonly checkIconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
1184
|
+
/** Projected `gogCheckboxIcon` template; wins over the deprecated `checkIconTemplate` input. */
|
|
1185
|
+
protected readonly checkIconSlot: _angular_core.Signal<GogCheckboxIconDirective | undefined>;
|
|
1186
|
+
/**
|
|
1187
|
+
* Two-way bindable checked state: `[(checked)]="signal"`.
|
|
1188
|
+
* This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
|
|
1189
|
+
* when the component is used with `formControlName`/`[formControl]`.
|
|
1190
|
+
* Don't wire both a form directive AND `[(checked)]` to the same instance —
|
|
1191
|
+
* pick one, otherwise you end up with two competing sources of truth.
|
|
1192
|
+
*/
|
|
1193
|
+
readonly checked: _angular_core.ModelSignal<boolean>;
|
|
1194
|
+
private readonly globalConfig;
|
|
1195
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
1196
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
1197
|
+
protected readonly controlSize: _angular_core.Signal<{
|
|
1198
|
+
readonly boxSize: "var(--gog-control-checkbox-box-size-xsm, 12px)";
|
|
1199
|
+
readonly labelSize: "var(--gog-control-checkbox-label-size-xsm, 0.6875rem)";
|
|
1200
|
+
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-xsm, 10px)";
|
|
1201
|
+
} | {
|
|
1202
|
+
readonly boxSize: "var(--gog-control-checkbox-box-size-sm, 18px)";
|
|
1203
|
+
readonly labelSize: "var(--gog-control-checkbox-label-size-sm, 0.8125rem)";
|
|
1204
|
+
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-sm, 12px)";
|
|
1205
|
+
} | {
|
|
1206
|
+
readonly boxSize: "var(--gog-control-checkbox-box-size-md, 24px)";
|
|
1207
|
+
readonly labelSize: "var(--gog-control-checkbox-label-size-md, 0.9375rem)";
|
|
1208
|
+
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-md, 14px)";
|
|
1209
|
+
} | {
|
|
1210
|
+
readonly boxSize: "var(--gog-control-checkbox-box-size-lg, 32px)";
|
|
1211
|
+
readonly labelSize: "var(--gog-control-checkbox-label-size-lg, 1.0625rem)";
|
|
1212
|
+
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-lg, 18px)";
|
|
1213
|
+
} | {
|
|
1214
|
+
readonly boxSize: "var(--gog-control-checkbox-box-size-slg, 40px)";
|
|
1215
|
+
readonly labelSize: "var(--gog-control-checkbox-label-size-slg, 1.1875rem)";
|
|
1216
|
+
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-slg, 22px)";
|
|
1217
|
+
}>;
|
|
1218
|
+
protected readonly boxSize: _angular_core.Signal<"var(--gog-control-checkbox-box-size-xsm, 12px)" | "var(--gog-control-checkbox-box-size-sm, 18px)" | "var(--gog-control-checkbox-box-size-md, 24px)" | "var(--gog-control-checkbox-box-size-lg, 32px)" | "var(--gog-control-checkbox-box-size-slg, 40px)">;
|
|
1219
|
+
protected readonly checkboxPadding = "var(--gog-control-checkbox-padding, 6px)";
|
|
1220
|
+
protected readonly labelSize: _angular_core.Signal<"var(--gog-control-checkbox-label-size-xsm, 0.6875rem)" | "var(--gog-control-checkbox-label-size-sm, 0.8125rem)" | "var(--gog-control-checkbox-label-size-md, 0.9375rem)" | "var(--gog-control-checkbox-label-size-lg, 1.0625rem)" | "var(--gog-control-checkbox-label-size-slg, 1.1875rem)">;
|
|
1221
|
+
protected readonly iconSize: _angular_core.Signal<"var(--gog-control-checkbox-icon-size-xsm, 10px)" | "var(--gog-control-checkbox-icon-size-sm, 12px)" | "var(--gog-control-checkbox-icon-size-md, 14px)" | "var(--gog-control-checkbox-icon-size-lg, 18px)" | "var(--gog-control-checkbox-icon-size-slg, 22px)">;
|
|
1222
|
+
private readonly ngControl;
|
|
1223
|
+
private readonly cvaDisabled;
|
|
1224
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1225
|
+
constructor();
|
|
1226
|
+
writeValue(val: boolean): void;
|
|
1227
|
+
registerOnChange(fn: (val: boolean) => void): void;
|
|
1228
|
+
registerOnTouched(fn: () => void): void;
|
|
1229
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1230
|
+
onInputChange(event: Event): void;
|
|
1231
|
+
onBlur(): void;
|
|
1232
|
+
private onCheckedChange;
|
|
1233
|
+
private onTouched;
|
|
1234
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
1235
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "gog-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "checkIconTemplate": { "alias": "checkIconTemplate"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, ["checkIconSlot"], never, true, never>;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
/**
|
|
1239
|
+
* Every date calculation `gog-datepicker` and `gog-calendar` do, as pure functions.
|
|
1240
|
+
*
|
|
1241
|
+
* Kept out of the components so the arithmetic is testable without a fixture, and so a range
|
|
1242
|
+
* calculation is written once rather than once per selection mode.
|
|
1243
|
+
*
|
|
1244
|
+
* **Everything here works in local time.** Nothing round-trips through `toISOString()` or
|
|
1245
|
+
* compares `Date` objects directly: an ISO round trip converts to UTC, which moves the date
|
|
1246
|
+
* across midnight for anyone east or west of Greenwich, and two `Date`s for "the same day"
|
|
1247
|
+
* are almost never equal because they carry different times. Comparisons go through
|
|
1248
|
+
* `startOfDay` and `isSameDay` instead. This is the single most common defect in a datepicker.
|
|
1249
|
+
*/
|
|
1250
|
+
/** A start/end pair. `end` is null while a range is half-picked. */
|
|
1251
|
+
interface GogDateRange {
|
|
1252
|
+
start: Date | null;
|
|
1253
|
+
end: Date | null;
|
|
1254
|
+
}
|
|
1255
|
+
/** Midnight local time on the same calendar day. */
|
|
1256
|
+
declare function startOfDay(date: Date): Date;
|
|
1257
|
+
/** Whether two dates fall on the same calendar day, ignoring the time of day. */
|
|
1258
|
+
declare function isSameDay(a: Date | null, b: Date | null): boolean;
|
|
1259
|
+
/** Whether two dates fall in the same calendar month. */
|
|
1260
|
+
declare function isSameMonth(a: Date | null, b: Date | null): boolean;
|
|
1261
|
+
declare function addDays(date: Date, days: number): Date;
|
|
1262
|
+
/** Days in a given month. `month` is 0-based, as `Date` uses it. */
|
|
1263
|
+
declare function daysInMonth(year: number, month: number): number;
|
|
1264
|
+
/**
|
|
1265
|
+
* Adds whole months, **clamping the day** to the target month's length: 31 January plus one
|
|
1266
|
+
* month is 28 February, not 3 March. `Date.setMonth` does the latter, which is why this is
|
|
1267
|
+
* not a one-liner.
|
|
1268
|
+
*/
|
|
1269
|
+
declare function addMonths(date: Date, months: number): Date;
|
|
1270
|
+
declare function addYears(date: Date, years: number): Date;
|
|
1271
|
+
/** Day-granularity comparison: `a` is strictly before `b`'s day. */
|
|
1272
|
+
declare function isBeforeDay(a: Date, b: Date): boolean;
|
|
1273
|
+
/** Day-granularity comparison: `a` is strictly after `b`'s day. */
|
|
1274
|
+
declare function isAfterDay(a: Date, b: Date): boolean;
|
|
1275
|
+
/** Whether `date`'s day falls within `[min, max]`, either bound optional. */
|
|
1276
|
+
declare function isWithinBounds(date: Date, min: Date | null, max: Date | null): boolean;
|
|
1277
|
+
/** Whether `date`'s day falls inside a range, inclusive of both ends. */
|
|
1278
|
+
declare function isInRange(date: Date, start: Date | null, end: Date | null): boolean;
|
|
1279
|
+
/** Pulls `date` inside `[min, max]`, keeping its time of day. */
|
|
1280
|
+
declare function clampDate(date: Date, min: Date | null, max: Date | null): Date;
|
|
1281
|
+
/** A new date on `day`'s calendar day carrying `time`'s clock. */
|
|
1282
|
+
declare function copyTimeOnto(day: Date, time: Date): Date;
|
|
1283
|
+
/** A new date on the same day with the clock replaced. */
|
|
1284
|
+
declare function withTime(date: Date, hours: number, minutes: number, seconds?: number): Date;
|
|
1285
|
+
/**
|
|
1286
|
+
* The six-week grid a month is drawn on, always 6×7 so the calendar's height never changes as
|
|
1287
|
+
* you page through months — a grid that grows and shrinks pushes the rest of the page around
|
|
1288
|
+
* and moves the button you were about to click.
|
|
1289
|
+
*
|
|
1290
|
+
* `firstDayOfWeek` is 0 (Sunday) to 6 (Saturday). Leading and trailing cells come from the
|
|
1291
|
+
* neighbouring months, as every calendar does.
|
|
1292
|
+
*/
|
|
1293
|
+
declare function buildMonthGrid(year: number, month: number, firstDayOfWeek: number): Date[][];
|
|
1294
|
+
/** Weekday names in `locale`, rotated so `firstDayOfWeek` comes first. */
|
|
1295
|
+
declare function weekdayNames(locale: string, firstDayOfWeek: number, style?: 'short' | 'narrow' | 'long'): string[];
|
|
1296
|
+
/** Month names in `locale`. */
|
|
1297
|
+
declare function monthNames(locale: string, style?: 'long' | 'short'): string[];
|
|
1298
|
+
/**
|
|
1299
|
+
* The first day of the week for a locale, from `Intl.Locale.prototype.getWeekInfo` where the
|
|
1300
|
+
* engine has it, falling back to Monday.
|
|
1301
|
+
*
|
|
1302
|
+
* `getWeekInfo` reports 1–7 with 1 = Monday and 7 = Sunday; `Date.getDay()` uses 0 = Sunday.
|
|
1303
|
+
* Converting between the two is exactly the kind of off-by-one that silently shifts a whole
|
|
1304
|
+
* calendar by a day, which is why it happens here once.
|
|
1305
|
+
*/
|
|
1306
|
+
declare function localeFirstDayOfWeek(locale: string): number;
|
|
1307
|
+
/**
|
|
1308
|
+
* Formats a date against a token pattern.
|
|
1309
|
+
*
|
|
1310
|
+
* Supported tokens: `yyyy`, `MM`, `dd`, `HH` (24h), `hh` (12h), `mm`, `ss`, `a` (AM/PM).
|
|
1311
|
+
* Anything else is copied through literally.
|
|
1312
|
+
*
|
|
1313
|
+
* Deliberately **not** `Intl.DateTimeFormat`: this pattern is also what `parseDate` reads, and
|
|
1314
|
+
* a formatter whose output cannot be parsed back is how a typed date silently becomes a
|
|
1315
|
+
* different one. `Intl` is still used for month and weekday *names*, which are never parsed.
|
|
1316
|
+
*/
|
|
1317
|
+
declare function formatDate(date: Date, pattern: string): string;
|
|
1318
|
+
/**
|
|
1319
|
+
* Reads a date back out of text written in `pattern`. Returns `null` when the text doesn't
|
|
1320
|
+
* match, or matches but isn't a real date (`31.02.2026`).
|
|
1321
|
+
*
|
|
1322
|
+
* The out-of-range check matters: `new Date(2026, 1, 31)` happily rolls over to 3 March, so a
|
|
1323
|
+
* typo would be accepted as a different date rather than rejected.
|
|
1324
|
+
*/
|
|
1325
|
+
declare function parseDate(text: string, pattern: string): Date | null;
|
|
1326
|
+
|
|
1327
|
+
/** What `gog-calendar` and `gog-datepicker` carry, depending on `selectionMode`. */
|
|
1328
|
+
type GogDatepickerValue = Date | GogDateRange | null;
|
|
1329
|
+
/** One rendered day cell. Precomputed so the template stays free of logic. */
|
|
1330
|
+
interface GogCalendarDay {
|
|
1331
|
+
date: Date;
|
|
1332
|
+
label: string;
|
|
1333
|
+
outside: boolean;
|
|
1334
|
+
today: boolean;
|
|
1335
|
+
disabled: boolean;
|
|
1336
|
+
selected: boolean;
|
|
1337
|
+
rangeStart: boolean;
|
|
1338
|
+
rangeEnd: boolean;
|
|
1339
|
+
inRange: boolean;
|
|
1340
|
+
}
|
|
1341
|
+
/**
|
|
1342
|
+
* The month grid behind `gog-datepicker`, usable on its own for an always-visible calendar.
|
|
1343
|
+
*
|
|
1344
|
+
* ```html
|
|
1345
|
+
* <gog-calendar [(value)]="date" [min]="today" />
|
|
1346
|
+
* <gog-calendar selectionMode="range" [(value)]="range" [numberOfMonths]="2" />
|
|
1347
|
+
* ```
|
|
1348
|
+
*
|
|
1349
|
+
* Split out from the field deliberately: `gog-datepicker` is three widgets (a date, a range
|
|
1350
|
+
* and a time) behind one selector, and keeping the grid separate is what stops either half
|
|
1351
|
+
* from becoming unreadable. It is also exactly what `inline` mode renders.
|
|
1352
|
+
*/
|
|
1353
|
+
declare class CalendarComponent {
|
|
1354
|
+
/** Two-way bindable selection: a `Date` in `'single'` mode, a `GogDateRange` in `'range'`. */
|
|
1355
|
+
readonly value: _angular_core.ModelSignal<GogDatepickerValue>;
|
|
1356
|
+
readonly selectionMode: _angular_core.InputSignal<GogDateSelectionMode>;
|
|
1357
|
+
readonly min: _angular_core.InputSignal<Date | null>;
|
|
1358
|
+
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1359
|
+
/**
|
|
1360
|
+
* Extra exclusions, as a predicate rather than a list: an array cannot express "weekends"
|
|
1361
|
+
* or "public holidays" without the consumer materialising every date in range first.
|
|
1362
|
+
*/
|
|
1363
|
+
readonly disabledDates: _angular_core.InputSignal<((date: Date) => boolean) | null>;
|
|
1364
|
+
/** BCP-47 tag driving the month and weekday names. */
|
|
1365
|
+
readonly locale: _angular_core.InputSignal<string>;
|
|
1366
|
+
/** 0 = Sunday … 6 = Saturday. Unset, it comes from the locale. */
|
|
1367
|
+
readonly firstDayOfWeek: _angular_core.InputSignal<number | null>;
|
|
1368
|
+
/** Which month to open on when there is no selection yet. */
|
|
1369
|
+
readonly defaultMonth: _angular_core.InputSignal<Date | null>;
|
|
1370
|
+
/** How many months to show side by side. Two is what makes a range picker usable. */
|
|
1371
|
+
readonly numberOfMonths: _angular_core.InputSignal<number>;
|
|
1372
|
+
readonly showTime: _angular_core.InputSignal<boolean>;
|
|
1373
|
+
readonly hourFormat: _angular_core.InputSignal<GogHourFormat>;
|
|
1374
|
+
readonly minuteStep: _angular_core.InputSignal<number>;
|
|
1375
|
+
readonly showSeconds: _angular_core.InputSignal<boolean>;
|
|
1376
|
+
/**
|
|
1377
|
+
* The "Today" button, which **selects** today's date — the view follows, because the
|
|
1378
|
+
* selection is what the calendar opens on.
|
|
1379
|
+
*
|
|
1380
|
+
* Kept separate from `showThisMonthButton` on purpose: one button that both selected and
|
|
1381
|
+
* navigated read as "jump to today" to anyone who pressed it after paging away, and there is
|
|
1382
|
+
* no wording that makes a single control unambiguous about which of the two it does.
|
|
1383
|
+
*/
|
|
1384
|
+
readonly showTodayButton: _angular_core.InputSignal<boolean>;
|
|
1385
|
+
/**
|
|
1386
|
+
* The "This month" button, which only moves the *view* back to the current month and leaves
|
|
1387
|
+
* the selection alone. Off by default — it is for browsing far from today without committing
|
|
1388
|
+
* to anything, which is the rarer of the two needs.
|
|
1389
|
+
*/
|
|
1390
|
+
readonly showThisMonthButton: _angular_core.InputSignal<boolean>;
|
|
1391
|
+
readonly size: _angular_core.InputSignal<GogSize>;
|
|
1392
|
+
readonly todayLabel: _angular_core.InputSignal<string>;
|
|
1393
|
+
readonly thisMonthLabel: _angular_core.InputSignal<string>;
|
|
1394
|
+
readonly previousMonthLabel: _angular_core.InputSignal<string>;
|
|
1395
|
+
readonly nextMonthLabel: _angular_core.InputSignal<string>;
|
|
1396
|
+
readonly previousYearLabel: _angular_core.InputSignal<string>;
|
|
1397
|
+
readonly nextYearLabel: _angular_core.InputSignal<string>;
|
|
1398
|
+
/** Emitted when a selection is *complete* — a day in single mode, both ends of a range. */
|
|
1399
|
+
readonly gogDateSelect: _angular_core.OutputEmitterRef<GogDatepickerValue>;
|
|
1400
|
+
private readonly elRef;
|
|
1401
|
+
/** First of the leftmost visible month. */
|
|
1402
|
+
private readonly viewMonth;
|
|
1403
|
+
/** The cell the keyboard is on, and the only one carrying `tabindex="0"`. */
|
|
1404
|
+
protected readonly focusedDate: _angular_core.WritableSignal<Date>;
|
|
1405
|
+
/** Drives the range preview while the second end is still being chosen. */
|
|
1406
|
+
protected readonly hoverDate: _angular_core.WritableSignal<Date | null>;
|
|
1407
|
+
/** Whether a focus move should also pull the DOM focus over — only after a keypress. */
|
|
1408
|
+
private pendingFocus;
|
|
1409
|
+
protected readonly resolvedFirstDayOfWeek: _angular_core.Signal<number>;
|
|
1410
|
+
protected readonly weekdays: _angular_core.Signal<string[]>;
|
|
1411
|
+
private readonly months;
|
|
1412
|
+
private readonly range;
|
|
1413
|
+
private readonly singleDate;
|
|
1414
|
+
/** Start/end as currently *displayed*, including the end the pointer is hovering over. */
|
|
1415
|
+
private readonly previewRange;
|
|
1416
|
+
/** One entry per visible month; each is a 6×7 grid. */
|
|
1417
|
+
protected readonly monthViews: _angular_core.Signal<{
|
|
1418
|
+
label: string;
|
|
1419
|
+
weeks: GogCalendarDay[][];
|
|
1420
|
+
}[]>;
|
|
1421
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
1422
|
+
/**
|
|
1423
|
+
* Whether today can actually be picked — `min`, `max` or `disabledDates` may rule it out, and
|
|
1424
|
+
* a "Today" button that silently does nothing is worse than one that is visibly unavailable.
|
|
1425
|
+
* The signal reads inside `isDayDisabled` are what make this follow those inputs.
|
|
1426
|
+
*/
|
|
1427
|
+
protected readonly isTodaySelectable: _angular_core.Signal<boolean>;
|
|
1428
|
+
protected readonly timeSource: _angular_core.Signal<Date | null>;
|
|
1429
|
+
protected readonly hours: _angular_core.Signal<number>;
|
|
1430
|
+
protected readonly minutes: _angular_core.Signal<number>;
|
|
1431
|
+
protected readonly seconds: _angular_core.Signal<number>;
|
|
1432
|
+
protected readonly isPm: _angular_core.Signal<boolean>;
|
|
1433
|
+
protected readonly maxHour: _angular_core.Signal<12 | 23>;
|
|
1434
|
+
protected readonly minHour: _angular_core.Signal<0 | 1>;
|
|
1435
|
+
constructor();
|
|
1436
|
+
/** Steps the view by whole months or years. */
|
|
1437
|
+
protected shiftView(months: number): void;
|
|
1438
|
+
protected shiftViewYears(years: number): void;
|
|
1439
|
+
protected onDayClick(day: GogCalendarDay): void;
|
|
1440
|
+
protected onDayHover(day: GogCalendarDay): void;
|
|
1441
|
+
protected onGridLeave(): void;
|
|
1442
|
+
/**
|
|
1443
|
+
* Selects today. The view needs no separate nudge: the selection is the anchor the calendar
|
|
1444
|
+
* opens on, so moving it there moves the month too.
|
|
1445
|
+
*/
|
|
1446
|
+
protected selectToday(): void;
|
|
1447
|
+
/** Moves the view back to the current month, leaving the selection untouched. */
|
|
1448
|
+
protected goToThisMonth(): void;
|
|
1449
|
+
/**
|
|
1450
|
+
* The ARIA grid pattern's keyboard contract: arrows by day, PageUp/PageDown by month,
|
|
1451
|
+
* Shift + those by year, Home/End to the ends of the week. Movement is clamped into
|
|
1452
|
+
* `[min, max]` so the caret cannot wander into a region nothing can be picked from.
|
|
1453
|
+
*/
|
|
1454
|
+
protected onGridKeydown(event: KeyboardEvent): void;
|
|
1455
|
+
protected onHourInput(event: Event): void;
|
|
1456
|
+
protected onMinuteInput(event: Event): void;
|
|
1457
|
+
protected onSecondInput(event: Event): void;
|
|
1458
|
+
protected toggleMeridiem(): void;
|
|
1459
|
+
private selectionAnchor;
|
|
1460
|
+
private isDayDisabled;
|
|
1461
|
+
private buildWeeks;
|
|
1462
|
+
private select;
|
|
1463
|
+
private commit;
|
|
1464
|
+
private applyTime;
|
|
1465
|
+
/**
|
|
1466
|
+
* Moves the DOM focus onto the newly focused cell, but only after a key or button press —
|
|
1467
|
+
* never in response to the selection changing, which would steal focus from whatever the
|
|
1468
|
+
* consumer is doing elsewhere on the page.
|
|
1469
|
+
*/
|
|
1470
|
+
private applyPendingFocus;
|
|
1471
|
+
protected isFocusedDay(date: Date): boolean;
|
|
1472
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
|
|
1473
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "gog-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "defaultMonth": { "alias": "defaultMonth"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showThisMonthButton": { "alias": "showThisMonthButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "thisMonthLabel": { "alias": "thisMonthLabel"; "required": false; "isSignal": true; }; "previousMonthLabel": { "alias": "previousMonthLabel"; "required": false; "isSignal": true; }; "nextMonthLabel": { "alias": "nextMonthLabel"; "required": false; "isSignal": true; }; "previousYearLabel": { "alias": "previousYearLabel"; "required": false; "isSignal": true; }; "nextYearLabel": { "alias": "nextYearLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "gogDateSelect": "gogDateSelect"; }, never, never, true, never>;
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
/**
|
|
1477
|
+
* A date field with a calendar panel.
|
|
1478
|
+
*
|
|
1479
|
+
* ```html
|
|
1480
|
+
* <gog-datepicker [(value)]="date" label="Дата рождения" [max]="today" />
|
|
1481
|
+
* <gog-datepicker selectionMode="range" [(value)]="range" [numberOfMonths]="2" />
|
|
1482
|
+
* <gog-datepicker [showTime]="true" hourFormat="24" [(value)]="when" />
|
|
1483
|
+
* ```
|
|
1484
|
+
*
|
|
1485
|
+
* Native `Date`, no date library and no adapter abstraction: this package has zero runtime
|
|
1486
|
+
* dependencies, and pulling one in for a single component would be the largest dependency
|
|
1487
|
+
* decision it has ever made. `Intl` covers month and weekday names; the display/parse format is
|
|
1488
|
+
* a token pattern (`dd.MM.yyyy`) so what is written can always be read back — see
|
|
1489
|
+
* `date-utils.ts`, which also explains why nothing here goes near `toISOString()`.
|
|
1490
|
+
*
|
|
1491
|
+
* The calendar itself is `gog-calendar`, exported separately and usable on its own. `inline`
|
|
1492
|
+
* mode is literally that component rendered without this field.
|
|
1493
|
+
*/
|
|
1494
|
+
declare class DatepickerComponent implements ControlValueAccessor, DoCheck {
|
|
1495
|
+
private static nextUid;
|
|
1496
|
+
protected readonly uid: number;
|
|
1497
|
+
readonly inputId: _angular_core.InputSignal<string>;
|
|
1498
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1499
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1500
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1501
|
+
readonly selectionMode: _angular_core.InputSignal<GogDateSelectionMode>;
|
|
1502
|
+
readonly min: _angular_core.InputSignal<Date | null>;
|
|
1503
|
+
readonly max: _angular_core.InputSignal<Date | null>;
|
|
1504
|
+
readonly disabledDates: _angular_core.InputSignal<((date: Date) => boolean) | null>;
|
|
1505
|
+
readonly defaultMonth: _angular_core.InputSignal<Date | null>;
|
|
1506
|
+
readonly numberOfMonths: _angular_core.InputSignal<number>;
|
|
1507
|
+
readonly showTime: _angular_core.InputSignal<boolean>;
|
|
1508
|
+
readonly hourFormat: _angular_core.InputSignal<GogHourFormat>;
|
|
1509
|
+
readonly minuteStep: _angular_core.InputSignal<number>;
|
|
1510
|
+
readonly showSeconds: _angular_core.InputSignal<boolean>;
|
|
1511
|
+
/** The "Today" button in the panel's footer, which **selects** today's date. */
|
|
1512
|
+
readonly showTodayButton: _angular_core.InputSignal<boolean>;
|
|
1513
|
+
/**
|
|
1514
|
+
* A second footer button that only moves the *view* back to the current month, leaving the
|
|
1515
|
+
* selection alone. Off by default; see `gog-calendar` for why the two are separate controls.
|
|
1516
|
+
*/
|
|
1517
|
+
readonly showThisMonthButton: _angular_core.InputSignal<boolean>;
|
|
1518
|
+
readonly todayLabel: _angular_core.InputSignal<string>;
|
|
1519
|
+
readonly thisMonthLabel: _angular_core.InputSignal<string>;
|
|
1520
|
+
/**
|
|
1521
|
+
* Display and parse pattern (`dd.MM.yyyy`, `yyyy-MM-dd`, …). Left unset it is derived from
|
|
1522
|
+
* `showTime`, so switching the time section on does not also require restating the format.
|
|
1523
|
+
*/
|
|
1524
|
+
readonly format: _angular_core.InputSignal<string | null>;
|
|
1525
|
+
/** Unset, falls back to `GOG_CONFIG.datepicker.locale`, then to `'en-US'`. */
|
|
1526
|
+
readonly locale: _angular_core.InputSignal<string | undefined>;
|
|
1527
|
+
/** Unset, falls back to `GOG_CONFIG.datepicker.firstDayOfWeek`, then to the locale's own. */
|
|
1528
|
+
readonly firstDayOfWeek: _angular_core.InputSignal<number | undefined>;
|
|
1529
|
+
/**
|
|
1530
|
+
* Whether the date can be typed as well as picked. Typed text is parsed against `format`;
|
|
1531
|
+
* text that isn't a real date leaves the value untouched and is reverted on blur, rather
|
|
1532
|
+
* than silently resetting the field.
|
|
1533
|
+
*/
|
|
1534
|
+
readonly allowTextInput: _angular_core.InputSignal<boolean>;
|
|
1535
|
+
/** Renders the calendar directly, with no field and no panel. */
|
|
1536
|
+
readonly inline: _angular_core.InputSignal<boolean>;
|
|
1537
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1538
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
1539
|
+
readonly clearable: _angular_core.InputSignal<boolean | undefined>;
|
|
1540
|
+
readonly clearAriaLabel: _angular_core.InputSignal<string>;
|
|
1541
|
+
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
1542
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
1543
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
1544
|
+
readonly floatLabel: _angular_core.InputSignal<GogFloatLabelVariant | undefined>;
|
|
1545
|
+
readonly floatLabelShowPlaceholder: _angular_core.InputSignal<boolean | undefined>;
|
|
1546
|
+
readonly appendToBody: _angular_core.InputSignal<boolean | undefined>;
|
|
1547
|
+
readonly dropdownDirection: _angular_core.InputSignal<GogDropdownDirection | undefined>;
|
|
1548
|
+
readonly dropdownZIndex: _angular_core.InputSignal<number | null>;
|
|
1549
|
+
readonly openCalendarLabel: _angular_core.InputSignal<string>;
|
|
1550
|
+
/** Two-way bindable value: a `Date` in `'single'` mode, a `GogDateRange` in `'range'`. */
|
|
1551
|
+
readonly value: _angular_core.ModelSignal<GogDatepickerValue>;
|
|
1552
|
+
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
1553
|
+
private readonly elRef;
|
|
1554
|
+
private readonly document;
|
|
1555
|
+
private readonly isBrowser;
|
|
1556
|
+
private readonly destroyRef;
|
|
1557
|
+
private readonly ngControl;
|
|
1558
|
+
private readonly globalConfig;
|
|
1559
|
+
private readonly overlay;
|
|
1560
|
+
protected readonly panelTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
1561
|
+
private readonly cvaDisabled;
|
|
1562
|
+
protected readonly isFocused: _angular_core.WritableSignal<boolean>;
|
|
1563
|
+
protected readonly panelPlacement: _angular_core.WritableSignal<GogDropdownPlacement | null>;
|
|
1564
|
+
protected readonly directionState: _angular_core.WritableSignal<"up" | "down">;
|
|
1565
|
+
/** What is in the `<input>`; diverges from `value` only while the user is typing. */
|
|
1566
|
+
protected readonly text: _angular_core.WritableSignal<string>;
|
|
1567
|
+
/**
|
|
1568
|
+
* Whether the user is part-way through typing a date.
|
|
1569
|
+
*
|
|
1570
|
+
* Deliberately **not** the same thing as "the field has focus": picking a date from the
|
|
1571
|
+
* calendar hands focus back to the field, and keying the guard on focus meant the text was
|
|
1572
|
+
* then refused — you would pick a date and watch the field stay empty.
|
|
1573
|
+
*/
|
|
1574
|
+
private readonly isEditing;
|
|
1575
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1576
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
1577
|
+
protected readonly resolvedErrorDisplay: _angular_core.Signal<GogErrorDisplay>;
|
|
1578
|
+
protected readonly resolvedAppendToBody: _angular_core.Signal<boolean>;
|
|
1579
|
+
protected readonly resolvedDirection: _angular_core.Signal<GogDropdownDirection>;
|
|
1580
|
+
protected readonly resolvedLocale: _angular_core.Signal<string>;
|
|
1581
|
+
protected readonly resolvedFirstDayOfWeek: _angular_core.Signal<number | null>;
|
|
1582
|
+
/** Derived from `showTime` so turning the clock on doesn't also require a new format. */
|
|
1583
|
+
protected readonly resolvedFormat: _angular_core.Signal<string>;
|
|
1584
|
+
private readonly errorState;
|
|
1585
|
+
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
1586
|
+
protected readonly visibleError: _angular_core.Signal<string>;
|
|
1587
|
+
protected readonly hasValue: _angular_core.Signal<boolean>;
|
|
1588
|
+
private readonly clearableState;
|
|
1589
|
+
protected readonly showClear: _angular_core.Signal<boolean>;
|
|
1590
|
+
private readonly floatLabelState;
|
|
1591
|
+
protected readonly resolvedFloatLabel: _angular_core.Signal<GogFloatLabelVariant>;
|
|
1592
|
+
protected readonly isFloatLabelActive: _angular_core.Signal<boolean>;
|
|
1593
|
+
protected readonly isFloatLabelFloated: _angular_core.Signal<boolean>;
|
|
1594
|
+
protected readonly effectivePlaceholder: _angular_core.Signal<string>;
|
|
1595
|
+
protected readonly triggerId: _angular_core.Signal<string>;
|
|
1596
|
+
protected readonly panelId: _angular_core.Signal<string>;
|
|
1597
|
+
protected readonly labelId: _angular_core.Signal<string>;
|
|
1598
|
+
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
1599
|
+
protected readonly sizeClass: _angular_core.Signal<string>;
|
|
1600
|
+
/** How `value` reads in the field. A half-picked range shows only its start. */
|
|
1601
|
+
protected readonly displayText: _angular_core.Signal<string>;
|
|
1602
|
+
private onChangeFn;
|
|
1603
|
+
private onTouchedFn;
|
|
1604
|
+
private repositionFrame;
|
|
1605
|
+
constructor();
|
|
1606
|
+
ngDoCheck(): void;
|
|
1607
|
+
writeValue(val: GogDatepickerValue): void;
|
|
1608
|
+
registerOnChange(fn: (val: GogDatepickerValue) => void): void;
|
|
1609
|
+
registerOnTouched(fn: () => void): void;
|
|
1610
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1611
|
+
protected toggle(): void;
|
|
1612
|
+
protected open(): void;
|
|
1613
|
+
protected close(): void;
|
|
1614
|
+
/** A completed selection closes the panel; a half-picked range leaves it open. */
|
|
1615
|
+
protected onCalendarSelect(next: GogDatepickerValue): void;
|
|
1616
|
+
/** Every calendar change, including the half-picked ones, has to reach the form. */
|
|
1617
|
+
protected onCalendarValue(next: GogDatepickerValue): void;
|
|
1618
|
+
protected onTextInput(event: Event): void;
|
|
1619
|
+
protected onFocus(): void;
|
|
1620
|
+
protected onBlur(): void;
|
|
1621
|
+
protected onTriggerKeydown(event: KeyboardEvent): void;
|
|
1622
|
+
protected clearValue(event: Event): void;
|
|
1623
|
+
protected focusTrigger(): void;
|
|
1624
|
+
private commit;
|
|
1625
|
+
/**
|
|
1626
|
+
* Binds click-outside and reposition listeners only while the panel is open — bound
|
|
1627
|
+
* permanently, every datepicker on the page would run a handler on every document click and
|
|
1628
|
+
* every scroll frame whether or not it is showing anything.
|
|
1629
|
+
*/
|
|
1630
|
+
private bindWhileOpen;
|
|
1631
|
+
private closeIfClickedOutside;
|
|
1632
|
+
private scheduleReposition;
|
|
1633
|
+
private updatePlacement;
|
|
1634
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
|
|
1635
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "gog-datepicker", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "defaultMonth": { "alias": "defaultMonth"; "required": false; "isSignal": true; }; "numberOfMonths": { "alias": "numberOfMonths"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showThisMonthButton": { "alias": "showThisMonthButton"; "required": false; "isSignal": true; }; "todayLabel": { "alias": "todayLabel"; "required": false; "isSignal": true; }; "thisMonthLabel": { "alias": "thisMonthLabel"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "allowTextInput": { "alias": "allowTextInput"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatLabelShowPlaceholder": { "alias": "floatLabelShowPlaceholder"; "required": false; "isSignal": true; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "dropdownDirection": { "alias": "dropdownDirection"; "required": false; "isSignal": true; }; "dropdownZIndex": { "alias": "dropdownZIndex"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
1636
|
+
}
|
|
1637
|
+
|
|
1638
|
+
/**
|
|
1639
|
+
* A rule separating two regions, optionally with a label running through it.
|
|
1640
|
+
*
|
|
1641
|
+
* ```html
|
|
1642
|
+
* <gog-divider />
|
|
1643
|
+
* <gog-divider orientation="vertical" />
|
|
1644
|
+
* <gog-divider>ИЛИ</gog-divider>
|
|
1645
|
+
* ```
|
|
1646
|
+
*
|
|
1647
|
+
* The label is projected content rather than a `label` input: it is markup, so a consumer can
|
|
1648
|
+
* put an icon or a `<gog-tag>` in it without the component growing an input per case. There is
|
|
1649
|
+
* no `hasLabel` input either — the stylesheet keys off whether anything was actually projected,
|
|
1650
|
+
* so the two forms above are the whole API.
|
|
1651
|
+
*/
|
|
1652
|
+
declare class DividerComponent {
|
|
1653
|
+
readonly orientation: _angular_core.InputSignal<GogOrientation>;
|
|
1654
|
+
readonly variant: _angular_core.InputSignal<GogDividerVariant>;
|
|
1655
|
+
/**
|
|
1656
|
+
* Indents the rule from the leading edge so it lines up with the *text* of a list whose rows
|
|
1657
|
+
* start with an icon or avatar, instead of cutting across the whole row.
|
|
1658
|
+
*/
|
|
1659
|
+
readonly inset: _angular_core.InputSignal<boolean>;
|
|
1660
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
1661
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DividerComponent, never>;
|
|
1662
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DividerComponent, "gog-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
/**
|
|
1666
|
+
* A horizontal progress indicator.
|
|
1667
|
+
*
|
|
1668
|
+
* ```html
|
|
1669
|
+
* <gog-progressbar [value]="42" />
|
|
1670
|
+
* <gog-progressbar mode="indeterminate" ariaLabel="Загрузка" />
|
|
1671
|
+
* <gog-progressbar mode="buffer" [value]="42" [buffer]="70" />
|
|
1672
|
+
* ```
|
|
1673
|
+
*
|
|
1674
|
+
* `value` and `buffer` are percentages and are clamped to 0–100 rather than trusted: a bar
|
|
1675
|
+
* driven straight from `loaded / total` overshoots on the last chunk often enough that
|
|
1676
|
+
* clamping here is worth more than letting the caller find out from a broken layout.
|
|
1677
|
+
*/
|
|
1678
|
+
declare class ProgressbarComponent {
|
|
1679
|
+
protected readonly MIN = 0;
|
|
1680
|
+
protected readonly MAX = 100;
|
|
1681
|
+
/** Percentage complete, 0–100. Ignored in `'indeterminate'` mode. */
|
|
1682
|
+
readonly value: _angular_core.InputSignal<number>;
|
|
1683
|
+
/** Secondary level shown behind `value` in `'buffer'` mode — preloaded but not yet played. */
|
|
1684
|
+
readonly buffer: _angular_core.InputSignal<number>;
|
|
1685
|
+
readonly mode: _angular_core.InputSignal<GogProgressbarMode>;
|
|
1686
|
+
readonly variant: _angular_core.InputSignal<GogProgressbarVariant>;
|
|
1687
|
+
readonly size: _angular_core.InputSignal<GogSize>;
|
|
1688
|
+
/** Renders the percentage next to the bar. Off by default — most bars sit under a label. */
|
|
1689
|
+
readonly showValue: _angular_core.InputSignal<boolean>;
|
|
1690
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1691
|
+
protected readonly isIndeterminate: _angular_core.Signal<boolean>;
|
|
1692
|
+
protected readonly clampedValue: _angular_core.Signal<number>;
|
|
1693
|
+
protected readonly clampedBuffer: _angular_core.Signal<number>;
|
|
1694
|
+
protected readonly displayValue: _angular_core.Signal<string>;
|
|
1695
|
+
/** The fill is driven to 100% in indeterminate mode; the animation moves it, not the width. */
|
|
1696
|
+
protected readonly fillPercent: _angular_core.Signal<number>;
|
|
1697
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
1698
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressbarComponent, never>;
|
|
1699
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressbarComponent, "gog-progressbar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "buffer": { "alias": "buffer"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
/**
|
|
1703
|
+
* An on/off switch.
|
|
1704
|
+
*
|
|
1705
|
+
* ```html
|
|
1706
|
+
* <gog-toggle label="Уведомления" [(checked)]="on" />
|
|
1707
|
+
* <gog-toggle formControlName="darkMode" onLabel="ВКЛ" offLabel="ВЫКЛ" />
|
|
1708
|
+
* ```
|
|
1709
|
+
*
|
|
1710
|
+
* Next to `gog-checkbox` rather than a variant of it, because the two answer different
|
|
1711
|
+
* questions. A checkbox is "is this one of the things you selected"; a switch is "is this
|
|
1712
|
+
* setting on", takes effect immediately, and announces as **"switch, on"** rather than
|
|
1713
|
+
* "checkbox, checked". That announcement comes from `role="switch"` on a native
|
|
1714
|
+
* `<input type="checkbox">`, so keyboard, forms and assistive tech all still come from the
|
|
1715
|
+
* platform — only the painting differs.
|
|
1716
|
+
*/
|
|
1717
|
+
declare class ToggleComponent implements ControlValueAccessor {
|
|
206
1718
|
readonly label: _angular_core.InputSignal<string>;
|
|
207
1719
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
208
|
-
|
|
209
|
-
readonly
|
|
1720
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
1721
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
210
1722
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
211
1723
|
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
212
|
-
|
|
1724
|
+
/** Which side of the switch the label sits on. */
|
|
1725
|
+
readonly labelPosition: _angular_core.InputSignal<"start" | "end">;
|
|
213
1726
|
/**
|
|
214
|
-
*
|
|
1727
|
+
* Text rendered *inside* the track — the one thing a checkbox genuinely cannot do, and what
|
|
1728
|
+
* makes a switch readable at a glance in a dense settings list. Both must be short; the
|
|
1729
|
+
* track sizes to the wider of the two.
|
|
1730
|
+
*/
|
|
1731
|
+
readonly onLabel: _angular_core.InputSignal<string>;
|
|
1732
|
+
readonly offLabel: _angular_core.InputSignal<string>;
|
|
1733
|
+
/**
|
|
1734
|
+
* Two-way bindable on/off state: `[(checked)]="signal"`.
|
|
215
1735
|
* This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
|
|
216
1736
|
* when the component is used with `formControlName`/`[formControl]`.
|
|
217
1737
|
* Don't wire both a form directive AND `[(checked)]` to the same instance —
|
|
218
1738
|
* pick one, otherwise you end up with two competing sources of truth.
|
|
219
1739
|
*/
|
|
220
1740
|
readonly checked: _angular_core.ModelSignal<boolean>;
|
|
1741
|
+
private readonly ngControl;
|
|
1742
|
+
private readonly cvaDisabled;
|
|
1743
|
+
private readonly globalConfig;
|
|
1744
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
1745
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
1746
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1747
|
+
protected readonly hasTrackLabels: _angular_core.Signal<boolean>;
|
|
1748
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
1749
|
+
constructor();
|
|
1750
|
+
writeValue(val: boolean): void;
|
|
1751
|
+
registerOnChange(fn: (val: boolean) => void): void;
|
|
1752
|
+
registerOnTouched(fn: () => void): void;
|
|
1753
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1754
|
+
protected onInputChange(event: Event): void;
|
|
1755
|
+
protected onBlur(): void;
|
|
1756
|
+
private onCheckedChange;
|
|
1757
|
+
private onTouched;
|
|
1758
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
|
|
1759
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "gog-toggle", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "onLabel": { "alias": "onLabel"; "required": false; "isSignal": true; }; "offLabel": { "alias": "offLabel"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
1760
|
+
}
|
|
1761
|
+
|
|
1762
|
+
/** A single choice in a `gog-radio-group`. */
|
|
1763
|
+
interface GogRadioOption {
|
|
1764
|
+
id: string | number;
|
|
1765
|
+
label: string;
|
|
1766
|
+
disabled?: boolean;
|
|
1767
|
+
}
|
|
1768
|
+
declare class RadioGroupComponent implements ControlValueAccessor {
|
|
1769
|
+
private static nextUid;
|
|
1770
|
+
protected readonly uid: string;
|
|
1771
|
+
readonly options: _angular_core.InputSignal<GogRadioOption[]>;
|
|
1772
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1773
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1774
|
+
/** Shared `name` for the underlying native radios. Auto-generated per instance if unset. */
|
|
1775
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
1776
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
1777
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
1778
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1779
|
+
readonly orientation: _angular_core.InputSignal<GogOrientation>;
|
|
1780
|
+
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
1781
|
+
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
1782
|
+
/** Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to `'manual'`. */
|
|
1783
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
1784
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
1785
|
+
/** Two-way bindable selected option id: `[(value)]="signal"`. */
|
|
1786
|
+
readonly value: _angular_core.ModelSignal<string | number | null>;
|
|
1787
|
+
private readonly ngControl;
|
|
1788
|
+
private readonly cvaDisabled;
|
|
1789
|
+
private readonly globalConfig;
|
|
1790
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
1791
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
1792
|
+
private readonly resolvedErrorDisplay;
|
|
1793
|
+
private readonly errorState;
|
|
1794
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
221
1795
|
protected readonly controlSize: _angular_core.Signal<{
|
|
222
1796
|
readonly boxSize: "var(--gog-control-checkbox-box-size-xsm, 12px)";
|
|
223
1797
|
readonly labelSize: "var(--gog-control-checkbox-label-size-xsm, 0.6875rem)";
|
|
@@ -240,23 +1814,26 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
240
1814
|
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-slg, 22px)";
|
|
241
1815
|
}>;
|
|
242
1816
|
protected readonly boxSize: _angular_core.Signal<"var(--gog-control-checkbox-box-size-xsm, 12px)" | "var(--gog-control-checkbox-box-size-sm, 18px)" | "var(--gog-control-checkbox-box-size-md, 24px)" | "var(--gog-control-checkbox-box-size-lg, 32px)" | "var(--gog-control-checkbox-box-size-slg, 40px)">;
|
|
243
|
-
protected readonly checkboxPadding = "var(--gog-control-checkbox-padding, 6px)";
|
|
244
1817
|
protected readonly labelSize: _angular_core.Signal<"var(--gog-control-checkbox-label-size-xsm, 0.6875rem)" | "var(--gog-control-checkbox-label-size-sm, 0.8125rem)" | "var(--gog-control-checkbox-label-size-md, 0.9375rem)" | "var(--gog-control-checkbox-label-size-lg, 1.0625rem)" | "var(--gog-control-checkbox-label-size-slg, 1.1875rem)">;
|
|
245
|
-
protected readonly
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
protected readonly
|
|
1818
|
+
protected readonly radioPadding = "var(--gog-control-checkbox-padding, 6px)";
|
|
1819
|
+
protected readonly groupName: _angular_core.Signal<string>;
|
|
1820
|
+
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
1821
|
+
protected readonly visibleError: _angular_core.Signal<string>;
|
|
1822
|
+
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
1823
|
+
protected readonly labelId: _angular_core.Signal<string | null>;
|
|
1824
|
+
private onChange;
|
|
1825
|
+
private onTouched;
|
|
249
1826
|
constructor();
|
|
250
|
-
writeValue(val:
|
|
251
|
-
registerOnChange(fn: (val:
|
|
1827
|
+
writeValue(val: string | number | null): void;
|
|
1828
|
+
registerOnChange(fn: (val: string | number | null) => void): void;
|
|
252
1829
|
registerOnTouched(fn: () => void): void;
|
|
253
1830
|
setDisabledState(isDisabled: boolean): void;
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
259
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
1831
|
+
protected isOptionDisabled(option: GogRadioOption): boolean;
|
|
1832
|
+
protected isSelected(option: GogRadioOption): boolean;
|
|
1833
|
+
protected onOptionChange(event: Event, option: GogRadioOption): void;
|
|
1834
|
+
protected onBlur(): void;
|
|
1835
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
|
|
1836
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroupComponent, "gog-radio-group", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
260
1837
|
}
|
|
261
1838
|
|
|
262
1839
|
interface ConfirmDialogData {
|
|
@@ -276,21 +1853,6 @@ declare class ConfirmationDialogComponent {
|
|
|
276
1853
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmationDialogComponent, "gog-confirmation-dialog", never, {}, {}, never, never, true, never>;
|
|
277
1854
|
}
|
|
278
1855
|
|
|
279
|
-
type GogIconName = 'check' | 'close' | 'chevron-up' | 'chevron-down' | 'sort' | 'sort-up' | 'sort-down' | 'success' | 'error' | 'warning' | 'info' | 'checkbox' | 'checkbox-checked' | 'eye' | 'eye-off';
|
|
280
|
-
declare const ICON_DEFS: Record<GogIconName, string>;
|
|
281
|
-
|
|
282
|
-
declare class IconComponent {
|
|
283
|
-
private readonly sanitizer;
|
|
284
|
-
readonly name: _angular_core.InputSignal<GogIconName>;
|
|
285
|
-
readonly template: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
286
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
287
|
-
readonly ariaHidden: _angular_core.InputSignal<boolean>;
|
|
288
|
-
protected readonly ariaLabel: _angular_core.Signal<string | null>;
|
|
289
|
-
protected readonly iconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
|
|
290
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
291
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<IconComponent, "gog-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaHidden": { "alias": "ariaHidden"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
1856
|
interface DialogConfig {
|
|
295
1857
|
title?: string;
|
|
296
1858
|
component: Type<unknown>;
|
|
@@ -405,6 +1967,11 @@ interface ToastConfig {
|
|
|
405
1967
|
}
|
|
406
1968
|
declare class ToastService {
|
|
407
1969
|
readonly toasts: _angular_core.WritableSignal<Toast[]>;
|
|
1970
|
+
/**
|
|
1971
|
+
* Read once at construction rather than per `show()` call: this is a root-provided singleton,
|
|
1972
|
+
* so the config it resolves against cannot change over its lifetime anyway.
|
|
1973
|
+
*/
|
|
1974
|
+
private readonly globalConfig;
|
|
408
1975
|
private generateId;
|
|
409
1976
|
show(config: ToastConfig): string;
|
|
410
1977
|
dismiss(id: string): void;
|
|
@@ -474,17 +2041,39 @@ declare class ToastContainerComponent {
|
|
|
474
2041
|
}
|
|
475
2042
|
|
|
476
2043
|
/**
|
|
477
|
-
*
|
|
478
|
-
* consumer decides when to clear it, e.g.
|
|
479
|
-
* `errorMessage="control.invalid && control.touched ? 'Required' : ''"`.
|
|
2044
|
+
* Arbitrary markup in the field's leading slot — an icon, a button, a prefix label:
|
|
480
2045
|
*
|
|
481
|
-
*
|
|
482
|
-
*
|
|
483
|
-
*
|
|
484
|
-
*
|
|
2046
|
+
* ```html
|
|
2047
|
+
* <gog-inputfield label="Amount">
|
|
2048
|
+
* <span gogInputAddonStart>€</span>
|
|
2049
|
+
* </gog-inputfield>
|
|
2050
|
+
*
|
|
2051
|
+
* <gog-inputfield label="Search">
|
|
2052
|
+
* <button gogInputAddonStart type="button" aria-label="Search" (click)="run()">
|
|
2053
|
+
* <gog-icon name="check" />
|
|
2054
|
+
* </button>
|
|
2055
|
+
* </gog-inputfield>
|
|
2056
|
+
* ```
|
|
2057
|
+
*
|
|
2058
|
+
* Unlike the deprecated `iconStartTemplate` / `iconStartFn` / `iconStartLabel` trio this
|
|
2059
|
+
* replaces, the projected element is a normal DOM element: it carries its own `aria-label`,
|
|
2060
|
+
* its own click handler, and its own disabled state, so the component needs no input per
|
|
2061
|
+
* capability. `iconStart` — a bare icon name — stays, since that really is the common case.
|
|
485
2062
|
*/
|
|
486
|
-
|
|
487
|
-
|
|
2063
|
+
declare class GogInputAddonStartDirective {
|
|
2064
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogInputAddonStartDirective, never>;
|
|
2065
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogInputAddonStartDirective, "[gogInputAddonStart]", never, {}, {}, never, never, true, never>;
|
|
2066
|
+
}
|
|
2067
|
+
/**
|
|
2068
|
+
* Arbitrary markup in the field's trailing slot — see `GogInputAddonStartDirective`.
|
|
2069
|
+
*
|
|
2070
|
+
* On `type="password"` the built-in show/hide toggle owns this slot and a projected end addon
|
|
2071
|
+
* is ignored, so the reveal control can never be accidentally replaced by a decorative one.
|
|
2072
|
+
*/
|
|
2073
|
+
declare class GogInputAddonEndDirective {
|
|
2074
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogInputAddonEndDirective, never>;
|
|
2075
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogInputAddonEndDirective, "[gogInputAddonEnd]", never, {}, {}, never, never, true, never>;
|
|
2076
|
+
}
|
|
488
2077
|
declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
489
2078
|
readonly label: _angular_core.InputSignal<string>;
|
|
490
2079
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
@@ -498,12 +2087,16 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
498
2087
|
/** Only applied when `type="number"`. */
|
|
499
2088
|
readonly step: _angular_core.InputSignal<number | null>;
|
|
500
2089
|
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
501
|
-
/**
|
|
502
|
-
|
|
2090
|
+
/**
|
|
2091
|
+
* See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
|
|
2092
|
+
* `'manual'` — matching every other control in the library.
|
|
2093
|
+
*/
|
|
2094
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
503
2095
|
readonly name: _angular_core.InputSignal<string>;
|
|
504
2096
|
readonly inputId: _angular_core.InputSignal<string>;
|
|
505
2097
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
506
|
-
|
|
2098
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
2099
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
507
2100
|
/**
|
|
508
2101
|
* Full width of the container by default, matching every other field-style control.
|
|
509
2102
|
* Set to `false` to shrink the field to fit its content instead.
|
|
@@ -513,22 +2106,47 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
513
2106
|
readonly iconStart: _angular_core.InputSignal<"" | GogIconName>;
|
|
514
2107
|
/** Default icon name for the trailing icon. */
|
|
515
2108
|
readonly iconEnd: _angular_core.InputSignal<"" | GogIconName>;
|
|
516
|
-
/**
|
|
2109
|
+
/**
|
|
2110
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<span gogInputAddonStart>` element instead. Removed in 21.5.0.
|
|
2111
|
+
*/
|
|
517
2112
|
readonly iconStartTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
518
|
-
/**
|
|
2113
|
+
/**
|
|
2114
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<span gogInputAddonEnd>` element instead. Removed in 21.5.0.
|
|
2115
|
+
*/
|
|
519
2116
|
readonly iconEndTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
520
|
-
/**
|
|
2117
|
+
/**
|
|
2118
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<button gogInputAddonStart>` element instead. Removed in 21.5.0. A projected button carries its own
|
|
2119
|
+
* `(click)` handler, so no input is needed for it.
|
|
2120
|
+
*/
|
|
521
2121
|
readonly iconStartFn: _angular_core.InputSignal<(() => void) | null>;
|
|
522
|
-
/**
|
|
2122
|
+
/**
|
|
2123
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<button gogInputAddonEnd>` element instead. Removed in 21.5.0. A projected button carries its own
|
|
2124
|
+
* `(click)` handler, so no input is needed for it.
|
|
2125
|
+
*/
|
|
523
2126
|
readonly iconEndFn: _angular_core.InputSignal<(() => void) | null>;
|
|
524
|
-
/**
|
|
2127
|
+
/**
|
|
2128
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<button gogInputAddonStart>` element instead. Removed in 21.5.0. Put `aria-label` on that button.
|
|
2129
|
+
*/
|
|
525
2130
|
readonly iconStartLabel: _angular_core.InputSignal<string>;
|
|
526
|
-
/**
|
|
2131
|
+
/**
|
|
2132
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<button gogInputAddonEnd>` element instead. Removed in 21.5.0. Put `aria-label` on that button.
|
|
2133
|
+
*/
|
|
527
2134
|
readonly iconEndLabel: _angular_core.InputSignal<string>;
|
|
528
2135
|
/** aria-label for the reveal-password button, shown when `type` is `'password'` */
|
|
529
2136
|
readonly showPasswordLabel: _angular_core.InputSignal<string>;
|
|
530
2137
|
/** aria-label for the hide-password button, shown once the password is revealed */
|
|
531
2138
|
readonly hidePasswordLabel: _angular_core.InputSignal<string>;
|
|
2139
|
+
/**
|
|
2140
|
+
* Whether to offer a clear button once the field has text. Unset, falls back to
|
|
2141
|
+
* `GOG_CONFIG.control.clearable`, then to `false`.
|
|
2142
|
+
*/
|
|
2143
|
+
readonly clearable: _angular_core.InputSignal<boolean | undefined>;
|
|
2144
|
+
/** Accessible name for the clear button. */
|
|
2145
|
+
readonly clearAriaLabel: _angular_core.InputSignal<string>;
|
|
2146
|
+
/** Unset, falls back to `GOG_CONFIG.floatLabel.variant`, then to `'none'` (off). */
|
|
2147
|
+
readonly floatLabel: _angular_core.InputSignal<GogFloatLabelVariant | undefined>;
|
|
2148
|
+
/** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
|
|
2149
|
+
readonly floatLabelShowPlaceholder: _angular_core.InputSignal<boolean | undefined>;
|
|
532
2150
|
/**
|
|
533
2151
|
* Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`.
|
|
534
2152
|
* Always a string, including for `type="number"` — that field's `formControl`/
|
|
@@ -537,9 +2155,20 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
537
2155
|
*/
|
|
538
2156
|
readonly value: _angular_core.ModelSignal<string>;
|
|
539
2157
|
private readonly ngControl;
|
|
2158
|
+
private readonly globalConfig;
|
|
540
2159
|
private readonly cvaDisabled;
|
|
2160
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
2161
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
2162
|
+
private readonly resolvedErrorDisplay;
|
|
541
2163
|
private readonly errorState;
|
|
542
2164
|
private readonly passwordVisible;
|
|
2165
|
+
/** Set from `(focus)`/`(blur)` on the `<input>` — see `onFocus`/`onBlur`. */
|
|
2166
|
+
protected readonly isFocused: _angular_core.WritableSignal<boolean>;
|
|
2167
|
+
/**
|
|
2168
|
+
* The single size modifier, replacing one `[class.gog-input-wrapper--<size>]` binding per size.
|
|
2169
|
+
* Empty for `'md'`: that is this component's default size and has no modifier rule of its own — every `gog-input-wrapper--*` chain bottoms out at it.
|
|
2170
|
+
*/
|
|
2171
|
+
protected readonly sizeClass: _angular_core.Signal<string>;
|
|
543
2172
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
544
2173
|
protected readonly isPasswordField: _angular_core.Signal<boolean>;
|
|
545
2174
|
protected readonly isNumberField: _angular_core.Signal<boolean>;
|
|
@@ -547,6 +2176,22 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
547
2176
|
protected readonly effectiveAutocomplete: _angular_core.Signal<string>;
|
|
548
2177
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
549
2178
|
protected readonly visibleError: _angular_core.Signal<string>;
|
|
2179
|
+
private readonly floatLabelState;
|
|
2180
|
+
private readonly clearableState;
|
|
2181
|
+
/** Whether to render the clear button right now — see `GogClearableState`. */
|
|
2182
|
+
protected readonly showClear: _angular_core.Signal<boolean>;
|
|
2183
|
+
protected readonly resolvedFloatLabel: _angular_core.Signal<GogFloatLabelVariant>;
|
|
2184
|
+
protected readonly isFloatLabelActive: _angular_core.Signal<boolean>;
|
|
2185
|
+
protected readonly isFloatLabelFloated: _angular_core.Signal<boolean>;
|
|
2186
|
+
protected readonly effectivePlaceholder: _angular_core.Signal<string>;
|
|
2187
|
+
/** Projected `gogInputAddonStart` element, if any. */
|
|
2188
|
+
protected readonly addonStart: _angular_core.Signal<GogInputAddonStartDirective | undefined>;
|
|
2189
|
+
/** Projected `gogInputAddonEnd` element, if any. */
|
|
2190
|
+
protected readonly addonEnd: _angular_core.Signal<GogInputAddonEndDirective | undefined>;
|
|
2191
|
+
/**
|
|
2192
|
+
* Drives the wrapper's `--icon-start` class, which widens the field's leading gutter. Counts
|
|
2193
|
+
* a projected addon as well as the legacy icon inputs, or the addon would overlap the text.
|
|
2194
|
+
*/
|
|
550
2195
|
protected readonly hasIconStart: _angular_core.Signal<boolean>;
|
|
551
2196
|
protected readonly hasIconStartAction: _angular_core.Signal<boolean>;
|
|
552
2197
|
/** For password fields the trailing icon is always the built-in show/hide toggle. */
|
|
@@ -566,21 +2211,28 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
566
2211
|
protected onIconStartClick(): void;
|
|
567
2212
|
protected onIconEndClick(): void;
|
|
568
2213
|
onInput(event: Event): void;
|
|
2214
|
+
/** Clears the field and notifies any attached form, then returns focus to the input. */
|
|
2215
|
+
protected clearValue(event: Event): void;
|
|
2216
|
+
onFocus(): void;
|
|
569
2217
|
onBlur(): void;
|
|
570
2218
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputfieldComponent, never>;
|
|
571
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputfieldComponent, "gog-inputfield", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "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; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "iconStartTemplate": { "alias": "iconStartTemplate"; "required": false; "isSignal": true; }; "iconEndTemplate": { "alias": "iconEndTemplate"; "required": false; "isSignal": true; }; "iconStartFn": { "alias": "iconStartFn"; "required": false; "isSignal": true; }; "iconEndFn": { "alias": "iconEndFn"; "required": false; "isSignal": true; }; "iconStartLabel": { "alias": "iconStartLabel"; "required": false; "isSignal": true; }; "iconEndLabel": { "alias": "iconEndLabel"; "required": false; "isSignal": true; }; "showPasswordLabel": { "alias": "showPasswordLabel"; "required": false; "isSignal": true; }; "hidePasswordLabel": { "alias": "hidePasswordLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; },
|
|
2219
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputfieldComponent, "gog-inputfield", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "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; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "iconStartTemplate": { "alias": "iconStartTemplate"; "required": false; "isSignal": true; }; "iconEndTemplate": { "alias": "iconEndTemplate"; "required": false; "isSignal": true; }; "iconStartFn": { "alias": "iconStartFn"; "required": false; "isSignal": true; }; "iconEndFn": { "alias": "iconEndFn"; "required": false; "isSignal": true; }; "iconStartLabel": { "alias": "iconStartLabel"; "required": false; "isSignal": true; }; "iconEndLabel": { "alias": "iconEndLabel"; "required": false; "isSignal": true; }; "showPasswordLabel": { "alias": "showPasswordLabel"; "required": false; "isSignal": true; }; "hidePasswordLabel": { "alias": "hidePasswordLabel"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatLabelShowPlaceholder": { "alias": "floatLabelShowPlaceholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["addonStart", "addonEnd"], ["[gogInputAddonStart]", "[gogInputAddonEnd]"], true, never>;
|
|
572
2220
|
}
|
|
573
2221
|
|
|
574
2222
|
declare class TextareaComponent implements ControlValueAccessor, DoCheck {
|
|
575
2223
|
readonly label: _angular_core.InputSignal<string>;
|
|
576
2224
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
577
2225
|
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
578
|
-
/**
|
|
579
|
-
|
|
2226
|
+
/**
|
|
2227
|
+
* See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
|
|
2228
|
+
* `'manual'` — matching every other control in the library.
|
|
2229
|
+
*/
|
|
2230
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
580
2231
|
readonly name: _angular_core.InputSignal<string>;
|
|
581
2232
|
readonly inputId: _angular_core.InputSignal<string>;
|
|
582
2233
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
583
|
-
|
|
2234
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
2235
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
584
2236
|
/** Native `rows` attribute, controlling the field's initial height. */
|
|
585
2237
|
readonly rows: _angular_core.InputSignal<number>;
|
|
586
2238
|
/**
|
|
@@ -588,255 +2240,147 @@ declare class TextareaComponent implements ControlValueAccessor, DoCheck {
|
|
|
588
2240
|
* Set to `false` to shrink the field to fit its content instead.
|
|
589
2241
|
*/
|
|
590
2242
|
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
591
|
-
/**
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
private readonly cvaDisabled;
|
|
595
|
-
private readonly errorState;
|
|
596
|
-
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
597
|
-
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
598
|
-
protected readonly visibleError: _angular_core.Signal<string>;
|
|
599
|
-
private _onChange;
|
|
600
|
-
private _onTouched;
|
|
601
|
-
constructor();
|
|
602
|
-
ngDoCheck(): void;
|
|
603
|
-
writeValue(val: string): void;
|
|
604
|
-
registerOnChange(fn: (val: string) => void): void;
|
|
605
|
-
registerOnTouched(fn: () => void): void;
|
|
606
|
-
setDisabledState(isDisabled: boolean): void;
|
|
607
|
-
onInput(event: Event): void;
|
|
608
|
-
onBlur(): void;
|
|
609
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
|
|
610
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "gog-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
611
|
-
}
|
|
612
|
-
|
|
613
|
-
declare class ChipComponent {
|
|
614
|
-
readonly size: _angular_core.InputSignal<GogSize>;
|
|
615
|
-
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
616
|
-
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
617
|
-
readonly clickable: _angular_core.InputSignal<boolean>;
|
|
618
|
-
readonly removable: _angular_core.InputSignal<boolean>;
|
|
619
|
-
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
620
|
-
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
621
|
-
readonly removeAriaLabel: _angular_core.InputSignal<string>;
|
|
622
|
-
readonly avatarUrl: _angular_core.InputSignal<string | null>;
|
|
623
|
-
readonly avatarAlt: _angular_core.InputSignal<string>;
|
|
624
|
-
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
625
|
-
readonly gogClick: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
|
|
626
|
-
readonly gogRemove: _angular_core.OutputEmitterRef<void>;
|
|
627
|
-
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
628
|
-
protected readonly isInteractive: _angular_core.Signal<boolean>;
|
|
629
|
-
protected onChipClick(event: MouseEvent): void;
|
|
630
|
-
protected onKeydown(event: KeyboardEvent): void;
|
|
631
|
-
protected onRemoveClick(event: MouseEvent): void;
|
|
632
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
|
|
633
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "gog-chip", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "avatarAlt": { "alias": "avatarAlt"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; }, { "gogClick": "gogClick"; "gogRemove": "gogRemove"; }, never, ["*"], true, never>;
|
|
634
|
-
}
|
|
635
|
-
|
|
636
|
-
declare class TagComponent {
|
|
637
|
-
readonly variant: _angular_core.InputSignal<GogTagVariant>;
|
|
638
|
-
readonly size: _angular_core.InputSignal<GogSize>;
|
|
639
|
-
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
640
|
-
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
641
|
-
readonly iconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
642
|
-
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
643
|
-
protected readonly hasIcon: _angular_core.Signal<boolean>;
|
|
644
|
-
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
645
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
|
|
646
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "gog-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
type GogDropdownDirection = 'auto' | 'up' | 'down';
|
|
650
|
-
interface GogDropdownPlacement {
|
|
651
|
-
direction: 'up' | 'down';
|
|
652
|
-
top: number;
|
|
653
|
-
left: number;
|
|
654
|
-
width: number;
|
|
655
|
-
maxHeight: number;
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
/** A single choice in any of the listbox-style controls (`gog-select`, `gog-multiselect`). */
|
|
659
|
-
interface GogDropdownOption {
|
|
660
|
-
id: string | number;
|
|
661
|
-
name: string;
|
|
662
|
-
disabled?: boolean;
|
|
663
|
-
}
|
|
664
|
-
/**
|
|
665
|
-
* Shared behaviour for the listbox-style controls: open/close, placement, the
|
|
666
|
-
* append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
|
|
667
|
-
* plumbing. Subclasses supply only what actually differs — the value type, the panel
|
|
668
|
-
* markup, and the BEM class names used to find the trigger and the options.
|
|
669
|
-
*
|
|
670
|
-
* Exported because it appears in the public type signatures of the components that
|
|
671
|
-
* extend it; it is not meant to be used or subclassed by consumers.
|
|
672
|
-
*/
|
|
673
|
-
declare abstract class GogDropdownBase<TValue> implements ControlValueAccessor, DoCheck {
|
|
674
|
-
private static nextUid;
|
|
675
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
676
|
-
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
677
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
678
|
-
readonly options: _angular_core.InputSignal<GogDropdownOption[]>;
|
|
679
|
-
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
680
|
-
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
681
|
-
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay>;
|
|
682
|
-
readonly size: _angular_core.InputSignal<GogSize>;
|
|
683
|
-
readonly dropdownDirection: _angular_core.InputSignal<GogDropdownDirection>;
|
|
684
|
-
/**
|
|
685
|
-
* Explicit stacking order for the panel. Left unset the panel falls back to the
|
|
686
|
-
* stylesheet's `--gog-dropdown-z`, so the default lives in CSS where a consumer can
|
|
687
|
-
* retheme it, rather than being baked into the component.
|
|
688
|
-
*/
|
|
689
|
-
readonly dropdownZIndex: _angular_core.InputSignal<number | null>;
|
|
690
|
-
/**
|
|
691
|
-
* Fixed panel width as any CSS length (`'320px'`, `'40ch'`, `'100%'`, …), applied only
|
|
692
|
-
* when `appendToBody` is set. Left unset the panel matches the trigger's width, same as
|
|
693
|
-
* the inline panel already does via CSS.
|
|
694
|
-
*/
|
|
695
|
-
readonly dropdownWidth: _angular_core.InputSignal<string | null>;
|
|
696
|
-
/**
|
|
697
|
-
* Fixed panel max-height as any CSS length, applied only when `appendToBody` is set.
|
|
698
|
-
* `px`, `%` and `vh` also feed the up/down placement math (see `resolveCssLengthPx`); any
|
|
699
|
-
* other unit still renders correctly but is invisible to that heuristic, so the panel may
|
|
700
|
-
* pick the "wrong" side close to a viewport edge. Left unset the panel keeps the existing
|
|
701
|
-
* viewport-derived, auto-flipping height.
|
|
702
|
-
*/
|
|
703
|
-
readonly dropdownMaxHeight: _angular_core.InputSignal<string | null>;
|
|
704
|
-
readonly appendToBody: _angular_core.InputSignal<boolean>;
|
|
705
|
-
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
706
|
-
readonly chevronTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
707
|
-
/**
|
|
708
|
-
* Full width of the container by default, matching every other field-style control.
|
|
709
|
-
* Set to `false` to shrink the trigger to fit its selected label instead.
|
|
710
|
-
*/
|
|
711
|
-
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
712
|
-
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
713
|
-
/** The `<ng-template>` holding the panel markup, rendered inline or into `<body>`. */
|
|
714
|
-
protected abstract readonly panelTemplate: Signal<TemplateRef<unknown> | undefined>;
|
|
715
|
-
/** Declared by the subclass so each control keeps its own value type. */
|
|
716
|
-
protected abstract readonly value: ModelSignal<TValue>;
|
|
717
|
-
/** Value applied when a form writes `null` / the control is reset. */
|
|
718
|
-
protected abstract readonly emptyValue: TValue;
|
|
719
|
-
/** BEM class of one option button, used to collect keyboard-navigable elements. */
|
|
720
|
-
protected abstract readonly optionClass: string;
|
|
721
|
-
/** BEM class of the focusable trigger. */
|
|
722
|
-
protected abstract readonly triggerClass: string;
|
|
723
|
-
/**
|
|
724
|
-
* Spacing tokens feeding the height estimate. Overridable so each control keeps the
|
|
725
|
-
* `--gog-<block>-*` names it already exposes to consumers for theming.
|
|
2243
|
+
/**
|
|
2244
|
+
* Whether to offer a clear button once the field has text. Unset, falls back to
|
|
2245
|
+
* `GOG_CONFIG.control.clearable`, then to `false`.
|
|
726
2246
|
*/
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
protected readonly isBrowser: boolean;
|
|
737
|
-
private readonly document;
|
|
738
|
-
private readonly appRef;
|
|
739
|
-
private readonly destroyRef;
|
|
2247
|
+
readonly clearable: _angular_core.InputSignal<boolean | undefined>;
|
|
2248
|
+
/** Accessible name for the clear button. */
|
|
2249
|
+
readonly clearAriaLabel: _angular_core.InputSignal<string>;
|
|
2250
|
+
/** Unset, falls back to `GOG_CONFIG.floatLabel.variant`, then to `'none'` (off). */
|
|
2251
|
+
readonly floatLabel: _angular_core.InputSignal<GogFloatLabelVariant | undefined>;
|
|
2252
|
+
/** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
|
|
2253
|
+
readonly floatLabelShowPlaceholder: _angular_core.InputSignal<boolean | undefined>;
|
|
2254
|
+
/** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
|
|
2255
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
740
2256
|
private readonly ngControl;
|
|
741
|
-
private readonly
|
|
2257
|
+
private readonly globalConfig;
|
|
742
2258
|
private readonly cvaDisabled;
|
|
2259
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
2260
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
2261
|
+
private readonly resolvedErrorDisplay;
|
|
743
2262
|
private readonly errorState;
|
|
744
|
-
|
|
745
|
-
protected readonly
|
|
746
|
-
|
|
2263
|
+
/** Set from `(focus)`/`(blur)` on the `<textarea>` — see `onFocus`/`onBlur`. */
|
|
2264
|
+
protected readonly isFocused: _angular_core.WritableSignal<boolean>;
|
|
2265
|
+
private readonly fieldRef;
|
|
747
2266
|
/**
|
|
748
|
-
*
|
|
2267
|
+
* Width of the textarea's own scrollbar, published so the clear button can clear it.
|
|
749
2268
|
*
|
|
750
|
-
*
|
|
751
|
-
*
|
|
752
|
-
*
|
|
753
|
-
*
|
|
2269
|
+
* It has to be measured: the width is platform- and settings-dependent (0 on overlay
|
|
2270
|
+
* scrollbars, ~15-19px on classic ones), and it only exists once the content overflows. The
|
|
2271
|
+
* pure-CSS alternative, `scrollbar-gutter: stable`, reserves the gutter even when the field
|
|
2272
|
+
* isn't scrolling, which shifts the resting layout of every textarea.
|
|
754
2273
|
*/
|
|
755
|
-
protected readonly
|
|
756
|
-
/** `dropdownWidth`, or the trigger-derived width from `panelPlacement`, as a CSS value. */
|
|
757
|
-
protected readonly resolvedPanelWidth: Signal<string | null>;
|
|
758
|
-
/** `dropdownMaxHeight`, or the viewport-derived max-height from `panelPlacement`. */
|
|
759
|
-
protected readonly resolvedPanelMaxHeight: Signal<string | null>;
|
|
760
|
-
protected readonly hasError: Signal<boolean>;
|
|
761
|
-
protected readonly visibleError: Signal<string>;
|
|
762
|
-
/** Measured once per open rather than per scroll tick — see `refreshPanelMetrics`. */
|
|
763
|
-
private optionGap;
|
|
764
|
-
private optionsPadding;
|
|
765
|
-
private maxPanelHeight;
|
|
766
|
-
private optionHeight;
|
|
767
|
-
private repositionFrame;
|
|
768
|
-
private onChangeFn;
|
|
769
|
-
private onTouchedFn;
|
|
770
|
-
constructor();
|
|
2274
|
+
protected readonly scrollbarWidth: _angular_core.WritableSignal<number>;
|
|
771
2275
|
/**
|
|
772
|
-
*
|
|
773
|
-
*
|
|
774
|
-
* handler on every document click and every scroll frame, whether or not it is showing
|
|
775
|
-
* anything.
|
|
2276
|
+
* The single size modifier, replacing one `[class.gog-input-wrapper--<size>]` binding per size.
|
|
2277
|
+
* Empty for `'md'`: that is this component's default size and has no modifier rule of its own — every `gog-input-wrapper--*` chain bottoms out at it.
|
|
776
2278
|
*/
|
|
777
|
-
|
|
2279
|
+
protected readonly sizeClass: _angular_core.Signal<string>;
|
|
2280
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2281
|
+
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
2282
|
+
protected readonly visibleError: _angular_core.Signal<string>;
|
|
2283
|
+
private readonly floatLabelState;
|
|
2284
|
+
private readonly clearableState;
|
|
2285
|
+
/** Whether to render the clear button right now — see `GogClearableState`. */
|
|
2286
|
+
protected readonly showClear: _angular_core.Signal<boolean>;
|
|
2287
|
+
protected readonly resolvedFloatLabel: _angular_core.Signal<GogFloatLabelVariant>;
|
|
2288
|
+
protected readonly isFloatLabelActive: _angular_core.Signal<boolean>;
|
|
2289
|
+
protected readonly isFloatLabelFloated: _angular_core.Signal<boolean>;
|
|
2290
|
+
protected readonly effectivePlaceholder: _angular_core.Signal<string>;
|
|
2291
|
+
private _onChange;
|
|
2292
|
+
private _onTouched;
|
|
2293
|
+
constructor();
|
|
778
2294
|
ngDoCheck(): void;
|
|
779
|
-
writeValue(val:
|
|
780
|
-
registerOnChange(fn: (val:
|
|
2295
|
+
writeValue(val: string): void;
|
|
2296
|
+
registerOnChange(fn: (val: string) => void): void;
|
|
781
2297
|
registerOnTouched(fn: () => void): void;
|
|
782
2298
|
setDisabledState(isDisabled: boolean): void;
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
protected
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
2299
|
+
onInput(event: Event): void;
|
|
2300
|
+
/** Clears the field and notifies any attached form, then returns focus to the input. */
|
|
2301
|
+
protected clearValue(event: Event): void;
|
|
2302
|
+
onFocus(): void;
|
|
2303
|
+
onBlur(): void;
|
|
2304
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
|
|
2305
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "gog-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatLabelShowPlaceholder": { "alias": "floatLabelShowPlaceholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
2306
|
+
}
|
|
2307
|
+
|
|
2308
|
+
declare class ChipComponent {
|
|
2309
|
+
readonly size: _angular_core.InputSignal<GogSize>;
|
|
2310
|
+
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
2311
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
2312
|
+
readonly clickable: _angular_core.InputSignal<boolean>;
|
|
2313
|
+
readonly removable: _angular_core.InputSignal<boolean>;
|
|
2314
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
2315
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
2316
|
+
readonly removeAriaLabel: _angular_core.InputSignal<string>;
|
|
2317
|
+
readonly avatarUrl: _angular_core.InputSignal<string | null>;
|
|
2318
|
+
readonly avatarAlt: _angular_core.InputSignal<string>;
|
|
2319
|
+
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
2320
|
+
readonly gogClick: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
|
|
2321
|
+
readonly gogRemove: _angular_core.OutputEmitterRef<void>;
|
|
2322
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
2323
|
+
protected readonly isInteractive: _angular_core.Signal<boolean>;
|
|
2324
|
+
protected onChipClick(event: MouseEvent): void;
|
|
2325
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
2326
|
+
protected onRemoveClick(event: MouseEvent): void;
|
|
2327
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
|
|
2328
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "gog-chip", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "avatarAlt": { "alias": "avatarAlt"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; }, { "gogClick": "gogClick"; "gogRemove": "gogRemove"; }, never, ["*"], true, never>;
|
|
2329
|
+
}
|
|
2330
|
+
|
|
2331
|
+
/**
|
|
2332
|
+
* Custom markup for the tag's leading icon:
|
|
2333
|
+
*
|
|
2334
|
+
* ```html
|
|
2335
|
+
* <ng-template gogTagIcon><my-icon /></ng-template>
|
|
2336
|
+
* ```
|
|
2337
|
+
*/
|
|
2338
|
+
declare class GogTagIconDirective {
|
|
2339
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
2340
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogTagIconDirective, never>;
|
|
2341
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogTagIconDirective, "[gogTagIcon]", never, {}, {}, never, never, true, never>;
|
|
2342
|
+
}
|
|
2343
|
+
declare class TagComponent {
|
|
2344
|
+
readonly variant: _angular_core.InputSignal<GogTagVariant>;
|
|
2345
|
+
readonly size: _angular_core.InputSignal<GogSize>;
|
|
2346
|
+
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
2347
|
+
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
816
2348
|
/**
|
|
817
|
-
*
|
|
818
|
-
* message below it sit in normal document flow and are not part of what the panel needs
|
|
819
|
-
* to clear. This also keeps `appendToBody` placement consistent with the inline panel,
|
|
820
|
-
* which is already positioned purely relative to the trigger via CSS.
|
|
2349
|
+
* @deprecated since 21.3.0 (2026-08-07) — project an `<ng-template gogTagIcon>` into the component instead. Removed in 21.5.0.
|
|
821
2350
|
*/
|
|
822
|
-
|
|
823
|
-
/**
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
2351
|
+
readonly iconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
2352
|
+
/** Projected `gogTagIcon` template; wins over the deprecated `iconTemplate` input. */
|
|
2353
|
+
protected readonly iconSlot: _angular_core.Signal<GogTagIconDirective | undefined>;
|
|
2354
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
2355
|
+
protected readonly hasIcon: _angular_core.Signal<boolean>;
|
|
2356
|
+
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
2357
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
|
|
2358
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "gog-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, ["iconSlot"], ["*"], true, never>;
|
|
828
2359
|
}
|
|
829
2360
|
|
|
830
|
-
/**
|
|
2361
|
+
/**
|
|
2362
|
+
* @deprecated since 21.2.2 (2026-07-30) — use `GogDropdownOption` instead. Removed in 21.4.0.
|
|
2363
|
+
*/
|
|
831
2364
|
type GogSelectOption = GogDropdownOption;
|
|
832
|
-
declare class SelectComponent
|
|
2365
|
+
declare class SelectComponent<TOption = GogDropdownOption, TValue = string | number | null> extends GogDropdownBase<TValue, TOption> {
|
|
833
2366
|
readonly inputId: _angular_core.InputSignal<string>;
|
|
834
|
-
/**
|
|
835
|
-
|
|
2367
|
+
/**
|
|
2368
|
+
* Two-way bindable selected value: `[(value)]="signal"`.
|
|
2369
|
+
*
|
|
2370
|
+
* Carries whatever `optionValue` resolves to — an id by default, or the option object itself
|
|
2371
|
+
* when `optionValue` is `null`. `TValue` is inferred from the signal you bind, so a
|
|
2372
|
+
* `WritableSignal<string | null>` keeps typing exactly as before.
|
|
2373
|
+
*/
|
|
2374
|
+
readonly value: _angular_core.ModelSignal<TValue>;
|
|
836
2375
|
protected readonly panelTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
837
|
-
|
|
2376
|
+
/** A cleared select is `null`, whatever `TValue` the consumer bound. */
|
|
2377
|
+
protected readonly emptyValue: TValue;
|
|
838
2378
|
protected readonly optionClass = "gog-select__option";
|
|
839
2379
|
protected readonly triggerClass = "gog-select__control";
|
|
2380
|
+
/** Opt-in: a select had no clear affordance before 21.3.0. */
|
|
2381
|
+
protected readonly clearableByDefault = false;
|
|
2382
|
+
protected readonly sizeBlockClass = "gog-select";
|
|
2383
|
+
protected readonly panelBlockClass = "gog-select__dropdown";
|
|
840
2384
|
protected readonly optionGapToken = "--gog-select-option-gap";
|
|
841
2385
|
protected readonly panelMaxHeightToken = "--gog-select-panel-max-height";
|
|
842
2386
|
protected readonly optionHeightToken = "--gog-select-option-height";
|
|
@@ -844,40 +2388,96 @@ declare class SelectComponent extends GogDropdownBase<string | number | null> {
|
|
|
844
2388
|
protected readonly listboxId: _angular_core.Signal<string>;
|
|
845
2389
|
protected readonly labelId: _angular_core.Signal<string>;
|
|
846
2390
|
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
847
|
-
protected readonly selectedOption: _angular_core.Signal<
|
|
848
|
-
protected
|
|
849
|
-
protected
|
|
850
|
-
|
|
851
|
-
|
|
2391
|
+
protected readonly selectedOption: _angular_core.Signal<NonNullable<TOption> | null>;
|
|
2392
|
+
protected readonly selectedLabel: _angular_core.Signal<string>;
|
|
2393
|
+
protected readonly hasFloatValue: _angular_core.Signal<boolean>;
|
|
2394
|
+
protected isSelected(option: TOption): boolean;
|
|
2395
|
+
protected selectOption(option: TOption, event: MouseEvent): void;
|
|
2396
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectComponent<any, any>, never>;
|
|
2397
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectComponent<any, any>, "gog-select", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
852
2398
|
}
|
|
853
2399
|
|
|
854
|
-
/**
|
|
2400
|
+
/**
|
|
2401
|
+
* @deprecated since 21.2.2 (2026-07-30) — use `GogDropdownOption` instead. Removed in 21.4.0.
|
|
2402
|
+
*/
|
|
855
2403
|
type GogMultiselectOption = GogDropdownOption;
|
|
856
|
-
|
|
2404
|
+
/**
|
|
2405
|
+
* Custom markup for the multiselect's clear button:
|
|
2406
|
+
*
|
|
2407
|
+
* ```html
|
|
2408
|
+
* <ng-template gogMultiselectClearIcon><my-icon /></ng-template>
|
|
2409
|
+
* ```
|
|
2410
|
+
*/
|
|
2411
|
+
declare class GogMultiselectClearIconDirective {
|
|
2412
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
2413
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogMultiselectClearIconDirective, never>;
|
|
2414
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogMultiselectClearIconDirective, "[gogMultiselectClearIcon]", never, {}, {}, never, never, true, never>;
|
|
2415
|
+
}
|
|
2416
|
+
declare class MultiselectComponent<TOption = GogDropdownOption, TValue = string | number> extends GogDropdownBase<TValue[], TOption> {
|
|
857
2417
|
readonly showControls: _angular_core.InputSignal<boolean>;
|
|
858
2418
|
/** Where the "select all"/"clear" row sits relative to the option list. Sticky either way. */
|
|
859
2419
|
readonly controlsPosition: _angular_core.InputSignal<"top" | "bottom">;
|
|
2420
|
+
/**
|
|
2421
|
+
* @deprecated since 21.3.0 (2026-08-07) — project an `<ng-template gogMultiselectClearIcon>` into the component instead. Removed in 21.5.0.
|
|
2422
|
+
*/
|
|
860
2423
|
readonly clearIconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
861
|
-
/**
|
|
862
|
-
readonly
|
|
2424
|
+
/** Projected `gogMultiselectClearIcon` template; wins over the deprecated `clearIconTemplate` input. */
|
|
2425
|
+
protected readonly clearIconSlot: _angular_core.Signal<GogMultiselectClearIconDirective | undefined>;
|
|
2426
|
+
/**
|
|
2427
|
+
* Two-way bindable selection: `[(value)]="signal"`.
|
|
2428
|
+
*
|
|
2429
|
+
* Each entry is whatever `optionValue` resolves to — an id by default, or the option objects
|
|
2430
|
+
* themselves when `optionValue` is `null`.
|
|
2431
|
+
*/
|
|
2432
|
+
readonly value: _angular_core.ModelSignal<TValue[]>;
|
|
863
2433
|
protected readonly panelTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
864
|
-
protected readonly emptyValue:
|
|
2434
|
+
protected readonly emptyValue: TValue[];
|
|
865
2435
|
protected readonly optionClass = "gog-ms__option";
|
|
866
2436
|
protected readonly triggerClass = "gog-ms";
|
|
2437
|
+
/**
|
|
2438
|
+
* On by default: this control shipped a clear button before `clearable` existed, so the
|
|
2439
|
+
* default preserves it. Set `[clearable]="false"` to drop it.
|
|
2440
|
+
*/
|
|
2441
|
+
protected readonly clearableByDefault = true;
|
|
2442
|
+
protected readonly sizeBlockClass = "gog-ms-wrapper";
|
|
2443
|
+
protected readonly panelBlockClass = "gog-ms__dropdown";
|
|
867
2444
|
protected readonly optionGapToken = "--gog-ms-option-gap";
|
|
868
2445
|
protected readonly optionsPaddingToken = "--gog-ms-options-padding";
|
|
869
2446
|
protected readonly panelMaxHeightToken = "--gog-ms-panel-max-height";
|
|
870
2447
|
protected readonly optionHeightToken = "--gog-ms-option-height";
|
|
871
2448
|
protected readonly listboxId: _angular_core.Signal<string>;
|
|
872
2449
|
protected readonly labelId: _angular_core.Signal<string>;
|
|
2450
|
+
/** Labels of the current selection, driven off the selected *options* so it works whatever
|
|
2451
|
+
* `optionValue` resolves to. */
|
|
2452
|
+
readonly selectedLabels: _angular_core.Signal<string[]>;
|
|
2453
|
+
/** Comma-joined selection — the full text, before any overflow trimming. */
|
|
873
2454
|
readonly selectedNames: _angular_core.Signal<string>;
|
|
874
|
-
|
|
875
|
-
|
|
2455
|
+
private readonly valueRef;
|
|
2456
|
+
private readonly resizeDestroyRef;
|
|
2457
|
+
/** Width available to the summary text, tracked so the split recomputes as the field resizes. */
|
|
2458
|
+
private readonly valueWidth;
|
|
2459
|
+
private readonly valueFont;
|
|
2460
|
+
/**
|
|
2461
|
+
* Splits the selection into what fits on one line and a `+N` remainder.
|
|
2462
|
+
*
|
|
2463
|
+
* Measured with `canvas.measureText` rather than by rendering candidates and reading back
|
|
2464
|
+
* layout: the greedy fit is O(n) over the labels and costs no reflow, where a DOM-based probe
|
|
2465
|
+
* would thrash layout on every keystroke-sized change.
|
|
2466
|
+
*/
|
|
2467
|
+
protected readonly summary: _angular_core.Signal<{
|
|
2468
|
+
text: string;
|
|
2469
|
+
hidden: number;
|
|
2470
|
+
}>;
|
|
2471
|
+
protected readonly hasFloatValue: _angular_core.Signal<boolean>;
|
|
2472
|
+
protected isSelected(option: TOption): boolean;
|
|
2473
|
+
protected toggleOption(option: TOption, event: MouseEvent): void;
|
|
2474
|
+
/** Acts on the *visible* options, so "select all" under an active filter means what it says. */
|
|
876
2475
|
protected selectAll(event: MouseEvent): void;
|
|
877
2476
|
protected clearAll(event: Event): void;
|
|
2477
|
+
constructor();
|
|
878
2478
|
protected extraPanelHeight(): number;
|
|
879
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiselectComponent, never>;
|
|
880
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiselectComponent, "gog-multiselect", never, { "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "controlsPosition": { "alias": "controlsPosition"; "required": false; "isSignal": true; }; "clearIconTemplate": { "alias": "clearIconTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; },
|
|
2479
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiselectComponent<any, any>, never>;
|
|
2480
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiselectComponent<any, any>, "gog-multiselect", never, { "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "controlsPosition": { "alias": "controlsPosition"; "required": false; "isSignal": true; }; "clearIconTemplate": { "alias": "clearIconTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["clearIconSlot"], never, true, never>;
|
|
881
2481
|
}
|
|
882
2482
|
|
|
883
2483
|
declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
@@ -891,7 +2491,8 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
891
2491
|
readonly showThumb: _angular_core.InputSignal<boolean>;
|
|
892
2492
|
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
893
2493
|
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
894
|
-
|
|
2494
|
+
/** Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to `'manual'`. */
|
|
2495
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
895
2496
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
896
2497
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
897
2498
|
/**
|
|
@@ -899,18 +2500,34 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
899
2500
|
* `--gog-slider-auto-width` instead — a slider's track has no content of its own to
|
|
900
2501
|
* shrink-wrap to, so unlike the other field controls this needs an explicit fallback
|
|
901
2502
|
* width rather than `fit-content`.
|
|
2503
|
+
*
|
|
2504
|
+
* Ignored when `orientation` is `'vertical'`: a vertical slider's own width is its
|
|
2505
|
+
* thickness, not its length, so it always sizes to fit its content. Its length instead
|
|
2506
|
+
* comes from `--gog-slider-vertical-length` (default `160px`), same idea as
|
|
2507
|
+
* `--gog-slider-auto-width` for the horizontal auto-width case.
|
|
902
2508
|
*/
|
|
903
2509
|
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
2510
|
+
/**
|
|
2511
|
+
* `'horizontal'` (default) or `'vertical'`. The developer picks per instance — there is
|
|
2512
|
+
* no global default for this, since it's a layout decision tied to where the slider sits,
|
|
2513
|
+
* not a house style. Backed by a native `<input type="range">` rotated via `writing-mode`,
|
|
2514
|
+
* so dragging, touch and keyboard (Up/Down as well as Left/Right) all keep working exactly
|
|
2515
|
+
* as they do horizontally.
|
|
2516
|
+
*/
|
|
2517
|
+
readonly orientation: _angular_core.InputSignal<_guildofgleks_ui.GogOrientation>;
|
|
904
2518
|
/** Two-way bindable value: `[(value)]="signal"`. */
|
|
905
2519
|
readonly value: _angular_core.ModelSignal<number>;
|
|
906
2520
|
private readonly ngControl;
|
|
907
2521
|
private readonly cvaDisabled;
|
|
2522
|
+
private readonly globalConfig;
|
|
2523
|
+
private readonly resolvedErrorDisplay;
|
|
908
2524
|
private readonly errorState;
|
|
909
2525
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
910
2526
|
protected readonly clampedValue: _angular_core.Signal<number>;
|
|
911
2527
|
protected readonly fillPercent: _angular_core.Signal<number>;
|
|
912
2528
|
protected readonly thumbPos: _angular_core.Signal<string>;
|
|
913
2529
|
protected readonly fillScale: _angular_core.Signal<number>;
|
|
2530
|
+
protected readonly isVertical: _angular_core.Signal<boolean>;
|
|
914
2531
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
915
2532
|
protected readonly visibleError: _angular_core.Signal<string>;
|
|
916
2533
|
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
@@ -925,7 +2542,7 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
925
2542
|
onInput(event: Event): void;
|
|
926
2543
|
onBlur(): void;
|
|
927
2544
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
|
|
928
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "gog-slider", never, { "label": { "alias": "label"; "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; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showThumb": { "alias": "showThumb"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
2545
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "gog-slider", never, { "label": { "alias": "label"; "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; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showThumb": { "alias": "showThumb"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
929
2546
|
}
|
|
930
2547
|
|
|
931
2548
|
declare class SkeletonComponent {
|
|
@@ -1129,7 +2746,53 @@ declare class SpinnerOverlayComponent {
|
|
|
1129
2746
|
|
|
1130
2747
|
/** Default comparator: locale-aware for strings via `Intl.Collator`, `<`/`>` otherwise. */
|
|
1131
2748
|
declare function defaultCompare(a: unknown, b: unknown): number;
|
|
1132
|
-
|
|
2749
|
+
/** Context handed to a `gogColumnBody` template. */
|
|
2750
|
+
interface GogColumnBodyContext<T> {
|
|
2751
|
+
/** The row object. */
|
|
2752
|
+
$implicit: T;
|
|
2753
|
+
/** Alias for `$implicit`, for templates that prefer naming it. */
|
|
2754
|
+
row: T;
|
|
2755
|
+
/** Index within the currently rendered page, not the whole data set. */
|
|
2756
|
+
index: number;
|
|
2757
|
+
/** The already-resolved cell value for this column's `field`. */
|
|
2758
|
+
value: unknown;
|
|
2759
|
+
}
|
|
2760
|
+
/** Context handed to a `gogColumnHeader` template. */
|
|
2761
|
+
interface GogColumnHeaderContext {
|
|
2762
|
+
/** The column's own `header` text, so a custom header can decorate rather than replace it. */
|
|
2763
|
+
$implicit: string;
|
|
2764
|
+
field: string;
|
|
2765
|
+
}
|
|
2766
|
+
/**
|
|
2767
|
+
* Custom cell markup for one column:
|
|
2768
|
+
*
|
|
2769
|
+
* ```html
|
|
2770
|
+
* <gog-column field="status" header="Status">
|
|
2771
|
+
* <ng-template gogColumnBody let-row let-value="value">
|
|
2772
|
+
* <gog-tag [variant]="row.ok ? 'success' : 'danger'">{{ value }}</gog-tag>
|
|
2773
|
+
* </ng-template>
|
|
2774
|
+
* </gog-column>
|
|
2775
|
+
* ```
|
|
2776
|
+
*/
|
|
2777
|
+
declare class GogColumnBodyDirective<T = unknown> {
|
|
2778
|
+
readonly templateRef: TemplateRef<GogColumnBodyContext<T>>;
|
|
2779
|
+
static ngTemplateContextGuard<T>(_dir: GogColumnBodyDirective<T>, ctx: unknown): ctx is GogColumnBodyContext<T>;
|
|
2780
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogColumnBodyDirective<any>, never>;
|
|
2781
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogColumnBodyDirective<any>, "[gogColumnBody]", never, {}, {}, never, never, true, never>;
|
|
2782
|
+
}
|
|
2783
|
+
/** Custom header markup for one column — see `GogColumnBodyDirective` for the shape. */
|
|
2784
|
+
declare class GogColumnHeaderDirective {
|
|
2785
|
+
readonly templateRef: TemplateRef<GogColumnHeaderContext>;
|
|
2786
|
+
static ngTemplateContextGuard(_dir: GogColumnHeaderDirective, ctx: unknown): ctx is GogColumnHeaderContext;
|
|
2787
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogColumnHeaderDirective, never>;
|
|
2788
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogColumnHeaderDirective, "[gogColumnHeader]", never, {}, {}, never, never, true, never>;
|
|
2789
|
+
}
|
|
2790
|
+
/**
|
|
2791
|
+
* One column of `gog-table`. Cell and header markup are projected as `gogColumnBody` /
|
|
2792
|
+
* `gogColumnHeader` templates inside the column itself, so the column owning them is
|
|
2793
|
+
* structural rather than looked up by a matching string.
|
|
2794
|
+
*/
|
|
2795
|
+
declare class GogColumn {
|
|
1133
2796
|
/** Field name, or a dot-path into a nested property (e.g. `"address.city"`). */
|
|
1134
2797
|
readonly field: _angular_core.InputSignal<string>;
|
|
1135
2798
|
readonly header: _angular_core.InputSignal<string>;
|
|
@@ -1142,9 +2805,20 @@ declare class Column {
|
|
|
1142
2805
|
readonly maxWidth: _angular_core.InputSignal<string>;
|
|
1143
2806
|
/** Custom sort comparator for this column. Defaults to `defaultCompare`. */
|
|
1144
2807
|
readonly comparator: _angular_core.InputSignal<((a: unknown, b: unknown) => number) | null>;
|
|
1145
|
-
|
|
1146
|
-
|
|
2808
|
+
readonly bodyTemplate: _angular_core.Signal<GogColumnBodyDirective<any> | undefined>;
|
|
2809
|
+
readonly headerTemplate: _angular_core.Signal<GogColumnHeaderDirective | undefined>;
|
|
2810
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogColumn, never>;
|
|
2811
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogColumn, "gog-column, column", never, { "field": { "alias": "field"; "required": true; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "comparator": { "alias": "comparator"; "required": false; "isSignal": true; }; }, {}, ["bodyTemplate", "headerTemplate"], never, true, never>;
|
|
1147
2812
|
}
|
|
2813
|
+
/**
|
|
2814
|
+
* @deprecated since 21.3.0 (2026-08-07) — use `GogColumn` instead. Removed in 21.5.0.
|
|
2815
|
+
* The same class under its old, unprefixed name.
|
|
2816
|
+
*/
|
|
2817
|
+
declare const Column: typeof GogColumn;
|
|
2818
|
+
/**
|
|
2819
|
+
* @deprecated since 21.3.0 (2026-08-07) — use `GogColumn` instead. Removed in 21.5.0.
|
|
2820
|
+
*/
|
|
2821
|
+
type Column = GogColumn;
|
|
1148
2822
|
|
|
1149
2823
|
interface GogTableBodyContext<T> {
|
|
1150
2824
|
$implicit: T;
|
|
@@ -1154,11 +2828,29 @@ interface GogTableHeaderContext {
|
|
|
1154
2828
|
$implicit: never;
|
|
1155
2829
|
}
|
|
1156
2830
|
/**
|
|
1157
|
-
* Marks a
|
|
2831
|
+
* Marks a `<ng-template>` inside `<gog-table>` with a field name and optional type:
|
|
2832
|
+
*
|
|
2833
|
+
* ```html
|
|
2834
|
+
* <ng-template template="status" type="body" let-row>…</ng-template>
|
|
2835
|
+
* ```
|
|
1158
2836
|
*
|
|
1159
|
-
*
|
|
1160
|
-
*
|
|
1161
|
-
*
|
|
2837
|
+
* @deprecated since 21.3.0 (2026-08-07) — declare the template inside its own column with
|
|
2838
|
+
* `gogColumnBody` / `gogColumnHeader` instead. Removed in 21.5.0.
|
|
2839
|
+
*
|
|
2840
|
+
* The field name here is a string the compiler cannot check, so a typo silently renders the
|
|
2841
|
+
* default cell rather than failing; the column-scoped directives bind structurally and carry a
|
|
2842
|
+
* typed context. Migration:
|
|
2843
|
+
*
|
|
2844
|
+
* ```html
|
|
2845
|
+
* <!-- before -->
|
|
2846
|
+
* <gog-column field="status" />
|
|
2847
|
+
* <ng-template template="status" type="body" let-row>…</ng-template>
|
|
2848
|
+
*
|
|
2849
|
+
* <!-- after -->
|
|
2850
|
+
* <gog-column field="status">
|
|
2851
|
+
* <ng-template gogColumnBody let-row>…</ng-template>
|
|
2852
|
+
* </gog-column>
|
|
2853
|
+
* ```
|
|
1162
2854
|
*/
|
|
1163
2855
|
declare class TemplateDirective {
|
|
1164
2856
|
readonly template: _angular_core.InputSignal<string>;
|
|
@@ -1175,6 +2867,11 @@ interface SortState {
|
|
|
1175
2867
|
direction: SortDirection;
|
|
1176
2868
|
}
|
|
1177
2869
|
declare class TableComponent<T extends object> {
|
|
2870
|
+
/**
|
|
2871
|
+
* The single size modifier, replacing one `[class.gog-table--<size>]` binding per size.
|
|
2872
|
+
* Empty for `'lg'`: that is this component's default size and has no modifier rule of its own — every `gog-table--*` chain bottoms out at it.
|
|
2873
|
+
*/
|
|
2874
|
+
protected readonly sizeClass: _angular_core.Signal<string>;
|
|
1178
2875
|
readonly value: _angular_core.InputSignal<T[]>;
|
|
1179
2876
|
/**
|
|
1180
2877
|
* Full width of the container by default. Set to `false` to shrink the table to fit
|
|
@@ -1187,7 +2884,7 @@ declare class TableComponent<T extends object> {
|
|
|
1187
2884
|
readonly showTotal: _angular_core.InputSignal<boolean>;
|
|
1188
2885
|
readonly emptyPlaceholder: _angular_core.InputSignal<string>;
|
|
1189
2886
|
/** Alignment of pagination controls */
|
|
1190
|
-
readonly paginatorPosition: _angular_core.InputSignal<"
|
|
2887
|
+
readonly paginatorPosition: _angular_core.InputSignal<"left" | "right" | "center">;
|
|
1191
2888
|
/** Alignment of total count label (only when showTotal=true) */
|
|
1192
2889
|
readonly totalPosition: _angular_core.InputSignal<"left" | "right" | "opposite">;
|
|
1193
2890
|
/** Show loading spinner instead of rows */
|
|
@@ -1198,7 +2895,7 @@ declare class TableComponent<T extends object> {
|
|
|
1198
2895
|
readonly stickyHeader: _angular_core.InputSignal<boolean>;
|
|
1199
2896
|
/** Row density: lg (default) / md (compact) / sm (dense) */
|
|
1200
2897
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
1201
|
-
readonly columns: _angular_core.Signal<readonly
|
|
2898
|
+
readonly columns: _angular_core.Signal<readonly GogColumn[]>;
|
|
1202
2899
|
readonly templates: _angular_core.Signal<readonly TemplateDirective[]>;
|
|
1203
2900
|
readonly sortState: _angular_core.WritableSignal<SortState>;
|
|
1204
2901
|
readonly sortedData: _angular_core.Signal<T[]>;
|
|
@@ -1214,19 +2911,27 @@ declare class TableComponent<T extends object> {
|
|
|
1214
2911
|
readonly visibleRows: _angular_core.Signal<T[]>;
|
|
1215
2912
|
readonly hasPagination: _angular_core.Signal<boolean>;
|
|
1216
2913
|
readonly emptyColspan: _angular_core.Signal<number>;
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
2914
|
+
/**
|
|
2915
|
+
* A `gogColumnBody` template declared inside the column wins; the string-keyed
|
|
2916
|
+
* `<ng-template template="field" type="body">` is the deprecated fallback.
|
|
2917
|
+
*/
|
|
2918
|
+
getBodyTemplate(col: GogColumn): TemplateRef<unknown> | null;
|
|
2919
|
+
getHeaderTemplate(col: GogColumn): TemplateRef<unknown> | null;
|
|
2920
|
+
/** Context for a `gogColumnBody` template — see `GogColumnBodyContext`. */
|
|
2921
|
+
bodyContext(row: T, col: GogColumn, index: number): GogColumnBodyContext<T>;
|
|
2922
|
+
/** Context for a `gogColumnHeader` template — see `GogColumnHeaderContext`. */
|
|
2923
|
+
headerContext(col: GogColumn): GogColumnHeaderContext;
|
|
2924
|
+
toggleSort(col: GogColumn): void;
|
|
1220
2925
|
getSortDirection(field: string): SortDirection;
|
|
1221
2926
|
getAriaSort(field: string): 'ascending' | 'descending' | null;
|
|
1222
|
-
handleSortClick(col:
|
|
2927
|
+
handleSortClick(col: GogColumn): void;
|
|
1223
2928
|
getCellValue(row: T, field: string): unknown;
|
|
1224
2929
|
formatCellValue(row: T, field: string): string;
|
|
1225
2930
|
globalRowIndex(localIndex: number): number;
|
|
1226
2931
|
/** CSS grid-area for the total label: left slot or right slot */
|
|
1227
2932
|
readonly totalGridArea: _angular_core.Signal<"left" | "right">;
|
|
1228
2933
|
/** CSS grid-area for the pagination block */
|
|
1229
|
-
readonly paginatorGridArea: _angular_core.Signal<"
|
|
2934
|
+
readonly paginatorGridArea: _angular_core.Signal<"left" | "right" | "center">;
|
|
1230
2935
|
private readonly bodyTemplateMap;
|
|
1231
2936
|
private readonly headerTemplateMap;
|
|
1232
2937
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
|
|
@@ -1247,6 +2952,87 @@ declare class SpinnerComponent {
|
|
|
1247
2952
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "gog-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "overlay": { "alias": "overlay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1248
2953
|
}
|
|
1249
2954
|
|
|
2955
|
+
/**
|
|
2956
|
+
* Adds a hover/focus tooltip to any element — a `gog-*` component's host tag or a plain
|
|
2957
|
+
* native one — without that element needing to know anything about it:
|
|
2958
|
+
* `<button gogTooltip="Save changes">` or `<gog-chip [gogTooltip]="hint">` both just work,
|
|
2959
|
+
* since this only ever reads the host `ElementRef` and never assumes what created it.
|
|
2960
|
+
*
|
|
2961
|
+
* The bubble itself is a separate component (`GogTooltipBubbleComponent`) created on demand
|
|
2962
|
+
* and moved into `document.body` via `GogTooltipOverlay` — see that file for why a portal is
|
|
2963
|
+
* necessary here (clipping/position ancestors) and why it isn't built on `GogDropdownOverlay`.
|
|
2964
|
+
*/
|
|
2965
|
+
declare class GogTooltipDirective {
|
|
2966
|
+
/** The hint text, or a `TemplateRef` for richer content. Empty/null shows nothing. */
|
|
2967
|
+
readonly gogTooltip: _angular_core.InputSignal<string | TemplateRef<unknown> | null>;
|
|
2968
|
+
/** Unset, falls back to `GOG_CONFIG.tooltip.position`, then to `'auto'`. */
|
|
2969
|
+
readonly gogTooltipPosition: _angular_core.InputSignal<GogTooltipPosition | undefined>;
|
|
2970
|
+
/** Unset, falls back to `GOG_CONFIG.tooltip.showDelay`, then to `300` (ms). */
|
|
2971
|
+
readonly gogTooltipShowDelay: _angular_core.InputSignal<number | undefined>;
|
|
2972
|
+
/** Unset, falls back to `GOG_CONFIG.tooltip.hideDelay`, then to `100` (ms). */
|
|
2973
|
+
readonly gogTooltipHideDelay: _angular_core.InputSignal<number | undefined>;
|
|
2974
|
+
readonly gogTooltipDisabled: _angular_core.InputSignal<boolean>;
|
|
2975
|
+
/**
|
|
2976
|
+
* Extra class(es) applied to the bubble itself, for restyling one specific tooltip
|
|
2977
|
+
* instance. The bubble is appended to `document.body`, so a `--gog-tooltip-*` override
|
|
2978
|
+
* scoped to an ancestor (anything short of `:root`) never reaches it — a class targeting
|
|
2979
|
+
* the bubble directly, e.g. `.my-tooltip { --gog-tooltip-bg: gold; }`, is what does.
|
|
2980
|
+
*/
|
|
2981
|
+
readonly gogTooltipClass: _angular_core.InputSignal<string>;
|
|
2982
|
+
private readonly elRef;
|
|
2983
|
+
private readonly viewContainerRef;
|
|
2984
|
+
private readonly document;
|
|
2985
|
+
private readonly destroyRef;
|
|
2986
|
+
private readonly globalConfig;
|
|
2987
|
+
private readonly isBrowser;
|
|
2988
|
+
private readonly uid;
|
|
2989
|
+
private readonly overlay;
|
|
2990
|
+
private readonly isVisible;
|
|
2991
|
+
protected readonly describedById: _angular_core.Signal<string | null>;
|
|
2992
|
+
private readonly resolvedPosition;
|
|
2993
|
+
private readonly resolvedShowDelay;
|
|
2994
|
+
private readonly resolvedHideDelay;
|
|
2995
|
+
private activeRef;
|
|
2996
|
+
private showTimer;
|
|
2997
|
+
private hideTimer;
|
|
2998
|
+
private repositionFrame;
|
|
2999
|
+
private readonly onReflow;
|
|
3000
|
+
/**
|
|
3001
|
+
* Bound to the bubble itself (see `show()`) so moving the pointer off the trigger and
|
|
3002
|
+
* onto the bubble — to read more of it, or to scroll one tall enough to need it — cancels
|
|
3003
|
+
* the pending hide instead of racing it; leaving the bubble then re-queues the same hide
|
|
3004
|
+
* delay leaving the trigger would. WCAG 2.1 SC 1.4.13 "hoverable" requires exactly this:
|
|
3005
|
+
* hover-triggered content has to stay visible while the pointer is over the content, not
|
|
3006
|
+
* just the trigger.
|
|
3007
|
+
*/
|
|
3008
|
+
private readonly onBubbleMouseEnter;
|
|
3009
|
+
private readonly onBubbleMouseLeave;
|
|
3010
|
+
constructor();
|
|
3011
|
+
protected onPointerEnter(): void;
|
|
3012
|
+
protected onPointerLeave(): void;
|
|
3013
|
+
protected onFocusIn(): void;
|
|
3014
|
+
protected onFocusOut(): void;
|
|
3015
|
+
protected onEscape(): void;
|
|
3016
|
+
private queueShow;
|
|
3017
|
+
private queueHide;
|
|
3018
|
+
private cancelTimers;
|
|
3019
|
+
private show;
|
|
3020
|
+
private hide;
|
|
3021
|
+
private scheduleReposition;
|
|
3022
|
+
private applyPlacement;
|
|
3023
|
+
/**
|
|
3024
|
+
* A tooltip appended to `document.body` loses whatever `--gog-tooltip-z` an ancestor
|
|
3025
|
+
* (e.g. a `gog-dialog` panel, which raises it so nested overlays stack above the dialog)
|
|
3026
|
+
* declared, since `body` isn't part of that subtree anymore — same problem
|
|
3027
|
+
* `GogDropdownBase.resolvePanelZIndex` solves for dropdown panels, resolved here from the
|
|
3028
|
+
* trigger while it's still in its real position in the tree, before the bubble moves out.
|
|
3029
|
+
*/
|
|
3030
|
+
private resolveZIndex;
|
|
3031
|
+
private cleanup;
|
|
3032
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogTooltipDirective, never>;
|
|
3033
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogTooltipDirective, "[gogTooltip]", never, { "gogTooltip": { "alias": "gogTooltip"; "required": false; "isSignal": true; }; "gogTooltipPosition": { "alias": "gogTooltipPosition"; "required": false; "isSignal": true; }; "gogTooltipShowDelay": { "alias": "gogTooltipShowDelay"; "required": false; "isSignal": true; }; "gogTooltipHideDelay": { "alias": "gogTooltipHideDelay"; "required": false; "isSignal": true; }; "gogTooltipDisabled": { "alias": "gogTooltipDisabled"; "required": false; "isSignal": true; }; "gogTooltipClass": { "alias": "gogTooltipClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3034
|
+
}
|
|
3035
|
+
|
|
1250
3036
|
declare class ThemeService {
|
|
1251
3037
|
private readonly document;
|
|
1252
3038
|
private readonly root;
|
|
@@ -1285,6 +3071,93 @@ interface GogGlobalConfig {
|
|
|
1285
3071
|
button?: {
|
|
1286
3072
|
debounce?: number;
|
|
1287
3073
|
};
|
|
3074
|
+
tooltip?: {
|
|
3075
|
+
showDelay?: number;
|
|
3076
|
+
hideDelay?: number;
|
|
3077
|
+
position?: GogTooltipPosition;
|
|
3078
|
+
};
|
|
3079
|
+
/** Applies to `gog-inputfield`, `gog-select`, `gog-multiselect` and `gog-textarea`. */
|
|
3080
|
+
floatLabel?: {
|
|
3081
|
+
variant?: GogFloatLabelVariant;
|
|
3082
|
+
/**
|
|
3083
|
+
* Whether the field's own `placeholder` reappears once its label has floated out of
|
|
3084
|
+
* the way. Defaults to `false` — the placeholder stays hidden the whole time a float
|
|
3085
|
+
* label is active, since the resting label already occupies that space.
|
|
3086
|
+
*/
|
|
3087
|
+
showPlaceholder?: boolean;
|
|
3088
|
+
};
|
|
3089
|
+
/**
|
|
3090
|
+
* Defaults for the interactive form controls — the two settings an app otherwise repeats on
|
|
3091
|
+
* literally every one of them: a compact app writes `size="sm"` everywhere, and a
|
|
3092
|
+
* Reactive-Forms app writes `errorDisplay="auto"` on every field.
|
|
3093
|
+
*
|
|
3094
|
+
* - `size` applies to `gog-button`, `gog-inputfield`, `gog-textarea`, `gog-select`,
|
|
3095
|
+
* `gog-multiselect`, `gog-checkbox` and `gog-radio-group`. Deliberately **not** to
|
|
3096
|
+
* `gog-table`, `gog-accordion` or `gog-paginator` (whose `size` means row/layout density
|
|
3097
|
+
* and whose defaults differ), nor to `gog-spinner`, `gog-skeleton`, `gog-tag` or
|
|
3098
|
+
* `gog-chip` (sized to fit whatever they sit next to, not to a form's density).
|
|
3099
|
+
* - `errorDisplay` applies to every control that renders a validation message:
|
|
3100
|
+
* `gog-inputfield`, `gog-textarea`, `gog-select`, `gog-multiselect`, `gog-radio-group`
|
|
3101
|
+
* and `gog-slider`.
|
|
3102
|
+
*
|
|
3103
|
+
* A component's own built-in default still applies when this is unset, so setting `size`
|
|
3104
|
+
* here does not flatten the different defaults those excluded components have.
|
|
3105
|
+
*/
|
|
3106
|
+
control?: {
|
|
3107
|
+
size?: GogSize;
|
|
3108
|
+
errorDisplay?: GogErrorDisplay;
|
|
3109
|
+
/**
|
|
3110
|
+
* Whether `gog-inputfield`, `gog-textarea`, `gog-select` and `gog-multiselect` offer a
|
|
3111
|
+
* clear button. The button only ever appears once the control actually has something to
|
|
3112
|
+
* clear, so switching this on app-wide adds no permanent chrome.
|
|
3113
|
+
*
|
|
3114
|
+
* Component defaults are `false`, except `gog-multiselect`, which had a clear button
|
|
3115
|
+
* before this input existed and keeps it.
|
|
3116
|
+
*/
|
|
3117
|
+
clearable?: boolean;
|
|
3118
|
+
};
|
|
3119
|
+
/** Applies to `gog-select` and `gog-multiselect`. */
|
|
3120
|
+
dropdown?: {
|
|
3121
|
+
/**
|
|
3122
|
+
* Whether the panel is rendered into `<body>` instead of inline. Worth setting app-wide
|
|
3123
|
+
* for a layout whose dropdowns generally live inside scrollable or overflow-clipped
|
|
3124
|
+
* containers, which is the case this exists for.
|
|
3125
|
+
*/
|
|
3126
|
+
appendToBody?: boolean;
|
|
3127
|
+
direction?: GogDropdownDirection;
|
|
3128
|
+
/** Whether the panel shows a search box. Off by default. */
|
|
3129
|
+
filter?: boolean;
|
|
3130
|
+
/** Which end of the panel the search box sticks to. `'top'` by default. */
|
|
3131
|
+
filterPosition?: GogDropdownFilterPosition;
|
|
3132
|
+
};
|
|
3133
|
+
/**
|
|
3134
|
+
* Applies to `gog-datepicker` and `gog-calendar`. Every field here is something an app sets
|
|
3135
|
+
* once rather than per field — a locale and a date format repeated on every date input is
|
|
3136
|
+
* exactly the boilerplate this config exists to remove.
|
|
3137
|
+
*/
|
|
3138
|
+
datepicker?: {
|
|
3139
|
+
/** BCP-47 tag driving month and weekday names. */
|
|
3140
|
+
locale?: string;
|
|
3141
|
+
/** 0 = Sunday … 6 = Saturday. Unset, it comes from the locale. */
|
|
3142
|
+
firstDayOfWeek?: number;
|
|
3143
|
+
/** Display and parse pattern (`dd.MM.yyyy`, `yyyy-MM-dd`, …). */
|
|
3144
|
+
format?: string;
|
|
3145
|
+
};
|
|
3146
|
+
/** Applies to `gog-autocomplete`. */
|
|
3147
|
+
autocomplete?: {
|
|
3148
|
+
/**
|
|
3149
|
+
* Milliseconds to wait after the last keystroke before `gogSearch` fires. A whole app
|
|
3150
|
+
* usually wants one answer here, tuned to its backend rather than to each field.
|
|
3151
|
+
*/
|
|
3152
|
+
searchDebounce?: number;
|
|
3153
|
+
/** How many characters before the panel opens at all. */
|
|
3154
|
+
minLength?: number;
|
|
3155
|
+
};
|
|
3156
|
+
toast?: {
|
|
3157
|
+
position?: ToastPosition;
|
|
3158
|
+
/** How long a non-sticky toast stays up, in ms. */
|
|
3159
|
+
duration?: number;
|
|
3160
|
+
};
|
|
1288
3161
|
}
|
|
1289
3162
|
/**
|
|
1290
3163
|
* Resolves to `{}` — every field falls through to its component's own hardcoded default —
|
|
@@ -1306,12 +3179,102 @@ declare const GOG_CONFIG: InjectionToken<GogGlobalConfig>;
|
|
|
1306
3179
|
* ]
|
|
1307
3180
|
* ```
|
|
1308
3181
|
*
|
|
1309
|
-
* Providing this again further down the injector tree
|
|
1310
|
-
*
|
|
1311
|
-
*
|
|
1312
|
-
*
|
|
3182
|
+
* **Providing this again further down the injector tree layers onto the parent's config
|
|
3183
|
+
* rather than replacing it.** A route that only cares about tooltips can say so, and the
|
|
3184
|
+
* app-wide `button.debounce` stays in effect inside it:
|
|
3185
|
+
*
|
|
3186
|
+
* ```ts
|
|
3187
|
+
* // a route's providers — button.debounce from app.config.ts still applies here
|
|
3188
|
+
* provideGogConfig({ tooltip: { showDelay: 0 } })
|
|
3189
|
+
* ```
|
|
3190
|
+
*
|
|
3191
|
+
* Merging is one level deep, per component key: the nearest provider wins field by field, so
|
|
3192
|
+
* `{ tooltip: { showDelay: 0 } }` overrides only `showDelay` and leaves a parent's
|
|
3193
|
+
* `tooltip.position` alone. To drop an inherited value rather than change it, set it back to
|
|
3194
|
+
* the component's own default explicitly — there is no "unset" marker.
|
|
1313
3195
|
*/
|
|
1314
3196
|
declare function provideGogConfig(config: GogGlobalConfig): Provider;
|
|
3197
|
+
/**
|
|
3198
|
+
* The library's precedence rule for a configurable input, in one place: an instance's own
|
|
3199
|
+
* input wins, then the app-wide `GOG_CONFIG` value, then the component's built-in default.
|
|
3200
|
+
*
|
|
3201
|
+
* Every configurable input resolves through this rather than repeating the `??` chain, so the
|
|
3202
|
+
* order can't drift between components — a component that accidentally checked the config
|
|
3203
|
+
* first would silently ignore the input on that one control only, which is close to invisible
|
|
3204
|
+
* in review. Kept a plain function (no `inject`) so it works anywhere: inside a `computed`, in
|
|
3205
|
+
* a composition class like `GogFloatLabelState`, and in unit tests without an injector.
|
|
3206
|
+
*
|
|
3207
|
+
* ```ts
|
|
3208
|
+
* private readonly globalConfig = inject(GOG_CONFIG);
|
|
3209
|
+
* protected readonly resolvedDebounce = computed(() =>
|
|
3210
|
+
* resolveConfigured(this.debounce(), this.globalConfig.button?.debounce, DEFAULT_DEBOUNCE),
|
|
3211
|
+
* );
|
|
3212
|
+
* ```
|
|
3213
|
+
*/
|
|
3214
|
+
declare function resolveConfigured<T>(instanceValue: T | undefined, configuredValue: T | undefined, fallback: T): T;
|
|
3215
|
+
|
|
3216
|
+
/**
|
|
3217
|
+
* Shared float-label state for the library's field-style controls.
|
|
3218
|
+
*
|
|
3219
|
+
* A plain class rather than a base class or directive, for the same reason as `GogErrorState`:
|
|
3220
|
+
* it has to serve `gog-inputfield` and `gog-textarea`, which share no base class, as well as
|
|
3221
|
+
* `GogDropdownBase`, which is one. Each consumer owns an instance and exposes whichever
|
|
3222
|
+
* members its template needs.
|
|
3223
|
+
*
|
|
3224
|
+
* The one thing each control must supply itself is `hasValue` — "this field has content" means
|
|
3225
|
+
* something different everywhere (a non-empty string, a non-null selection, a non-empty
|
|
3226
|
+
* selection array), which is exactly why this is composed in rather than implemented as a
|
|
3227
|
+
* directive sitting outside the component.
|
|
3228
|
+
*/
|
|
3229
|
+
declare class GogFloatLabelState {
|
|
3230
|
+
private readonly variantInput;
|
|
3231
|
+
private readonly showPlaceholderInput;
|
|
3232
|
+
private readonly placeholder;
|
|
3233
|
+
private readonly isFocused;
|
|
3234
|
+
private readonly hasValue;
|
|
3235
|
+
private readonly config;
|
|
3236
|
+
/**
|
|
3237
|
+
* @param variantInput the control's own `floatLabel` input (`undefined` when unset)
|
|
3238
|
+
* @param showPlaceholderInput the control's own `floatLabelShowPlaceholder` input
|
|
3239
|
+
* @param placeholder the control's `placeholder` input
|
|
3240
|
+
* @param isFocused whether the control currently has focus
|
|
3241
|
+
* @param hasValue whether the control has a value — see the class note
|
|
3242
|
+
* @param config the injected `GOG_CONFIG`
|
|
3243
|
+
*/
|
|
3244
|
+
constructor(variantInput: Signal<GogFloatLabelVariant | undefined>, showPlaceholderInput: Signal<boolean | undefined>, placeholder: Signal<string>, isFocused: Signal<boolean>, hasValue: Signal<boolean>, config: GogGlobalConfig);
|
|
3245
|
+
/** The resolved variant: instance input, else `GOG_CONFIG.floatLabel.variant`, else `'none'`. */
|
|
3246
|
+
readonly variant: Signal<GogFloatLabelVariant>;
|
|
3247
|
+
readonly showPlaceholder: Signal<boolean>;
|
|
3248
|
+
/** Whether a float label is in effect at all — `false` keeps the static label-above layout. */
|
|
3249
|
+
readonly isActive: Signal<boolean>;
|
|
3250
|
+
/** Whether the label is at its floated target rather than resting like a placeholder. */
|
|
3251
|
+
readonly isFloated: Signal<boolean>;
|
|
3252
|
+
/**
|
|
3253
|
+
* The placeholder the control should actually render. While a float label is active the
|
|
3254
|
+
* resting label already occupies that space, so the placeholder stays hidden unless the
|
|
3255
|
+
* consumer opted into `floatLabelShowPlaceholder` — and even then only once the label has
|
|
3256
|
+
* floated out of the way.
|
|
3257
|
+
*/
|
|
3258
|
+
readonly effectivePlaceholder: Signal<string>;
|
|
3259
|
+
}
|
|
3260
|
+
|
|
3261
|
+
/** Every `--gog-*` custom property the library declares or documents as an override point. */
|
|
3262
|
+
type GogTokenName = '--gog-accent-bright' | '--gog-accent-color' | '--gog-accent-dim' | '--gog-accent-pale' | '--gog-accent-text-color' | '--gog-accordion-accent-color' | '--gog-accordion-body-bg' | '--gog-accordion-body-color' | '--gog-accordion-body-font-family' | '--gog-accordion-body-font-size' | '--gog-accordion-body-lift' | '--gog-accordion-body-line-height' | '--gog-accordion-body-padding-bottom' | '--gog-accordion-body-padding-top' | '--gog-accordion-body-radius' | '--gog-accordion-body-transition-duration' | '--gog-accordion-border-color' | '--gog-accordion-border-style' | '--gog-accordion-border-width' | '--gog-accordion-chevron-font-size' | '--gog-accordion-chevron-size' | '--gog-accordion-chevron-transition-duration' | '--gog-accordion-content-gap' | '--gog-accordion-disabled-opacity' | '--gog-accordion-focus-ring-width' | '--gog-accordion-font-family' | '--gog-accordion-font-size' | '--gog-accordion-header-bg' | '--gog-accordion-header-gap' | '--gog-accordion-header-text-transform' | '--gog-accordion-hover-bg' | '--gog-accordion-hover-ring' | '--gog-accordion-letter-spacing' | '--gog-accordion-lg-body-font-size' | '--gog-accordion-lg-body-line-height' | '--gog-accordion-lg-body-padding-bottom' | '--gog-accordion-lg-body-padding-top' | '--gog-accordion-lg-chevron-font-size' | '--gog-accordion-lg-chevron-size' | '--gog-accordion-lg-content-gap' | '--gog-accordion-lg-font-size' | '--gog-accordion-lg-letter-spacing' | '--gog-accordion-lg-padding-x' | '--gog-accordion-lg-padding-y' | '--gog-accordion-md-body-font-size' | '--gog-accordion-md-body-line-height' | '--gog-accordion-md-body-padding-bottom' | '--gog-accordion-md-body-padding-top' | '--gog-accordion-md-chevron-font-size' | '--gog-accordion-md-chevron-size' | '--gog-accordion-md-content-gap' | '--gog-accordion-md-font-size' | '--gog-accordion-md-letter-spacing' | '--gog-accordion-md-padding-x' | '--gog-accordion-md-padding-y' | '--gog-accordion-padding-x' | '--gog-accordion-padding-y' | '--gog-accordion-radius' | '--gog-accordion-slg-body-font-size' | '--gog-accordion-slg-body-line-height' | '--gog-accordion-slg-body-padding-bottom' | '--gog-accordion-slg-body-padding-top' | '--gog-accordion-slg-chevron-font-size' | '--gog-accordion-slg-chevron-size' | '--gog-accordion-slg-content-gap' | '--gog-accordion-slg-font-size' | '--gog-accordion-slg-letter-spacing' | '--gog-accordion-slg-padding-x' | '--gog-accordion-slg-padding-y' | '--gog-accordion-sm-body-font-size' | '--gog-accordion-sm-body-line-height' | '--gog-accordion-sm-body-padding-bottom' | '--gog-accordion-sm-body-padding-top' | '--gog-accordion-sm-chevron-font-size' | '--gog-accordion-sm-chevron-size' | '--gog-accordion-sm-content-gap' | '--gog-accordion-sm-font-size' | '--gog-accordion-sm-letter-spacing' | '--gog-accordion-sm-padding-x' | '--gog-accordion-sm-padding-y' | '--gog-accordion-text-color' | '--gog-accordion-transition-duration' | '--gog-accordion-xsm-body-font-size' | '--gog-accordion-xsm-body-line-height' | '--gog-accordion-xsm-body-padding-bottom' | '--gog-accordion-xsm-body-padding-top' | '--gog-accordion-xsm-chevron-font-size' | '--gog-accordion-xsm-chevron-size' | '--gog-accordion-xsm-content-gap' | '--gog-accordion-xsm-font-size' | '--gog-accordion-xsm-letter-spacing' | '--gog-accordion-xsm-padding-x' | '--gog-accordion-xsm-padding-y' | '--gog-autocomplete-actions-gap' | '--gog-autocomplete-actions-inset' | '--gog-autocomplete-actions-reserve' | '--gog-autocomplete-bg' | '--gog-autocomplete-border-color' | '--gog-autocomplete-border-style' | '--gog-autocomplete-border-width' | '--gog-autocomplete-clear-color' | '--gog-autocomplete-clear-hover-color' | '--gog-autocomplete-clear-icon-ratio' | '--gog-autocomplete-color' | '--gog-autocomplete-disabled-opacity' | '--gog-autocomplete-empty-color' | '--gog-autocomplete-empty-font-size' | '--gog-autocomplete-error-border-color' | '--gog-autocomplete-error-color' | '--gog-autocomplete-error-font-family' | '--gog-autocomplete-error-font-size' | '--gog-autocomplete-field-bg' | '--gog-autocomplete-float-label-in-top' | '--gog-autocomplete-float-label-on-bg' | '--gog-autocomplete-float-label-over-gap' | '--gog-autocomplete-float-label-over-reserve' | '--gog-autocomplete-float-label-reserve' | '--gog-autocomplete-focus-ring-color' | '--gog-autocomplete-focus-ring-offset' | '--gog-autocomplete-focus-ring-width' | '--gog-autocomplete-font-family' | '--gog-autocomplete-font-size' | '--gog-autocomplete-gap' | '--gog-autocomplete-hover-border-color' | '--gog-autocomplete-label-color' | '--gog-autocomplete-label-font-family' | '--gog-autocomplete-label-font-size' | '--gog-autocomplete-label-font-weight' | '--gog-autocomplete-label-letter-spacing' | '--gog-autocomplete-label-text-transform' | '--gog-autocomplete-line-height' | '--gog-autocomplete-min-width' | '--gog-autocomplete-option-color' | '--gog-autocomplete-option-gap' | '--gog-autocomplete-option-height' | '--gog-autocomplete-option-hover-bg' | '--gog-autocomplete-option-hover-color' | '--gog-autocomplete-option-padding' | '--gog-autocomplete-option-radius' | '--gog-autocomplete-option-selected-bg' | '--gog-autocomplete-option-selected-color' | '--gog-autocomplete-options-padding' | '--gog-autocomplete-padding-x' | '--gog-autocomplete-padding-y' | '--gog-autocomplete-panel-bg' | '--gog-autocomplete-panel-border-color' | '--gog-autocomplete-panel-border-style' | '--gog-autocomplete-panel-border-width' | '--gog-autocomplete-panel-gap' | '--gog-autocomplete-panel-max-height' | '--gog-autocomplete-panel-max-width' | '--gog-autocomplete-panel-radius' | '--gog-autocomplete-panel-shadow' | '--gog-autocomplete-placeholder-color' | '--gog-autocomplete-radius' | '--gog-autocomplete-spinner-size' | '--gog-autocomplete-text-color' | '--gog-autocomplete-transition-duration' | '--gog-background-color' | '--gog-badge-bg' | '--gog-badge-border-color' | '--gog-badge-border-style' | '--gog-badge-border-width' | '--gog-badge-color' | '--gog-badge-danger-bg' | '--gog-badge-danger-color' | '--gog-badge-dot-size' | '--gog-badge-font-family' | '--gog-badge-font-size' | '--gog-badge-font-weight' | '--gog-badge-info-bg' | '--gog-badge-info-color' | '--gog-badge-line-height' | '--gog-badge-offset' | '--gog-badge-padding-inline' | '--gog-badge-radius' | '--gog-badge-size' | '--gog-badge-success-bg' | '--gog-badge-success-color' | '--gog-badge-warning-bg' | '--gog-badge-warning-color' | '--gog-badge-z' | '--gog-border-color' | '--gog-btn-active-scale' | '--gog-btn-bg' | '--gog-btn-border' | '--gog-btn-border-style' | '--gog-btn-border-width' | '--gog-btn-color' | '--gog-btn-disabled-opacity' | '--gog-btn-focus-ring-offset' | '--gog-btn-focus-ring-width' | '--gog-btn-font-family' | '--gog-btn-font-weight' | '--gog-btn-gap' | '--gog-btn-ghost-bg' | '--gog-btn-ghost-border' | '--gog-btn-ghost-color' | '--gog-btn-ghost-hover-bg' | '--gog-btn-ghost-hover-color' | '--gog-btn-ghost-hover-shadow' | '--gog-btn-ghost-shadow' | '--gog-btn-ghost-spinner-color' | '--gog-btn-hover-bg' | '--gog-btn-hover-color' | '--gog-btn-hover-shadow' | '--gog-btn-letter-spacing' | '--gog-btn-lg-font-size' | '--gog-btn-lg-padding' | '--gog-btn-line-height' | '--gog-btn-loading-opacity' | '--gog-btn-md-font-size' | '--gog-btn-md-padding' | '--gog-btn-outline-bg' | '--gog-btn-outline-border' | '--gog-btn-outline-color' | '--gog-btn-outline-hover-bg' | '--gog-btn-outline-hover-color' | '--gog-btn-outline-hover-shadow' | '--gog-btn-outline-shadow' | '--gog-btn-outline-spinner-color' | '--gog-btn-primary-bg' | '--gog-btn-primary-border' | '--gog-btn-primary-color' | '--gog-btn-primary-hover-bg' | '--gog-btn-primary-hover-color' | '--gog-btn-primary-hover-shadow' | '--gog-btn-primary-shadow' | '--gog-btn-primary-spinner-color' | '--gog-btn-radius' | '--gog-btn-secondary-bg' | '--gog-btn-secondary-border' | '--gog-btn-secondary-color' | '--gog-btn-secondary-hover-bg' | '--gog-btn-secondary-hover-color' | '--gog-btn-secondary-hover-shadow' | '--gog-btn-secondary-shadow' | '--gog-btn-secondary-spinner-color' | '--gog-btn-shadow' | '--gog-btn-slg-font-size' | '--gog-btn-slg-padding' | '--gog-btn-sm-font-size' | '--gog-btn-sm-padding' | '--gog-btn-spinner-color' | '--gog-btn-spinner-max-size' | '--gog-btn-text-transform' | '--gog-btn-transition-duration' | '--gog-btn-xsm-font-size' | '--gog-btn-xsm-padding' | '--gog-button-toggle-bg' | '--gog-button-toggle-border-color' | '--gog-button-toggle-border-style' | '--gog-button-toggle-border-width' | '--gog-button-toggle-color' | '--gog-button-toggle-disabled-opacity' | '--gog-button-toggle-focus-ring-color' | '--gog-button-toggle-focus-ring-offset' | '--gog-button-toggle-focus-ring-width' | '--gog-button-toggle-font-family' | '--gog-button-toggle-font-size' | '--gog-button-toggle-font-weight' | '--gog-button-toggle-gap' | '--gog-button-toggle-hover-bg' | '--gog-button-toggle-hover-color' | '--gog-button-toggle-icon-size' | '--gog-button-toggle-letter-spacing' | '--gog-button-toggle-line-height' | '--gog-button-toggle-padding' | '--gog-button-toggle-radius' | '--gog-button-toggle-rest-bg' | '--gog-button-toggle-rest-color' | '--gog-button-toggle-selected-bg' | '--gog-button-toggle-selected-border-color' | '--gog-button-toggle-selected-color' | '--gog-button-toggle-separated-gap' | '--gog-button-toggle-text-transform' | '--gog-button-toggle-transition-duration' | '--gog-calendar-action-padding' | '--gog-calendar-color' | '--gog-calendar-day-bg' | '--gog-calendar-day-border-style' | '--gog-calendar-day-border-width' | '--gog-calendar-day-color' | '--gog-calendar-day-hover-bg' | '--gog-calendar-day-outside-color' | '--gog-calendar-day-radius' | '--gog-calendar-day-rest-bg' | '--gog-calendar-day-rest-color' | '--gog-calendar-day-size' | '--gog-calendar-disabled-opacity' | '--gog-calendar-divider-color' | '--gog-calendar-divider-style' | '--gog-calendar-divider-width' | '--gog-calendar-focus-ring-color' | '--gog-calendar-focus-ring-offset' | '--gog-calendar-focus-ring-width' | '--gog-calendar-font-family' | '--gog-calendar-header-gap' | '--gog-calendar-header-margin' | '--gog-calendar-lg-day-size' | '--gog-calendar-lg-font-size' | '--gog-calendar-md-day-size' | '--gog-calendar-md-font-size' | '--gog-calendar-months-gap' | '--gog-calendar-nav-bg' | '--gog-calendar-nav-color' | '--gog-calendar-nav-hover-bg' | '--gog-calendar-nav-hover-color' | '--gog-calendar-nav-icon-overlap' | '--gog-calendar-nav-icon-size' | '--gog-calendar-nav-radius' | '--gog-calendar-nav-size' | '--gog-calendar-padding' | '--gog-calendar-range-bg' | '--gog-calendar-range-color' | '--gog-calendar-selected-bg' | '--gog-calendar-selected-color' | '--gog-calendar-selected-font-weight' | '--gog-calendar-slg-day-size' | '--gog-calendar-slg-font-size' | '--gog-calendar-sm-day-size' | '--gog-calendar-sm-font-size' | '--gog-calendar-time-gap' | '--gog-calendar-time-input-bg' | '--gog-calendar-time-input-padding' | '--gog-calendar-time-input-width' | '--gog-calendar-time-margin' | '--gog-calendar-title-color' | '--gog-calendar-title-font-weight' | '--gog-calendar-today-border-color' | '--gog-calendar-today-font-weight' | '--gog-calendar-transition-duration' | '--gog-calendar-weekday-color' | '--gog-calendar-weekday-font-size' | '--gog-calendar-weekday-font-weight' | '--gog-calendar-weekday-padding' | '--gog-calendar-weekday-text-transform' | '--gog-calendar-xsm-day-size' | '--gog-calendar-xsm-font-size' | '--gog-checkbox-bg' | '--gog-checkbox-border-color' | '--gog-checkbox-border-style' | '--gog-checkbox-border-width' | '--gog-checkbox-box-size' | '--gog-checkbox-checked-bg' | '--gog-checkbox-checked-border' | '--gog-checkbox-dash-height' | '--gog-checkbox-dash-radius' | '--gog-checkbox-dash-width-ratio' | '--gog-checkbox-disabled-opacity' | '--gog-checkbox-focus-ring' | '--gog-checkbox-focus-ring-offset' | '--gog-checkbox-focus-ring-width' | '--gog-checkbox-font-family' | '--gog-checkbox-gap' | '--gog-checkbox-icon-color' | '--gog-checkbox-icon-size' | '--gog-checkbox-label-color' | '--gog-checkbox-label-line-height' | '--gog-checkbox-label-size' | '--gog-checkbox-padding' | '--gog-checkbox-radius' | '--gog-checkbox-transition-duration' | '--gog-chip-avatar-inset-ratio' | '--gog-chip-avatar-size' | '--gog-chip-bg' | '--gog-chip-border' | '--gog-chip-border-style' | '--gog-chip-border-width' | '--gog-chip-color' | '--gog-chip-disabled-opacity' | '--gog-chip-focus-ring-offset' | '--gog-chip-focus-ring-width' | '--gog-chip-font-family' | '--gog-chip-font-size' | '--gog-chip-font-weight' | '--gog-chip-gap' | '--gog-chip-hover-bg' | '--gog-chip-icon-size' | '--gog-chip-lg-avatar-size' | '--gog-chip-lg-font-size' | '--gog-chip-lg-gap' | '--gog-chip-lg-icon-size' | '--gog-chip-lg-padding-block' | '--gog-chip-lg-padding-inline' | '--gog-chip-lg-remove-size' | '--gog-chip-line-height' | '--gog-chip-md-avatar-size' | '--gog-chip-md-font-size' | '--gog-chip-md-gap' | '--gog-chip-md-icon-size' | '--gog-chip-md-padding-block' | '--gog-chip-md-padding-inline' | '--gog-chip-md-remove-size' | '--gog-chip-padding-block' | '--gog-chip-padding-inline' | '--gog-chip-pill-radius' | '--gog-chip-radius' | '--gog-chip-remove-color' | '--gog-chip-remove-hover-color' | '--gog-chip-remove-inset-ratio' | '--gog-chip-remove-scale' | '--gog-chip-remove-size' | '--gog-chip-slg-avatar-size' | '--gog-chip-slg-font-size' | '--gog-chip-slg-gap' | '--gog-chip-slg-icon-size' | '--gog-chip-slg-padding-block' | '--gog-chip-slg-padding-inline' | '--gog-chip-slg-remove-size' | '--gog-chip-sm-avatar-size' | '--gog-chip-sm-font-size' | '--gog-chip-sm-gap' | '--gog-chip-sm-icon-size' | '--gog-chip-sm-padding-block' | '--gog-chip-sm-padding-inline' | '--gog-chip-sm-remove-size' | '--gog-chip-xsm-avatar-size' | '--gog-chip-xsm-font-size' | '--gog-chip-xsm-gap' | '--gog-chip-xsm-icon-size' | '--gog-chip-xsm-padding-block' | '--gog-chip-xsm-padding-inline' | '--gog-chip-xsm-remove-size' | '--gog-collapsible-disabled-opacity' | '--gog-collapsible-max-height' | '--gog-collapsible-transition-duration' | '--gog-confirm-actions-gap' | '--gog-confirm-actions-offset' | '--gog-confirm-color' | '--gog-confirm-description-color' | '--gog-confirm-gap' | '--gog-confirm-max-width' | '--gog-confirm-min-width' | '--gog-control-border-style' | '--gog-control-border-width' | '--gog-control-checkbox-box-size-lg' | '--gog-control-checkbox-box-size-md' | '--gog-control-checkbox-box-size-slg' | '--gog-control-checkbox-box-size-sm' | '--gog-control-checkbox-box-size-xsm' | '--gog-control-checkbox-icon-size-lg' | '--gog-control-checkbox-icon-size-md' | '--gog-control-checkbox-icon-size-slg' | '--gog-control-checkbox-icon-size-sm' | '--gog-control-checkbox-icon-size-xsm' | '--gog-control-checkbox-label-size-lg' | '--gog-control-checkbox-label-size-md' | '--gog-control-checkbox-label-size-slg' | '--gog-control-checkbox-label-size-sm' | '--gog-control-checkbox-label-size-xsm' | '--gog-control-checkbox-padding' | '--gog-control-icon-offset' | '--gog-control-padding-x' | '--gog-control-padding-y' | '--gog-danger-color' | '--gog-datepicker-actions-gap' | '--gog-datepicker-actions-inset' | '--gog-datepicker-actions-reserve' | '--gog-datepicker-bg' | '--gog-datepicker-border-color' | '--gog-datepicker-border-style' | '--gog-datepicker-border-width' | '--gog-datepicker-clear-color' | '--gog-datepicker-clear-icon-ratio' | '--gog-datepicker-color' | '--gog-datepicker-disabled-opacity' | '--gog-datepicker-error-border-color' | '--gog-datepicker-error-color' | '--gog-datepicker-error-font-family' | '--gog-datepicker-error-font-size' | '--gog-datepicker-field-bg' | '--gog-datepicker-float-label-in-top' | '--gog-datepicker-float-label-on-bg' | '--gog-datepicker-float-label-over-gap' | '--gog-datepicker-float-label-over-reserve' | '--gog-datepicker-float-label-reserve' | '--gog-datepicker-focus-ring-color' | '--gog-datepicker-focus-ring-offset' | '--gog-datepicker-focus-ring-width' | '--gog-datepicker-font-family' | '--gog-datepicker-font-size' | '--gog-datepicker-gap' | '--gog-datepicker-hover-border-color' | '--gog-datepicker-icon-color' | '--gog-datepicker-icon-hover-color' | '--gog-datepicker-label-color' | '--gog-datepicker-label-font-family' | '--gog-datepicker-label-font-size' | '--gog-datepicker-label-letter-spacing' | '--gog-datepicker-label-text-transform' | '--gog-datepicker-line-height' | '--gog-datepicker-min-width' | '--gog-datepicker-padding-x' | '--gog-datepicker-padding-y' | '--gog-datepicker-panel-bg' | '--gog-datepicker-panel-border-color' | '--gog-datepicker-panel-border-style' | '--gog-datepicker-panel-border-width' | '--gog-datepicker-panel-gap' | '--gog-datepicker-panel-radius' | '--gog-datepicker-panel-shadow' | '--gog-datepicker-placeholder-color' | '--gog-datepicker-radius' | '--gog-datepicker-text-color' | '--gog-datepicker-toggle-icon-size' | '--gog-datepicker-transition-duration' | '--gog-dialog-backdrop-bg' | '--gog-dialog-backdrop-blur' | '--gog-dialog-backdrop-fade-duration' | '--gog-dialog-backdrop-padding' | '--gog-dialog-bg' | '--gog-dialog-body-max-height' | '--gog-dialog-body-padding' | '--gog-dialog-border' | '--gog-dialog-border-style' | '--gog-dialog-border-width' | '--gog-dialog-close-color' | '--gog-dialog-close-focus-ring' | '--gog-dialog-close-focus-ring-offset' | '--gog-dialog-close-focus-ring-width' | '--gog-dialog-close-font-size' | '--gog-dialog-close-hover-bg' | '--gog-dialog-close-hover-border' | '--gog-dialog-close-hover-color' | '--gog-dialog-close-size' | '--gog-dialog-color' | '--gog-dialog-enter-distance' | '--gog-dialog-enter-duration' | '--gog-dialog-font-family' | '--gog-dialog-header-border-color' | '--gog-dialog-header-gap' | '--gog-dialog-header-padding' | '--gog-dialog-max-height' | '--gog-dialog-min-width' | '--gog-dialog-offset-x' | '--gog-dialog-offset-y' | '--gog-dialog-radius' | '--gog-dialog-shadow' | '--gog-disabled-opacity' | '--gog-divider-block-spacing' | '--gog-divider-color' | '--gog-divider-dashed-style' | '--gog-divider-dotted-style' | '--gog-divider-inline-spacing' | '--gog-divider-inset-size' | '--gog-divider-label-color' | '--gog-divider-label-font-family' | '--gog-divider-label-font-size' | '--gog-divider-label-font-weight' | '--gog-divider-label-gap' | '--gog-divider-label-line-height' | '--gog-divider-line-color' | '--gog-divider-line-thickness' | '--gog-divider-solid-style' | '--gog-divider-spacing' | '--gog-divider-thickness' | '--gog-divider-vertical-length' | '--gog-dropdown-z' | '--gog-duration-base' | '--gog-duration-fast' | '--gog-duration-slow' | '--gog-easing' | '--gog-field-float-label-in-top' | '--gog-field-float-label-over-gap' | '--gog-field-float-label-over-reserve' | '--gog-field-float-label-reserve' | '--gog-field-lg-font-size' | '--gog-field-lg-icon-inset' | '--gog-field-lg-icon-offset' | '--gog-field-lg-padding-x' | '--gog-field-lg-padding-y' | '--gog-field-md-font-size' | '--gog-field-md-icon-inset' | '--gog-field-md-icon-offset' | '--gog-field-md-padding-x' | '--gog-field-md-padding-y' | '--gog-field-slg-font-size' | '--gog-field-slg-icon-inset' | '--gog-field-slg-icon-offset' | '--gog-field-slg-padding-x' | '--gog-field-slg-padding-y' | '--gog-field-sm-font-size' | '--gog-field-sm-icon-inset' | '--gog-field-sm-icon-offset' | '--gog-field-sm-padding-x' | '--gog-field-sm-padding-y' | '--gog-field-xsm-font-size' | '--gog-field-xsm-icon-inset' | '--gog-field-xsm-icon-offset' | '--gog-field-xsm-padding-x' | '--gog-field-xsm-padding-y' | '--gog-focus-ring-offset' | '--gog-focus-ring-width' | '--gog-font-body' | '--gog-font-heading' | '--gog-font-mono' | '--gog-hover-color' | '--gog-icon-fallback-size' | '--gog-icon-size' | '--gog-icon-stroke-width' | '--gog-info-color' | '--gog-input-clear-icon-ratio' | '--gog-input-clear-inset' | '--gog-input-clear-radius' | '--gog-input-disabled-opacity' | '--gog-input-error-color' | '--gog-input-error-font-size' | '--gog-input-error-offset' | '--gog-input-field-bg' | '--gog-input-field-border' | '--gog-input-field-border-style' | '--gog-input-field-border-width' | '--gog-input-field-color' | '--gog-input-float-label-in-top' | '--gog-input-float-label-on-bg' | '--gog-input-float-label-over-gap' | '--gog-input-float-label-over-reserve' | '--gog-input-float-label-reserve' | '--gog-input-focus-border' | '--gog-input-focus-glow' | '--gog-input-focus-ring' | '--gog-input-focus-ring-offset' | '--gog-input-focus-ring-width' | '--gog-input-font' | '--gog-input-font-family' | '--gog-input-gap' | '--gog-input-icon-action-radius' | '--gog-input-icon-color' | '--gog-input-icon-focus-ring-width' | '--gog-input-icon-hover-color' | '--gog-input-label-color' | '--gog-input-label-font-family' | '--gog-input-label-font-size' | '--gog-input-label-letter-spacing' | '--gog-input-label-text-transform' | '--gog-input-padding-x' | '--gog-input-padding-y' | '--gog-input-placeholder-color' | '--gog-input-radius' | '--gog-input-transition-duration' | '--gog-ms-actions-gap' | '--gog-ms-actions-inset' | '--gog-ms-arrow-icon-ratio' | '--gog-ms-arrow-transition-duration' | '--gog-ms-border-color' | '--gog-ms-checkbox-bg' | '--gog-ms-checkbox-border' | '--gog-ms-checkbox-checked-bg' | '--gog-ms-checkbox-checked-color' | '--gog-ms-clear-icon-ratio' | '--gog-ms-clear-radius' | '--gog-ms-controls-gap' | '--gog-ms-controls-padding' | '--gog-ms-disabled-opacity' | '--gog-ms-error-color' | '--gog-ms-error-font-size' | '--gog-ms-error-offset' | '--gog-ms-field-bg' | '--gog-ms-field-border' | '--gog-ms-field-border-style' | '--gog-ms-field-border-width' | '--gog-ms-field-color' | '--gog-ms-filter-border-color' | '--gog-ms-filter-border-style' | '--gog-ms-filter-border-width' | '--gog-ms-filter-empty-color' | '--gog-ms-filter-empty-padding' | '--gog-ms-filter-input-bg' | '--gog-ms-filter-input-border' | '--gog-ms-filter-input-color' | '--gog-ms-filter-input-padding-x' | '--gog-ms-filter-input-padding-y' | '--gog-ms-filter-input-radius' | '--gog-ms-filter-padding' | '--gog-ms-float-label-in-top' | '--gog-ms-float-label-over-gap' | '--gog-ms-float-label-over-reserve' | '--gog-ms-float-label-reserve' | '--gog-ms-focus-border' | '--gog-ms-focus-glow' | '--gog-ms-focus-ring' | '--gog-ms-focus-ring-offset' | '--gog-ms-focus-ring-width' | '--gog-ms-font-family' | '--gog-ms-gap' | '--gog-ms-label-color' | '--gog-ms-label-font-family' | '--gog-ms-label-font-size' | '--gog-ms-label-letter-spacing' | '--gog-ms-label-text-transform' | '--gog-ms-mark-icon-ratio' | '--gog-ms-mark-size-ratio' | '--gog-ms-min-width' | '--gog-ms-option-color' | '--gog-ms-option-disabled-opacity' | '--gog-ms-option-gap' | '--gog-ms-option-gap-inline' | '--gog-ms-option-height' | '--gog-ms-option-hover-bg' | '--gog-ms-option-radius' | '--gog-ms-option-transition-duration' | '--gog-ms-options-padding' | '--gog-ms-overflow-color' | '--gog-ms-overflow-font-size' | '--gog-ms-overflow-gap' | '--gog-ms-panel-bg' | '--gog-ms-panel-border' | '--gog-ms-panel-max-height' | '--gog-ms-panel-max-width' | '--gog-ms-panel-offset' | '--gog-ms-panel-shadow' | '--gog-ms-placeholder-color' | '--gog-ms-radius' | '--gog-ms-transition-duration' | '--gog-ms-value-color' | '--gog-multiselect-actions-gap' | '--gog-multiselect-actions-inset' | '--gog-multiselect-arrow-icon-ratio' | '--gog-multiselect-arrow-transition-duration' | '--gog-multiselect-border-color' | '--gog-multiselect-checkbox-bg' | '--gog-multiselect-checkbox-border' | '--gog-multiselect-checkbox-checked-bg' | '--gog-multiselect-checkbox-checked-color' | '--gog-multiselect-clear-icon-ratio' | '--gog-multiselect-clear-radius' | '--gog-multiselect-controls-gap' | '--gog-multiselect-controls-padding' | '--gog-multiselect-disabled-opacity' | '--gog-multiselect-error-color' | '--gog-multiselect-error-font-size' | '--gog-multiselect-error-offset' | '--gog-multiselect-field-bg' | '--gog-multiselect-field-border' | '--gog-multiselect-field-border-style' | '--gog-multiselect-field-border-width' | '--gog-multiselect-field-color' | '--gog-multiselect-filter-border-color' | '--gog-multiselect-filter-border-style' | '--gog-multiselect-filter-border-width' | '--gog-multiselect-filter-empty-color' | '--gog-multiselect-filter-empty-padding' | '--gog-multiselect-filter-input-bg' | '--gog-multiselect-filter-input-border' | '--gog-multiselect-filter-input-color' | '--gog-multiselect-filter-input-padding-x' | '--gog-multiselect-filter-input-padding-y' | '--gog-multiselect-filter-input-radius' | '--gog-multiselect-filter-padding' | '--gog-multiselect-float-label-in-top' | '--gog-multiselect-float-label-on-bg' | '--gog-multiselect-float-label-over-gap' | '--gog-multiselect-float-label-over-reserve' | '--gog-multiselect-float-label-reserve' | '--gog-multiselect-focus-border' | '--gog-multiselect-focus-glow' | '--gog-multiselect-focus-ring' | '--gog-multiselect-focus-ring-offset' | '--gog-multiselect-focus-ring-width' | '--gog-multiselect-font-family' | '--gog-multiselect-font-size' | '--gog-multiselect-gap' | '--gog-multiselect-label-color' | '--gog-multiselect-label-font-family' | '--gog-multiselect-label-font-size' | '--gog-multiselect-label-letter-spacing' | '--gog-multiselect-label-text-transform' | '--gog-multiselect-mark-icon-ratio' | '--gog-multiselect-mark-size-ratio' | '--gog-multiselect-min-width' | '--gog-multiselect-option-color' | '--gog-multiselect-option-disabled-opacity' | '--gog-multiselect-option-gap' | '--gog-multiselect-option-gap-inline' | '--gog-multiselect-option-height' | '--gog-multiselect-option-hover-bg' | '--gog-multiselect-option-radius' | '--gog-multiselect-option-transition-duration' | '--gog-multiselect-options-padding' | '--gog-multiselect-overflow-color' | '--gog-multiselect-overflow-font-size' | '--gog-multiselect-overflow-gap' | '--gog-multiselect-padding-x' | '--gog-multiselect-padding-y' | '--gog-multiselect-panel-bg' | '--gog-multiselect-panel-border' | '--gog-multiselect-panel-max-height' | '--gog-multiselect-panel-max-width' | '--gog-multiselect-panel-offset' | '--gog-multiselect-panel-shadow' | '--gog-multiselect-placeholder-color' | '--gog-multiselect-radius' | '--gog-multiselect-transition-duration' | '--gog-multiselect-value-color' | '--gog-muted-text-color' | '--gog-paginator-ellipsis-color' | '--gog-paginator-ellipsis-font-family' | '--gog-paginator-ellipsis-font-size' | '--gog-paginator-ellipsis-min-width' | '--gog-paginator-gap' | '--gog-panel-border-style' | '--gog-panel-border-width' | '--gog-panel-radius' | '--gog-panel-shadow' | '--gog-primary-color' | '--gog-progressbar-accent-bg' | '--gog-progressbar-accent-buffer-bg' | '--gog-progressbar-buffer-bg' | '--gog-progressbar-danger-bg' | '--gog-progressbar-danger-buffer-bg' | '--gog-progressbar-fill-bg' | '--gog-progressbar-height' | '--gog-progressbar-indeterminate-duration' | '--gog-progressbar-indeterminate-easing' | '--gog-progressbar-info-bg' | '--gog-progressbar-info-buffer-bg' | '--gog-progressbar-lg-height' | '--gog-progressbar-md-height' | '--gog-progressbar-radius' | '--gog-progressbar-slg-height' | '--gog-progressbar-sm-height' | '--gog-progressbar-stripe-color' | '--gog-progressbar-stripe-size' | '--gog-progressbar-success-bg' | '--gog-progressbar-success-buffer-bg' | '--gog-progressbar-track-base-bg' | '--gog-progressbar-track-bg' | '--gog-progressbar-transition-duration' | '--gog-progressbar-value-color' | '--gog-progressbar-value-font-family' | '--gog-progressbar-value-font-size' | '--gog-progressbar-value-gap' | '--gog-progressbar-value-min-width' | '--gog-progressbar-warning-bg' | '--gog-progressbar-warning-buffer-bg' | '--gog-progressbar-xsm-height' | '--gog-radio-bg' | '--gog-radio-border-color' | '--gog-radio-border-style' | '--gog-radio-border-width' | '--gog-radio-box-size' | '--gog-radio-checked-bg' | '--gog-radio-checked-border' | '--gog-radio-disabled-opacity' | '--gog-radio-dot-color' | '--gog-radio-dot-size-ratio' | '--gog-radio-error-color' | '--gog-radio-error-font-size' | '--gog-radio-focus-ring' | '--gog-radio-focus-ring-offset' | '--gog-radio-focus-ring-width' | '--gog-radio-font-family' | '--gog-radio-gap' | '--gog-radio-group-gap' | '--gog-radio-group-label-color' | '--gog-radio-group-label-size' | '--gog-radio-group-option-gap' | '--gog-radio-group-option-gap-horizontal' | '--gog-radio-label-color' | '--gog-radio-label-line-height' | '--gog-radio-label-size' | '--gog-radio-padding' | '--gog-radio-transition-duration' | '--gog-radius' | '--gog-scroll-corner-bg' | '--gog-scroll-fade-duration' | '--gog-scroll-focus-ring' | '--gog-scroll-focus-ring-width' | '--gog-scroll-normal-thumb-min-size' | '--gog-scroll-normal-track-width' | '--gog-scroll-thin-thumb-min-size' | '--gog-scroll-thin-track-width' | '--gog-scroll-thumb-active-bg' | '--gog-scroll-thumb-bg' | '--gog-scroll-thumb-hover-bg' | '--gog-scroll-thumb-inset' | '--gog-scroll-thumb-radius' | '--gog-scroll-track-bg' | '--gog-scroll-track-radius' | '--gog-secondary-color' | '--gog-select-chevron-color' | '--gog-select-chevron-icon-ratio' | '--gog-select-chevron-inset' | '--gog-select-clear-color' | '--gog-select-clear-gap' | '--gog-select-clear-hover-color' | '--gog-select-clear-icon-ratio' | '--gog-select-clear-radius' | '--gog-select-control-font' | '--gog-select-control-gap' | '--gog-select-control-padding-x' | '--gog-select-control-padding-y' | '--gog-select-disabled-opacity' | '--gog-select-error-color' | '--gog-select-error-font-size' | '--gog-select-field-bg' | '--gog-select-field-border' | '--gog-select-field-border-style' | '--gog-select-field-border-width' | '--gog-select-field-color' | '--gog-select-filter-border-color' | '--gog-select-filter-border-style' | '--gog-select-filter-border-width' | '--gog-select-filter-empty-color' | '--gog-select-filter-empty-padding' | '--gog-select-filter-input-bg' | '--gog-select-filter-input-border' | '--gog-select-filter-input-color' | '--gog-select-filter-input-padding-x' | '--gog-select-filter-input-padding-y' | '--gog-select-filter-input-radius' | '--gog-select-filter-padding' | '--gog-select-float-label-in-top' | '--gog-select-float-label-on-bg' | '--gog-select-float-label-over-gap' | '--gog-select-float-label-over-reserve' | '--gog-select-float-label-reserve' | '--gog-select-focus-border' | '--gog-select-focus-glow' | '--gog-select-focus-ring' | '--gog-select-focus-ring-offset' | '--gog-select-focus-ring-width' | '--gog-select-font-family' | '--gog-select-gap' | '--gog-select-label-color' | '--gog-select-label-font-family' | '--gog-select-label-font-size' | '--gog-select-label-letter-spacing' | '--gog-select-label-text-transform' | '--gog-select-mark-icon-ratio' | '--gog-select-mark-size-ratio' | '--gog-select-min-width' | '--gog-select-option-color' | '--gog-select-option-disabled-opacity' | '--gog-select-option-gap' | '--gog-select-option-height' | '--gog-select-option-hover-bg' | '--gog-select-option-selected-color' | '--gog-select-option-transition-duration' | '--gog-select-panel-bg' | '--gog-select-panel-max-height' | '--gog-select-panel-max-width' | '--gog-select-panel-offset' | '--gog-select-panel-shadow' | '--gog-select-placeholder-color' | '--gog-select-radius' | '--gog-select-transition-duration' | '--gog-skeleton-base' | '--gog-skeleton-circle-size-lg' | '--gog-skeleton-circle-size-md' | '--gog-skeleton-circle-size-slg' | '--gog-skeleton-circle-size-sm' | '--gog-skeleton-circle-size-xsm' | '--gog-skeleton-line-gap' | '--gog-skeleton-line-height-lg' | '--gog-skeleton-line-height-md' | '--gog-skeleton-line-height-slg' | '--gog-skeleton-line-height-sm' | '--gog-skeleton-line-height-xsm' | '--gog-skeleton-line-radius' | '--gog-skeleton-pulse-duration' | '--gog-skeleton-pulse-min-opacity' | '--gog-skeleton-radius' | '--gog-skeleton-rect-height-lg' | '--gog-skeleton-rect-height-md' | '--gog-skeleton-rect-height-slg' | '--gog-skeleton-rect-height-sm' | '--gog-skeleton-rect-height-xsm' | '--gog-skeleton-shine' | '--gog-skeleton-short-line-width' | '--gog-skeleton-square-radius' | '--gog-skeleton-wave-duration' | '--gog-slider-auto-width' | '--gog-slider-disabled-opacity' | '--gog-slider-error-color' | '--gog-slider-error-font-family' | '--gog-slider-error-font-size' | '--gog-slider-fill-bg' | '--gog-slider-focus-ring' | '--gog-slider-focus-ring-width' | '--gog-slider-gap' | '--gog-slider-label-color' | '--gog-slider-label-font-family' | '--gog-slider-label-font-size' | '--gog-slider-label-letter-spacing' | '--gog-slider-label-text-transform' | '--gog-slider-range-color' | '--gog-slider-range-font-size' | '--gog-slider-thumb-bg' | '--gog-slider-thumb-border' | '--gog-slider-thumb-border-width' | '--gog-slider-thumb-glow-size' | '--gog-slider-thumb-radius' | '--gog-slider-thumb-shadow' | '--gog-slider-thumb-size' | '--gog-slider-track-area-height' | '--gog-slider-track-bg' | '--gog-slider-track-border-color' | '--gog-slider-track-border-style' | '--gog-slider-track-border-width' | '--gog-slider-track-height' | '--gog-slider-track-radius' | '--gog-slider-value-color' | '--gog-slider-value-font-family' | '--gog-slider-value-font-size' | '--gog-slider-value-min-width' | '--gog-slider-vertical-length' | '--gog-space-2xl' | '--gog-space-lg' | '--gog-space-md' | '--gog-space-sm' | '--gog-space-xs' | '--gog-spinner-arc-inner-color' | '--gog-spinner-arc-inner-dash' | '--gog-spinner-arc-inner-glow' | '--gog-spinner-arc-inner-opacity' | '--gog-spinner-arc-inner-pulse-opacity' | '--gog-spinner-arc-inner-stroke-compact' | '--gog-spinner-arc-outer-color' | '--gog-spinner-arc-outer-dash' | '--gog-spinner-arc-outer-glow' | '--gog-spinner-arc-outer-pulse-opacity' | '--gog-spinner-diamond-color' | '--gog-spinner-diamond-glow' | '--gog-spinner-diamond-opacity' | '--gog-spinner-glow-color' | '--gog-spinner-overlay-bg' | '--gog-spinner-overlay-blur' | '--gog-spinner-overlay-fade-duration' | '--gog-spinner-overlay-z' | '--gog-spinner-pulse-duration' | '--gog-spinner-ring-duration' | '--gog-spinner-ring-glow' | '--gog-spinner-ring-padding' | '--gog-spinner-rune-color' | '--gog-spinner-rune-font-family' | '--gog-spinner-rune-glow' | '--gog-spinner-rune-pulse-opacity' | '--gog-spinner-rune-size' | '--gog-spinner-size-lg' | '--gog-spinner-size-md' | '--gog-spinner-size-slg' | '--gog-spinner-size-sm' | '--gog-spinner-size-xsm' | '--gog-spinner-spin-duration' | '--gog-spinner-spin-slow-duration' | '--gog-spinner-ticks-duration' | '--gog-spinner-track-color' | '--gog-spinner-track-opacity' | '--gog-success-color' | '--gog-surface-color' | '--gog-table-accent-bright' | '--gog-table-accent-color' | '--gog-table-border-color' | '--gog-table-border-style' | '--gog-table-border-width' | '--gog-table-empty-font-size' | '--gog-table-empty-padding' | '--gog-table-focus-ring' | '--gog-table-focus-ring-width' | '--gog-table-font-family' | '--gog-table-footer-gap' | '--gog-table-footer-min-height' | '--gog-table-gap' | '--gog-table-header-font-family' | '--gog-table-header-letter-spacing' | '--gog-table-header-text-transform' | '--gog-table-hover-bg' | '--gog-table-lg-padding-v' | '--gog-table-lg-td-font-size' | '--gog-table-lg-th-font-size' | '--gog-table-loading-opacity' | '--gog-table-loading-padding' | '--gog-table-md-padding-v' | '--gog-table-md-td-font-size' | '--gog-table-md-th-font-size' | '--gog-table-muted-color' | '--gog-table-num-col-width' | '--gog-table-num-font-size' | '--gog-table-numeric-font-family' | '--gog-table-padding-h' | '--gog-table-row-border-width' | '--gog-table-row-transition-duration' | '--gog-table-slg-padding-v' | '--gog-table-slg-td-font-size' | '--gog-table-slg-th-font-size' | '--gog-table-sm-padding-v' | '--gog-table-sm-td-font-size' | '--gog-table-sm-th-font-size' | '--gog-table-sort-icon-opacity' | '--gog-table-sort-icon-size' | '--gog-table-sort-icon-width' | '--gog-table-surface' | '--gog-table-td-font-size' | '--gog-table-td-padding-v' | '--gog-table-text-color' | '--gog-table-th-font-size' | '--gog-table-th-inner-gap' | '--gog-table-th-padding-v' | '--gog-table-total-font-size' | '--gog-table-total-letter-spacing' | '--gog-table-total-text-transform' | '--gog-table-xsm-padding-v' | '--gog-table-xsm-td-font-size' | '--gog-table-xsm-th-font-size' | '--gog-tabs-active-color' | '--gog-tabs-disabled-opacity' | '--gog-tabs-focus-ring-color' | '--gog-tabs-focus-ring-offset' | '--gog-tabs-focus-ring-width' | '--gog-tabs-font-family' | '--gog-tabs-font-weight' | '--gog-tabs-gap' | '--gog-tabs-header-border-color' | '--gog-tabs-header-border-style' | '--gog-tabs-header-border-width' | '--gog-tabs-hover-color' | '--gog-tabs-icon-size' | '--gog-tabs-indicator-color' | '--gog-tabs-indicator-radius' | '--gog-tabs-indicator-thickness' | '--gog-tabs-letter-spacing' | '--gog-tabs-lg-font-size' | '--gog-tabs-lg-padding' | '--gog-tabs-line-height' | '--gog-tabs-md-font-size' | '--gog-tabs-md-padding' | '--gog-tabs-panel-color' | '--gog-tabs-panel-padding' | '--gog-tabs-rest-bg' | '--gog-tabs-rest-color' | '--gog-tabs-slg-font-size' | '--gog-tabs-slg-padding' | '--gog-tabs-sm-font-size' | '--gog-tabs-sm-padding' | '--gog-tabs-tab-bg' | '--gog-tabs-tab-color' | '--gog-tabs-tab-font-size' | '--gog-tabs-tab-gap' | '--gog-tabs-tab-padding' | '--gog-tabs-text-transform' | '--gog-tabs-transition-duration' | '--gog-tabs-xsm-font-size' | '--gog-tabs-xsm-padding' | '--gog-tag-accent' | '--gog-tag-bg' | '--gog-tag-bg-base' | '--gog-tag-bg-mix' | '--gog-tag-border' | '--gog-tag-border-style' | '--gog-tag-border-width' | '--gog-tag-color' | '--gog-tag-color-base' | '--gog-tag-color-mix' | '--gog-tag-danger-color' | '--gog-tag-default-color' | '--gog-tag-font-family' | '--gog-tag-font-size' | '--gog-tag-font-weight' | '--gog-tag-gap' | '--gog-tag-icon-size' | '--gog-tag-info-color' | '--gog-tag-inner-border-width' | '--gog-tag-lg-font-size' | '--gog-tag-lg-gap' | '--gog-tag-lg-icon-size' | '--gog-tag-lg-padding-block' | '--gog-tag-lg-padding-inline' | '--gog-tag-line-height' | '--gog-tag-md-font-size' | '--gog-tag-md-gap' | '--gog-tag-md-icon-size' | '--gog-tag-md-padding-block' | '--gog-tag-md-padding-inline' | '--gog-tag-padding-block' | '--gog-tag-padding-inline' | '--gog-tag-pill-radius' | '--gog-tag-radius' | '--gog-tag-slg-font-size' | '--gog-tag-slg-gap' | '--gog-tag-slg-icon-size' | '--gog-tag-slg-padding-block' | '--gog-tag-slg-padding-inline' | '--gog-tag-sm-font-size' | '--gog-tag-sm-gap' | '--gog-tag-sm-icon-size' | '--gog-tag-sm-padding-block' | '--gog-tag-sm-padding-inline' | '--gog-tag-success-color' | '--gog-tag-warning-color' | '--gog-tag-xsm-font-size' | '--gog-tag-xsm-gap' | '--gog-tag-xsm-icon-size' | '--gog-tag-xsm-padding-block' | '--gog-tag-xsm-padding-inline' | '--gog-text-2xl' | '--gog-text-3xl' | '--gog-text-color' | '--gog-text-lg' | '--gog-text-md' | '--gog-text-sm' | '--gog-text-xl' | '--gog-text-xs' | '--gog-textarea-clear-icon-ratio' | '--gog-textarea-scrollbar-width' | '--gog-toast-accent-width' | '--gog-toast-action-font-size' | '--gog-toast-action-padding' | '--gog-toast-actions-gap' | '--gog-toast-base-z' | '--gog-toast-bg' | '--gog-toast-border' | '--gog-toast-close-font-size' | '--gog-toast-close-padding' | '--gog-toast-color' | '--gog-toast-content-gap' | '--gog-toast-enter-distance' | '--gog-toast-error-color' | '--gog-toast-font-family' | '--gog-toast-gap' | '--gog-toast-icon-color' | '--gog-toast-icon-line-height' | '--gog-toast-icon-size' | '--gog-toast-info-color' | '--gog-toast-main-gap' | '--gog-toast-max-width' | '--gog-toast-message-font-size' | '--gog-toast-message-line-height' | '--gog-toast-min-width' | '--gog-toast-padding' | '--gog-toast-progress-height' | '--gog-toast-progress-opacity' | '--gog-toast-radius' | '--gog-toast-shadow' | '--gog-toast-stack-expanded-gap' | '--gog-toast-stack-max-depth' | '--gog-toast-stack-min-opacity' | '--gog-toast-stack-opacity-step' | '--gog-toast-stack-padding' | '--gog-toast-stack-peek' | '--gog-toast-stack-scale-step' | '--gog-toast-success-color' | '--gog-toast-transition-duration' | '--gog-toast-warning-color' | '--gog-toast-z-index' | '--gog-toggle-border-color' | '--gog-toggle-border-style' | '--gog-toggle-border-width' | '--gog-toggle-disabled-opacity' | '--gog-toggle-focus-ring-color' | '--gog-toggle-focus-ring-offset' | '--gog-toggle-focus-ring-width' | '--gog-toggle-font-family' | '--gog-toggle-gap' | '--gog-toggle-label-color' | '--gog-toggle-label-line-height' | '--gog-toggle-lg-label-size' | '--gog-toggle-lg-state-font-size' | '--gog-toggle-lg-thumb-size' | '--gog-toggle-lg-track-height' | '--gog-toggle-lg-track-width' | '--gog-toggle-md-label-size' | '--gog-toggle-md-state-font-size' | '--gog-toggle-md-thumb-size' | '--gog-toggle-md-track-height' | '--gog-toggle-md-track-width' | '--gog-toggle-on-border-color' | '--gog-toggle-padding' | '--gog-toggle-radius' | '--gog-toggle-slg-label-size' | '--gog-toggle-slg-state-font-size' | '--gog-toggle-slg-thumb-size' | '--gog-toggle-slg-track-height' | '--gog-toggle-slg-track-width' | '--gog-toggle-sm-label-size' | '--gog-toggle-sm-state-font-size' | '--gog-toggle-sm-thumb-size' | '--gog-toggle-sm-track-height' | '--gog-toggle-sm-track-width' | '--gog-toggle-state-color' | '--gog-toggle-state-font-weight' | '--gog-toggle-state-letter-spacing' | '--gog-toggle-state-offset' | '--gog-toggle-state-padding-inline' | '--gog-toggle-state-thumb-gap' | '--gog-toggle-thumb-bg' | '--gog-toggle-thumb-inset' | '--gog-toggle-thumb-off-bg' | '--gog-toggle-thumb-on-bg' | '--gog-toggle-thumb-shadow' | '--gog-toggle-track-bg' | '--gog-toggle-track-off-bg' | '--gog-toggle-track-on-bg' | '--gog-toggle-transition-duration' | '--gog-toggle-xsm-label-size' | '--gog-toggle-xsm-state-font-size' | '--gog-toggle-xsm-thumb-size' | '--gog-toggle-xsm-track-height' | '--gog-toggle-xsm-track-width' | '--gog-tooltip-arrow-size' | '--gog-tooltip-bg' | '--gog-tooltip-border-color' | '--gog-tooltip-border-style' | '--gog-tooltip-border-width' | '--gog-tooltip-color' | '--gog-tooltip-font-family' | '--gog-tooltip-font-size' | '--gog-tooltip-gap' | '--gog-tooltip-line-height' | '--gog-tooltip-max-height' | '--gog-tooltip-max-width' | '--gog-tooltip-padding' | '--gog-tooltip-radius' | '--gog-tooltip-shadow' | '--gog-tooltip-transition-duration' | '--gog-tooltip-z' | '--gog-warning-color';
|
|
3263
|
+
/** Which of the three layers a token belongs to — see the README's theming section. */
|
|
3264
|
+
type GogTokenLayer = 'foundation' | 'component' | 'instance';
|
|
3265
|
+
interface GogTokenGroup {
|
|
3266
|
+
/** The `── Section ──` heading the token sits under in theme.css. */
|
|
3267
|
+
readonly section: string;
|
|
3268
|
+
readonly layer: GogTokenLayer;
|
|
3269
|
+
readonly tokens: readonly GogTokenName[];
|
|
3270
|
+
}
|
|
3271
|
+
/**
|
|
3272
|
+
* The token catalogue, grouped as theme.css groups it. Exported so a theme editor or docs page
|
|
3273
|
+
* can enumerate the real tokens instead of keeping a hand-copied list that drifts.
|
|
3274
|
+
*/
|
|
3275
|
+
declare const GOG_TOKEN_GROUPS: readonly GogTokenGroup[];
|
|
3276
|
+
|
|
3277
|
+
type GogTooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
1315
3278
|
|
|
1316
|
-
export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GOG_CONFIG, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare, provideGogConfig };
|
|
1317
|
-
export type { ConfirmDialogData, DialogConfig, DialogHandle, DialogRef, GogAccordionChevronContext, GogAccordionHeaderContext, GogAccordionItem, GogAccordionToggleEvent, GogDropdownDirection, GogDropdownOption, GogGlobalConfig, GogIconName, GogMultiselectOption, GogPaginatorRangeMode, GogScrollAxis, GogScrollMetrics, GogScrollOverscrollBehavior, GogScrollSize, GogSelectOption, GogSize, GogSkeletonAnimation, GogSkeletonShape, GogSpinnerVariant, GogTableBodyContext, GogTableHeaderContext, GogTagShape, GogTagVariant, GogVariant, OpenDialog, SortDirection, Toast, ToastAction, ToastConfig, ToastPosition, ToastType };
|
|
3279
|
+
export { AccordionComponent, AutocompleteComponent, ButtonComponent, ButtonToggleGroupComponent, CalendarComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DialogComponent, DialogService, DividerComponent, GOG_CONFIG, GOG_TABS_STATE, GOG_TOKEN_GROUPS, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogBadgeDirective, GogButtonToggleOptionDirective, GogCheckboxIconDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogColumn, GogColumnBodyDirective, GogColumnHeaderDirective, GogDropdownBase, GogDropdownChevronDirective, GogDropdownOptionDirective, GogFloatLabelState, GogInputAddonEndDirective, GogInputAddonStartDirective, GogMultiselectClearIconDirective, GogTabContentDirective, GogTabHeaderDirective, GogTagIconDirective, GogTooltipDirective, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ProgressbarComponent, RadioGroupComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, ToggleComponent, addDays, addMonths, addYears, buildMonthGrid, clampDate, copyTimeOnto, daysInMonth, defaultCompare, formatDate, getByPath, isAfterDay, isBeforeDay, isInRange, isSameDay, isSameMonth, isSameOptionValue, isWithinBounds, localeFirstDayOfWeek, monthNames, parseDate, provideGogConfig, readOption, resolveConfigured, startOfDay, weekdayNames, withTime };
|
|
3280
|
+
export type { ConfirmDialogData, DialogConfig, DialogHandle, DialogRef, GogAccordionChevronContext, GogAccordionHeaderContext, GogAccordionItem, GogAccordionToggleEvent, GogBadgePosition, GogButtonToggleAppearance, GogButtonToggleOptionContext, GogCalendarDay, GogColumnBodyContext, GogColumnHeaderContext, GogDateRange, GogDateSelectionMode, GogDatepickerValue, GogDividerVariant, GogDropdownDirection, GogDropdownFilterPosition, GogDropdownOption, GogDropdownOptionContext, GogFloatLabelVariant, GogGlobalConfig, GogHourFormat, GogIconName, GogMultiselectOption, GogOptionAccessor, GogOrientation, GogPaginatorRangeMode, GogProgressbarMode, GogProgressbarVariant, GogRadioOption, GogScrollAxis, GogScrollMetrics, GogScrollOverscrollBehavior, GogScrollSize, GogSelectOption, GogSize, GogSkeletonAnimation, GogSkeletonShape, GogSliderOrientation, GogSpinnerVariant, GogTabHeaderContext, GogTableBodyContext, GogTableHeaderContext, GogTabsAlign, GogTabsState, GogTagShape, GogTagVariant, GogTokenGroup, GogTokenLayer, GogTokenName, GogTooltipPosition, GogTooltipSide, GogVariant, OpenDialog, SortDirection, Toast, ToastAction, ToastConfig, ToastPosition, ToastType };
|