@praxisui/core 9.0.4-rc.11 → 9.0.4-rc.13
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 +46 -54
- package/ai/component-registry.json +161 -112
- package/fesm2022/praxisui-core.mjs +1447 -342
- package/package.json +1 -1
- package/types/praxisui-core.d.ts +29 -2
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Use this package directly when a host application or library needs Praxis UI typ
|
|
|
8
8
|
|
|
9
9
|
- Recommend when: use it as the first dependency for shared Praxis UI contracts, metadata models, resource discovery, global actions, i18n, theme bridge, and dynamic widget runtime primitives.
|
|
10
10
|
- Avoid when: a consuming app wants to redefine contracts owned by core, metadata starter, config starter, or component packages.
|
|
11
|
-
- Pair with: Every runtime package in the @praxisui
|
|
11
|
+
- Pair with: Every runtime package in the @praxisui/\* family.
|
|
12
12
|
|
|
13
13
|
## Official Links
|
|
14
14
|
|
|
@@ -40,13 +40,13 @@ Import the theme bridge after Angular Material and CDK overlay styles.
|
|
|
40
40
|
Use `PraxisIconDirective` to normalize Material Icons and Material Symbols names.
|
|
41
41
|
|
|
42
42
|
```ts
|
|
43
|
-
import { Component } from
|
|
44
|
-
import { MatIconModule } from
|
|
45
|
-
import { PraxisIconDirective } from
|
|
43
|
+
import { Component } from "@angular/core";
|
|
44
|
+
import { MatIconModule } from "@angular/material/icon";
|
|
45
|
+
import { PraxisIconDirective } from "@praxisui/core";
|
|
46
46
|
|
|
47
47
|
@Component({
|
|
48
48
|
standalone: true,
|
|
49
|
-
selector:
|
|
49
|
+
selector: "app-icons",
|
|
50
50
|
imports: [MatIconModule, PraxisIconDirective],
|
|
51
51
|
template: `
|
|
52
52
|
<mat-icon [praxisIcon]="'mi:pending'"></mat-icon>
|
|
@@ -65,20 +65,12 @@ and `mss:` icon-family prefixes as `PraxisIconDirective`; unprefixed names keep
|
|
|
65
65
|
the legacy Material Icons behavior.
|
|
66
66
|
|
|
67
67
|
```ts
|
|
68
|
-
import { Component, signal } from
|
|
69
|
-
import { PraxisIconButtonComponent } from
|
|
68
|
+
import { Component, signal } from "@angular/core";
|
|
69
|
+
import { PraxisIconButtonComponent } from "@praxisui/core";
|
|
70
70
|
|
|
71
71
|
@Component({
|
|
72
72
|
imports: [PraxisIconButtonComponent],
|
|
73
|
-
template: `
|
|
74
|
-
<button
|
|
75
|
-
type="button"
|
|
76
|
-
[praxisIconButton]="'mic'"
|
|
77
|
-
size="compact"
|
|
78
|
-
[pressed]="isListening()"
|
|
79
|
-
aria-label="Ditar pedido"
|
|
80
|
-
></button>
|
|
81
|
-
`,
|
|
73
|
+
template: ` <button type="button" [praxisIconButton]="'mic'" size="compact" [pressed]="isListening()" aria-label="Ditar pedido"></button> `,
|
|
82
74
|
})
|
|
83
75
|
export class ComposerActionsComponent {
|
|
84
76
|
readonly isListening = signal(false);
|
|
@@ -87,14 +79,14 @@ export class ComposerActionsComponent {
|
|
|
87
79
|
|
|
88
80
|
Public inputs:
|
|
89
81
|
|
|
90
|
-
| Input
|
|
91
|
-
|
|
|
92
|
-
| `praxisIconButton` | icon name or canonical family-prefixed icon | required
|
|
93
|
-
| `size`
|
|
94
|
-
| `appearance`
|
|
95
|
-
| `presentation`
|
|
96
|
-
| `pressed`
|
|
97
|
-
| `busy`
|
|
82
|
+
| Input | Values | Default | Purpose |
|
|
83
|
+
| ------------------ | ------------------------------------------- | ---------- | --------------------------------------------------------------------------------------- |
|
|
84
|
+
| `praxisIconButton` | icon name or canonical family-prefixed icon | required | Glyph materialized inside the button |
|
|
85
|
+
| `size` | `dense`, `compact`, `standard` | `standard` | Governed target, visible surface and glyph density |
|
|
86
|
+
| `appearance` | `plain`, `filled` | `plain` | Transparent or emphasized action surface |
|
|
87
|
+
| `presentation` | `icon`, `projected` | `icon` | Uses the named glyph or host-projected governed presentation |
|
|
88
|
+
| `pressed` | `true`, `false`, `null` | `null` | Persistent toggle/listening state and native `aria-pressed`; `null` omits the attribute |
|
|
89
|
+
| `busy` | boolean | `false` | Replaces the glyph with the canonical progress indicator and publishes `aria-busy` |
|
|
98
90
|
|
|
99
91
|
The component defaults the native host to `type="button"`; an explicit host
|
|
100
92
|
attribute still documents intent and prevents accidental form submission in
|
|
@@ -115,11 +107,11 @@ Praxis Material 3 semantic color tokens.
|
|
|
115
107
|
|
|
116
108
|
Governed density matrix:
|
|
117
109
|
|
|
118
|
-
| Size
|
|
119
|
-
|
|
|
120
|
-
| `standard` |
|
|
121
|
-
| `compact`
|
|
122
|
-
| `dense`
|
|
110
|
+
| Size | Pointer target | Visible surface | Glyph | Intended use |
|
|
111
|
+
| ---------- | -------------: | --------------: | ----: | ------------------------------------------------------- |
|
|
112
|
+
| `standard` | 44px | 40px | 22px | Primary and standalone icon actions |
|
|
113
|
+
| `compact` | 44px | 36px | 20px | Composers, headers and frequent application actions |
|
|
114
|
+
| `dense` | 36px | 32px | 18px | Secondary actions inside constrained editorial toolbars |
|
|
123
115
|
|
|
124
116
|
On coarse pointers, `dense` automatically restores a 44px pointer target while
|
|
125
117
|
keeping its 32px visible surface. Do not use `dense` for a primary action, an
|
|
@@ -137,11 +129,11 @@ the Core primitive owns presentation and native interaction only.
|
|
|
137
129
|
`PraxisThemeSurfaceTokens` is the public semantic bridge for runtime surfaces. It deliberately avoids Material or MDC selectors, so a host can theme Praxis overlays, borders and focus states without patching component internals.
|
|
138
130
|
|
|
139
131
|
```ts
|
|
140
|
-
import { buildPraxisThemeSurfaceCss } from
|
|
132
|
+
import { buildPraxisThemeSurfaceCss } from "@praxisui/core";
|
|
141
133
|
|
|
142
134
|
const themeCss = buildPraxisThemeSurfaceCss({
|
|
143
|
-
surfaceOverlay:
|
|
144
|
-
focusOutline:
|
|
135
|
+
surfaceOverlay: "var(--app-overlay-surface)",
|
|
136
|
+
focusOutline: "var(--app-focus-ring)",
|
|
145
137
|
});
|
|
146
138
|
```
|
|
147
139
|
|
|
@@ -152,16 +144,16 @@ Apply the generated variables in the host stylesheet or define the `--praxis-the
|
|
|
152
144
|
`ComponentMetadataRegistry` is the shared registry used by builders and runtime loaders to resolve component metadata.
|
|
153
145
|
|
|
154
146
|
```ts
|
|
155
|
-
import { ComponentDocMeta, ComponentMetadataRegistry } from
|
|
147
|
+
import { ComponentDocMeta, ComponentMetadataRegistry } from "@praxisui/core";
|
|
156
148
|
|
|
157
149
|
const metadata: ComponentDocMeta = {
|
|
158
|
-
id:
|
|
159
|
-
selector:
|
|
150
|
+
id: "app-widget",
|
|
151
|
+
selector: "app-widget",
|
|
160
152
|
component: AppWidgetComponent,
|
|
161
|
-
friendlyName:
|
|
162
|
-
description:
|
|
163
|
-
icon:
|
|
164
|
-
lib:
|
|
153
|
+
friendlyName: "App widget",
|
|
154
|
+
description: "Host-owned widget.",
|
|
155
|
+
icon: "widgets",
|
|
156
|
+
lib: "app-host",
|
|
165
157
|
};
|
|
166
158
|
|
|
167
159
|
registry.register(metadata);
|
|
@@ -174,12 +166,12 @@ Component-owned config editors and AI authoring manifests are declared on `Compo
|
|
|
174
166
|
`DynamicWidgetPageComponent` renders `WidgetPageDefinition` documents.
|
|
175
167
|
|
|
176
168
|
```ts
|
|
177
|
-
import { Component } from
|
|
178
|
-
import { DynamicWidgetPageComponent, WidgetPageDefinition } from
|
|
169
|
+
import { Component } from "@angular/core";
|
|
170
|
+
import { DynamicWidgetPageComponent, WidgetPageDefinition } from "@praxisui/core";
|
|
179
171
|
|
|
180
172
|
@Component({
|
|
181
173
|
standalone: true,
|
|
182
|
-
selector:
|
|
174
|
+
selector: "app-page",
|
|
183
175
|
imports: [DynamicWidgetPageComponent],
|
|
184
176
|
template: `<praxis-dynamic-page [page]="page"></praxis-dynamic-page>`,
|
|
185
177
|
})
|
|
@@ -187,10 +179,10 @@ export class PageComponent {
|
|
|
187
179
|
page: WidgetPageDefinition = {
|
|
188
180
|
widgets: [
|
|
189
181
|
{
|
|
190
|
-
key:
|
|
182
|
+
key: "summary",
|
|
191
183
|
definition: {
|
|
192
|
-
id:
|
|
193
|
-
inputs: { title:
|
|
184
|
+
id: "app-widget",
|
|
185
|
+
inputs: { title: "Summary" },
|
|
194
186
|
},
|
|
195
187
|
},
|
|
196
188
|
],
|
|
@@ -201,6 +193,12 @@ export class PageComponent {
|
|
|
201
193
|
|
|
202
194
|
Use `page.composition.links` for persisted wiring. `page.connections` is legacy/residual and should not be used for new pages or examples. Nested component ports should use `component-port` endpoints with `ref.nestedPath`.
|
|
203
195
|
|
|
196
|
+
Page-owned business copy can use `page.i18n` plus explicit `PraxisTextValue`
|
|
197
|
+
descriptors inside widget shells or nested widget inputs. The runtime resolves
|
|
198
|
+
those descriptors only in its render projection, so the authored and persisted
|
|
199
|
+
document keeps stable semantic keys. Plain strings remain untouched, and
|
|
200
|
+
framework chrome continues to come from each library's i18n catalog.
|
|
201
|
+
|
|
204
202
|
## Resource Discovery
|
|
205
203
|
|
|
206
204
|
`resourcePath` and `resourceKey` serve different purposes:
|
|
@@ -244,16 +242,10 @@ For governed analytics cross-filtering, `bindings.primaryDimension.keyFilterFiel
|
|
|
244
242
|
Global actions let widgets and shells request host-mediated work such as navigation, dialog, toast, analytics, API calls, or surface opening.
|
|
245
243
|
|
|
246
244
|
```ts
|
|
247
|
-
import {
|
|
248
|
-
providePraxisGlobalActions,
|
|
249
|
-
providePraxisToastGlobalActions,
|
|
250
|
-
} from '@praxisui/core';
|
|
245
|
+
import { providePraxisGlobalActions, providePraxisToastGlobalActions } from "@praxisui/core";
|
|
251
246
|
|
|
252
247
|
export const appConfig = {
|
|
253
|
-
providers: [
|
|
254
|
-
providePraxisGlobalActions(),
|
|
255
|
-
providePraxisToastGlobalActions(),
|
|
256
|
-
],
|
|
248
|
+
providers: [providePraxisGlobalActions(), providePraxisToastGlobalActions()],
|
|
257
249
|
};
|
|
258
250
|
```
|
|
259
251
|
|
|
@@ -266,7 +258,7 @@ Resource action discovery also carries an optional `execution` contract. Consume
|
|
|
266
258
|
`PraxisCollectionExportService` is the shared export contract used by table, list, and future collection components.
|
|
267
259
|
|
|
268
260
|
```ts
|
|
269
|
-
import { providePraxisHttpCollectionExportProvider } from
|
|
261
|
+
import { providePraxisHttpCollectionExportProvider } from "@praxisui/core";
|
|
270
262
|
|
|
271
263
|
export const appConfig = {
|
|
272
264
|
providers: [providePraxisHttpCollectionExportProvider()],
|