@guildofgleks/ui 21.4.3 → 21.4.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/AGENTS.md +154 -135
- package/CHANGELOG.md +85 -14
- package/README.md +14 -0
- package/package.json +2 -1
- package/schematics/collection.json +9 -0
- package/schematics/ng-add/index.cjs +62 -0
- package/schematics/ng-add/schema.cjs +2 -0
- package/schematics/ng-add/schema.json +15 -0
- package/src/styles/theme.css +15 -6
- package/src/styles/utilities.css +185 -170
- package/styles/theme.css +15 -6
- package/styles/utilities.css +185 -170
package/AGENTS.md
CHANGED
|
@@ -5,7 +5,7 @@ an app that **consumes** the published `@guildofgleks/ui` npm package. It is not
|
|
|
5
5
|
authoring the library — if you are working inside the `gleks_web_ui` monorepo itself, read
|
|
6
6
|
`.github/instructions/*.md` instead.
|
|
7
7
|
|
|
8
|
-
Everything below reflects the library's actual source as of **`21.4.
|
|
8
|
+
Everything below reflects the library's actual source as of **`21.4.4`**. `README.md` covers the
|
|
9
9
|
same ground at a higher level — install, setup, theming, global configuration — and is accurate;
|
|
10
10
|
this file goes further, into per-component input tables, and is the one to trust for exact names,
|
|
11
11
|
types and defaults.
|
|
@@ -40,6 +40,10 @@ types and defaults.
|
|
|
40
40
|
|
|
41
41
|
```bash
|
|
42
42
|
npm install @guildofgleks/ui
|
|
43
|
+
# or
|
|
44
|
+
yarn add @guildofgleks/ui
|
|
45
|
+
# or — installs it and adds the stylesheet below to angular.json automatically
|
|
46
|
+
ng add @guildofgleks/ui
|
|
43
47
|
```
|
|
44
48
|
|
|
45
49
|
Add the baseline stylesheet once — it carries every token the components read plus their
|
|
@@ -199,22 +203,22 @@ Precedence, always: **instance input → `GOG_CONFIG` → component's built-in d
|
|
|
199
203
|
`provideGogConfig(...)` (in a route's or component's own `providers`) **layers onto the
|
|
200
204
|
parent's config**, one level deep per key — it does not replace it.
|
|
201
205
|
|
|
202
|
-
| Key | Fields
|
|
203
|
-
| -------------- |
|
|
204
|
-
| `control` | `size`, `errorDisplay`, `clearable`
|
|
205
|
-
| `dropdown` | `appendToBody`, `direction`, `filter`, `filterPosition`
|
|
206
|
-
| `floatLabel` | `variant`, `showPlaceholder`
|
|
207
|
-
| `datepicker` | `locale`, `firstDayOfWeek`, `format`
|
|
208
|
-
| `autocomplete` | `searchDebounce`, `minLength`, `openOnFocus`
|
|
209
|
-
| `tooltip` | `position`, `showDelay`, `hideDelay`
|
|
210
|
-
| `scroll` | `autoHide`, `hideDelay`, `size`, `overscrollBehavior`, `showTrack`
|
|
211
|
-
| `button` | `debounce`
|
|
212
|
-
| `inputfield` | `showSpinButtons`
|
|
213
|
-
| `textarea` | `resize`
|
|
214
|
-
| `paginator` | `showPageSizeSelect`, `pageSizeOptions`
|
|
215
|
-
| `toast` | `position`, `duration`
|
|
216
|
-
| `theme` | `storageKey`, `defaultTheme`, `followSystem`, `lightTheme`, `darkTheme` | `ThemeService`. All off/neutral by default — see below.
|
|
217
|
-
| `labels` | every fixed string the library renders — see below
|
|
206
|
+
| Key | Fields | Applies to |
|
|
207
|
+
| -------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
208
|
+
| `control` | `size`, `errorDisplay`, `clearable` | `size`: button, inputfield, textarea, select, multiselect, checkbox, radio-group, button-toggle-group, datepicker. `errorDisplay`: inputfield, textarea, select, multiselect, autocomplete, radio-group, slider, datepicker. `clearable`: inputfield, textarea, select, multiselect, autocomplete, datepicker. Not table/accordion/paginator (density, not form size), not spinner/skeleton/tag/chip/toggle. |
|
|
209
|
+
| `dropdown` | `appendToBody`, `direction`, `filter`, `filterPosition` | `gog-select`, `gog-multiselect`. `gog-datepicker`/`gog-autocomplete` honour `appendToBody`/`direction` too (autocomplete has no `filter` box — it filters via the trigger's own text). |
|
|
210
|
+
| `floatLabel` | `variant`, `showPlaceholder` | inputfield, textarea, select, multiselect, autocomplete, datepicker. |
|
|
211
|
+
| `datepicker` | `locale`, `firstDayOfWeek`, `format` | `gog-datepicker`, `gog-calendar`. |
|
|
212
|
+
| `autocomplete` | `searchDebounce`, `minLength`, `openOnFocus` | `gog-autocomplete`. |
|
|
213
|
+
| `tooltip` | `position`, `showDelay`, `hideDelay` | the `gogTooltip` directive. |
|
|
214
|
+
| `scroll` | `autoHide`, `hideDelay`, `size`, `overscrollBehavior`, `showTrack` | `gog-scroll` (and every component that uses one internally). |
|
|
215
|
+
| `button` | `debounce` | `gog-button`. |
|
|
216
|
+
| `inputfield` | `showSpinButtons` | `gog-inputfield`. |
|
|
217
|
+
| `textarea` | `resize` | `gog-textarea`. |
|
|
218
|
+
| `paginator` | `showPageSizeSelect`, `pageSizeOptions` | `gog-paginator`, and through it `gog-table`'s built-in pagination. |
|
|
219
|
+
| `toast` | `position`, `duration` | `ToastService`. |
|
|
220
|
+
| `theme` | `storageKey`, `defaultTheme`, `followSystem`, `lightTheme`, `darkTheme` | `ThemeService`. All off/neutral by default — see below. |
|
|
221
|
+
| `labels` | every fixed string the library renders — see below | inputfield, textarea, select, multiselect, autocomplete, datepicker, calendar, paginator, table, `DialogService`, `ToastService`. |
|
|
218
222
|
|
|
219
223
|
Anything visual does **not** belong here — override the `--gog-*` token instead.
|
|
220
224
|
|
|
@@ -434,25 +438,25 @@ toggles) — this is a real ARIA distinction, not cosmetic.
|
|
|
434
438
|
|
|
435
439
|
#### `gog-inputfield`
|
|
436
440
|
|
|
437
|
-
| Input | Type
|
|
438
|
-
| ----------------------------------------- |
|
|
439
|
-
| `label`, `placeholder` | `string`
|
|
440
|
-
| `type` | `GogInputType`
|
|
441
|
-
| `readonly` | `boolean`
|
|
442
|
-
| `maxlength`, `minlength` | `number \| null`
|
|
443
|
-
| `pattern` | `string`
|
|
444
|
-
| `inputMode` | `GogInputMode \| null`
|
|
445
|
-
| `spellcheck` | `boolean \| null`
|
|
446
|
-
| `inputId` | `string`
|
|
447
|
-
| `min`, `max`, `step` | `number \| null`
|
|
448
|
-
| `showSpinButtons` | `boolean \| undefined`
|
|
449
|
-
| `errorMessage`, `errorDisplay` |
|
|
450
|
-
| `disabled`, `size`, `fullWidth` |
|
|
451
|
-
| `iconStart` / `iconEnd` | `GogIconName \| ''`
|
|
452
|
-
| `clearable`, `clearAriaLabel` |
|
|
453
|
-
| `floatLabel`, `floatLabelShowPlaceholder` |
|
|
454
|
-
| `showPasswordLabel` / `hidePasswordLabel` | `string \| undefined`
|
|
455
|
-
| `incrementLabel` / `decrementLabel` | `string \| undefined`
|
|
441
|
+
| Input | Type | Default | Notes |
|
|
442
|
+
| ----------------------------------------- | ---------------------- | ----------------------------------- | -------------------------------------------------------------------------------------- |
|
|
443
|
+
| `label`, `placeholder` | `string` | `''` | |
|
|
444
|
+
| `type` | `GogInputType` | `'text'` | `text`/`password`/`email`/`number`/`search`/`tel`/`url`/`date`/`time`/`datetime-local` |
|
|
445
|
+
| `readonly` | `boolean` | `false` | value stays focusable and submitted, edits blocked; hides the clear button and stepper |
|
|
446
|
+
| `maxlength`, `minlength` | `number \| null` | `null` | native attributes |
|
|
447
|
+
| `pattern` | `string` | `''` | native attribute, regex source |
|
|
448
|
+
| `inputMode` | `GogInputMode \| null` | `null` | on-screen keyboard hint (`numeric`, `tel`, …) |
|
|
449
|
+
| `spellcheck` | `boolean \| null` | `null` | unset = browser default |
|
|
450
|
+
| `inputId` | `string` | `''` → generated | a real id is always rendered; pass one only to reference the field externally |
|
|
451
|
+
| `min`, `max`, `step` | `number \| null` | `null` | `type="number"` only |
|
|
452
|
+
| `showSpinButtons` | `boolean \| undefined` | `true` | own +/- glyphs on `type="number"`; via `GOG_CONFIG.inputfield.showSpinButtons` |
|
|
453
|
+
| `errorMessage`, `errorDisplay` | | `''`, `'manual'` | see conventions |
|
|
454
|
+
| `disabled`, `size`, `fullWidth` | | `false`, `'md'`, `true` | |
|
|
455
|
+
| `iconStart` / `iconEnd` | `GogIconName \| ''` | `''` | bare leading/trailing icon |
|
|
456
|
+
| `clearable`, `clearAriaLabel` | | `false`, `'Clear'` | on `type="number"` the clear button renders alongside the stepper |
|
|
457
|
+
| `floatLabel`, `floatLabelShowPlaceholder` | | `'none'`, `false` | |
|
|
458
|
+
| `showPasswordLabel` / `hidePasswordLabel` | `string \| undefined` | `'Show password'`/`'Hide password'` | `type="password"` reveal toggle aria-labels; via `GOG_CONFIG.labels` |
|
|
459
|
+
| `incrementLabel` / `decrementLabel` | `string \| undefined` | `'Increment'`/`'Decrement'` | spin button aria-labels; via `GOG_CONFIG.labels` |
|
|
456
460
|
|
|
457
461
|
Model: `value: string` (always a string, even for `type="number"` — the _form control_ value is
|
|
458
462
|
`number | null`, but the `[(value)]` model mirrors the raw text). CVA: yes.
|
|
@@ -648,18 +652,18 @@ a generic accessor, unlike select/multiselect/button-toggle).
|
|
|
648
652
|
|
|
649
653
|
#### `gog-slider`
|
|
650
654
|
|
|
651
|
-
| Input
|
|
652
|
-
|
|
|
653
|
-
| `label`, `ariaLabel`
|
|
654
|
-
| `min`, `max`, `step`
|
|
655
|
-
| `showValue`, `showThumb`
|
|
656
|
-
| `errorMessage`, `errorDisplay`
|
|
657
|
-
| `disabled`
|
|
658
|
-
| `fullWidth`
|
|
659
|
-
| `orientation`
|
|
660
|
-
| `range`
|
|
661
|
-
| `startDisabled`, `endDisabled`
|
|
662
|
-
| `startAriaLabel`, `endAriaLabel`
|
|
655
|
+
| Input | Type | Default |
|
|
656
|
+
| -------------------------------- | ---------------------- | ---------------------------------------------- |
|
|
657
|
+
| `label`, `ariaLabel` | `string` | `''` |
|
|
658
|
+
| `min`, `max`, `step` | `number` | `0`, `100`, `1` |
|
|
659
|
+
| `showValue`, `showThumb` | `boolean` | `true` |
|
|
660
|
+
| `errorMessage`, `errorDisplay` | | `''`, `'manual'` |
|
|
661
|
+
| `disabled` | `boolean` | `false` |
|
|
662
|
+
| `fullWidth` | `boolean` | `true` (ignored when `orientation="vertical"`) |
|
|
663
|
+
| `orientation` | `GogSliderOrientation` | `'horizontal'` |
|
|
664
|
+
| `range` | `boolean` | `false` — two thumbs; see below |
|
|
665
|
+
| `startDisabled`, `endDisabled` | `boolean` | `false` — `range` only |
|
|
666
|
+
| `startAriaLabel`, `endAriaLabel` | `string` | `'Minimum'` / `'Maximum'`, prefixed by `label` |
|
|
663
667
|
|
|
664
668
|
Models: `value: number`, and `rangeValue: GogSliderRange` (`{ start: number; end: number }`).
|
|
665
669
|
CVA: yes. Backed by a real `<input type="range">` (rotated via `writing-mode` for vertical), so
|
|
@@ -751,15 +755,15 @@ calendar that fills its container. This is also what sizes `inline` mode, becaus
|
|
|
751
755
|
The package ships **41** glyphs (`GogBuiltinIconName`), all from [Lucide](https://lucide.dev)
|
|
752
756
|
and inlined so the package keeps zero runtime dependencies:
|
|
753
757
|
|
|
754
|
-
| Group
|
|
755
|
-
|
|
|
756
|
-
| Chevrons & arrows | `chevron-up`, `chevron-down`, `chevron-left`, `chevron-right`, `arrow-left`, `arrow-right`
|
|
757
|
-
| Confirm & dismiss | `check`, `close`, `checkbox`, `checkbox-checked`
|
|
758
|
-
| Status
|
|
759
|
-
| Sorting
|
|
760
|
-
| Actions
|
|
761
|
-
| Chrome
|
|
762
|
-
| Objects & state
|
|
758
|
+
| Group | Names |
|
|
759
|
+
| ----------------- | ------------------------------------------------------------------------------------------------------ |
|
|
760
|
+
| Chevrons & arrows | `chevron-up`, `chevron-down`, `chevron-left`, `chevron-right`, `arrow-left`, `arrow-right` |
|
|
761
|
+
| Confirm & dismiss | `check`, `close`, `checkbox`, `checkbox-checked` |
|
|
762
|
+
| Status | `success`, `error`, `warning`, `info` |
|
|
763
|
+
| Sorting | `sort`, `sort-up`, `sort-down`, `filter` |
|
|
764
|
+
| Actions | `search`, `plus`, `minus`, `trash`, `pencil`, `copy`, `download`, `upload`, `refresh`, `external-link` |
|
|
765
|
+
| Chrome | `menu`, `more-horizontal`, `more-vertical`, `settings` |
|
|
766
|
+
| Objects & state | `user`, `lock`, `mail`, `calendar`, `clock`, `eye`, `eye-off`, `star`, `star-filled` |
|
|
763
767
|
|
|
764
768
|
`star` / `star-filled` is the one outline/filled pair, for a rating or favourite **toggle** —
|
|
765
769
|
the same reason `checkbox` / `checkbox-checked` exists. The set is otherwise outline-only on
|
|
@@ -819,7 +823,7 @@ providers: [
|
|
|
819
823
|
|
|
820
824
|
#### `[gogButton]` — the link-flavoured button
|
|
821
825
|
|
|
822
|
-
`gog-button` renders its own `<button>`, so it can never
|
|
826
|
+
`gog-button` renders its own `<button>`, so it can never _be_ a link. `[gogButton]` inverts that:
|
|
823
827
|
the element stays yours and the directive only gives it the look.
|
|
824
828
|
|
|
825
829
|
```html
|
|
@@ -829,11 +833,11 @@ the element stays yours and the directive only gives it the look.
|
|
|
829
833
|
<a gogButton fullWidth routerLink="/checkout">Checkout</a>
|
|
830
834
|
```
|
|
831
835
|
|
|
832
|
-
| Input | Type
|
|
833
|
-
| ----------- |
|
|
834
|
-
| `variant` | `GogVariant`
|
|
835
|
-
| `size` | `GogSize \| undefined`
|
|
836
|
-
| `fullWidth` | `boolean` (bare attr ok) | `false`
|
|
836
|
+
| Input | Type | Default |
|
|
837
|
+
| ----------- | ------------------------ | ------------------------------------- |
|
|
838
|
+
| `variant` | `GogVariant` | `'primary'` |
|
|
839
|
+
| `size` | `GogSize \| undefined` | `'md'`; via `GOG_CONFIG.control.size` |
|
|
840
|
+
| `fullWidth` | `boolean` (bare attr ok) | `false` |
|
|
837
841
|
|
|
838
842
|
Selector is `a[gogButton], button[gogButton]` — deliberately not a bare `[gogButton]`, because on
|
|
839
843
|
a `<div>` the result looks like a button and is invisible to the keyboard and to assistive tech.
|
|
@@ -1038,6 +1042,11 @@ Model: `open: boolean`.
|
|
|
1038
1042
|
</gog-collapsible>
|
|
1039
1043
|
```
|
|
1040
1044
|
|
|
1045
|
+
An open panel is as tall as its content — `--gog-collapsible-max-height` defaults to
|
|
1046
|
+
`max-content`. Set it to a length on an instance to cap one deliberately; the panel is
|
|
1047
|
+
`overflow: hidden`, so a cap **clips** rather than scrolls. (Before 21.4.4 that default was
|
|
1048
|
+
`480px`, which clipped taller panels silently.)
|
|
1049
|
+
|
|
1041
1050
|
#### `gog-tabs` + `gog-tab`
|
|
1042
1051
|
|
|
1043
1052
|
| Input (on `gog-tabs`) | Type | Default |
|
|
@@ -1073,18 +1082,18 @@ hidden via `[hidden]` while inactive — preserves scroll/input state).
|
|
|
1073
1082
|
|
|
1074
1083
|
#### `gog-paginator`
|
|
1075
1084
|
|
|
1076
|
-
| Input | Type | Default
|
|
1077
|
-
| ------------------------------- | ------------------------------------------------ |
|
|
1078
|
-
| `fullWidth`, `totalPages` | `boolean`, `number` | `true`, `1`
|
|
1079
|
-
| `rangeMode` | `GogPaginatorRangeMode` (`'window'\|'ellipsis'`) | `'window'` — see note
|
|
1080
|
-
| `visiblePages` | `number` | `5` — `'window'` mode only
|
|
1081
|
-
| `showFirstPage`, `showLastPage` | `boolean` | `false` — `'window'` mode only
|
|
1082
|
-
| `siblingCount` | `number` | `2` — `'ellipsis'` mode only
|
|
1083
|
-
| `size` | `GogSize` | `'sm'`
|
|
1084
|
-
| `disabled`, `ariaLabel` | | `false`, `'Pagination'`
|
|
1085
|
-
| `totalRecords` | `number \| null` | `null` — see below
|
|
1086
|
-
| `pageSize` | `model<number>` | `10` — two-way bindable
|
|
1087
|
-
| `showPageSizeSelect` | `boolean \| undefined` | `false`; via `GOG_CONFIG.paginator`
|
|
1085
|
+
| Input | Type | Default |
|
|
1086
|
+
| ------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
|
|
1087
|
+
| `fullWidth`, `totalPages` | `boolean`, `number` | `true`, `1` |
|
|
1088
|
+
| `rangeMode` | `GogPaginatorRangeMode` (`'window'\|'ellipsis'`) | `'window'` — see note |
|
|
1089
|
+
| `visiblePages` | `number` | `5` — `'window'` mode only |
|
|
1090
|
+
| `showFirstPage`, `showLastPage` | `boolean` | `false` — `'window'` mode only |
|
|
1091
|
+
| `siblingCount` | `number` | `2` — `'ellipsis'` mode only |
|
|
1092
|
+
| `size` | `GogSize` | `'sm'` |
|
|
1093
|
+
| `disabled`, `ariaLabel` | | `false`, `'Pagination'` |
|
|
1094
|
+
| `totalRecords` | `number \| null` | `null` — see below |
|
|
1095
|
+
| `pageSize` | `model<number>` | `10` — two-way bindable |
|
|
1096
|
+
| `showPageSizeSelect` | `boolean \| undefined` | `false`; via `GOG_CONFIG.paginator` |
|
|
1088
1097
|
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; via `GOG_CONFIG.paginator` |
|
|
1089
1098
|
|
|
1090
1099
|
The step buttons (`'Previous page'`/`'Next page'`) and the per-page names are configured, not
|
|
@@ -1096,7 +1105,7 @@ Models: `page: number` (1-based, self-clamps) and `pageSize: number`.
|
|
|
1096
1105
|
|
|
1097
1106
|
**Give it `totalRecords` instead of `totalPages` when you know the row count** — it then derives
|
|
1098
1107
|
the page count from `pageSize` itself, which is what removes the
|
|
1099
|
-
`computed(() => Math.ceil(total / size))` a consumer would otherwise have to write
|
|
1108
|
+
`computed(() => Math.ceil(total / size))` a consumer would otherwise have to write _and_ keep in
|
|
1100
1109
|
sync with the rows-per-page select:
|
|
1101
1110
|
|
|
1102
1111
|
```html
|
|
@@ -1123,28 +1132,28 @@ they never asked to be.
|
|
|
1123
1132
|
|
|
1124
1133
|
#### `gog-table<T>`
|
|
1125
1134
|
|
|
1126
|
-
| Input | Type | Default
|
|
1127
|
-
| ----------------------------- | ----------------------------- |
|
|
1128
|
-
| `value` | `T[]` | `[]`
|
|
1129
|
-
| `fullWidth` | `boolean` | `true`
|
|
1130
|
-
| `pageSize` | `model<number>` | `0` (no pagination) — two-way
|
|
1135
|
+
| Input | Type | Default |
|
|
1136
|
+
| ----------------------------- | ----------------------------- | ----------------------------------- |
|
|
1137
|
+
| `value` | `T[]` | `[]` |
|
|
1138
|
+
| `fullWidth` | `boolean` | `true` |
|
|
1139
|
+
| `pageSize` | `model<number>` | `0` (no pagination) — two-way |
|
|
1131
1140
|
| `showPageSizeSelect` | `boolean \| undefined` | `false`; forwarded to the paginator |
|
|
1132
|
-
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; forwarded
|
|
1133
|
-
| `showRowNumbers`, `showTotal` | `boolean` | `true`, `false`
|
|
1134
|
-
| `emptyPlaceholder` | `string` | `'-'`
|
|
1135
|
-
| `paginatorPosition` | `'left'\|'center'\|'right'` | `'center'`
|
|
1136
|
-
| `totalPosition` | `'left'\|'right'\|'opposite'` | `'opposite'`
|
|
1137
|
-
| `loading` | `boolean` | `false`
|
|
1138
|
-
| `showColumnBorders` | `boolean` | `false`
|
|
1139
|
-
| `stickyHeader` | `boolean` | `false`
|
|
1140
|
-
| `size` | `GogSize` | `'lg'` (row density — not `'md'`)
|
|
1141
|
-
| `lazy` | `boolean` | `false` — see below
|
|
1142
|
-
| `totalRecords` | `number \| null` | `null` — `lazy` only
|
|
1143
|
-
| `selectionMode` | `GogTableSelectionMode` | `'none'`
|
|
1144
|
-
| `selection` | `model<T[]>` | `[]` — two-way bindable
|
|
1145
|
-
| `dataKey` | `string` | `''` — row identity field
|
|
1146
|
-
| `showSelectionColumn` | `boolean` | `true` (once selection is on)
|
|
1147
|
-
| `interactiveRows` | `boolean` | `false`
|
|
1141
|
+
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; forwarded |
|
|
1142
|
+
| `showRowNumbers`, `showTotal` | `boolean` | `true`, `false` |
|
|
1143
|
+
| `emptyPlaceholder` | `string` | `'-'` |
|
|
1144
|
+
| `paginatorPosition` | `'left'\|'center'\|'right'` | `'center'` |
|
|
1145
|
+
| `totalPosition` | `'left'\|'right'\|'opposite'` | `'opposite'` |
|
|
1146
|
+
| `loading` | `boolean` | `false` |
|
|
1147
|
+
| `showColumnBorders` | `boolean` | `false` |
|
|
1148
|
+
| `stickyHeader` | `boolean` | `false` |
|
|
1149
|
+
| `size` | `GogSize` | `'lg'` (row density — not `'md'`) |
|
|
1150
|
+
| `lazy` | `boolean` | `false` — see below |
|
|
1151
|
+
| `totalRecords` | `number \| null` | `null` — `lazy` only |
|
|
1152
|
+
| `selectionMode` | `GogTableSelectionMode` | `'none'` |
|
|
1153
|
+
| `selection` | `model<T[]>` | `[]` — two-way bindable |
|
|
1154
|
+
| `dataKey` | `string` | `''` — row identity field |
|
|
1155
|
+
| `showSelectionColumn` | `boolean` | `true` (once selection is on) |
|
|
1156
|
+
| `interactiveRows` | `boolean` | `false` |
|
|
1148
1157
|
|
|
1149
1158
|
Outputs: `gogSortChange: GogTableSortEvent` (`{ field, direction }`, `{ field: '', direction:
|
|
1150
1159
|
null }` when the third click clears it), `gogPageChange: number` (1-based; **does not fire** on
|
|
@@ -1182,7 +1191,7 @@ exist, so pagination stays hidden and it warns in dev), then refetch from the tw
|
|
|
1182
1191
|
dataKey="id"
|
|
1183
1192
|
(gogSortChange)="sort.set($event); reload()"
|
|
1184
1193
|
(gogPageChange)="pageNumber.set($event); reload()"
|
|
1185
|
-
>
|
|
1194
|
+
></gog-table>
|
|
1186
1195
|
```
|
|
1187
1196
|
|
|
1188
1197
|
Row numbers still count from the current page (`(page - 1) * pageSize + i + 1`), and `showTotal`
|
|
@@ -1198,7 +1207,12 @@ through it, and there is no intermediate signal to keep in sync in either direct
|
|
|
1198
1207
|
|
|
1199
1208
|
```html
|
|
1200
1209
|
<!-- off by default; turn it on per table, or app-wide via GOG_CONFIG.paginator -->
|
|
1201
|
-
<gog-table
|
|
1210
|
+
<gog-table
|
|
1211
|
+
[value]="rows"
|
|
1212
|
+
[(pageSize)]="size"
|
|
1213
|
+
[showPageSizeSelect]="true"
|
|
1214
|
+
[pageSizeOptions]="[5, 10, 20]"
|
|
1215
|
+
></gog-table>
|
|
1202
1216
|
```
|
|
1203
1217
|
|
|
1204
1218
|
Changing the size returns to page 1 and does **not** emit `gogPageChange` — the consumer already
|
|
@@ -1215,7 +1229,12 @@ user on whatever size produced that one page, with no control left to pick a sma
|
|
|
1215
1229
|
where it holds zero or one row — one shape rather than a union to narrow on every read.
|
|
1216
1230
|
|
|
1217
1231
|
```html
|
|
1218
|
-
<gog-table
|
|
1232
|
+
<gog-table
|
|
1233
|
+
[value]="rows"
|
|
1234
|
+
selectionMode="multiple"
|
|
1235
|
+
[(selection)]="selected"
|
|
1236
|
+
dataKey="id"
|
|
1237
|
+
></gog-table>
|
|
1219
1238
|
```
|
|
1220
1239
|
|
|
1221
1240
|
- **Set `dataKey`.** Without it rows are matched by object identity, so any refetch that produces
|
|
@@ -1343,39 +1362,39 @@ anti-pattern — reach for a slot directive instead.
|
|
|
1343
1362
|
|
|
1344
1363
|
Shared enum-like types (`import type { ... } from '@guildofgleks/ui'`):
|
|
1345
1364
|
|
|
1346
|
-
| Type | Values
|
|
1347
|
-
| ----------------------------- |
|
|
1348
|
-
| `GogSize` | `'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`
|
|
1349
|
-
| `GogVariant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'`
|
|
1350
|
-
| `GogTagVariant` | `'success' \| 'danger' \| 'warning' \| 'info'`
|
|
1351
|
-
| `GogOrientation` | `'horizontal' \| 'vertical'`
|
|
1352
|
-
| `GogTagShape` | `'rounded' \| 'pill'`
|
|
1353
|
-
| `GogSpinnerVariant` | `'runic' \| 'ring' \| 'custom'`
|
|
1354
|
-
| `GogSkeletonShape` | `'text' \| 'circle' \| 'rect'`
|
|
1355
|
-
| `GogSkeletonAnimation` | `'pulse' \| 'wave' \| 'none'`
|
|
1356
|
-
| `GogPaginatorRangeMode` | `'window' \| 'ellipsis'`
|
|
1357
|
-
| `GogScrollAxis` | `'vertical' \| 'horizontal' \| 'both'`
|
|
1358
|
-
| `GogScrollSize` | `'normal' \| 'thin'`
|
|
1359
|
-
| `GogScrollOverscrollBehavior` | `'auto' \| 'contain' \| 'none'`
|
|
1360
|
-
| `GogTooltipPosition` | `'auto' \| 'top' \| 'bottom' \| 'left' \| 'right'`
|
|
1361
|
-
| `GogFloatLabelVariant` | `'none' \| 'in' \| 'on' \| 'over'`
|
|
1362
|
-
| `GogDropdownFilterPosition` | `'top' \| 'bottom'`
|
|
1363
|
-
| `GogDividerVariant` | `'solid' \| 'dashed' \| 'dotted'`
|
|
1364
|
-
| `GogBadgePosition` | `'top-end' \| 'top-start' \| 'bottom-end' \| 'bottom-start'`
|
|
1365
|
-
| `GogProgressbarMode` | `'determinate' \| 'indeterminate' \| 'buffer'`
|
|
1366
|
-
| `GogProgressbarVariant` | `'accent' \| 'success' \| 'danger' \| 'warning' \| 'info'`
|
|
1367
|
-
| `GogButtonToggleAppearance` | `'joined' \| 'separated'`
|
|
1368
|
-
| `GogTabsAlign` | `'start' \| 'center' \| 'end' \| 'stretch'`
|
|
1369
|
-
| `GogDateSelectionMode` | `'single' \| 'range'`
|
|
1370
|
-
| `GogHourFormat` | `'12' \| '24'`
|
|
1371
|
-
| `GogTextareaResize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'`
|
|
1365
|
+
| Type | Values |
|
|
1366
|
+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
|
1367
|
+
| `GogSize` | `'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'` |
|
|
1368
|
+
| `GogVariant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` |
|
|
1369
|
+
| `GogTagVariant` | `'success' \| 'danger' \| 'warning' \| 'info'` |
|
|
1370
|
+
| `GogOrientation` | `'horizontal' \| 'vertical'` |
|
|
1371
|
+
| `GogTagShape` | `'rounded' \| 'pill'` |
|
|
1372
|
+
| `GogSpinnerVariant` | `'runic' \| 'ring' \| 'custom'` |
|
|
1373
|
+
| `GogSkeletonShape` | `'text' \| 'circle' \| 'rect'` |
|
|
1374
|
+
| `GogSkeletonAnimation` | `'pulse' \| 'wave' \| 'none'` |
|
|
1375
|
+
| `GogPaginatorRangeMode` | `'window' \| 'ellipsis'` |
|
|
1376
|
+
| `GogScrollAxis` | `'vertical' \| 'horizontal' \| 'both'` |
|
|
1377
|
+
| `GogScrollSize` | `'normal' \| 'thin'` |
|
|
1378
|
+
| `GogScrollOverscrollBehavior` | `'auto' \| 'contain' \| 'none'` |
|
|
1379
|
+
| `GogTooltipPosition` | `'auto' \| 'top' \| 'bottom' \| 'left' \| 'right'` |
|
|
1380
|
+
| `GogFloatLabelVariant` | `'none' \| 'in' \| 'on' \| 'over'` |
|
|
1381
|
+
| `GogDropdownFilterPosition` | `'top' \| 'bottom'` |
|
|
1382
|
+
| `GogDividerVariant` | `'solid' \| 'dashed' \| 'dotted'` |
|
|
1383
|
+
| `GogBadgePosition` | `'top-end' \| 'top-start' \| 'bottom-end' \| 'bottom-start'` |
|
|
1384
|
+
| `GogProgressbarMode` | `'determinate' \| 'indeterminate' \| 'buffer'` |
|
|
1385
|
+
| `GogProgressbarVariant` | `'accent' \| 'success' \| 'danger' \| 'warning' \| 'info'` |
|
|
1386
|
+
| `GogButtonToggleAppearance` | `'joined' \| 'separated'` |
|
|
1387
|
+
| `GogTabsAlign` | `'start' \| 'center' \| 'end' \| 'stretch'` |
|
|
1388
|
+
| `GogDateSelectionMode` | `'single' \| 'range'` |
|
|
1389
|
+
| `GogHourFormat` | `'12' \| '24'` |
|
|
1390
|
+
| `GogTextareaResize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'` |
|
|
1372
1391
|
| `GogInputType` | `'text' \| 'password' \| 'email' \| 'number' \| 'search' \| 'tel' \| 'url' \| 'date' \| 'time' \| 'datetime-local'` |
|
|
1373
|
-
| `GogInputMode` | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`
|
|
1374
|
-
| `GogTableSelectionMode` | `'none' \| 'single' \| 'multiple'`
|
|
1375
|
-
| `GogTableSortEvent` | `{ field: string; direction: SortDirection }`
|
|
1376
|
-
| `GogTableRowClickEvent<T>` | `{ row: T; index: number; originalEvent: MouseEvent \| KeyboardEvent }`
|
|
1377
|
-
| `GogErrorDisplay` | `'auto' \| 'manual'`
|
|
1378
|
-
| `GogDropdownDirection` | `'auto' \| 'up' \| 'down'`
|
|
1379
|
-
| `GogTooltipSide` | `'top' \| 'bottom' \| 'left' \| 'right'` (resolved form of `GogTooltipPosition`, no `'auto'`)
|
|
1380
|
-
| `GogBuiltinIconName` | the 20 glyphs the package ships — see [`gog-icon`](#gog-icon)
|
|
1381
|
-
| `GogIconName` | `GogBuiltinIconName \| (string & {})` — built-ins plus anything registered via `provideGogIcons`
|
|
1392
|
+
| `GogInputMode` | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'` |
|
|
1393
|
+
| `GogTableSelectionMode` | `'none' \| 'single' \| 'multiple'` |
|
|
1394
|
+
| `GogTableSortEvent` | `{ field: string; direction: SortDirection }` |
|
|
1395
|
+
| `GogTableRowClickEvent<T>` | `{ row: T; index: number; originalEvent: MouseEvent \| KeyboardEvent }` |
|
|
1396
|
+
| `GogErrorDisplay` | `'auto' \| 'manual'` |
|
|
1397
|
+
| `GogDropdownDirection` | `'auto' \| 'up' \| 'down'` |
|
|
1398
|
+
| `GogTooltipSide` | `'top' \| 'bottom' \| 'left' \| 'right'` (resolved form of `GogTooltipPosition`, no `'auto'`) |
|
|
1399
|
+
| `GogBuiltinIconName` | the 20 glyphs the package ships — see [`gog-icon`](#gog-icon) |
|
|
1400
|
+
| `GogIconName` | `GogBuiltinIconName \| (string & {})` — built-ins plus anything registered via `provideGogIcons` |
|