@guildofgleks/ui 21.2.2 → 21.2.4
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 +24 -12
- package/fesm2022/guildofgleks-ui.mjs +730 -112
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/theme.css +978 -943
- package/src/styles/utilities.css +69 -33
- package/types/guildofgleks-ui.d.ts +356 -22
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { TemplateRef, Type, Injector, InjectionToken, OnDestroy, DoCheck, Signal, ModelSignal, ElementRef } from '@angular/core';
|
|
2
|
+
import { TemplateRef, Type, Injector, InjectionToken, OnDestroy, DoCheck, Signal, ModelSignal, ElementRef, 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';
|
|
@@ -12,6 +12,20 @@ type GogTagShape = 'rounded' | 'pill';
|
|
|
12
12
|
type GogSkeletonShape = 'text' | 'circle' | 'rect';
|
|
13
13
|
type GogSkeletonAnimation = 'pulse' | 'wave' | 'none';
|
|
14
14
|
type GogPaginatorRangeMode = 'window' | 'ellipsis';
|
|
15
|
+
type GogScrollAxis = 'vertical' | 'horizontal' | 'both';
|
|
16
|
+
type GogScrollSize = 'normal' | 'thin';
|
|
17
|
+
/**
|
|
18
|
+
* Mirrors the CSS `overscroll-behavior` value space directly:
|
|
19
|
+
* - `'auto'` — scrolling past this instance's edge chains to the next scrollable ancestor
|
|
20
|
+
* (a page, a dialog body, another gog-scroll), the same as an un-customized native
|
|
21
|
+
* `overflow: auto` div. The default — matches what most embedded content expects.
|
|
22
|
+
* - `'contain'` — scrolling stops dead at this instance's edge; nothing behind it moves.
|
|
23
|
+
* Suited to overlay-style panels (a dropdown, a modal) where scrolling past the end
|
|
24
|
+
* shouldn't also scroll whatever is behind them.
|
|
25
|
+
* - `'none'` — like `'contain'`, and additionally suppresses the platform's own overscroll
|
|
26
|
+
* affordances (rubber-banding, pull-to-refresh) for this instance.
|
|
27
|
+
*/
|
|
28
|
+
type GogScrollOverscrollBehavior = 'auto' | 'contain' | 'none';
|
|
15
29
|
|
|
16
30
|
declare class ButtonComponent {
|
|
17
31
|
variant: _angular_core.InputSignal<GogVariant>;
|
|
@@ -25,8 +39,9 @@ declare class ButtonComponent {
|
|
|
25
39
|
* guard, not a delay before the first click fires: the first click in a
|
|
26
40
|
* window is emitted immediately (leading edge), and any further clicks
|
|
27
41
|
* within `debounce` ms are silently dropped until the window elapses.
|
|
42
|
+
* Unset, falls back to `GOG_CONFIG.button.debounce`, then to `300`.
|
|
28
43
|
*/
|
|
29
|
-
debounce: _angular_core.InputSignal<number>;
|
|
44
|
+
debounce: _angular_core.InputSignal<number | undefined>;
|
|
30
45
|
/**
|
|
31
46
|
* Accessible name for the button, forwarded to the native <button>.
|
|
32
47
|
* Setting `aria-label` directly on <gog-button> in a template does NOT
|
|
@@ -42,6 +57,8 @@ declare class ButtonComponent {
|
|
|
42
57
|
protected isDisabled: _angular_core.Signal<boolean>;
|
|
43
58
|
private static readonly SPINNER_SIZE_BY_BUTTON_SIZE;
|
|
44
59
|
protected spinnerSize: _angular_core.Signal<GogSize>;
|
|
60
|
+
private readonly globalConfig;
|
|
61
|
+
protected readonly resolvedDebounce: _angular_core.Signal<number>;
|
|
45
62
|
private readonly destroyRef;
|
|
46
63
|
private readonly click$;
|
|
47
64
|
constructor();
|
|
@@ -93,6 +110,14 @@ declare class AccordionComponent {
|
|
|
93
110
|
readonly expandFirst: _angular_core.InputSignal<boolean>;
|
|
94
111
|
readonly multi: _angular_core.InputSignal<boolean>;
|
|
95
112
|
readonly loading: _angular_core.InputSignal<boolean>;
|
|
113
|
+
/**
|
|
114
|
+
* How many skeleton rows to render while `loading` is true and `items` is still
|
|
115
|
+
* empty — the common case of "the list itself hasn't arrived yet," where there's
|
|
116
|
+
* no item count to derive a row count from. Ignored once `items` has entries:
|
|
117
|
+
* then one skeleton row is rendered per item instead, so the placeholder matches
|
|
118
|
+
* the eventual shape.
|
|
119
|
+
*/
|
|
120
|
+
readonly skeletonCount: _angular_core.InputSignal<number>;
|
|
96
121
|
readonly showChevron: _angular_core.InputSignal<boolean>;
|
|
97
122
|
/**
|
|
98
123
|
* When set, wraps each header button in `role="heading"` with this `aria-level`,
|
|
@@ -100,7 +125,7 @@ declare class AccordionComponent {
|
|
|
100
125
|
* Left unset by default since not every accordion instance represents document structure
|
|
101
126
|
* (e.g. one nested inside a card).
|
|
102
127
|
*/
|
|
103
|
-
readonly headingLevel: _angular_core.InputSignal<4 |
|
|
128
|
+
readonly headingLevel: _angular_core.InputSignal<4 | 3 | 2 | 5 | 6 | undefined>;
|
|
104
129
|
/**
|
|
105
130
|
* Two-way bindable set of currently open item ids. Exposed as a model so consumers
|
|
106
131
|
* can drive the accordion externally (e.g. `[(openIds)]="mySet"`) instead of only
|
|
@@ -127,12 +152,54 @@ declare class AccordionComponent {
|
|
|
127
152
|
* with a new array reference after the user closed everything by hand.
|
|
128
153
|
*/
|
|
129
154
|
private readonly autoExpanded;
|
|
155
|
+
protected readonly skeletonRows: _angular_core.Signal<number[]>;
|
|
130
156
|
constructor();
|
|
131
157
|
protected isOpen(id: string | number): boolean;
|
|
132
158
|
protected toggle(item: GogAccordionItem): void;
|
|
133
159
|
protected onHeaderKeydown(event: KeyboardEvent): void;
|
|
134
160
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
|
|
135
|
-
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; }; "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>;
|
|
161
|
+
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>;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Headless expand/collapse primitive — a trigger toggles a content region open and
|
|
166
|
+
* closed, in place (no portal/overlay, unlike `gog-select`/`gog-multiselect`). Unopinionated
|
|
167
|
+
* about markup: project any element as the trigger via `gogCollapsibleTrigger` and any
|
|
168
|
+
* element as the content via `gogCollapsibleContent`; this component only holds the shared
|
|
169
|
+
* `open` state and generates the id pair linking them for ARIA.
|
|
170
|
+
*/
|
|
171
|
+
declare class CollapsibleComponent {
|
|
172
|
+
private static nextUid;
|
|
173
|
+
/** Two-way bindable open state: `[(open)]="signal"`. */
|
|
174
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
175
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
176
|
+
private readonly uid;
|
|
177
|
+
readonly contentId: _angular_core.Signal<string>;
|
|
178
|
+
toggle(): void;
|
|
179
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
|
|
180
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CollapsibleComponent, "gog-collapsible", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Marks the element that toggles a `gog-collapsible`. Works on any clickable element
|
|
185
|
+
* (`<button>`, `<a>`, ...) — this only wires the click handler and the ARIA attributes
|
|
186
|
+
* pointing at the matching `gogCollapsibleContent`; it owns no markup of its own.
|
|
187
|
+
*/
|
|
188
|
+
declare class GogCollapsibleTriggerDirective {
|
|
189
|
+
protected readonly collapsible: CollapsibleComponent;
|
|
190
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogCollapsibleTriggerDirective, never>;
|
|
191
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogCollapsibleTriggerDirective, "[gogCollapsibleTrigger]", never, {}, {}, never, never, true, never>;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* Marks the element that a `gog-collapsible` shows and hides. Applies the open/closed
|
|
196
|
+
* CSS state and the ARIA wiring (`id`, `aria-hidden`, `inert`) to whatever element this is
|
|
197
|
+
* placed on — that element owns its own content and layout.
|
|
198
|
+
*/
|
|
199
|
+
declare class GogCollapsibleContentDirective {
|
|
200
|
+
protected readonly collapsible: CollapsibleComponent;
|
|
201
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogCollapsibleContentDirective, never>;
|
|
202
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogCollapsibleContentDirective, "[gogCollapsibleContent]", never, {}, {}, never, never, true, never>;
|
|
136
203
|
}
|
|
137
204
|
|
|
138
205
|
declare class CheckboxComponent implements ControlValueAccessor {
|
|
@@ -141,11 +208,12 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
141
208
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
142
209
|
readonly indeterminate: _angular_core.InputSignal<boolean>;
|
|
143
210
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
211
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
144
212
|
readonly checkIconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
145
213
|
/**
|
|
146
214
|
* Two-way bindable checked state: `[(checked)]="signal"`.
|
|
147
215
|
* This is the same state Angular Forms drives via `writeValue`/`registerOnChange`
|
|
148
|
-
* when the component is used with `formControlName`/`[formControl]
|
|
216
|
+
* when the component is used with `formControlName`/`[formControl]`.
|
|
149
217
|
* Don't wire both a form directive AND `[(checked)]` to the same instance —
|
|
150
218
|
* pick one, otherwise you end up with two competing sources of truth.
|
|
151
219
|
*/
|
|
@@ -175,8 +243,10 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
175
243
|
protected readonly checkboxPadding = "var(--gog-control-checkbox-padding, 6px)";
|
|
176
244
|
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)">;
|
|
177
245
|
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)">;
|
|
246
|
+
private readonly ngControl;
|
|
178
247
|
private readonly cvaDisabled;
|
|
179
248
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
249
|
+
constructor();
|
|
180
250
|
writeValue(val: boolean): void;
|
|
181
251
|
registerOnChange(fn: (val: boolean) => void): void;
|
|
182
252
|
registerOnTouched(fn: () => void): void;
|
|
@@ -186,7 +256,7 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
186
256
|
private onCheckedChange;
|
|
187
257
|
private onTouched;
|
|
188
258
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
189
|
-
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; }; "checkIconTemplate": { "alias": "checkIconTemplate"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
|
|
259
|
+
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"; }, never, never, true, never>;
|
|
190
260
|
}
|
|
191
261
|
|
|
192
262
|
interface ConfirmDialogData {
|
|
@@ -410,17 +480,23 @@ declare class ToastContainerComponent {
|
|
|
410
480
|
*
|
|
411
481
|
* `'auto'`: shown once the attached form control has been touched and is invalid — the
|
|
412
482
|
* consumer only supplies the message text, not the timing. Requires a
|
|
413
|
-
* `[formControl]` / `formControlName`
|
|
414
|
-
*
|
|
483
|
+
* `[formControl]` / `formControlName` on the element; without one this falls back to
|
|
484
|
+
* `'manual'`, since there is no control state to key off.
|
|
415
485
|
*/
|
|
416
486
|
type GogErrorDisplay = 'auto' | 'manual';
|
|
417
487
|
|
|
418
488
|
declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
419
489
|
readonly label: _angular_core.InputSignal<string>;
|
|
420
490
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
421
|
-
readonly type: _angular_core.InputSignal<"text" | "password" | "email">;
|
|
491
|
+
readonly type: _angular_core.InputSignal<"number" | "text" | "password" | "email" | "date">;
|
|
422
492
|
/** Defaults to 'current-password' for password fields, 'off' otherwise */
|
|
423
493
|
readonly autocomplete: _angular_core.InputSignal<string>;
|
|
494
|
+
/** Only applied when `type="number"`. */
|
|
495
|
+
readonly min: _angular_core.InputSignal<number | null>;
|
|
496
|
+
/** Only applied when `type="number"`. */
|
|
497
|
+
readonly max: _angular_core.InputSignal<number | null>;
|
|
498
|
+
/** Only applied when `type="number"`. */
|
|
499
|
+
readonly step: _angular_core.InputSignal<number | null>;
|
|
424
500
|
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
425
501
|
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
426
502
|
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay>;
|
|
@@ -428,6 +504,11 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
428
504
|
readonly inputId: _angular_core.InputSignal<string>;
|
|
429
505
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
430
506
|
readonly size: _angular_core.InputSignal<GogSize>;
|
|
507
|
+
/**
|
|
508
|
+
* Full width of the container by default, matching every other field-style control.
|
|
509
|
+
* Set to `false` to shrink the field to fit its content instead.
|
|
510
|
+
*/
|
|
511
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
431
512
|
/** Default icon name for the leading icon. */
|
|
432
513
|
readonly iconStart: _angular_core.InputSignal<"" | GogIconName>;
|
|
433
514
|
/** Default icon name for the trailing icon. */
|
|
@@ -448,7 +529,12 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
448
529
|
readonly showPasswordLabel: _angular_core.InputSignal<string>;
|
|
449
530
|
/** aria-label for the hide-password button, shown once the password is revealed */
|
|
450
531
|
readonly hidePasswordLabel: _angular_core.InputSignal<string>;
|
|
451
|
-
/**
|
|
532
|
+
/**
|
|
533
|
+
* Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`.
|
|
534
|
+
* Always a string, including for `type="number"` — that field's `formControl`/
|
|
535
|
+
* `formControlName` value is a `number` (or `null` when empty); the string here is only
|
|
536
|
+
* the raw text shown in the native input.
|
|
537
|
+
*/
|
|
452
538
|
readonly value: _angular_core.ModelSignal<string>;
|
|
453
539
|
private readonly ngControl;
|
|
454
540
|
private readonly cvaDisabled;
|
|
@@ -456,7 +542,8 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
456
542
|
private readonly passwordVisible;
|
|
457
543
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
458
544
|
protected readonly isPasswordField: _angular_core.Signal<boolean>;
|
|
459
|
-
protected readonly
|
|
545
|
+
protected readonly isNumberField: _angular_core.Signal<boolean>;
|
|
546
|
+
protected readonly effectiveType: _angular_core.Signal<"number" | "text" | "password" | "email" | "date">;
|
|
460
547
|
protected readonly effectiveAutocomplete: _angular_core.Signal<string>;
|
|
461
548
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
462
549
|
protected readonly visibleError: _angular_core.Signal<string>;
|
|
@@ -467,12 +554,13 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
467
554
|
protected readonly effectiveIconEndLabel: _angular_core.Signal<string>;
|
|
468
555
|
protected readonly hasIconEnd: _angular_core.Signal<boolean>;
|
|
469
556
|
protected readonly hasIconEndAction: _angular_core.Signal<boolean>;
|
|
557
|
+
/** `number` for a `type="number"` field (`null` when empty), `string` otherwise. */
|
|
470
558
|
private _onChange;
|
|
471
559
|
private _onTouched;
|
|
472
560
|
constructor();
|
|
473
561
|
ngDoCheck(): void;
|
|
474
|
-
writeValue(val: string): void;
|
|
475
|
-
registerOnChange(fn: (val: string) => void): void;
|
|
562
|
+
writeValue(val: string | number | null): void;
|
|
563
|
+
registerOnChange(fn: (val: string | number | null) => void): void;
|
|
476
564
|
registerOnTouched(fn: () => void): void;
|
|
477
565
|
setDisabledState(isDisabled: boolean): void;
|
|
478
566
|
protected onIconStartClick(): void;
|
|
@@ -480,7 +568,46 @@ declare class InputfieldComponent implements ControlValueAccessor, DoCheck {
|
|
|
480
568
|
onInput(event: Event): void;
|
|
481
569
|
onBlur(): void;
|
|
482
570
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputfieldComponent, never>;
|
|
483
|
-
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; }; "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>;
|
|
571
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputfieldComponent, "gog-inputfield", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; "iconStartTemplate": { "alias": "iconStartTemplate"; "required": false; "isSignal": true; }; "iconEndTemplate": { "alias": "iconEndTemplate"; "required": false; "isSignal": true; }; "iconStartFn": { "alias": "iconStartFn"; "required": false; "isSignal": true; }; "iconEndFn": { "alias": "iconEndFn"; "required": false; "isSignal": true; }; "iconStartLabel": { "alias": "iconStartLabel"; "required": false; "isSignal": true; }; "iconEndLabel": { "alias": "iconEndLabel"; "required": false; "isSignal": true; }; "showPasswordLabel": { "alias": "showPasswordLabel"; "required": false; "isSignal": true; }; "hidePasswordLabel": { "alias": "hidePasswordLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
declare class TextareaComponent implements ControlValueAccessor, DoCheck {
|
|
575
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
576
|
+
readonly placeholder: _angular_core.InputSignal<string>;
|
|
577
|
+
readonly errorMessage: _angular_core.InputSignal<string>;
|
|
578
|
+
/** See `GogErrorDisplay`. Defaults to `'manual'`, matching every other control in the library. */
|
|
579
|
+
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay>;
|
|
580
|
+
readonly name: _angular_core.InputSignal<string>;
|
|
581
|
+
readonly inputId: _angular_core.InputSignal<string>;
|
|
582
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
583
|
+
readonly size: _angular_core.InputSignal<GogSize>;
|
|
584
|
+
/** Native `rows` attribute, controlling the field's initial height. */
|
|
585
|
+
readonly rows: _angular_core.InputSignal<number>;
|
|
586
|
+
/**
|
|
587
|
+
* Full width of the container by default, matching every other field-style control.
|
|
588
|
+
* Set to `false` to shrink the field to fit its content instead.
|
|
589
|
+
*/
|
|
590
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
591
|
+
/** Two-way bindable value: `[(value)]="signal"` or `[value]` / `(valueChange)`. */
|
|
592
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
593
|
+
private readonly ngControl;
|
|
594
|
+
private readonly cvaDisabled;
|
|
595
|
+
private readonly errorState;
|
|
596
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
597
|
+
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
598
|
+
protected readonly visibleError: _angular_core.Signal<string>;
|
|
599
|
+
private _onChange;
|
|
600
|
+
private _onTouched;
|
|
601
|
+
constructor();
|
|
602
|
+
ngDoCheck(): void;
|
|
603
|
+
writeValue(val: string): void;
|
|
604
|
+
registerOnChange(fn: (val: string) => void): void;
|
|
605
|
+
registerOnTouched(fn: () => void): void;
|
|
606
|
+
setDisabledState(isDisabled: boolean): void;
|
|
607
|
+
onInput(event: Event): void;
|
|
608
|
+
onBlur(): void;
|
|
609
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TextareaComponent, never>;
|
|
610
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TextareaComponent, "gog-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
484
611
|
}
|
|
485
612
|
|
|
486
613
|
declare class ChipComponent {
|
|
@@ -489,6 +616,7 @@ declare class ChipComponent {
|
|
|
489
616
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
490
617
|
readonly clickable: _angular_core.InputSignal<boolean>;
|
|
491
618
|
readonly removable: _angular_core.InputSignal<boolean>;
|
|
619
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
492
620
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
493
621
|
readonly removeAriaLabel: _angular_core.InputSignal<string>;
|
|
494
622
|
readonly avatarUrl: _angular_core.InputSignal<string | null>;
|
|
@@ -502,7 +630,7 @@ declare class ChipComponent {
|
|
|
502
630
|
protected onKeydown(event: KeyboardEvent): void;
|
|
503
631
|
protected onRemoveClick(event: MouseEvent): void;
|
|
504
632
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
|
|
505
|
-
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; }; "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>;
|
|
633
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "gog-chip", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "avatarAlt": { "alias": "avatarAlt"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; }, { "gogClick": "gogClick"; "gogRemove": "gogRemove"; }, never, ["*"], true, never>;
|
|
506
634
|
}
|
|
507
635
|
|
|
508
636
|
declare class TagComponent {
|
|
@@ -511,10 +639,11 @@ declare class TagComponent {
|
|
|
511
639
|
readonly shape: _angular_core.InputSignal<GogTagShape>;
|
|
512
640
|
readonly iconName: _angular_core.InputSignal<GogIconName | null>;
|
|
513
641
|
readonly iconTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
642
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
514
643
|
protected readonly hasIcon: _angular_core.Signal<boolean>;
|
|
515
644
|
protected readonly hostClasses: _angular_core.Signal<string>;
|
|
516
645
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
|
|
517
|
-
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; }; }, {}, never, ["*"], true, never>;
|
|
646
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "gog-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconTemplate": { "alias": "iconTemplate"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
518
647
|
}
|
|
519
648
|
|
|
520
649
|
type GogDropdownDirection = 'auto' | 'up' | 'down';
|
|
@@ -575,6 +704,11 @@ declare abstract class GogDropdownBase<TValue> implements ControlValueAccessor,
|
|
|
575
704
|
readonly appendToBody: _angular_core.InputSignal<boolean>;
|
|
576
705
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
577
706
|
readonly chevronTemplate: _angular_core.InputSignal<TemplateRef<unknown> | null>;
|
|
707
|
+
/**
|
|
708
|
+
* Full width of the container by default, matching every other field-style control.
|
|
709
|
+
* Set to `false` to shrink the trigger to fit its selected label instead.
|
|
710
|
+
*/
|
|
711
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
578
712
|
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
579
713
|
/** The `<ng-template>` holding the panel markup, rendered inline or into `<body>`. */
|
|
580
714
|
protected abstract readonly panelTemplate: Signal<TemplateRef<unknown> | undefined>;
|
|
@@ -690,7 +824,7 @@ declare abstract class GogDropdownBase<TValue> implements ControlValueAccessor,
|
|
|
690
824
|
private resolvePanelZIndex;
|
|
691
825
|
private updatePlacement;
|
|
692
826
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GogDropdownBase<any>, never>;
|
|
693
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogDropdownBase<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; }; "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; }; }, {}, never, never, true, never>;
|
|
827
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GogDropdownBase<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; }; "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; }; }, {}, never, never, true, never>;
|
|
694
828
|
}
|
|
695
829
|
|
|
696
830
|
/** @deprecated Prefer `GogDropdownOption`; kept as an alias so existing imports keep working. */
|
|
@@ -760,6 +894,13 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
760
894
|
readonly errorDisplay: _angular_core.InputSignal<GogErrorDisplay>;
|
|
761
895
|
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
762
896
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
897
|
+
/**
|
|
898
|
+
* Full width of the container by default. Set to `false` to size the track to
|
|
899
|
+
* `--gog-slider-auto-width` instead — a slider's track has no content of its own to
|
|
900
|
+
* shrink-wrap to, so unlike the other field controls this needs an explicit fallback
|
|
901
|
+
* width rather than `fit-content`.
|
|
902
|
+
*/
|
|
903
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
763
904
|
/** Two-way bindable value: `[(value)]="signal"`. */
|
|
764
905
|
readonly value: _angular_core.ModelSignal<number>;
|
|
765
906
|
private readonly ngControl;
|
|
@@ -784,7 +925,7 @@ declare class SliderComponent implements ControlValueAccessor, DoCheck {
|
|
|
784
925
|
onInput(event: Event): void;
|
|
785
926
|
onBlur(): void;
|
|
786
927
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
|
|
787
|
-
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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
928
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "gog-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showThumb": { "alias": "showThumb"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
788
929
|
}
|
|
789
930
|
|
|
790
931
|
declare class SkeletonComponent {
|
|
@@ -809,6 +950,11 @@ declare class SkeletonComponent {
|
|
|
809
950
|
declare class PaginatorComponent {
|
|
810
951
|
/** 1-based current page. Two-way bindable: `[(page)]="myPageSignal"`. */
|
|
811
952
|
readonly page: _angular_core.ModelSignal<number>;
|
|
953
|
+
/**
|
|
954
|
+
* Full width of the container by default. Set to `false` to shrink to fit the page
|
|
955
|
+
* buttons instead.
|
|
956
|
+
*/
|
|
957
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
812
958
|
readonly totalPages: _angular_core.InputSignal<number>;
|
|
813
959
|
/**
|
|
814
960
|
* `window` (default): a fixed number of page buttons (`visiblePages`) that slides to keep
|
|
@@ -839,7 +985,137 @@ declare class PaginatorComponent {
|
|
|
839
985
|
protected prev(): void;
|
|
840
986
|
protected next(): void;
|
|
841
987
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginatorComponent, never>;
|
|
842
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginatorComponent, "gog-paginator", never, { "page": { "alias": "page"; "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>;
|
|
988
|
+
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>;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
/** Snapshot of the viewport's native scroll geometry, emitted on every scroll/resize. */
|
|
992
|
+
interface GogScrollMetrics {
|
|
993
|
+
scrollTop: number;
|
|
994
|
+
scrollLeft: number;
|
|
995
|
+
scrollHeight: number;
|
|
996
|
+
scrollWidth: number;
|
|
997
|
+
clientHeight: number;
|
|
998
|
+
clientWidth: number;
|
|
999
|
+
}
|
|
1000
|
+
type GogScrollDirection = 'vertical' | 'horizontal';
|
|
1001
|
+
/**
|
|
1002
|
+
* Drop-in replacement for a native `overflow: auto` region: the content still scrolls
|
|
1003
|
+
* natively (wheel, touch, keyboard, focus-into-view all keep working unmodified), only the
|
|
1004
|
+
* browser's own scrollbar chrome is hidden and replaced with a themeable, draggable
|
|
1005
|
+
* overlay thumb built from plain pointer events + `ResizeObserver` — no CDK involved, to
|
|
1006
|
+
* stay consistent with the rest of this library's hand-rolled overlay/positioning code.
|
|
1007
|
+
*/
|
|
1008
|
+
declare class ScrollComponent {
|
|
1009
|
+
/** Which axes get an overlay thumb. Native scrolling on the other axis is unaffected. */
|
|
1010
|
+
readonly axis: _angular_core.InputSignal<GogScrollAxis>;
|
|
1011
|
+
/** Unset, falls back to `GOG_CONFIG.scroll.size`, then to `'normal'`. */
|
|
1012
|
+
readonly size: _angular_core.InputSignal<GogScrollSize | undefined>;
|
|
1013
|
+
/**
|
|
1014
|
+
* Fades the thumb out after `hideDelay` ms of inactivity; false keeps it always visible.
|
|
1015
|
+
* Unset, falls back to `GOG_CONFIG.scroll.autoHide`, then to `true`.
|
|
1016
|
+
*/
|
|
1017
|
+
readonly autoHide: _angular_core.InputSignal<boolean | undefined>;
|
|
1018
|
+
/** Unset, falls back to `GOG_CONFIG.scroll.hideDelay`, then to `800`. */
|
|
1019
|
+
readonly hideDelay: _angular_core.InputSignal<number | undefined>;
|
|
1020
|
+
/** Pixel distance from an edge that still counts as "reached" for gogReachStart/End. */
|
|
1021
|
+
readonly reachThreshold: _angular_core.InputSignal<number>;
|
|
1022
|
+
/**
|
|
1023
|
+
* Renders the viewport as its own tab stop (`tabindex="0"`, `role="region"`) per the
|
|
1024
|
+
* WAI-ARIA scrollable-region pattern. Turn off when nesting inside a component that
|
|
1025
|
+
* already owns focus/keyboard handling (a listbox panel, a dialog body) so this doesn't
|
|
1026
|
+
* add a redundant stop — the descendants' own focus still auto-scrolls into view either way.
|
|
1027
|
+
*/
|
|
1028
|
+
readonly focusable: _angular_core.InputSignal<boolean>;
|
|
1029
|
+
/** Accessible name for the viewport when `focusable` is true and there is no visible label. */
|
|
1030
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1031
|
+
/**
|
|
1032
|
+
* What happens when a scroll gesture reaches this instance's edge. Unset, falls back to
|
|
1033
|
+
* `GOG_CONFIG.scroll.overscrollBehavior`, then to `'auto'`. See `GogScrollOverscrollBehavior`
|
|
1034
|
+
* for what each value does.
|
|
1035
|
+
*/
|
|
1036
|
+
readonly overscrollBehavior: _angular_core.InputSignal<GogScrollOverscrollBehavior | undefined>;
|
|
1037
|
+
readonly gogScroll: _angular_core.OutputEmitterRef<GogScrollMetrics>;
|
|
1038
|
+
readonly gogReachStart: _angular_core.OutputEmitterRef<GogScrollDirection>;
|
|
1039
|
+
readonly gogReachEnd: _angular_core.OutputEmitterRef<GogScrollDirection>;
|
|
1040
|
+
protected readonly viewportRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
|
|
1041
|
+
protected readonly contentRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
|
|
1042
|
+
protected readonly showTrackV: _angular_core.WritableSignal<boolean>;
|
|
1043
|
+
protected readonly showTrackH: _angular_core.WritableSignal<boolean>;
|
|
1044
|
+
/**
|
|
1045
|
+
* Flips true once the first real measurement has run. Before that (SSR, or the client
|
|
1046
|
+
* frame before hydration/afterNextRender fires), an allowed axis defaults to `auto` — the
|
|
1047
|
+
* same safe, always-clips behavior this component had before viewportOverflowY/X existed —
|
|
1048
|
+
* rather than guessing `visible` from a `showTrackV`/`H` that just hasn't been measured yet.
|
|
1049
|
+
*/
|
|
1050
|
+
private readonly measured;
|
|
1051
|
+
/**
|
|
1052
|
+
* `overflow-y`/`overflow-x` on the viewport, driven by measured overflow rather than a
|
|
1053
|
+
* static `axis`-only class. Any axis that isn't *currently, actually* scrolling — because
|
|
1054
|
+
* it's disabled by `axis`, or because it's allowed but the content doesn't overflow it —
|
|
1055
|
+
* gets `visible`, never `hidden`/`auto`. A non-`visible` overflow value makes the viewport
|
|
1056
|
+
* a "scroll container" per spec regardless of whether it has anything to scroll, which
|
|
1057
|
+
* becomes the containing block for `position: sticky` descendants (e.g. gog-table's sticky
|
|
1058
|
+
* header) and a scroll-chaining boundary for wheel input. Left non-visible on a disabled or
|
|
1059
|
+
* unneeded axis, an instance nested inside another scroller — axis="horizontal" wrapping a
|
|
1060
|
+
* table that fits, itself inside a taller outer gog-scroll — would silently swallow the
|
|
1061
|
+
* outer axis's wheel scroll and break its sticky headers, even though this instance itself
|
|
1062
|
+
* never visibly scrolls that axis. `visible` whenever the axis is inert avoids both.
|
|
1063
|
+
*/
|
|
1064
|
+
protected readonly viewportOverflowY: _angular_core.Signal<"auto" | "visible">;
|
|
1065
|
+
protected readonly viewportOverflowX: _angular_core.Signal<"auto" | "visible">;
|
|
1066
|
+
/** App/subtree-wide fallbacks for the inputs above that don't set their own value. */
|
|
1067
|
+
private readonly globalConfig;
|
|
1068
|
+
protected readonly resolvedSize: _angular_core.Signal<GogScrollSize>;
|
|
1069
|
+
protected readonly resolvedAutoHide: _angular_core.Signal<boolean>;
|
|
1070
|
+
protected readonly resolvedHideDelay: _angular_core.Signal<number>;
|
|
1071
|
+
protected readonly resolvedOverscrollBehavior: _angular_core.Signal<GogScrollOverscrollBehavior>;
|
|
1072
|
+
/**
|
|
1073
|
+
* Only applies `resolvedOverscrollBehavior` on an axis that's actually acting as a scroll
|
|
1074
|
+
* container — on an axis that's `visible` (see viewportOverflowY/X above) there is no
|
|
1075
|
+
* scroll boundary on it to contain in the first place.
|
|
1076
|
+
*/
|
|
1077
|
+
protected readonly viewportOverscrollY: _angular_core.Signal<GogScrollOverscrollBehavior>;
|
|
1078
|
+
protected readonly viewportOverscrollX: _angular_core.Signal<GogScrollOverscrollBehavior>;
|
|
1079
|
+
protected readonly thumbSizeV: _angular_core.WritableSignal<number>;
|
|
1080
|
+
protected readonly thumbPosV: _angular_core.WritableSignal<number>;
|
|
1081
|
+
protected readonly thumbSizeH: _angular_core.WritableSignal<number>;
|
|
1082
|
+
protected readonly thumbPosH: _angular_core.WritableSignal<number>;
|
|
1083
|
+
protected readonly interacting: _angular_core.WritableSignal<boolean>;
|
|
1084
|
+
protected readonly dragAxis: _angular_core.WritableSignal<GogScrollDirection | null>;
|
|
1085
|
+
private readonly isBrowser;
|
|
1086
|
+
private readonly destroyRef;
|
|
1087
|
+
private resizeObserver;
|
|
1088
|
+
private updateFrame;
|
|
1089
|
+
private hideTimer;
|
|
1090
|
+
/** Read once per token change instead of per drag/scroll tick — see refreshTokens(). */
|
|
1091
|
+
private thumbMinSizePx;
|
|
1092
|
+
private dragStartPointer;
|
|
1093
|
+
private dragStartScroll;
|
|
1094
|
+
private dragTrackLength;
|
|
1095
|
+
private dragThumbSizePct;
|
|
1096
|
+
private readonly reachState;
|
|
1097
|
+
constructor();
|
|
1098
|
+
/** Scrolls the viewport exactly like `Element.scrollTo` — this simply forwards to it. */
|
|
1099
|
+
scrollTo(options: ScrollToOptions): void;
|
|
1100
|
+
scrollToTop(behavior?: ScrollBehavior): void;
|
|
1101
|
+
scrollToBottom(behavior?: ScrollBehavior): void;
|
|
1102
|
+
scrollToLeft(behavior?: ScrollBehavior): void;
|
|
1103
|
+
scrollToRight(behavior?: ScrollBehavior): void;
|
|
1104
|
+
protected onScroll(): void;
|
|
1105
|
+
protected onActivity(): void;
|
|
1106
|
+
protected onTrackPointerDown(event: PointerEvent, axis: GogScrollDirection): void;
|
|
1107
|
+
protected onThumbPointerDown(event: PointerEvent, axis: GogScrollDirection): void;
|
|
1108
|
+
protected onThumbPointerMove(event: PointerEvent, axis: GogScrollDirection): void;
|
|
1109
|
+
protected onThumbPointerUp(event: PointerEvent): void;
|
|
1110
|
+
private restartHideTimer;
|
|
1111
|
+
/** Reads the tokens that feed thumb-size math. Cheap, but still only once per change. */
|
|
1112
|
+
private refreshTokens;
|
|
1113
|
+
/** Coalesces scroll/resize bursts into one measurement per frame. */
|
|
1114
|
+
private scheduleMeasure;
|
|
1115
|
+
private measure;
|
|
1116
|
+
private checkReach;
|
|
1117
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollComponent, never>;
|
|
1118
|
+
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>;
|
|
843
1119
|
}
|
|
844
1120
|
|
|
845
1121
|
declare class SpinnerOverlayComponent {
|
|
@@ -900,6 +1176,11 @@ interface SortState {
|
|
|
900
1176
|
}
|
|
901
1177
|
declare class TableComponent<T extends object> {
|
|
902
1178
|
readonly value: _angular_core.InputSignal<T[]>;
|
|
1179
|
+
/**
|
|
1180
|
+
* Full width of the container by default. Set to `false` to shrink the table to fit
|
|
1181
|
+
* its columns' content instead.
|
|
1182
|
+
*/
|
|
1183
|
+
readonly fullWidth: _angular_core.InputSignal<boolean>;
|
|
903
1184
|
/** 0 = no pagination */
|
|
904
1185
|
readonly pageSize: _angular_core.InputSignal<number>;
|
|
905
1186
|
readonly showRowNumbers: _angular_core.InputSignal<boolean>;
|
|
@@ -949,7 +1230,7 @@ declare class TableComponent<T extends object> {
|
|
|
949
1230
|
private readonly bodyTemplateMap;
|
|
950
1231
|
private readonly headerTemplateMap;
|
|
951
1232
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
|
|
952
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "gog-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "showRowNumbers": { "alias": "showRowNumbers"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "emptyPlaceholder": { "alias": "emptyPlaceholder"; "required": false; "isSignal": true; }; "paginatorPosition": { "alias": "paginatorPosition"; "required": false; "isSignal": true; }; "totalPosition": { "alias": "totalPosition"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showColumnBorders": { "alias": "showColumnBorders"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["columns", "templates"], never, true, never>;
|
|
1233
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "gog-table", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "showRowNumbers": { "alias": "showRowNumbers"; "required": false; "isSignal": true; }; "showTotal": { "alias": "showTotal"; "required": false; "isSignal": true; }; "emptyPlaceholder": { "alias": "emptyPlaceholder"; "required": false; "isSignal": true; }; "paginatorPosition": { "alias": "paginatorPosition"; "required": false; "isSignal": true; }; "totalPosition": { "alias": "totalPosition"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showColumnBorders": { "alias": "showColumnBorders"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["columns", "templates"], never, true, never>;
|
|
953
1234
|
}
|
|
954
1235
|
|
|
955
1236
|
declare class SpinnerComponent {
|
|
@@ -979,5 +1260,58 @@ declare class ThemeService {
|
|
|
979
1260
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
|
|
980
1261
|
}
|
|
981
1262
|
|
|
982
|
-
|
|
983
|
-
|
|
1263
|
+
/**
|
|
1264
|
+
* App-wide defaults for the handful of component inputs where that actually makes sense —
|
|
1265
|
+
* timing/behavior knobs a whole app typically wants to set once (a house style for how long
|
|
1266
|
+
* scrollbars stay visible, how aggressively buttons debounce clicks), not visual ones.
|
|
1267
|
+
* Visual defaults (colors, radii, animation *durations expressed in CSS*) already have a
|
|
1268
|
+
* global mechanism: the `--gog-*` custom properties in `styles/theme.css`. This is only for
|
|
1269
|
+
* inputs that can't be a CSS token because a component reads them in TypeScript (a
|
|
1270
|
+
* `setTimeout` delay, an RxJS `timer` duration) — see `styling.instructions.md` and
|
|
1271
|
+
* `gleks-ui-library.instructions.md`'s "Global configuration" section for the line between
|
|
1272
|
+
* the two and for how to add a new field here when a component needs one.
|
|
1273
|
+
*
|
|
1274
|
+
* Every field is optional at every level: set only the ones you want to change from the
|
|
1275
|
+
* component's own built-in default. An instance's own input, when set, always wins over
|
|
1276
|
+
* this — this only fills in what the instance didn't specify itself.
|
|
1277
|
+
*/
|
|
1278
|
+
interface GogGlobalConfig {
|
|
1279
|
+
scroll?: {
|
|
1280
|
+
autoHide?: boolean;
|
|
1281
|
+
hideDelay?: number;
|
|
1282
|
+
size?: GogScrollSize;
|
|
1283
|
+
overscrollBehavior?: GogScrollOverscrollBehavior;
|
|
1284
|
+
};
|
|
1285
|
+
button?: {
|
|
1286
|
+
debounce?: number;
|
|
1287
|
+
};
|
|
1288
|
+
}
|
|
1289
|
+
/**
|
|
1290
|
+
* Resolves to `{}` — every field falls through to its component's own hardcoded default —
|
|
1291
|
+
* until a `provideGogConfig(...)` call overrides it somewhere in the injector tree.
|
|
1292
|
+
*/
|
|
1293
|
+
declare const GOG_CONFIG: InjectionToken<GogGlobalConfig>;
|
|
1294
|
+
/**
|
|
1295
|
+
* Sets app-wide (or subtree-wide, if placed in a route's or component's own `providers`
|
|
1296
|
+
* instead of the bootstrap config) defaults for every `@guildofgleks/ui` component that
|
|
1297
|
+
* reads `GOG_CONFIG` — one call instead of a separate injection token per setting:
|
|
1298
|
+
*
|
|
1299
|
+
* ```ts
|
|
1300
|
+
* // app.config.ts
|
|
1301
|
+
* providers: [
|
|
1302
|
+
* provideGogConfig({
|
|
1303
|
+
* scroll: { hideDelay: 1000 },
|
|
1304
|
+
* button: { debounce: 500 },
|
|
1305
|
+
* }),
|
|
1306
|
+
* ]
|
|
1307
|
+
* ```
|
|
1308
|
+
*
|
|
1309
|
+
* Providing this again further down the injector tree (a route, a single component's own
|
|
1310
|
+
* `providers`) replaces the whole object for that subtree rather than merging with the
|
|
1311
|
+
* parent's — pass everything you want in effect there, not just the one field you're
|
|
1312
|
+
* changing.
|
|
1313
|
+
*/
|
|
1314
|
+
declare function provideGogConfig(config: GogGlobalConfig): Provider;
|
|
1315
|
+
|
|
1316
|
+
export { AccordionComponent, ButtonComponent, CheckboxComponent, ChipComponent, CollapsibleComponent, Column, ConfirmationDialogComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogService, GOG_CONFIG, GogAccordionChevronDirective, GogAccordionContentDirective, GogAccordionHeaderDirective, GogCollapsibleContentDirective, GogCollapsibleTriggerDirective, GogDropdownBase, ICON_DEFS, IconComponent, InputfieldComponent, MultiselectComponent, PaginatorComponent, ScrollComponent, SelectComponent, SkeletonComponent, SliderComponent, SpinnerComponent, SpinnerOverlayComponent, TableComponent, TagComponent, TemplateDirective, TextareaComponent, ThemeService, ToastComponent, ToastContainerComponent, ToastService, defaultCompare, provideGogConfig };
|
|
1317
|
+
export type { ConfirmDialogData, DialogConfig, DialogHandle, DialogRef, GogAccordionChevronContext, GogAccordionHeaderContext, GogAccordionItem, GogAccordionToggleEvent, GogDropdownDirection, GogDropdownOption, GogGlobalConfig, GogIconName, GogMultiselectOption, GogPaginatorRangeMode, GogScrollAxis, GogScrollMetrics, GogScrollOverscrollBehavior, GogScrollSize, GogSelectOption, GogSize, GogSkeletonAnimation, GogSkeletonShape, GogSpinnerVariant, GogTableBodyContext, GogTableHeaderContext, GogTagShape, GogTagVariant, GogVariant, OpenDialog, SortDirection, Toast, ToastAction, ToastConfig, ToastPosition, ToastType };
|