@lifecorner/angular-ui-kit 3.36.0 → 3.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-card.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs +4 -4
- package/fesm2022/lifecorner-angular-ui-kit-description-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-hero.mjs +24 -3
- package/fesm2022/lifecorner-angular-ui-kit-hero.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-internal-chart.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs +10 -5
- package/fesm2022/lifecorner-angular-ui-kit-list.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs +15 -10
- package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-state-strip.mjs +27 -4
- package/fesm2022/lifecorner-angular-ui-kit-state-strip.mjs.map +1 -1
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs +2 -2
- package/fesm2022/lifecorner-angular-ui-kit-table.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_theme-light.scss +8 -1
- package/src/styles/theme-contrast.spec.ts +44 -0
- package/src/styles/theme-modes.spec.ts +20 -5
- package/types/lifecorner-angular-ui-kit-hero.d.ts +19 -1
- package/types/lifecorner-angular-ui-kit-internal-chart.d.ts +6 -0
- package/types/lifecorner-angular-ui-kit-list.d.ts +10 -0
- package/types/lifecorner-angular-ui-kit-select.d.ts +13 -1
- package/types/lifecorner-angular-ui-kit-state-strip.d.ts +20 -2
- package/types/lifecorner-angular-ui-kit-table.d.ts +9 -1
|
@@ -24,7 +24,12 @@ export type HeroHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
|
24
24
|
* - Content projection for body and footer sections
|
|
25
25
|
* - Footer slot for metadata, stats, or CTAs
|
|
26
26
|
* - Media slot (`[hero-media]`) for a visual: below the text on small screens,
|
|
27
|
-
* beside it from 1024 px
|
|
27
|
+
* beside it from 1024 px
|
|
28
|
+
* - 3.37: components in the default slot keep full opacity (no `opacity` on
|
|
29
|
+
* the slot), and badges in a hero take the light palette in both themes;
|
|
30
|
+
* `fill` takes the height of a stretching grid or flex row
|
|
31
|
+
* - 3.38: label, title and body are white at full strength on every default
|
|
32
|
+
* band (4.58:1 or more); five bands are darker at their light end
|
|
28
33
|
* - Content width `lg`: a full-bleed band whose text lines up with the page column
|
|
29
34
|
* - `headingLevel` (3.36): the title as `h1`–`h6`, the same look at every level
|
|
30
35
|
* - `focusTitle()` (3.36): moves focus to the title (`tabindex="-1"`, out of the
|
|
@@ -92,6 +97,14 @@ export declare class HeroComponent {
|
|
|
92
97
|
* @default 1
|
|
93
98
|
*/
|
|
94
99
|
headingLevel: import("@angular/core").InputSignal<HeroHeadingLevel>;
|
|
100
|
+
/**
|
|
101
|
+
* Fill the height the container gives the hero (3.37, cockpit row 1): in a
|
|
102
|
+
* grid or flex row that stretches its items, the band ends at the row's
|
|
103
|
+
* bottom edge; the content stays at the top and `[hero-footer]` sits at the
|
|
104
|
+
* bottom. Without it the hero is as tall as its content.
|
|
105
|
+
* @default false
|
|
106
|
+
*/
|
|
107
|
+
fill: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
95
108
|
private readonly titleEl;
|
|
96
109
|
private readonly labelEl;
|
|
97
110
|
/**
|
|
@@ -149,5 +162,10 @@ export declare class HeroComponent {
|
|
|
149
162
|
"required": false;
|
|
150
163
|
"isSignal": true;
|
|
151
164
|
};
|
|
165
|
+
"fill": {
|
|
166
|
+
"alias": "fill";
|
|
167
|
+
"required": false;
|
|
168
|
+
"isSignal": true;
|
|
169
|
+
};
|
|
152
170
|
}, {}, never, ["*", "[hero-media]", "[hero-footer]"], true, never>;
|
|
153
171
|
}
|
|
@@ -26,6 +26,12 @@ export declare function readableInk(fill: string): string | null;
|
|
|
26
26
|
*
|
|
27
27
|
* Charts fall back to this list when a series/segment brings no `color` of its
|
|
28
28
|
* own; per-item colours always win.
|
|
29
|
+
*
|
|
30
|
+
* 3.37 (request 057, 056 F-1, WCAG 1.4.11): entries 3 and 4 are the status
|
|
31
|
+
* inks, not the status fills. `--color-success-default` measured 2.47–2.72:1
|
|
32
|
+
* and `--color-warning-default` 2.05–2.26:1 on light pages; the inks reach
|
|
33
|
+
* 5.30 and 6.03:1 there (8.40 and 7.65:1 dark). Every entry keeps 3:1 against
|
|
34
|
+
* `--color-background` and `--color-surface` in both themes.
|
|
29
35
|
*/
|
|
30
36
|
export declare const CHART_PALETTE: readonly string[];
|
|
31
37
|
/** Palette colour for the series/segment at `index`, wrapping around. */
|
|
@@ -123,6 +123,9 @@ export type ListItemPart = 'row' | 'action';
|
|
|
123
123
|
* (WCAG 2.4.3)
|
|
124
124
|
* - `showChevron` (3.36): a decorative chevron at the end of every
|
|
125
125
|
* `clickable` or `href` row
|
|
126
|
+
* - 3.37: a `clickable` row with an `action` holds a native button stretched
|
|
127
|
+
* over the row (named by the row) beside its action, so no control sits
|
|
128
|
+
* inside another (WCAG 4.1.2); one Tab stop for the row, then the action
|
|
126
129
|
*
|
|
127
130
|
* @example
|
|
128
131
|
* ```html
|
|
@@ -211,6 +214,13 @@ export declare class ListComponent {
|
|
|
211
214
|
* @param part Which part of the row gets the focus.
|
|
212
215
|
*/
|
|
213
216
|
focusItem(id: string, part?: ListItemPart): void;
|
|
217
|
+
/** Generated id prefix, taken once per instance (module counter, the same in every prerender). */
|
|
218
|
+
private readonly uid;
|
|
219
|
+
/**
|
|
220
|
+
* Id of row `index` of a `clickable` row with an `action` (3.37): the
|
|
221
|
+
* row's button is named by it (`aria-labelledby`).
|
|
222
|
+
*/
|
|
223
|
+
protected rowId(index: number): string;
|
|
214
224
|
/** Whether a row renders as a link: `href` set and not disabled. */
|
|
215
225
|
protected isLinkRow(item: ListItem): boolean;
|
|
216
226
|
/**
|
|
@@ -161,8 +161,13 @@ export declare class SelectComponent implements ControlValueAccessor {
|
|
|
161
161
|
/**
|
|
162
162
|
* Close dropdown. Idempotent: the overlay's `detach` re-enters here after
|
|
163
163
|
* `isOpen` flips, and that second call must not emit `closed` again.
|
|
164
|
+
*
|
|
165
|
+
* `returnFocus` (3.37, request 057, services row 2): a single-select choice
|
|
166
|
+
* and `Escape` also hand the focus back to the trigger when it is on `<body>`
|
|
167
|
+
* (a tap on an option, which has no `tabindex`, moves it there). Without it
|
|
168
|
+
* (backdrop click, detach) only focus inside the panel returns, as before.
|
|
164
169
|
*/
|
|
165
|
-
close(): void;
|
|
170
|
+
close(returnFocus?: boolean): void;
|
|
166
171
|
/**
|
|
167
172
|
* Select an option
|
|
168
173
|
*/
|
|
@@ -187,6 +192,13 @@ export declare class SelectComponent implements ControlValueAccessor {
|
|
|
187
192
|
* Handle click outside
|
|
188
193
|
*/
|
|
189
194
|
onClickOutside(): void;
|
|
195
|
+
/**
|
|
196
|
+
* Keys that reach the open overlay while the focus is outside the field and
|
|
197
|
+
* the panel, e.g. on `<body>` after a tap (3.37, request 057): `Escape`
|
|
198
|
+
* closes and returns the focus. It runs before the overlay's own `Escape`
|
|
199
|
+
* detach, which then finds the select closed.
|
|
200
|
+
*/
|
|
201
|
+
onOverlayKeydown(event: KeyboardEvent): void;
|
|
190
202
|
writeValue(value: SelectValue): void;
|
|
191
203
|
registerOnChange(fn: (value: SelectValue) => void): void;
|
|
192
204
|
registerOnTouched(fn: () => void): void;
|
|
@@ -23,7 +23,8 @@ export declare const DEFAULT_STATE_STRIP_LABELS: Readonly<StateStripLabels>;
|
|
|
23
23
|
* state word. One Tab stop (the newest run first), Arrow Left/Right, Home and
|
|
24
24
|
* End move between the runs, Escape hides the caption. Hovering or focusing a
|
|
25
25
|
* segment shows its name below the strip (hidden from screen readers, which
|
|
26
|
-
* read the cell).
|
|
26
|
+
* read the cell). 3.37: the pointer uses the whole strip (one layer over the
|
|
27
|
+
* row picks the run under it), so dense strips need no 24 px cells.
|
|
27
28
|
*
|
|
28
29
|
* Without segments it renders nothing. The segments are in the prerendered
|
|
29
30
|
* HTML. CSS hooks: `--lc-state-strip-height` (default `2rem`) and
|
|
@@ -43,6 +44,11 @@ export declare class StateStripComponent {
|
|
|
43
44
|
/**
|
|
44
45
|
* The runs, in order, oldest first: one segment each. Empty renders nothing
|
|
45
46
|
* (no box, no accessibility node).
|
|
47
|
+
*
|
|
48
|
+
* More runs than fit at 24 px (13 and more in 328 px) narrow the cells below
|
|
49
|
+
* 24 px; the pointer then uses the whole strip: pointing at it, or sliding a
|
|
50
|
+
* pressed finger along it, shows that run; the keyboard moves with the
|
|
51
|
+
* arrows (3.37).
|
|
46
52
|
* @default []
|
|
47
53
|
*/
|
|
48
54
|
readonly segments: import("@angular/core").InputSignal<readonly StateStripSegment[]>;
|
|
@@ -73,7 +79,7 @@ export declare class StateStripComponent {
|
|
|
73
79
|
/** The roving Tab stop: the newest run until the user moves. */
|
|
74
80
|
protected readonly current: import("@angular/core").WritableSignal<number>;
|
|
75
81
|
/** The segment under the pointer, the one with focus, and whether Escape hid the caption. */
|
|
76
|
-
|
|
82
|
+
protected readonly hovered: import("@angular/core").WritableSignal<number | null>;
|
|
77
83
|
private readonly focused;
|
|
78
84
|
private readonly dismissed;
|
|
79
85
|
/** The segment whose name the caption shows, if any. */
|
|
@@ -84,6 +90,18 @@ export declare class StateStripComponent {
|
|
|
84
90
|
protected onBlur(): void;
|
|
85
91
|
protected onPointerEnter(index: number): void;
|
|
86
92
|
protected onPointerLeave(): void;
|
|
93
|
+
/** The run the scrub layer last picked; a move within it changes nothing (as entering a cell). */
|
|
94
|
+
private scrubbed;
|
|
95
|
+
/**
|
|
96
|
+
* The pointer over the strip (3.37, request 057, 056 S-1): the run whose
|
|
97
|
+
* cell spans the pointer's x shows in the caption; outside every cell none.
|
|
98
|
+
*/
|
|
99
|
+
protected onScrubMove(event: PointerEvent): void;
|
|
100
|
+
/** Releasing the pointer (a click, a lifted finger) focuses the run under it. */
|
|
101
|
+
protected onScrubUp(event: PointerEvent): void;
|
|
102
|
+
protected onScrubLeave(): void;
|
|
103
|
+
/** The index of the cell whose box spans `x`, any writing direction. */
|
|
104
|
+
private cellAt;
|
|
87
105
|
/** Arrow Left/Right, Home, End move between the runs (no wrap); Escape hides the caption. */
|
|
88
106
|
protected onKeydown(event: KeyboardEvent): void;
|
|
89
107
|
static ɵfac: i0.ɵɵFactoryDeclaration<StateStripComponent, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
import { QueryList, TemplateRef } from "@angular/core";
|
|
3
|
-
import { ButtonVariant } from "@lifecorner/angular-ui-kit/button";
|
|
3
|
+
import { ButtonSize, ButtonVariant } from "@lifecorner/angular-ui-kit/button";
|
|
4
4
|
/**
|
|
5
5
|
* Directive for defining custom cell templates in the Table component.
|
|
6
6
|
*
|
|
@@ -84,6 +84,14 @@ export interface TableAction {
|
|
|
84
84
|
icon?: string;
|
|
85
85
|
/** Button variant (default: 'ghost') */
|
|
86
86
|
variant?: ButtonVariant;
|
|
87
|
+
/**
|
|
88
|
+
* Size of the action's `lc-button` (3.37, services row 3). `'lg'` is
|
|
89
|
+
* 48.5 px high with a label and 45.6 px icon-only, for touch rows; the icon
|
|
90
|
+
* stays 20 px. Pass another size per breakpoint yourself.
|
|
91
|
+
*
|
|
92
|
+
* @default 'xs'
|
|
93
|
+
*/
|
|
94
|
+
size?: ButtonSize;
|
|
87
95
|
/** Optional tooltip / aria-label, useful for icon-only actions */
|
|
88
96
|
tooltip?: string;
|
|
89
97
|
/**
|