@guildofgleks/ui 21.2.3 → 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 -192
- package/fesm2022/guildofgleks-ui.mjs +6715 -1016
- 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 -937
- package/src/styles/utilities.css +137 -0
- package/types/guildofgleks-ui.d.ts +2584 -326
|
@@ -1,21 +1,95 @@
|
|
|
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;
|
|
22
|
+
type GogScrollAxis = 'vertical' | 'horizontal' | 'both';
|
|
23
|
+
type GogScrollSize = 'normal' | 'thin';
|
|
24
|
+
/**
|
|
25
|
+
* Mirrors the CSS `overscroll-behavior` value space directly:
|
|
26
|
+
* - `'auto'` — scrolling past this instance's edge chains to the next scrollable ancestor
|
|
27
|
+
* (a page, a dialog body, another gog-scroll), the same as an un-customized native
|
|
28
|
+
* `overflow: auto` div. The default — matches what most embedded content expects.
|
|
29
|
+
* - `'contain'` — scrolling stops dead at this instance's edge; nothing behind it moves.
|
|
30
|
+
* Suited to overlay-style panels (a dropdown, a modal) where scrolling past the end
|
|
31
|
+
* shouldn't also scroll whatever is behind them.
|
|
32
|
+
* - `'none'` — like `'contain'`, and additionally suppresses the platform's own overscroll
|
|
33
|
+
* affordances (rubber-banding, pull-to-refresh) for this instance.
|
|
34
|
+
*/
|
|
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';
|
|
15
88
|
|
|
16
89
|
declare class ButtonComponent {
|
|
17
90
|
variant: _angular_core.InputSignal<GogVariant>;
|
|
18
|
-
size
|
|
91
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
92
|
+
size: _angular_core.InputSignal<GogSize | undefined>;
|
|
19
93
|
disabled: _angular_core.InputSignal<boolean>;
|
|
20
94
|
fullWidth: _angular_core.InputSignal<boolean>;
|
|
21
95
|
type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
@@ -25,8 +99,9 @@ declare class ButtonComponent {
|
|
|
25
99
|
* guard, not a delay before the first click fires: the first click in a
|
|
26
100
|
* window is emitted immediately (leading edge), and any further clicks
|
|
27
101
|
* within `debounce` ms are silently dropped until the window elapses.
|
|
102
|
+
* Unset, falls back to `GOG_CONFIG.button.debounce`, then to `300`.
|
|
28
103
|
*/
|
|
29
|
-
debounce: _angular_core.InputSignal<number>;
|
|
104
|
+
debounce: _angular_core.InputSignal<number | undefined>;
|
|
30
105
|
/**
|
|
31
106
|
* Accessible name for the button, forwarded to the native <button>.
|
|
32
107
|
* Setting `aria-label` directly on <gog-button> in a template does NOT
|
|
@@ -41,7 +116,16 @@ declare class ButtonComponent {
|
|
|
41
116
|
/** Logically blocked from activating (disabled OR loading), used to guard click handling. */
|
|
42
117
|
protected isDisabled: _angular_core.Signal<boolean>;
|
|
43
118
|
private static readonly SPINNER_SIZE_BY_BUTTON_SIZE;
|
|
119
|
+
private readonly globalConfig;
|
|
120
|
+
/** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
|
|
121
|
+
protected readonly resolvedSize: _angular_core.Signal<GogSize>;
|
|
44
122
|
protected spinnerSize: _angular_core.Signal<GogSize>;
|
|
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>;
|
|
45
129
|
private readonly destroyRef;
|
|
46
130
|
private readonly click$;
|
|
47
131
|
constructor();
|
|
@@ -89,6 +173,12 @@ declare class GogAccordionChevronDirective {
|
|
|
89
173
|
declare class AccordionComponent {
|
|
90
174
|
private static nextUid;
|
|
91
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>;
|
|
92
182
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
93
183
|
readonly expandFirst: _angular_core.InputSignal<boolean>;
|
|
94
184
|
readonly multi: _angular_core.InputSignal<boolean>;
|
|
@@ -108,7 +198,7 @@ declare class AccordionComponent {
|
|
|
108
198
|
* Left unset by default since not every accordion instance represents document structure
|
|
109
199
|
* (e.g. one nested inside a card).
|
|
110
200
|
*/
|
|
111
|
-
readonly headingLevel: _angular_core.InputSignal<
|
|
201
|
+
readonly headingLevel: _angular_core.InputSignal<2 | 3 | 4 | 5 | 6 | undefined>;
|
|
112
202
|
/**
|
|
113
203
|
* Two-way bindable set of currently open item ids. Exposed as a model so consumers
|
|
114
204
|
* can drive the accordion externally (e.g. `[(openIds)]="mySet"`) instead of only
|
|
@@ -144,22 +234,1564 @@ declare class AccordionComponent {
|
|
|
144
234
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "gog-accordion", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "expandFirst": { "alias": "expandFirst"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeletonCount": { "alias": "skeletonCount"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "openIds": { "alias": "openIds"; "required": false; "isSignal": true; }; }, { "openIds": "openIdsChange"; "gogToggle": "gogToggle"; }, ["headerTpl", "chevronTpl", "contentTpl"], never, true, never>;
|
|
145
235
|
}
|
|
146
236
|
|
|
147
|
-
|
|
237
|
+
/**
|
|
238
|
+
* Headless expand/collapse primitive — a trigger toggles a content region open and
|
|
239
|
+
* closed, in place (no portal/overlay, unlike `gog-select`/`gog-multiselect`). Unopinionated
|
|
240
|
+
* about markup: project any element as the trigger via `gogCollapsibleTrigger` and any
|
|
241
|
+
* element as the content via `gogCollapsibleContent`; this component only holds the shared
|
|
242
|
+
* `open` state and generates the id pair linking them for ARIA.
|
|
243
|
+
*/
|
|
244
|
+
declare class CollapsibleComponent {
|
|
245
|
+
private static nextUid;
|
|
246
|
+
/** Two-way bindable open state: `[(open)]="signal"`. */
|
|
247
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
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;
|
|
258
|
+
private readonly uid;
|
|
259
|
+
readonly contentId: _angular_core.Signal<string>;
|
|
260
|
+
toggle(): void;
|
|
261
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
262
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleComponent, 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>;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Marks the element that toggles a `gog-collapsible`. Works on any clickable element
|
|
268
|
+
* (`<button>`, `<a>`, ...) — this only wires the click handler and the ARIA attributes
|
|
269
|
+
* pointing at the matching `gogCollapsibleContent`; it owns no markup of its own.
|
|
270
|
+
*/
|
|
271
|
+
declare class GogCollapsibleTriggerDirective {
|
|
272
|
+
protected readonly collapsible: CollapsibleComponent;
|
|
273
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogCollapsibleTriggerDirective, never>;
|
|
274
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogCollapsibleTriggerDirective, "[gogCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Marks the element that a `gog-collapsible` shows and hides. Applies the open/closed
|
|
279
|
+
* CSS state and the ARIA wiring (`id`, `aria-hidden`, `inert`) to whatever element this is
|
|
280
|
+
* placed on — that element owns its own content and layout.
|
|
281
|
+
*/
|
|
282
|
+
declare class GogCollapsibleContentDirective {
|
|
283
|
+
protected readonly collapsible: CollapsibleComponent;
|
|
284
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogCollapsibleContentDirective, never>;
|
|
285
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogCollapsibleContentDirective, "[gogCollapsibleContent]", never, {}, {}, never, never, true, never>;
|
|
286
|
+
}
|
|
287
|
+
|
|
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;
|
|
148
394
|
readonly label: _angular_core.InputSignal<string>;
|
|
149
395
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
150
|
-
readonly
|
|
151
|
-
readonly
|
|
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>;
|
|
152
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 {
|
|
1718
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
1719
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1720
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
1721
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
1722
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
1723
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
1724
|
+
/** Which side of the switch the label sits on. */
|
|
1725
|
+
readonly labelPosition: _angular_core.InputSignal<"start" | "end">;
|
|
1726
|
+
/**
|
|
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"`.
|
|
1735
|
+
* This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
|
|
1736
|
+
* when the component is used with `formControlName`/`[formControl]`.
|
|
1737
|
+
* Don't wire both a form directive AND `[(checked)]` to the same instance —
|
|
1738
|
+
* pick one, otherwise you end up with two competing sources of truth.
|
|
1739
|
+
*/
|
|
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>;
|
|
153
1784
|
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
readonly
|
|
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>;
|
|
163
1795
|
protected readonly controlSize: _angular_core.Signal<{
|
|
164
1796
|
readonly boxSize: "var(--gog-control-checkbox-box-size-xsm, 12px)";
|
|
165
1797
|
readonly labelSize: "var(--gog-control-checkbox-label-size-xsm, 0.6875rem)";
|
|
@@ -182,21 +1814,26 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
182
1814
|
readonly indicatorSize: "var(--gog-control-checkbox-icon-size-slg, 22px)";
|
|
183
1815
|
}>;
|
|
184
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)">;
|
|
185
|
-
protected readonly checkboxPadding = "var(--gog-control-checkbox-padding, 6px)";
|
|
186
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)">;
|
|
187
|
-
protected readonly
|
|
188
|
-
|
|
189
|
-
protected readonly
|
|
190
|
-
|
|
191
|
-
|
|
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;
|
|
1826
|
+
constructor();
|
|
1827
|
+
writeValue(val: string | number | null): void;
|
|
1828
|
+
registerOnChange(fn: (val: string | number | null) => void): void;
|
|
192
1829
|
registerOnTouched(fn: () => void): void;
|
|
193
1830
|
setDisabledState(isDisabled: boolean): void;
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
199
|
-
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>;
|
|
200
1837
|
}
|
|
201
1838
|
|
|
202
1839
|
interface ConfirmDialogData {
|
|
@@ -216,21 +1853,6 @@ declare class ConfirmationDialogComponent {
|
|
|
216
1853
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmationDialogComponent, "gog-confirmation-dialog", never, {}, {}, never, never, true, never>;
|
|
217
1854
|
}
|
|
218
1855
|
|
|
219
|
-
type GogIconName = 'check' | 'close' | 'chevron-up' | 'chevron-down' | 'sort' | 'sort-up' | 'sort-down' | 'success' | 'error' | 'warning' | 'info' | 'checkbox' | 'checkbox-checked' | 'eye' | 'eye-off';
|
|
220
|
-
declare const ICON_DEFS: Record<GogIconName, string>;
|
|
221
|
-
|
|
222
|
-
declare class IconComponent {
|
|
223
|
-
private readonly sanitizer;
|
|
224
|
-
readonly name: _angular_core.InputSignal<GogIconName>;
|
|
225
|
-
readonly template: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
226
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
227
|
-
readonly ariaHidden: _angular_core.InputSignal<boolean>;
|
|
228
|
-
protected readonly ariaLabel: _angular_core.Signal<string | null>;
|
|
229
|
-
protected readonly iconSvg: _angular_core.Signal<_angular_platform_browser.SafeHtml>;
|
|
230
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
231
|
-
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>;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
1856
|
interface DialogConfig {
|
|
235
1857
|
title?: string;
|
|
236
1858
|
component: Type<unknown>;
|
|
@@ -345,6 +1967,11 @@ interface ToastConfig {
|
|
|
345
1967
|
}
|
|
346
1968
|
declare class ToastService {
|
|
347
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;
|
|
348
1975
|
private generateId;
|
|
349
1976
|
show(config: ToastConfig): string;
|
|
350
1977
|
dismiss(id: string): void;
|
|
@@ -414,30 +2041,62 @@ declare class ToastContainerComponent {
|
|
|
414
2041
|
}
|
|
415
2042
|
|
|
416
2043
|
/**
|
|
417
|
-
*
|
|
418
|
-
* consumer decides when to clear it, e.g.
|
|
419
|
-
* `errorMessage="control.invalid && control.touched ? 'Required' : ''"`.
|
|
2044
|
+
* Arbitrary markup in the field's leading slot — an icon, a button, a prefix label:
|
|
420
2045
|
*
|
|
421
|
-
*
|
|
422
|
-
*
|
|
423
|
-
*
|
|
424
|
-
*
|
|
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.
|
|
425
2062
|
*/
|
|
426
|
-
|
|
427
|
-
|
|
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
|
+
}
|
|
428
2077
|
declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
429
2078
|
readonly label: _angular_core.InputSignal<string>;
|
|
430
2079
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
431
|
-
readonly type: _angular_core.InputSignal<"text" | "password" | "email">;
|
|
2080
|
+
readonly type: _angular_core.InputSignal<"number" | "text" | "password" | "email" | "date">;
|
|
432
2081
|
/** Defaults to 'current-password' for password fields, 'off' otherwise */
|
|
433
2082
|
readonly autocomplete: _angular_core.InputSignal<string>;
|
|
2083
|
+
/** Only applied when `type="number"`. */
|
|
2084
|
+
readonly min: _angular_core.InputSignal<number | null>;
|
|
2085
|
+
/** Only applied when `type="number"`. */
|
|
2086
|
+
readonly max: _angular_core.InputSignal<number | null>;
|
|
2087
|
+
/** Only applied when `type="number"`. */
|
|
2088
|
+
readonly step: _angular_core.InputSignal<number | null>;
|
|
434
2089
|
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
435
|
-
/**
|
|
436
|
-
|
|
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>;
|
|
437
2095
|
readonly name: _angular_core.InputSignal<string>;
|
|
438
2096
|
readonly inputId: _angular_core.InputSignal<string>;
|
|
439
2097
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
440
|
-
|
|
2098
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
2099
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
441
2100
|
/**
|
|
442
2101
|
* Full width of the container by default, matching every other field-style control.
|
|
443
2102
|
* Set to `false` to shrink the field to fit its content instead.
|
|
@@ -447,284 +2106,281 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
447
2106
|
readonly iconStart: _angular_core.InputSignal<"" | GogIconName>;
|
|
448
2107
|
/** Default icon name for the trailing icon. */
|
|
449
2108
|
readonly iconEnd: _angular_core.InputSignal<"" | GogIconName>;
|
|
450
|
-
/**
|
|
2109
|
+
/**
|
|
2110
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<span gogInputAddonStart>` element instead. Removed in 21.5.0.
|
|
2111
|
+
*/
|
|
451
2112
|
readonly iconStartTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
452
|
-
/**
|
|
2113
|
+
/**
|
|
2114
|
+
* @deprecated since 21.3.0 (2026-08-07) — project a `<span gogInputAddonEnd>` element instead. Removed in 21.5.0.
|
|
2115
|
+
*/
|
|
453
2116
|
readonly iconEndTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
454
|
-
/**
|
|
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
|
+
*/
|
|
455
2121
|
readonly iconStartFn: _angular_core.InputSignal<(() => void) | null>;
|
|
456
|
-
/**
|
|
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
|
+
*/
|
|
457
2126
|
readonly iconEndFn: _angular_core.InputSignal<(() => void) | null>;
|
|
458
|
-
/**
|
|
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
|
+
*/
|
|
459
2130
|
readonly iconStartLabel: _angular_core.InputSignal<string>;
|
|
460
|
-
/**
|
|
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
|
+
*/
|
|
461
2134
|
readonly iconEndLabel: _angular_core.InputSignal<string>;
|
|
462
2135
|
/** aria-label for the reveal-password button, shown when `type` is `'password'` */
|
|
463
2136
|
readonly showPasswordLabel: _angular_core.InputSignal<string>;
|
|
464
2137
|
/** aria-label for the hide-password button, shown once the password is revealed */
|
|
465
2138
|
readonly hidePasswordLabel: _angular_core.InputSignal<string>;
|
|
466
|
-
/**
|
|
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>;
|
|
2150
|
+
/**
|
|
2151
|
+
* Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`.
|
|
2152
|
+
* Always a string, including for `type="number"` — that field's `formControl`/
|
|
2153
|
+
* `formControlName` value is a `number` (or `null` when empty); the string here is only
|
|
2154
|
+
* the raw text shown in the native input.
|
|
2155
|
+
*/
|
|
467
2156
|
readonly value: _angular_core.ModelSignal<string>;
|
|
468
2157
|
private readonly ngControl;
|
|
2158
|
+
private readonly globalConfig;
|
|
469
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;
|
|
470
2163
|
private readonly errorState;
|
|
471
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>;
|
|
472
2172
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
473
2173
|
protected readonly isPasswordField: _angular_core.Signal<boolean>;
|
|
474
|
-
protected readonly
|
|
2174
|
+
protected readonly isNumberField: _angular_core.Signal<boolean>;
|
|
2175
|
+
protected readonly effectiveType: _angular_core.Signal<"number" | "text" | "password" | "email" | "date">;
|
|
475
2176
|
protected readonly effectiveAutocomplete: _angular_core.Signal<string>;
|
|
476
2177
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
477
2178
|
protected readonly visibleError: _angular_core.Signal<string>;
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
/**
|
|
481
|
-
protected readonly
|
|
482
|
-
protected readonly
|
|
483
|
-
protected readonly
|
|
484
|
-
protected readonly
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
registerOnChange(fn: (val: string) => void): void;
|
|
491
|
-
registerOnTouched(fn: () => void): void;
|
|
492
|
-
setDisabledState(isDisabled: boolean): void;
|
|
493
|
-
protected onIconStartClick(): void;
|
|
494
|
-
protected onIconEndClick(): void;
|
|
495
|
-
onInput(event: Event): void;
|
|
496
|
-
onBlur(): void;
|
|
497
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputfieldComponent, never>;
|
|
498
|
-
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; }; "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"; }, never, never, true, never>;
|
|
499
|
-
}
|
|
500
|
-
|
|
501
|
-
declare class ChipComponent {
|
|
502
|
-
readonly size: _angular_core.InputSignal<GogSize>;
|
|
503
|
-
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
504
|
-
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
505
|
-
readonly clickable: _angular_core.InputSignal<boolean>;
|
|
506
|
-
readonly removable: _angular_core.InputSignal<boolean>;
|
|
507
|
-
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
508
|
-
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
509
|
-
readonly removeAriaLabel: _angular_core.InputSignal<string>;
|
|
510
|
-
readonly avatarUrl: _angular_core.InputSignal<string | null>;
|
|
511
|
-
readonly avatarAlt: _angular_core.InputSignal<string>;
|
|
512
|
-
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
513
|
-
readonly gogClick: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
|
|
514
|
-
readonly gogRemove: _angular_core.OutputEmitterRef<void>;
|
|
515
|
-
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
516
|
-
protected readonly isInteractive: _angular_core.Signal<boolean>;
|
|
517
|
-
protected onChipClick(event: MouseEvent): void;
|
|
518
|
-
protected onKeydown(event: KeyboardEvent): void;
|
|
519
|
-
protected onRemoveClick(event: MouseEvent): void;
|
|
520
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
|
|
521
|
-
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>;
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
declare class TagComponent {
|
|
525
|
-
readonly variant: _angular_core.InputSignal<GogTagVariant>;
|
|
526
|
-
readonly size: _angular_core.InputSignal<GogSize>;
|
|
527
|
-
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
528
|
-
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
529
|
-
readonly iconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
530
|
-
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
531
|
-
protected readonly hasIcon: _angular_core.Signal<boolean>;
|
|
532
|
-
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
533
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
|
|
534
|
-
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>;
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
type GogDropdownDirection = 'auto' | 'up' | 'down';
|
|
538
|
-
interface GogDropdownPlacement {
|
|
539
|
-
direction: 'up' | 'down';
|
|
540
|
-
top: number;
|
|
541
|
-
left: number;
|
|
542
|
-
width: number;
|
|
543
|
-
maxHeight: number;
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
/** A single choice in any of the listbox-style controls (`gog-select`, `gog-multiselect`). */
|
|
547
|
-
interface GogDropdownOption {
|
|
548
|
-
id: string | number;
|
|
549
|
-
name: string;
|
|
550
|
-
disabled?: boolean;
|
|
551
|
-
}
|
|
552
|
-
/**
|
|
553
|
-
* Shared behaviour for the listbox-style controls: open/close, placement, the
|
|
554
|
-
* append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
|
|
555
|
-
* plumbing. Subclasses supply only what actually differs — the value type, the panel
|
|
556
|
-
* markup, and the BEM class names used to find the trigger and the options.
|
|
557
|
-
*
|
|
558
|
-
* Exported because it appears in the public type signatures of the components that
|
|
559
|
-
* extend it; it is not meant to be used or subclassed by consumers.
|
|
560
|
-
*/
|
|
561
|
-
declare abstract class GogDropdownBase<TValue> implements ControlValueAccessor, DoCheck {
|
|
562
|
-
private static nextUid;
|
|
563
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
564
|
-
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
565
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
566
|
-
readonly options: _angular_core.InputSignal<GogDropdownOption[]>;
|
|
567
|
-
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
568
|
-
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
569
|
-
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay>;
|
|
570
|
-
readonly size: _angular_core.InputSignal<GogSize>;
|
|
571
|
-
readonly dropdownDirection: _angular_core.InputSignal<GogDropdownDirection>;
|
|
572
|
-
/**
|
|
573
|
-
* Explicit stacking order for the panel. Left unset the panel falls back to the
|
|
574
|
-
* stylesheet's `--gog-dropdown-z`, so the default lives in CSS where a consumer can
|
|
575
|
-
* retheme it, rather than being baked into the component.
|
|
576
|
-
*/
|
|
577
|
-
readonly dropdownZIndex: _angular_core.InputSignal<number | null>;
|
|
578
|
-
/**
|
|
579
|
-
* Fixed panel width as any CSS length (`'320px'`, `'40ch'`, `'100%'`, …), applied only
|
|
580
|
-
* when `appendToBody` is set. Left unset the panel matches the trigger's width, same as
|
|
581
|
-
* the inline panel already does via CSS.
|
|
582
|
-
*/
|
|
583
|
-
readonly dropdownWidth: _angular_core.InputSignal<string | null>;
|
|
584
|
-
/**
|
|
585
|
-
* Fixed panel max-height as any CSS length, applied only when `appendToBody` is set.
|
|
586
|
-
* `px`, `%` and `vh` also feed the up/down placement math (see `resolveCssLengthPx`); any
|
|
587
|
-
* other unit still renders correctly but is invisible to that heuristic, so the panel may
|
|
588
|
-
* pick the "wrong" side close to a viewport edge. Left unset the panel keeps the existing
|
|
589
|
-
* viewport-derived, auto-flipping height.
|
|
590
|
-
*/
|
|
591
|
-
readonly dropdownMaxHeight: _angular_core.InputSignal<string | null>;
|
|
592
|
-
readonly appendToBody: _angular_core.InputSignal<boolean>;
|
|
593
|
-
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
594
|
-
readonly chevronTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
595
|
-
/**
|
|
596
|
-
* Full width of the container by default, matching every other field-style control.
|
|
597
|
-
* Set to `false` to shrink the trigger to fit its selected label instead.
|
|
598
|
-
*/
|
|
599
|
-
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
600
|
-
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
601
|
-
/** The `<ng-template>` holding the panel markup, rendered inline or into `<body>`. */
|
|
602
|
-
protected abstract readonly panelTemplate: Signal<TemplateRef<unknown> | undefined>;
|
|
603
|
-
/** Declared by the subclass so each control keeps its own value type. */
|
|
604
|
-
protected abstract readonly value: ModelSignal<TValue>;
|
|
605
|
-
/** Value applied when a form writes `null` / the control is reset. */
|
|
606
|
-
protected abstract readonly emptyValue: TValue;
|
|
607
|
-
/** BEM class of one option button, used to collect keyboard-navigable elements. */
|
|
608
|
-
protected abstract readonly optionClass: string;
|
|
609
|
-
/** BEM class of the focusable trigger. */
|
|
610
|
-
protected abstract readonly triggerClass: string;
|
|
611
|
-
/**
|
|
612
|
-
* Spacing tokens feeding the height estimate. Overridable so each control keeps the
|
|
613
|
-
* `--gog-<block>-*` names it already exposes to consumers for theming.
|
|
614
|
-
*/
|
|
615
|
-
protected readonly optionGapToken: string;
|
|
616
|
-
protected readonly optionsPaddingToken: string;
|
|
617
|
-
/** Keep in sync with the real `max-height` on the subclass's `__dropdown` block. */
|
|
618
|
-
protected readonly panelMaxHeightToken: string;
|
|
619
|
-
/** Estimated row height fed into the placement math; not a real layout property. */
|
|
620
|
-
protected readonly optionHeightToken: string;
|
|
621
|
-
/** Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids. */
|
|
622
|
-
protected readonly uid: number;
|
|
623
|
-
protected readonly elRef: ElementRef<any>;
|
|
624
|
-
protected readonly isBrowser: boolean;
|
|
625
|
-
private readonly document;
|
|
626
|
-
private readonly appRef;
|
|
627
|
-
private readonly destroyRef;
|
|
628
|
-
private readonly ngControl;
|
|
629
|
-
private readonly overlay;
|
|
630
|
-
private readonly cvaDisabled;
|
|
631
|
-
private readonly errorState;
|
|
632
|
-
protected readonly isDisabled: Signal<boolean>;
|
|
633
|
-
protected readonly dropdownDirectionState: _angular_core.WritableSignal<"up" | "down">;
|
|
634
|
-
protected readonly panelPlacement: _angular_core.WritableSignal<GogDropdownPlacement | null>;
|
|
635
|
-
/**
|
|
636
|
-
* Stacking order to write onto the panel, or null to leave it to the stylesheet.
|
|
637
|
-
*
|
|
638
|
-
* Only needed when appending to `<body>`: an inline panel inherits `--gog-dropdown-z` from
|
|
639
|
-
* its surroundings — which is how a dropdown inside a dialog ends up above the dialog —
|
|
640
|
-
* but an appended one sits outside that subtree and inherits nothing, so the value has
|
|
641
|
-
* to be resolved from the trigger and written out explicitly.
|
|
642
|
-
*/
|
|
643
|
-
protected readonly panelZIndex: _angular_core.WritableSignal<number | null>;
|
|
644
|
-
/** `dropdownWidth`, or the trigger-derived width from `panelPlacement`, as a CSS value. */
|
|
645
|
-
protected readonly resolvedPanelWidth: Signal<string | null>;
|
|
646
|
-
/** `dropdownMaxHeight`, or the viewport-derived max-height from `panelPlacement`. */
|
|
647
|
-
protected readonly resolvedPanelMaxHeight: Signal<string | null>;
|
|
648
|
-
protected readonly hasError: Signal<boolean>;
|
|
649
|
-
protected readonly visibleError: Signal<string>;
|
|
650
|
-
/** Measured once per open rather than per scroll tick — see `refreshPanelMetrics`. */
|
|
651
|
-
private optionGap;
|
|
652
|
-
private optionsPadding;
|
|
653
|
-
private maxPanelHeight;
|
|
654
|
-
private optionHeight;
|
|
655
|
-
private repositionFrame;
|
|
656
|
-
private onChangeFn;
|
|
657
|
-
private onTouchedFn;
|
|
658
|
-
constructor();
|
|
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>;
|
|
659
2191
|
/**
|
|
660
|
-
*
|
|
661
|
-
*
|
|
662
|
-
* handler on every document click and every scroll frame, whether or not it is showing
|
|
663
|
-
* anything.
|
|
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.
|
|
664
2194
|
*/
|
|
665
|
-
|
|
2195
|
+
protected readonly hasIconStart: _angular_core.Signal<boolean>;
|
|
2196
|
+
protected readonly hasIconStartAction: _angular_core.Signal<boolean>;
|
|
2197
|
+
/** For password fields the trailing icon is always the built-in show/hide toggle. */
|
|
2198
|
+
protected readonly effectiveIconEnd: _angular_core.Signal<"" | GogIconName>;
|
|
2199
|
+
protected readonly effectiveIconEndLabel: _angular_core.Signal<string>;
|
|
2200
|
+
protected readonly hasIconEnd: _angular_core.Signal<boolean>;
|
|
2201
|
+
protected readonly hasIconEndAction: _angular_core.Signal<boolean>;
|
|
2202
|
+
/** `number` for a `type="number"` field (`null` when empty), `string` otherwise. */
|
|
2203
|
+
private _onChange;
|
|
2204
|
+
private _onTouched;
|
|
2205
|
+
constructor();
|
|
666
2206
|
ngDoCheck(): void;
|
|
667
|
-
writeValue(val:
|
|
668
|
-
registerOnChange(fn: (val:
|
|
2207
|
+
writeValue(val: string | number | null): void;
|
|
2208
|
+
registerOnChange(fn: (val: string | number | null) => void): void;
|
|
669
2209
|
registerOnTouched(fn: () => void): void;
|
|
670
2210
|
setDisabledState(isDisabled: boolean): void;
|
|
671
|
-
protected
|
|
672
|
-
protected
|
|
673
|
-
|
|
674
|
-
/**
|
|
675
|
-
protected
|
|
676
|
-
|
|
677
|
-
|
|
2211
|
+
protected onIconStartClick(): void;
|
|
2212
|
+
protected onIconEndClick(): void;
|
|
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;
|
|
2217
|
+
onBlur(): void;
|
|
2218
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputfieldComponent, never>;
|
|
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>;
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2222
|
+
declare class TextareaComponent implements ControlValueAccessor, DoCheck {
|
|
2223
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
2224
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
2225
|
+
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
678
2226
|
/**
|
|
679
|
-
*
|
|
680
|
-
*
|
|
2227
|
+
* See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
|
|
2228
|
+
* `'manual'` — matching every other control in the library.
|
|
681
2229
|
*/
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
private attachOverlay;
|
|
2230
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
2231
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
2232
|
+
readonly inputId: _angular_core.InputSignal<string>;
|
|
2233
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
2234
|
+
/** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
|
|
2235
|
+
readonly size: _angular_core.InputSignal<GogSize | undefined>;
|
|
2236
|
+
/** Native `rows` attribute, controlling the field's initial height. */
|
|
2237
|
+
readonly rows: _angular_core.InputSignal<number>;
|
|
691
2238
|
/**
|
|
692
|
-
*
|
|
693
|
-
*
|
|
694
|
-
* tokens cannot change while the panel is on screen.
|
|
2239
|
+
* Full width of the container by default, matching every other field-style control.
|
|
2240
|
+
* Set to `false` to shrink the field to fit its content instead.
|
|
695
2241
|
*/
|
|
696
|
-
|
|
2242
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
697
2243
|
/**
|
|
698
|
-
*
|
|
699
|
-
*
|
|
700
|
-
* panel first, which is what we are trying to position. A resolvable `dropdownMaxHeight`
|
|
701
|
-
* replaces the row-count guess outright, since it is exact rather than estimated.
|
|
2244
|
+
* Whether to offer a clear button once the field has text. Unset, falls back to
|
|
2245
|
+
* `GOG_CONFIG.control.clearable`, then to `false`.
|
|
702
2246
|
*/
|
|
703
|
-
|
|
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>;
|
|
2256
|
+
private readonly ngControl;
|
|
2257
|
+
private readonly globalConfig;
|
|
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;
|
|
2262
|
+
private readonly errorState;
|
|
2263
|
+
/** Set from `(focus)`/`(blur)` on the `<textarea>` — see `onFocus`/`onBlur`. */
|
|
2264
|
+
protected readonly isFocused: _angular_core.WritableSignal<boolean>;
|
|
2265
|
+
private readonly fieldRef;
|
|
704
2266
|
/**
|
|
705
|
-
*
|
|
706
|
-
*
|
|
707
|
-
* to
|
|
708
|
-
*
|
|
2267
|
+
* Width of the textarea's own scrollbar, published so the clear button can clear it.
|
|
2268
|
+
*
|
|
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.
|
|
709
2273
|
*/
|
|
710
|
-
|
|
711
|
-
/**
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
2274
|
+
protected readonly scrollbarWidth: _angular_core.WritableSignal<number>;
|
|
2275
|
+
/**
|
|
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.
|
|
2278
|
+
*/
|
|
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();
|
|
2294
|
+
ngDoCheck(): void;
|
|
2295
|
+
writeValue(val: string): void;
|
|
2296
|
+
registerOnChange(fn: (val: string) => void): void;
|
|
2297
|
+
registerOnTouched(fn: () => void): void;
|
|
2298
|
+
setDisabledState(isDisabled: boolean): void;
|
|
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>;
|
|
2348
|
+
/**
|
|
2349
|
+
* @deprecated since 21.3.0 (2026-08-07) — project an `<ng-template gogTagIcon>` into the component instead. Removed in 21.5.0.
|
|
2350
|
+
*/
|
|
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>;
|
|
716
2359
|
}
|
|
717
2360
|
|
|
718
|
-
/**
|
|
2361
|
+
/**
|
|
2362
|
+
* @deprecated since 21.2.2 (2026-07-30) — use `GogDropdownOption` instead. Removed in 21.4.0.
|
|
2363
|
+
*/
|
|
719
2364
|
type GogSelectOption = GogDropdownOption;
|
|
720
|
-
declare class SelectComponent
|
|
2365
|
+
declare class SelectComponent<TOption = GogDropdownOption, TValue = string | number | null> extends GogDropdownBase<TValue, TOption> {
|
|
721
2366
|
readonly inputId: _angular_core.InputSignal<string>;
|
|
722
|
-
/**
|
|
723
|
-
|
|
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>;
|
|
724
2375
|
protected readonly panelTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
725
|
-
|
|
2376
|
+
/** A cleared select is `null`, whatever `TValue` the consumer bound. */
|
|
2377
|
+
protected readonly emptyValue: TValue;
|
|
726
2378
|
protected readonly optionClass = "gog-select__option";
|
|
727
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";
|
|
728
2384
|
protected readonly optionGapToken = "--gog-select-option-gap";
|
|
729
2385
|
protected readonly panelMaxHeightToken = "--gog-select-panel-max-height";
|
|
730
2386
|
protected readonly optionHeightToken = "--gog-select-option-height";
|
|
@@ -732,40 +2388,96 @@ declare class SelectComponent extends GogDropdownBase<string | number | null> {
|
|
|
732
2388
|
protected readonly listboxId: _angular_core.Signal<string>;
|
|
733
2389
|
protected readonly labelId: _angular_core.Signal<string>;
|
|
734
2390
|
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
735
|
-
protected readonly selectedOption: _angular_core.Signal<
|
|
736
|
-
protected
|
|
737
|
-
protected
|
|
738
|
-
|
|
739
|
-
|
|
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>;
|
|
740
2398
|
}
|
|
741
2399
|
|
|
742
|
-
/**
|
|
2400
|
+
/**
|
|
2401
|
+
* @deprecated since 21.2.2 (2026-07-30) — use `GogDropdownOption` instead. Removed in 21.4.0.
|
|
2402
|
+
*/
|
|
743
2403
|
type GogMultiselectOption = GogDropdownOption;
|
|
744
|
-
|
|
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> {
|
|
745
2417
|
readonly showControls: _angular_core.InputSignal<boolean>;
|
|
746
2418
|
/** Where the "select all"/"clear" row sits relative to the option list. Sticky either way. */
|
|
747
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
|
+
*/
|
|
748
2423
|
readonly clearIconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
749
|
-
/**
|
|
750
|
-
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[]>;
|
|
751
2433
|
protected readonly panelTemplate: _angular_core.Signal<TemplateRef<unknown> | undefined>;
|
|
752
|
-
protected readonly emptyValue:
|
|
2434
|
+
protected readonly emptyValue: TValue[];
|
|
753
2435
|
protected readonly optionClass = "gog-ms__option";
|
|
754
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";
|
|
755
2444
|
protected readonly optionGapToken = "--gog-ms-option-gap";
|
|
756
2445
|
protected readonly optionsPaddingToken = "--gog-ms-options-padding";
|
|
757
2446
|
protected readonly panelMaxHeightToken = "--gog-ms-panel-max-height";
|
|
758
2447
|
protected readonly optionHeightToken = "--gog-ms-option-height";
|
|
759
2448
|
protected readonly listboxId: _angular_core.Signal<string>;
|
|
760
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. */
|
|
761
2454
|
readonly selectedNames: _angular_core.Signal<string>;
|
|
762
|
-
|
|
763
|
-
|
|
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. */
|
|
764
2475
|
protected selectAll(event: MouseEvent): void;
|
|
765
2476
|
protected clearAll(event: Event): void;
|
|
2477
|
+
constructor();
|
|
766
2478
|
protected extraPanelHeight(): number;
|
|
767
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiselectComponent, never>;
|
|
768
|
-
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>;
|
|
769
2481
|
}
|
|
770
2482
|
|
|
771
2483
|
declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
@@ -779,7 +2491,8 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
779
2491
|
readonly showThumb: _angular_core.InputSignal<boolean>;
|
|
780
2492
|
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
781
2493
|
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
782
|
-
|
|
2494
|
+
/** Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to `'manual'`. */
|
|
2495
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay | undefined>;
|
|
783
2496
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
784
2497
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
785
2498
|
/**
|
|
@@ -787,18 +2500,34 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
787
2500
|
* `--gog-slider-auto-width` instead — a slider's track has no content of its own to
|
|
788
2501
|
* shrink-wrap to, so unlike the other field controls this needs an explicit fallback
|
|
789
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.
|
|
790
2508
|
*/
|
|
791
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>;
|
|
792
2518
|
/** Two-way bindable value: `[(value)]="signal"`. */
|
|
793
2519
|
readonly value: _angular_core.ModelSignal<number>;
|
|
794
2520
|
private readonly ngControl;
|
|
795
2521
|
private readonly cvaDisabled;
|
|
2522
|
+
private readonly globalConfig;
|
|
2523
|
+
private readonly resolvedErrorDisplay;
|
|
796
2524
|
private readonly errorState;
|
|
797
2525
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
798
2526
|
protected readonly clampedValue: _angular_core.Signal<number>;
|
|
799
2527
|
protected readonly fillPercent: _angular_core.Signal<number>;
|
|
800
2528
|
protected readonly thumbPos: _angular_core.Signal<string>;
|
|
801
2529
|
protected readonly fillScale: _angular_core.Signal<number>;
|
|
2530
|
+
protected readonly isVertical: _angular_core.Signal<boolean>;
|
|
802
2531
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
803
2532
|
protected readonly visibleError: _angular_core.Signal<string>;
|
|
804
2533
|
protected readonly errorId: _angular_core.Signal<string | null>;
|
|
@@ -813,7 +2542,7 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
813
2542
|
onInput(event: Event): void;
|
|
814
2543
|
onBlur(): void;
|
|
815
2544
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
|
|
816
|
-
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>;
|
|
817
2546
|
}
|
|
818
2547
|
|
|
819
2548
|
declare class SkeletonComponent {
|
|
@@ -876,6 +2605,136 @@ declare class PaginatorComponent {
|
|
|
876
2605
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginatorComponent, "gog-paginator", never, { "page": { "alias": "page"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "totalPages": { "alias": "totalPages"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "visiblePages": { "alias": "visiblePages"; "required": false; "isSignal": true; }; "showFirstPage": { "alias": "showFirstPage"; "required": false; "isSignal": true; }; "showLastPage": { "alias": "showLastPage"; "required": false; "isSignal": true; }; "siblingCount": { "alias": "siblingCount"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; }, never, never, true, never>;
|
|
877
2606
|
}
|
|
878
2607
|
|
|
2608
|
+
/** Snapshot of the viewport's native scroll geometry, emitted on every scroll/resize. */
|
|
2609
|
+
interface GogScrollMetrics {
|
|
2610
|
+
scrollTop: number;
|
|
2611
|
+
scrollLeft: number;
|
|
2612
|
+
scrollHeight: number;
|
|
2613
|
+
scrollWidth: number;
|
|
2614
|
+
clientHeight: number;
|
|
2615
|
+
clientWidth: number;
|
|
2616
|
+
}
|
|
2617
|
+
type GogScrollDirection = 'vertical' | 'horizontal';
|
|
2618
|
+
/**
|
|
2619
|
+
* Drop-in replacement for a native `overflow: auto` region: the content still scrolls
|
|
2620
|
+
* natively (wheel, touch, keyboard, focus-into-view all keep working unmodified), only the
|
|
2621
|
+
* browser's own scrollbar chrome is hidden and replaced with a themeable, draggable
|
|
2622
|
+
* overlay thumb built from plain pointer events + `ResizeObserver` — no CDK involved, to
|
|
2623
|
+
* stay consistent with the rest of this library's hand-rolled overlay/positioning code.
|
|
2624
|
+
*/
|
|
2625
|
+
declare class ScrollComponent {
|
|
2626
|
+
/** Which axes get an overlay thumb. Native scrolling on the other axis is unaffected. */
|
|
2627
|
+
readonly axis: _angular_core.InputSignal<GogScrollAxis>;
|
|
2628
|
+
/** Unset, falls back to `GOG_CONFIG.scroll.size`, then to `'normal'`. */
|
|
2629
|
+
readonly size: _angular_core.InputSignal<GogScrollSize | undefined>;
|
|
2630
|
+
/**
|
|
2631
|
+
* Fades the thumb out after `hideDelay` ms of inactivity; false keeps it always visible.
|
|
2632
|
+
* Unset, falls back to `GOG_CONFIG.scroll.autoHide`, then to `true`.
|
|
2633
|
+
*/
|
|
2634
|
+
readonly autoHide: _angular_core.InputSignal<boolean | undefined>;
|
|
2635
|
+
/** Unset, falls back to `GOG_CONFIG.scroll.hideDelay`, then to `800`. */
|
|
2636
|
+
readonly hideDelay: _angular_core.InputSignal<number | undefined>;
|
|
2637
|
+
/** Pixel distance from an edge that still counts as "reached" for gogReachStart/End. */
|
|
2638
|
+
readonly reachThreshold: _angular_core.InputSignal<number>;
|
|
2639
|
+
/**
|
|
2640
|
+
* Renders the viewport as its own tab stop (`tabindex="0"`, `role="region"`) per the
|
|
2641
|
+
* WAI-ARIA scrollable-region pattern. Turn off when nesting inside a component that
|
|
2642
|
+
* already owns focus/keyboard handling (a listbox panel, a dialog body) so this doesn't
|
|
2643
|
+
* add a redundant stop — the descendants' own focus still auto-scrolls into view either way.
|
|
2644
|
+
*/
|
|
2645
|
+
readonly focusable: _angular_core.InputSignal<boolean>;
|
|
2646
|
+
/** Accessible name for the viewport when `focusable` is true and there is no visible label. */
|
|
2647
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
2648
|
+
/**
|
|
2649
|
+
* What happens when a scroll gesture reaches this instance's edge. Unset, falls back to
|
|
2650
|
+
* `GOG_CONFIG.scroll.overscrollBehavior`, then to `'auto'`. See `GogScrollOverscrollBehavior`
|
|
2651
|
+
* for what each value does.
|
|
2652
|
+
*/
|
|
2653
|
+
readonly overscrollBehavior: _angular_core.InputSignal<GogScrollOverscrollBehavior | undefined>;
|
|
2654
|
+
readonly gogScroll: _angular_core.OutputEmitterRef<GogScrollMetrics>;
|
|
2655
|
+
readonly gogReachStart: _angular_core.OutputEmitterRef<GogScrollDirection>;
|
|
2656
|
+
readonly gogReachEnd: _angular_core.OutputEmitterRef<GogScrollDirection>;
|
|
2657
|
+
protected readonly viewportRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
|
|
2658
|
+
protected readonly contentRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
|
|
2659
|
+
protected readonly showTrackV: _angular_core.WritableSignal<boolean>;
|
|
2660
|
+
protected readonly showTrackH: _angular_core.WritableSignal<boolean>;
|
|
2661
|
+
/**
|
|
2662
|
+
* Flips true once the first real measurement has run. Before that (SSR, or the client
|
|
2663
|
+
* frame before hydration/afterNextRender fires), an allowed axis defaults to `auto` — the
|
|
2664
|
+
* same safe, always-clips behavior this component had before viewportOverflowY/X existed —
|
|
2665
|
+
* rather than guessing `visible` from a `showTrackV`/`H` that just hasn't been measured yet.
|
|
2666
|
+
*/
|
|
2667
|
+
private readonly measured;
|
|
2668
|
+
/**
|
|
2669
|
+
* `overflow-y`/`overflow-x` on the viewport, driven by measured overflow rather than a
|
|
2670
|
+
* static `axis`-only class. Any axis that isn't *currently, actually* scrolling — because
|
|
2671
|
+
* it's disabled by `axis`, or because it's allowed but the content doesn't overflow it —
|
|
2672
|
+
* gets `visible`, never `hidden`/`auto`. A non-`visible` overflow value makes the viewport
|
|
2673
|
+
* a "scroll container" per spec regardless of whether it has anything to scroll, which
|
|
2674
|
+
* becomes the containing block for `position: sticky` descendants (e.g. gog-table's sticky
|
|
2675
|
+
* header) and a scroll-chaining boundary for wheel input. Left non-visible on a disabled or
|
|
2676
|
+
* unneeded axis, an instance nested inside another scroller — axis="horizontal" wrapping a
|
|
2677
|
+
* table that fits, itself inside a taller outer gog-scroll — would silently swallow the
|
|
2678
|
+
* outer axis's wheel scroll and break its sticky headers, even though this instance itself
|
|
2679
|
+
* never visibly scrolls that axis. `visible` whenever the axis is inert avoids both.
|
|
2680
|
+
*/
|
|
2681
|
+
protected readonly viewportOverflowY: _angular_core.Signal<"auto" | "visible">;
|
|
2682
|
+
protected readonly viewportOverflowX: _angular_core.Signal<"auto" | "visible">;
|
|
2683
|
+
/** App/subtree-wide fallbacks for the inputs above that don't set their own value. */
|
|
2684
|
+
private readonly globalConfig;
|
|
2685
|
+
protected readonly resolvedSize: _angular_core.Signal<GogScrollSize>;
|
|
2686
|
+
protected readonly resolvedAutoHide: _angular_core.Signal<boolean>;
|
|
2687
|
+
protected readonly resolvedHideDelay: _angular_core.Signal<number>;
|
|
2688
|
+
protected readonly resolvedOverscrollBehavior: _angular_core.Signal<GogScrollOverscrollBehavior>;
|
|
2689
|
+
/**
|
|
2690
|
+
* Only applies `resolvedOverscrollBehavior` on an axis that's actually acting as a scroll
|
|
2691
|
+
* container — on an axis that's `visible` (see viewportOverflowY/X above) there is no
|
|
2692
|
+
* scroll boundary on it to contain in the first place.
|
|
2693
|
+
*/
|
|
2694
|
+
protected readonly viewportOverscrollY: _angular_core.Signal<GogScrollOverscrollBehavior>;
|
|
2695
|
+
protected readonly viewportOverscrollX: _angular_core.Signal<GogScrollOverscrollBehavior>;
|
|
2696
|
+
protected readonly thumbSizeV: _angular_core.WritableSignal<number>;
|
|
2697
|
+
protected readonly thumbPosV: _angular_core.WritableSignal<number>;
|
|
2698
|
+
protected readonly thumbSizeH: _angular_core.WritableSignal<number>;
|
|
2699
|
+
protected readonly thumbPosH: _angular_core.WritableSignal<number>;
|
|
2700
|
+
protected readonly interacting: _angular_core.WritableSignal<boolean>;
|
|
2701
|
+
protected readonly dragAxis: _angular_core.WritableSignal<GogScrollDirection | null>;
|
|
2702
|
+
private readonly isBrowser;
|
|
2703
|
+
private readonly destroyRef;
|
|
2704
|
+
private resizeObserver;
|
|
2705
|
+
private updateFrame;
|
|
2706
|
+
private hideTimer;
|
|
2707
|
+
/** Read once per token change instead of per drag/scroll tick — see refreshTokens(). */
|
|
2708
|
+
private thumbMinSizePx;
|
|
2709
|
+
private dragStartPointer;
|
|
2710
|
+
private dragStartScroll;
|
|
2711
|
+
private dragTrackLength;
|
|
2712
|
+
private dragThumbSizePct;
|
|
2713
|
+
private readonly reachState;
|
|
2714
|
+
constructor();
|
|
2715
|
+
/** Scrolls the viewport exactly like `Element.scrollTo` — this simply forwards to it. */
|
|
2716
|
+
scrollTo(options: ScrollToOptions): void;
|
|
2717
|
+
scrollToTop(behavior?: ScrollBehavior): void;
|
|
2718
|
+
scrollToBottom(behavior?: ScrollBehavior): void;
|
|
2719
|
+
scrollToLeft(behavior?: ScrollBehavior): void;
|
|
2720
|
+
scrollToRight(behavior?: ScrollBehavior): void;
|
|
2721
|
+
protected onScroll(): void;
|
|
2722
|
+
protected onActivity(): void;
|
|
2723
|
+
protected onTrackPointerDown(event: PointerEvent, axis: GogScrollDirection): void;
|
|
2724
|
+
protected onThumbPointerDown(event: PointerEvent, axis: GogScrollDirection): void;
|
|
2725
|
+
protected onThumbPointerMove(event: PointerEvent, axis: GogScrollDirection): void;
|
|
2726
|
+
protected onThumbPointerUp(event: PointerEvent): void;
|
|
2727
|
+
private restartHideTimer;
|
|
2728
|
+
/** Reads the tokens that feed thumb-size math. Cheap, but still only once per change. */
|
|
2729
|
+
private refreshTokens;
|
|
2730
|
+
/** Coalesces scroll/resize bursts into one measurement per frame. */
|
|
2731
|
+
private scheduleMeasure;
|
|
2732
|
+
private measure;
|
|
2733
|
+
private checkReach;
|
|
2734
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollComponent, never>;
|
|
2735
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollComponent, "gog-scroll", never, { "axis": { "alias": "axis"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autoHide": { "alias": "autoHide"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "reachThreshold": { "alias": "reachThreshold"; "required": false; "isSignal": true; }; "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "overscrollBehavior": { "alias": "overscrollBehavior"; "required": false; "isSignal": true; }; }, { "gogScroll": "gogScroll"; "gogReachStart": "gogReachStart"; "gogReachEnd": "gogReachEnd"; }, never, ["*"], true, never>;
|
|
2736
|
+
}
|
|
2737
|
+
|
|
879
2738
|
declare class SpinnerOverlayComponent {
|
|
880
2739
|
readonly loading: _angular_core.InputSignal<boolean>;
|
|
881
2740
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
@@ -887,7 +2746,53 @@ declare class SpinnerOverlayComponent {
|
|
|
887
2746
|
|
|
888
2747
|
/** Default comparator: locale-aware for strings via `Intl.Collator`, `<`/`>` otherwise. */
|
|
889
2748
|
declare function defaultCompare(a: unknown, b: unknown): number;
|
|
890
|
-
|
|
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 {
|
|
891
2796
|
/** Field name, or a dot-path into a nested property (e.g. `"address.city"`). */
|
|
892
2797
|
readonly field: _angular_core.InputSignal<string>;
|
|
893
2798
|
readonly header: _angular_core.InputSignal<string>;
|
|
@@ -900,9 +2805,20 @@ declare class Column {
|
|
|
900
2805
|
readonly maxWidth: _angular_core.InputSignal<string>;
|
|
901
2806
|
/** Custom sort comparator for this column. Defaults to `defaultCompare`. */
|
|
902
2807
|
readonly comparator: _angular_core.InputSignal<((a: unknown, b: unknown) => number) | null>;
|
|
903
|
-
|
|
904
|
-
|
|
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>;
|
|
905
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;
|
|
906
2822
|
|
|
907
2823
|
interface GogTableBodyContext<T> {
|
|
908
2824
|
$implicit: T;
|
|
@@ -912,11 +2828,29 @@ interface GogTableHeaderContext {
|
|
|
912
2828
|
$implicit: never;
|
|
913
2829
|
}
|
|
914
2830
|
/**
|
|
915
|
-
* 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
|
+
* ```
|
|
2836
|
+
*
|
|
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:
|
|
916
2843
|
*
|
|
917
|
-
*
|
|
918
|
-
*
|
|
919
|
-
*
|
|
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
|
+
* ```
|
|
920
2854
|
*/
|
|
921
2855
|
declare class TemplateDirective {
|
|
922
2856
|
readonly template: _angular_core.InputSignal<string>;
|
|
@@ -933,6 +2867,11 @@ interface SortState {
|
|
|
933
2867
|
direction: SortDirection;
|
|
934
2868
|
}
|
|
935
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>;
|
|
936
2875
|
readonly value: _angular_core.InputSignal<T[]>;
|
|
937
2876
|
/**
|
|
938
2877
|
* Full width of the container by default. Set to `false` to shrink the table to fit
|
|
@@ -945,7 +2884,7 @@ declare class TableComponent<T extends object> {
|
|
|
945
2884
|
readonly showTotal: _angular_core.InputSignal<boolean>;
|
|
946
2885
|
readonly emptyPlaceholder: _angular_core.InputSignal<string>;
|
|
947
2886
|
/** Alignment of pagination controls */
|
|
948
|
-
readonly paginatorPosition: _angular_core.InputSignal<"
|
|
2887
|
+
readonly paginatorPosition: _angular_core.InputSignal<"left" | "right" | "center">;
|
|
949
2888
|
/** Alignment of total count label (only when showTotal=true) */
|
|
950
2889
|
readonly totalPosition: _angular_core.InputSignal<"left" | "right" | "opposite">;
|
|
951
2890
|
/** Show loading spinner instead of rows */
|
|
@@ -956,7 +2895,7 @@ declare class TableComponent<T extends object> {
|
|
|
956
2895
|
readonly stickyHeader: _angular_core.InputSignal<boolean>;
|
|
957
2896
|
/** Row density: lg (default) / md (compact) / sm (dense) */
|
|
958
2897
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
959
|
-
readonly columns: _angular_core.Signal<readonly
|
|
2898
|
+
readonly columns: _angular_core.Signal<readonly GogColumn[]>;
|
|
960
2899
|
readonly templates: _angular_core.Signal<readonly TemplateDirective[]>;
|
|
961
2900
|
readonly sortState: _angular_core.WritableSignal<SortState>;
|
|
962
2901
|
readonly sortedData: _angular_core.Signal<T[]>;
|
|
@@ -972,19 +2911,27 @@ declare class TableComponent<T extends object> {
|
|
|
972
2911
|
readonly visibleRows: _angular_core.Signal<T[]>;
|
|
973
2912
|
readonly hasPagination: _angular_core.Signal<boolean>;
|
|
974
2913
|
readonly emptyColspan: _angular_core.Signal<number>;
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
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;
|
|
978
2925
|
getSortDirection(field: string): SortDirection;
|
|
979
2926
|
getAriaSort(field: string): 'ascending' | 'descending' | null;
|
|
980
|
-
handleSortClick(col:
|
|
2927
|
+
handleSortClick(col: GogColumn): void;
|
|
981
2928
|
getCellValue(row: T, field: string): unknown;
|
|
982
2929
|
formatCellValue(row: T, field: string): string;
|
|
983
2930
|
globalRowIndex(localIndex: number): number;
|
|
984
2931
|
/** CSS grid-area for the total label: left slot or right slot */
|
|
985
2932
|
readonly totalGridArea: _angular_core.Signal<"left" | "right">;
|
|
986
2933
|
/** CSS grid-area for the pagination block */
|
|
987
|
-
readonly paginatorGridArea: _angular_core.Signal<"
|
|
2934
|
+
readonly paginatorGridArea: _angular_core.Signal<"left" | "right" | "center">;
|
|
988
2935
|
private readonly bodyTemplateMap;
|
|
989
2936
|
private readonly headerTemplateMap;
|
|
990
2937
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
|
|
@@ -1005,6 +2952,87 @@ declare class SpinnerComponent {
|
|
|
1005
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>;
|
|
1006
2953
|
}
|
|
1007
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
|
+
|
|
1008
3036
|
declare class ThemeService {
|
|
1009
3037
|
private readonly document;
|
|
1010
3038
|
private readonly root;
|
|
@@ -1018,5 +3046,235 @@ declare class ThemeService {
|
|
|
1018
3046
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
|
|
1019
3047
|
}
|
|
1020
3048
|
|
|
1021
|
-
|
|
1022
|
-
|
|
3049
|
+
/**
|
|
3050
|
+
* App-wide defaults for the handful of component inputs where that actually makes sense —
|
|
3051
|
+
* timing/behavior knobs a whole app typically wants to set once (a house style for how long
|
|
3052
|
+
* scrollbars stay visible, how aggressively buttons debounce clicks), not visual ones.
|
|
3053
|
+
* Visual defaults (colors, radii, animation *durations expressed in CSS*) already have a
|
|
3054
|
+
* global mechanism: the `--gog-*` custom properties in `styles/theme.css`. This is only for
|
|
3055
|
+
* inputs that can't be a CSS token because a component reads them in TypeScript (a
|
|
3056
|
+
* `setTimeout` delay, an RxJS `timer` duration) — see `styling.instructions.md` and
|
|
3057
|
+
* `gleks-ui-library.instructions.md`'s "Global configuration" section for the line between
|
|
3058
|
+
* the two and for how to add a new field here when a component needs one.
|
|
3059
|
+
*
|
|
3060
|
+
* Every field is optional at every level: set only the ones you want to change from the
|
|
3061
|
+
* component's own built-in default. An instance's own input, when set, always wins over
|
|
3062
|
+
* this — this only fills in what the instance didn't specify itself.
|
|
3063
|
+
*/
|
|
3064
|
+
interface GogGlobalConfig {
|
|
3065
|
+
scroll?: {
|
|
3066
|
+
autoHide?: boolean;
|
|
3067
|
+
hideDelay?: number;
|
|
3068
|
+
size?: GogScrollSize;
|
|
3069
|
+
overscrollBehavior?: GogScrollOverscrollBehavior;
|
|
3070
|
+
};
|
|
3071
|
+
button?: {
|
|
3072
|
+
debounce?: number;
|
|
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
|
+
};
|
|
3161
|
+
}
|
|
3162
|
+
/**
|
|
3163
|
+
* Resolves to `{}` — every field falls through to its component's own hardcoded default —
|
|
3164
|
+
* until a `provideGogConfig(...)` call overrides it somewhere in the injector tree.
|
|
3165
|
+
*/
|
|
3166
|
+
declare const GOG_CONFIG: InjectionToken<GogGlobalConfig>;
|
|
3167
|
+
/**
|
|
3168
|
+
* Sets app-wide (or subtree-wide, if placed in a route's or component's own `providers`
|
|
3169
|
+
* instead of the bootstrap config) defaults for every `@guildofgleks/ui` component that
|
|
3170
|
+
* reads `GOG_CONFIG` — one call instead of a separate injection token per setting:
|
|
3171
|
+
*
|
|
3172
|
+
* ```ts
|
|
3173
|
+
* // app.config.ts
|
|
3174
|
+
* providers: [
|
|
3175
|
+
* provideGogConfig({
|
|
3176
|
+
* scroll: { hideDelay: 1000 },
|
|
3177
|
+
* button: { debounce: 500 },
|
|
3178
|
+
* }),
|
|
3179
|
+
* ]
|
|
3180
|
+
* ```
|
|
3181
|
+
*
|
|
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.
|
|
3195
|
+
*/
|
|
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';
|
|
3278
|
+
|
|
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 };
|