diff --git a/cockpit/ag-ui/streaming/angular/src/index.html b/cockpit/ag-ui/streaming/angular/src/index.html index e73a9b36a..40ab08e74 100644 --- a/cockpit/ag-ui/streaming/angular/src/index.html +++ b/cockpit/ag-ui/streaming/angular/src/index.html @@ -5,9 +5,8 @@ AG-UI Streaming — Angular - - + diff --git a/cockpit/ag-ui/streaming/angular/src/styles.css b/cockpit/ag-ui/streaming/angular/src/styles.css index 061c66cf8..d42cba930 100644 --- a/cockpit/ag-ui/streaming/angular/src/styles.css +++ b/cockpit/ag-ui/streaming/angular/src/styles.css @@ -1,30 +1,9 @@ -@import "../../../../../libs/design-tokens/src/lib/tokens.css"; -@import "tailwindcss"; -@source "../../../../../libs/chat/src/"; +@import "@ngaf/example-layouts/theme.css"; -@theme { - --color-bg: var(--ds-bg); - --color-surface: #ffffff; - --color-accent: var(--ds-accent); - --color-accent-light: var(--ds-accent-light); - --color-text-primary: var(--ds-text-primary); - --color-text-secondary: var(--ds-text-secondary); - --color-text-muted: var(--ds-text-muted); - --color-border: var(--ds-accent-border); - --color-error: #ef4444; - --color-success: #22c55e; - --font-sans: var(--ds-font-sans); - --font-serif: var(--ds-font-serif); - --font-mono: var(--ds-font-mono); -} - -*, *::before, *::after { box-sizing: border-box; } - -body { +html, body { + height: 100%; margin: 0; - font-family: var(--ds-font-sans); - background: var(--ds-bg); - color: var(--ds-text-primary); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); } diff --git a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts index 77f37054f..27cb698a6 100644 --- a/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts +++ b/cockpit/render/computed-functions/angular/src/app/computed-functions.component.ts @@ -20,13 +20,13 @@ import { COMPUTED_FUNCTIONS_SPECS } from './specs'; template: ` @if (label() || value()) {
- {{ label() }}: - {{ value() }} + {{ label() }}: + {{ value() }}
} @else if (loading()) {
-
-
+
+
} `, @@ -47,17 +47,17 @@ class DemoValueComponent { imports: [RenderElementComponent], template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) { -
+
} @for (key of childKeys(); track key) { } @if (!childKeys().length && loading()) {
-
-
+
+
} `, @@ -80,12 +80,12 @@ class DemoHeadingComponent { standalone: true, imports: [RenderElementComponent], template: ` -
@if (title()) { -

{{ title() }}

+

{{ title() }}

} @else if (loading()) { -
+
} @if (childKeys().length) { @for (key of childKeys(); track key) { @@ -93,8 +93,8 @@ class DemoHeadingComponent { } } @else if (loading()) {
-
-
+
+
}
@@ -117,11 +117,11 @@ class DemoCardComponent {
- Spec: + Spec: @for (spec of specs; track spec.label; let i = $index) { @@ -130,11 +130,11 @@ class DemoCardComponent {
-
Live Render Output
+
Live Render Output
@if (simulator.spec(); as renderedSpec) { } @else { -
Press play to start streaming...
+
Press play to start streaming...
}
@@ -142,17 +142,17 @@ class DemoCardComponent {
-
Streaming JSON
- 
{{ simulator.rawJson() }}|
+
Streaming JSON
+ 
{{ simulator.rawJson() }}|
- {{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} - {{ percent() }}% + {{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} + {{ percent() }}%
- + `, }) diff --git a/cockpit/render/computed-functions/angular/src/index.html b/cockpit/render/computed-functions/angular/src/index.html index a081abe3d..a1f91e95d 100644 --- a/cockpit/render/computed-functions/angular/src/index.html +++ b/cockpit/render/computed-functions/angular/src/index.html @@ -1,13 +1,12 @@ - + Render Computed Functions — Angular - - + diff --git a/cockpit/render/computed-functions/angular/src/styles.css b/cockpit/render/computed-functions/angular/src/styles.css index 9d3775bff..10f81ea7c 100644 --- a/cockpit/render/computed-functions/angular/src/styles.css +++ b/cockpit/render/computed-functions/angular/src/styles.css @@ -1,4 +1,12 @@ -/* Global styles for the computed-functions capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} @keyframes shimmer { 0% { background-position: -200% 0; } @@ -6,7 +14,12 @@ } .skeleton-shimmer { - background: linear-gradient(90deg, rgb(31 41 55 / 0) 0%, rgb(55 65 81 / 0.3) 50%, rgb(31 41 55 / 0) 100%); + background: linear-gradient( + 90deg, + transparent 0%, + var(--ngaf-chat-surface-alt) 50%, + transparent 100% + ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } diff --git a/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts b/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts index b76de5010..645977800 100644 --- a/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts +++ b/cockpit/render/element-rendering/angular/src/app/element-rendering.component.ts @@ -19,11 +19,11 @@ import { ELEMENT_RENDERING_SPECS } from './specs'; standalone: true, template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) {
-
-
+
+
} `, @@ -47,17 +47,17 @@ class DemoTextComponent { imports: [RenderElementComponent], template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) { -
+
} @for (key of childKeys(); track key) { } @if (!childKeys().length && loading()) {
-
-
+
+
} `, @@ -80,12 +80,12 @@ class DemoHeadingComponent { standalone: true, imports: [RenderElementComponent], template: ` -
@if (title()) { -

{{ title() }}

+

{{ title() }}

} @else if (loading()) { -
+
} @if (childKeys().length) { @for (key of childKeys(); track key) { @@ -93,8 +93,8 @@ class DemoHeadingComponent { } } @else if (loading()) {
-
-
+
+
}
@@ -117,11 +117,11 @@ class DemoCardComponent {
- Spec: + Spec: @for (spec of specs; track spec.label; let i = $index) { @@ -130,11 +130,11 @@ class DemoCardComponent {
-
Live Render Output
+
Live Render Output
@if (simulator.spec(); as renderedSpec) { } @else { -
Press play to start streaming...
+
Press play to start streaming...
}
@@ -142,26 +142,26 @@ class DemoCardComponent {
-
Streaming JSON
- 
{{ simulator.rawJson() }}|
+
Streaming JSON
+ 
{{ simulator.rawJson() }}|
{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} - {{ percent() }}% + {{ percent() }}%
-
-
Controls
+
+
Controls
-

+

Toggles /showDetail in the state store. Elements with visible: bind react instantly.

@@ -169,7 +169,7 @@ class DemoCardComponent {
- + `, }) diff --git a/cockpit/render/element-rendering/angular/src/index.html b/cockpit/render/element-rendering/angular/src/index.html index 381c92482..448898ade 100644 --- a/cockpit/render/element-rendering/angular/src/index.html +++ b/cockpit/render/element-rendering/angular/src/index.html @@ -1,13 +1,12 @@ - + Render Element Rendering — Angular - - + diff --git a/cockpit/render/element-rendering/angular/src/styles.css b/cockpit/render/element-rendering/angular/src/styles.css index 0d333e182..bf52ea652 100644 --- a/cockpit/render/element-rendering/angular/src/styles.css +++ b/cockpit/render/element-rendering/angular/src/styles.css @@ -1,4 +1,12 @@ -/* Global styles for the element-rendering capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} @keyframes shimmer { 0% { background-position: -200% 0; } diff --git a/cockpit/render/registry/angular/src/app/registry.component.ts b/cockpit/render/registry/angular/src/app/registry.component.ts index ec5e20d12..cc0f87eae 100644 --- a/cockpit/render/registry/angular/src/app/registry.component.ts +++ b/cockpit/render/registry/angular/src/app/registry.component.ts @@ -19,11 +19,11 @@ import { REGISTRY_SPECS } from './specs'; standalone: true, template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) {
-
-
+
+
} `, @@ -47,17 +47,17 @@ class DemoTextComponent { imports: [RenderElementComponent], template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) { -
+
} @for (key of childKeys(); track key) { } @if (!childKeys().length && loading()) {
-
-
+
+
} `, @@ -80,9 +80,9 @@ class DemoHeadingComponent { standalone: true, template: ` @if (label()) { - {{ label() }} + {{ label() }} } @else if (loading()) { -
+
} `, }) @@ -100,12 +100,12 @@ class DemoBadgeComponent { standalone: true, imports: [RenderElementComponent], template: ` -
@if (title()) { -

{{ title() }}

+

{{ title() }}

} @else if (loading()) { -
+
} @if (childKeys().length) { @for (key of childKeys(); track key) { @@ -113,8 +113,8 @@ class DemoBadgeComponent { } } @else if (loading()) {
-
-
+
+
}
@@ -137,11 +137,11 @@ class DemoCardComponent {
- Spec: + Spec: @for (spec of specs; track spec.label; let i = $index) { @@ -150,11 +150,11 @@ class DemoCardComponent {
-
Live Render Output
+
Live Render Output
@if (simulator.spec(); as renderedSpec) { } @else { -
Press play to start streaming...
+
Press play to start streaming...
}
@@ -162,17 +162,17 @@ class DemoCardComponent {
-
Streaming JSON
- 
{{ simulator.rawJson() }}|
+
Streaming JSON
+ 
{{ simulator.rawJson() }}|
- {{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} - {{ percent() }}% + {{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} + {{ percent() }}%
- + `, }) diff --git a/cockpit/render/registry/angular/src/index.html b/cockpit/render/registry/angular/src/index.html index 44fec203e..be2859511 100644 --- a/cockpit/render/registry/angular/src/index.html +++ b/cockpit/render/registry/angular/src/index.html @@ -5,9 +5,8 @@ Render Registry — Angular - - + diff --git a/cockpit/render/registry/angular/src/styles.css b/cockpit/render/registry/angular/src/styles.css index eda2f7b03..95ef7d08d 100644 --- a/cockpit/render/registry/angular/src/styles.css +++ b/cockpit/render/registry/angular/src/styles.css @@ -1,5 +1,14 @@ -/* Global styles for the registry capability demo */ +@import "@ngaf/example-layouts/theme.css"; +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} + +/* Skeleton shimmer for streaming render skeletons */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } diff --git a/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts b/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts index 06487931b..f1385d5ce 100644 --- a/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts +++ b/cockpit/render/repeat-loops/angular/src/app/repeat-loops.component.ts @@ -19,11 +19,11 @@ import { REPEAT_LOOPS_SPECS } from './specs'; standalone: true, template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) {
-
-
+
+
} `, @@ -47,17 +47,17 @@ class DemoTextComponent { imports: [RenderElementComponent], template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) { -
+
} @for (key of childKeys(); track key) { } @if (!childKeys().length && loading()) {
-
-
+
+
} `, @@ -80,12 +80,12 @@ class DemoHeadingComponent { standalone: true, imports: [RenderElementComponent], template: ` -
@if (title()) { -

{{ title() }}

+

{{ title() }}

} @else if (loading()) { -
+
} @if (childKeys().length) { @for (key of childKeys(); track key) { @@ -93,8 +93,8 @@ class DemoHeadingComponent { } } @else if (loading()) {
-
-
+
+
}
@@ -117,11 +117,11 @@ class DemoCardComponent {
- Spec: + Spec: @for (spec of specs; track spec.label; let i = $index) { @@ -130,11 +130,11 @@ class DemoCardComponent {
-
Live Render Output
+
Live Render Output
@if (simulator.spec(); as renderedSpec) { } @else { -
Press play to start streaming...
+
Press play to start streaming...
}
@@ -142,17 +142,17 @@ class DemoCardComponent {
-
Streaming JSON
- 
{{ simulator.rawJson() }}|
+
Streaming JSON
+ 
{{ simulator.rawJson() }}|
{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} - {{ percent() }}% + {{ percent() }}%
-
-
List Controls
+
+
List Controls
}
} -

+

Modify /items array in the store.

@@ -178,7 +178,7 @@ class DemoCardComponent {
- + `, }) diff --git a/cockpit/render/repeat-loops/angular/src/index.html b/cockpit/render/repeat-loops/angular/src/index.html index dbfa907c8..2644f8654 100644 --- a/cockpit/render/repeat-loops/angular/src/index.html +++ b/cockpit/render/repeat-loops/angular/src/index.html @@ -1,13 +1,12 @@ - + Render Repeat Loops — Angular - - + diff --git a/cockpit/render/repeat-loops/angular/src/styles.css b/cockpit/render/repeat-loops/angular/src/styles.css index 61f71f9dc..bf52ea652 100644 --- a/cockpit/render/repeat-loops/angular/src/styles.css +++ b/cockpit/render/repeat-loops/angular/src/styles.css @@ -1,4 +1,12 @@ -/* Global styles for the repeat-loops capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} @keyframes shimmer { 0% { background-position: -200% 0; } diff --git a/cockpit/render/shared/streaming-timeline.component.ts b/cockpit/render/shared/streaming-timeline.component.ts index ffb819c52..4041d4f7b 100644 --- a/cockpit/render/shared/streaming-timeline.component.ts +++ b/cockpit/render/shared/streaming-timeline.component.ts @@ -6,9 +6,9 @@ import { StreamingSimulator } from './streaming-simulator'; selector: 'streaming-timeline', standalone: true, template: ` -
+
diff --git a/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts b/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts index 158df57e6..f7ef10428 100644 --- a/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts +++ b/cockpit/render/spec-rendering/angular/src/app/spec-rendering.component.ts @@ -19,11 +19,11 @@ import { SPEC_RENDERING_SPECS } from './specs'; standalone: true, template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) {
-
-
+
+
} `, @@ -47,17 +47,17 @@ class DemoTextComponent { imports: [RenderElementComponent], template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) { -
+
} @for (key of childKeys(); track key) { } @if (!childKeys().length && loading()) {
-
-
+
+
} `, @@ -94,11 +94,11 @@ class DemoBadgeComponent { standalone: true, imports: [RenderElementComponent], template: ` -
+
@if (title()) { -

{{ title() }}

+

{{ title() }}

} @else if (loading()) { -
+
} @if (childKeys().length) { @for (key of childKeys(); track key) { @@ -106,8 +106,8 @@ class DemoBadgeComponent { } } @else if (loading()) {
-
-
+
+
}
@@ -130,11 +130,11 @@ class DemoCardComponent {
- Spec: + Spec: @for (spec of specs; track spec.label; let i = $index) { @@ -143,11 +143,11 @@ class DemoCardComponent {
-
Live Render Output
+
Live Render Output
@if (simulator.spec(); as renderedSpec) { } @else { -
Press play to start streaming...
+
Press play to start streaming...
}
@@ -155,17 +155,17 @@ class DemoCardComponent {
-
Streaming JSON
- 
{{ simulator.rawJson() }}|
+
Streaming JSON
+ 
{{ simulator.rawJson() }}|
{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} - {{ percent() }}% + {{ percent() }}%
- + `, }) diff --git a/cockpit/render/spec-rendering/angular/src/index.html b/cockpit/render/spec-rendering/angular/src/index.html index 8ba4b2d89..034ac4e14 100644 --- a/cockpit/render/spec-rendering/angular/src/index.html +++ b/cockpit/render/spec-rendering/angular/src/index.html @@ -5,9 +5,8 @@ Render Spec Rendering — Angular - - + diff --git a/cockpit/render/spec-rendering/angular/src/styles.css b/cockpit/render/spec-rendering/angular/src/styles.css index 1d1e4d5a9..bf52ea652 100644 --- a/cockpit/render/spec-rendering/angular/src/styles.css +++ b/cockpit/render/spec-rendering/angular/src/styles.css @@ -1,4 +1,12 @@ -/* Global styles for the spec-rendering capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} @keyframes shimmer { 0% { background-position: -200% 0; } diff --git a/cockpit/render/state-management/angular/src/app/state-management.component.ts b/cockpit/render/state-management/angular/src/app/state-management.component.ts index 2b0def61d..fd8f524cc 100644 --- a/cockpit/render/state-management/angular/src/app/state-management.component.ts +++ b/cockpit/render/state-management/angular/src/app/state-management.component.ts @@ -19,11 +19,11 @@ import { STATE_MANAGEMENT_SPECS } from './specs'; standalone: true, template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) {
-
-
+
+
} `, @@ -47,17 +47,17 @@ class DemoTextComponent { imports: [RenderElementComponent], template: ` @if (displayContent()) { -

{{ displayContent() }}

+

{{ displayContent() }}

} @else if (loading()) { -
+
} @for (key of childKeys(); track key) { } @if (!childKeys().length && loading()) {
-
-
+
+
} `, @@ -81,13 +81,13 @@ class DemoHeadingComponent { template: ` @if (label() || value()) {
- {{ label() }}: - {{ value() }} + {{ label() }}: + {{ value() }}
} @else if (loading()) {
-
-
+
+
} `, @@ -107,12 +107,12 @@ class DemoLabelComponent { standalone: true, imports: [RenderElementComponent], template: ` -
@if (title()) { -

{{ title() }}

+

{{ title() }}

} @else if (loading()) { -
+
} @if (childKeys().length) { @for (key of childKeys(); track key) { @@ -120,8 +120,8 @@ class DemoLabelComponent { } } @else if (loading()) {
-
-
+
+
}
@@ -144,11 +144,11 @@ class DemoCardComponent {
- Spec: + Spec: @for (spec of specs; track spec.label; let i = $index) { @@ -157,11 +157,11 @@ class DemoCardComponent {
-
Live Render Output
+
Live Render Output
@if (simulator.spec(); as renderedSpec) { } @else { -
Press play to start streaming...
+
Press play to start streaming...
}
@@ -169,42 +169,42 @@ class DemoCardComponent {
-
Streaming JSON
- 
{{ simulator.rawJson() }}|
+
Streaming JSON
+ 
{{ simulator.rawJson() }}|
{{ simulator.playing() ? 'Streaming...' : simulator.position() >= simulator.total() ? 'Complete' : 'Paused' }} - {{ percent() }}% + {{ percent() }}%
-
-
State Controls
+
+
State Controls
- +
- +
- -
-

+

Edit values to update the state store. Rendered elements with $state bindings react.

@@ -212,7 +212,7 @@ class DemoCardComponent {
- + `, }) diff --git a/cockpit/render/state-management/angular/src/index.html b/cockpit/render/state-management/angular/src/index.html index 7066cb4c0..4ecf03f2c 100644 --- a/cockpit/render/state-management/angular/src/index.html +++ b/cockpit/render/state-management/angular/src/index.html @@ -5,9 +5,8 @@ Render State Management — Angular - - + diff --git a/cockpit/render/state-management/angular/src/styles.css b/cockpit/render/state-management/angular/src/styles.css index 893982316..bf52ea652 100644 --- a/cockpit/render/state-management/angular/src/styles.css +++ b/cockpit/render/state-management/angular/src/styles.css @@ -1,4 +1,12 @@ -/* Global styles for the state-management capability demo */ +@import "@ngaf/example-layouts/theme.css"; + +html, body { + height: 100%; + margin: 0; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); +} @keyframes shimmer { 0% { background-position: -200% 0; }