@guildofgleks/ui 21.4.2 → 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 +161 -135
- package/CHANGELOG.md +134 -14
- package/README.md +14 -0
- package/TOKENS.md +2 -2
- package/fesm2022/guildofgleks-ui.mjs +20 -12
- package/fesm2022/guildofgleks-ui.mjs.map +1 -1
- 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 +21 -6
- package/src/styles/utilities.css +185 -170
- package/styles/theme.css +21 -6
- package/styles/utilities.css +185 -170
- package/types/guildofgleks-ui.d.ts +1 -1
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
|
|
@@ -725,6 +729,13 @@ Also exported for direct reuse: `formatDate(date, pattern)`, `parseDate(text, pa
|
|
|
725
729
|
family of date-math helpers (`addDays`, `addMonths`, `isSameDay`, `isWithinBounds`, …) from
|
|
726
730
|
`date-utils`.
|
|
727
731
|
|
|
732
|
+
**Sizing.** `gog-calendar` caps itself at its own month grid — you do not need to give it a
|
|
733
|
+
width. `--gog-calendar-max-width` (default `max-content`) is the cap, and it covers the size
|
|
734
|
+
variants, `numberOfMonths`, `showTime` and wider locales on its own; set it to `100%` for a
|
|
735
|
+
calendar that fills its container. This is also what sizes `inline` mode, because `inline` is
|
|
736
|
+
`gog-calendar` with a border and nothing else. The dropdown panel is separate:
|
|
737
|
+
`--gog-datepicker-panel-width`, also `max-content`.
|
|
738
|
+
|
|
728
739
|
```html
|
|
729
740
|
<gog-datepicker label="Birth date" [(value)]="birthDate" [max]="today" />
|
|
730
741
|
<gog-datepicker selectionMode="range" [(value)]="stayRange" [numberOfMonths]="2" />
|
|
@@ -744,15 +755,15 @@ family of date-math helpers (`addDays`, `addMonths`, `isSameDay`, `isWithinBound
|
|
|
744
755
|
The package ships **41** glyphs (`GogBuiltinIconName`), all from [Lucide](https://lucide.dev)
|
|
745
756
|
and inlined so the package keeps zero runtime dependencies:
|
|
746
757
|
|
|
747
|
-
| Group
|
|
748
|
-
|
|
|
749
|
-
| Chevrons & arrows | `chevron-up`, `chevron-down`, `chevron-left`, `chevron-right`, `arrow-left`, `arrow-right`
|
|
750
|
-
| Confirm & dismiss | `check`, `close`, `checkbox`, `checkbox-checked`
|
|
751
|
-
| Status
|
|
752
|
-
| Sorting
|
|
753
|
-
| Actions
|
|
754
|
-
| Chrome
|
|
755
|
-
| 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` |
|
|
756
767
|
|
|
757
768
|
`star` / `star-filled` is the one outline/filled pair, for a rating or favourite **toggle** —
|
|
758
769
|
the same reason `checkbox` / `checkbox-checked` exists. The set is otherwise outline-only on
|
|
@@ -812,7 +823,7 @@ providers: [
|
|
|
812
823
|
|
|
813
824
|
#### `[gogButton]` — the link-flavoured button
|
|
814
825
|
|
|
815
|
-
`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:
|
|
816
827
|
the element stays yours and the directive only gives it the look.
|
|
817
828
|
|
|
818
829
|
```html
|
|
@@ -822,11 +833,11 @@ the element stays yours and the directive only gives it the look.
|
|
|
822
833
|
<a gogButton fullWidth routerLink="/checkout">Checkout</a>
|
|
823
834
|
```
|
|
824
835
|
|
|
825
|
-
| Input | Type
|
|
826
|
-
| ----------- |
|
|
827
|
-
| `variant` | `GogVariant`
|
|
828
|
-
| `size` | `GogSize \| undefined`
|
|
829
|
-
| `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` |
|
|
830
841
|
|
|
831
842
|
Selector is `a[gogButton], button[gogButton]` — deliberately not a bare `[gogButton]`, because on
|
|
832
843
|
a `<div>` the result looks like a button and is invisible to the keyboard and to assistive tech.
|
|
@@ -1031,6 +1042,11 @@ Model: `open: boolean`.
|
|
|
1031
1042
|
</gog-collapsible>
|
|
1032
1043
|
```
|
|
1033
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
|
+
|
|
1034
1050
|
#### `gog-tabs` + `gog-tab`
|
|
1035
1051
|
|
|
1036
1052
|
| Input (on `gog-tabs`) | Type | Default |
|
|
@@ -1066,18 +1082,18 @@ hidden via `[hidden]` while inactive — preserves scroll/input state).
|
|
|
1066
1082
|
|
|
1067
1083
|
#### `gog-paginator`
|
|
1068
1084
|
|
|
1069
|
-
| Input | Type | Default
|
|
1070
|
-
| ------------------------------- | ------------------------------------------------ |
|
|
1071
|
-
| `fullWidth`, `totalPages` | `boolean`, `number` | `true`, `1`
|
|
1072
|
-
| `rangeMode` | `GogPaginatorRangeMode` (`'window'\|'ellipsis'`) | `'window'` — see note
|
|
1073
|
-
| `visiblePages` | `number` | `5` — `'window'` mode only
|
|
1074
|
-
| `showFirstPage`, `showLastPage` | `boolean` | `false` — `'window'` mode only
|
|
1075
|
-
| `siblingCount` | `number` | `2` — `'ellipsis'` mode only
|
|
1076
|
-
| `size` | `GogSize` | `'sm'`
|
|
1077
|
-
| `disabled`, `ariaLabel` | | `false`, `'Pagination'`
|
|
1078
|
-
| `totalRecords` | `number \| null` | `null` — see below
|
|
1079
|
-
| `pageSize` | `model<number>` | `10` — two-way bindable
|
|
1080
|
-
| `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` |
|
|
1081
1097
|
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; via `GOG_CONFIG.paginator` |
|
|
1082
1098
|
|
|
1083
1099
|
The step buttons (`'Previous page'`/`'Next page'`) and the per-page names are configured, not
|
|
@@ -1089,7 +1105,7 @@ Models: `page: number` (1-based, self-clamps) and `pageSize: number`.
|
|
|
1089
1105
|
|
|
1090
1106
|
**Give it `totalRecords` instead of `totalPages` when you know the row count** — it then derives
|
|
1091
1107
|
the page count from `pageSize` itself, which is what removes the
|
|
1092
|
-
`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
|
|
1093
1109
|
sync with the rows-per-page select:
|
|
1094
1110
|
|
|
1095
1111
|
```html
|
|
@@ -1116,28 +1132,28 @@ they never asked to be.
|
|
|
1116
1132
|
|
|
1117
1133
|
#### `gog-table<T>`
|
|
1118
1134
|
|
|
1119
|
-
| Input | Type | Default
|
|
1120
|
-
| ----------------------------- | ----------------------------- |
|
|
1121
|
-
| `value` | `T[]` | `[]`
|
|
1122
|
-
| `fullWidth` | `boolean` | `true`
|
|
1123
|
-
| `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 |
|
|
1124
1140
|
| `showPageSizeSelect` | `boolean \| undefined` | `false`; forwarded to the paginator |
|
|
1125
|
-
| `pageSizeOptions` | `number[] \| undefined` | `[10, 20, 30, 40, 50]`; forwarded
|
|
1126
|
-
| `showRowNumbers`, `showTotal` | `boolean` | `true`, `false`
|
|
1127
|
-
| `emptyPlaceholder` | `string` | `'-'`
|
|
1128
|
-
| `paginatorPosition` | `'left'\|'center'\|'right'` | `'center'`
|
|
1129
|
-
| `totalPosition` | `'left'\|'right'\|'opposite'` | `'opposite'`
|
|
1130
|
-
| `loading` | `boolean` | `false`
|
|
1131
|
-
| `showColumnBorders` | `boolean` | `false`
|
|
1132
|
-
| `stickyHeader` | `boolean` | `false`
|
|
1133
|
-
| `size` | `GogSize` | `'lg'` (row density — not `'md'`)
|
|
1134
|
-
| `lazy` | `boolean` | `false` — see below
|
|
1135
|
-
| `totalRecords` | `number \| null` | `null` — `lazy` only
|
|
1136
|
-
| `selectionMode` | `GogTableSelectionMode` | `'none'`
|
|
1137
|
-
| `selection` | `model<T[]>` | `[]` — two-way bindable
|
|
1138
|
-
| `dataKey` | `string` | `''` — row identity field
|
|
1139
|
-
| `showSelectionColumn` | `boolean` | `true` (once selection is on)
|
|
1140
|
-
| `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` |
|
|
1141
1157
|
|
|
1142
1158
|
Outputs: `gogSortChange: GogTableSortEvent` (`{ field, direction }`, `{ field: '', direction:
|
|
1143
1159
|
null }` when the third click clears it), `gogPageChange: number` (1-based; **does not fire** on
|
|
@@ -1175,7 +1191,7 @@ exist, so pagination stays hidden and it warns in dev), then refetch from the tw
|
|
|
1175
1191
|
dataKey="id"
|
|
1176
1192
|
(gogSortChange)="sort.set($event); reload()"
|
|
1177
1193
|
(gogPageChange)="pageNumber.set($event); reload()"
|
|
1178
|
-
>
|
|
1194
|
+
></gog-table>
|
|
1179
1195
|
```
|
|
1180
1196
|
|
|
1181
1197
|
Row numbers still count from the current page (`(page - 1) * pageSize + i + 1`), and `showTotal`
|
|
@@ -1191,7 +1207,12 @@ through it, and there is no intermediate signal to keep in sync in either direct
|
|
|
1191
1207
|
|
|
1192
1208
|
```html
|
|
1193
1209
|
<!-- off by default; turn it on per table, or app-wide via GOG_CONFIG.paginator -->
|
|
1194
|
-
<gog-table
|
|
1210
|
+
<gog-table
|
|
1211
|
+
[value]="rows"
|
|
1212
|
+
[(pageSize)]="size"
|
|
1213
|
+
[showPageSizeSelect]="true"
|
|
1214
|
+
[pageSizeOptions]="[5, 10, 20]"
|
|
1215
|
+
></gog-table>
|
|
1195
1216
|
```
|
|
1196
1217
|
|
|
1197
1218
|
Changing the size returns to page 1 and does **not** emit `gogPageChange` — the consumer already
|
|
@@ -1208,7 +1229,12 @@ user on whatever size produced that one page, with no control left to pick a sma
|
|
|
1208
1229
|
where it holds zero or one row — one shape rather than a union to narrow on every read.
|
|
1209
1230
|
|
|
1210
1231
|
```html
|
|
1211
|
-
<gog-table
|
|
1232
|
+
<gog-table
|
|
1233
|
+
[value]="rows"
|
|
1234
|
+
selectionMode="multiple"
|
|
1235
|
+
[(selection)]="selected"
|
|
1236
|
+
dataKey="id"
|
|
1237
|
+
></gog-table>
|
|
1212
1238
|
```
|
|
1213
1239
|
|
|
1214
1240
|
- **Set `dataKey`.** Without it rows are matched by object identity, so any refetch that produces
|
|
@@ -1336,39 +1362,39 @@ anti-pattern — reach for a slot directive instead.
|
|
|
1336
1362
|
|
|
1337
1363
|
Shared enum-like types (`import type { ... } from '@guildofgleks/ui'`):
|
|
1338
1364
|
|
|
1339
|
-
| Type | Values
|
|
1340
|
-
| ----------------------------- |
|
|
1341
|
-
| `GogSize` | `'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`
|
|
1342
|
-
| `GogVariant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost'`
|
|
1343
|
-
| `GogTagVariant` | `'success' \| 'danger' \| 'warning' \| 'info'`
|
|
1344
|
-
| `GogOrientation` | `'horizontal' \| 'vertical'`
|
|
1345
|
-
| `GogTagShape` | `'rounded' \| 'pill'`
|
|
1346
|
-
| `GogSpinnerVariant` | `'runic' \| 'ring' \| 'custom'`
|
|
1347
|
-
| `GogSkeletonShape` | `'text' \| 'circle' \| 'rect'`
|
|
1348
|
-
| `GogSkeletonAnimation` | `'pulse' \| 'wave' \| 'none'`
|
|
1349
|
-
| `GogPaginatorRangeMode` | `'window' \| 'ellipsis'`
|
|
1350
|
-
| `GogScrollAxis` | `'vertical' \| 'horizontal' \| 'both'`
|
|
1351
|
-
| `GogScrollSize` | `'normal' \| 'thin'`
|
|
1352
|
-
| `GogScrollOverscrollBehavior` | `'auto' \| 'contain' \| 'none'`
|
|
1353
|
-
| `GogTooltipPosition` | `'auto' \| 'top' \| 'bottom' \| 'left' \| 'right'`
|
|
1354
|
-
| `GogFloatLabelVariant` | `'none' \| 'in' \| 'on' \| 'over'`
|
|
1355
|
-
| `GogDropdownFilterPosition` | `'top' \| 'bottom'`
|
|
1356
|
-
| `GogDividerVariant` | `'solid' \| 'dashed' \| 'dotted'`
|
|
1357
|
-
| `GogBadgePosition` | `'top-end' \| 'top-start' \| 'bottom-end' \| 'bottom-start'`
|
|
1358
|
-
| `GogProgressbarMode` | `'determinate' \| 'indeterminate' \| 'buffer'`
|
|
1359
|
-
| `GogProgressbarVariant` | `'accent' \| 'success' \| 'danger' \| 'warning' \| 'info'`
|
|
1360
|
-
| `GogButtonToggleAppearance` | `'joined' \| 'separated'`
|
|
1361
|
-
| `GogTabsAlign` | `'start' \| 'center' \| 'end' \| 'stretch'`
|
|
1362
|
-
| `GogDateSelectionMode` | `'single' \| 'range'`
|
|
1363
|
-
| `GogHourFormat` | `'12' \| '24'`
|
|
1364
|
-
| `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'` |
|
|
1365
1391
|
| `GogInputType` | `'text' \| 'password' \| 'email' \| 'number' \| 'search' \| 'tel' \| 'url' \| 'date' \| 'time' \| 'datetime-local'` |
|
|
1366
|
-
| `GogInputMode` | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`
|
|
1367
|
-
| `GogTableSelectionMode` | `'none' \| 'single' \| 'multiple'`
|
|
1368
|
-
| `GogTableSortEvent` | `{ field: string; direction: SortDirection }`
|
|
1369
|
-
| `GogTableRowClickEvent<T>` | `{ row: T; index: number; originalEvent: MouseEvent \| KeyboardEvent }`
|
|
1370
|
-
| `GogErrorDisplay` | `'auto' \| 'manual'`
|
|
1371
|
-
| `GogDropdownDirection` | `'auto' \| 'up' \| 'down'`
|
|
1372
|
-
| `GogTooltipSide` | `'top' \| 'bottom' \| 'left' \| 'right'` (resolved form of `GogTooltipPosition`, no `'auto'`)
|
|
1373
|
-
| `GogBuiltinIconName` | the 20 glyphs the package ships — see [`gog-icon`](#gog-icon)
|
|
1374
|
-
| `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` |
|