AC-357322: Snippets and Prompts for the Building Custom Control with AI Ascent Session

ModernUI/BuildingCustomControls/CodeSnippets/Lesson1.1/Step2/record-insights-panel.ts

@@ -0,0 +1,79 @@
+import { EventAggregator } from "aurelia-event-aggregator";
+import { bindable, Disposable } from "aurelia-framework";
+import { autoinject, IScreenApiResult } from "client-controls";
+
+export class RecordInsightsPanelCustomElement {
+    @bindable title: string = "Record Insights Panel";
+    @bindable status: string = "";
+    @bindable warningMessage: string = "";
+    @bindable details: string = "";
+    @bindable collapsed: boolean = false;
+    @bindable accent: string = "neutral";
+
+    screenCaption: string = "";
+    lastScreenUpdate: string = "";
+    hasWarning: boolean = false;
+
+    @autoinject
+    public eventAggregator!: EventAggregator;
+
+    private subscriptions: Disposable[] = [];
+
+    attached() {
+        this.hasWarning = !!this.warningMessage?.trim();
+
+        this.subscriptions.push(
+            this.eventAggregator.subscribe(
+                "screen-updated",
+                (screenData: IScreenApiResult) => {
+                    this.screenCaption = `Screen ${screenData.screenID}`;
+                    this.lastScreenUpdate = new Date().toLocaleTimeString();
+                }
+            )
+        );
+    }
+
+    detached() {
+        this.subscriptions.forEach(s => s?.dispose());
+        this.subscriptions = [];
+    }
+
+    warningMessageChanged(newValue: string) {
+        this.hasWarning = !!newValue?.trim();
+    }
+
+    toggleDetails() {
+        this.collapsed = !this.collapsed;
+    }
+
+    dismissWarning() {
+        this.warningMessage = "";
+        this.hasWarning = false;
+    }
+
+    get statusClass(): string {
+        switch ((this.accent || "").toLowerCase()) {
+            case "success":
+                return "accent-success";
+            case "warning":
+                return "accent-warning";
+            case "danger":
+                return "accent-danger";
+            default:
+                return "accent-neutral";
+        }
+    }
+
+    get badgeClass(): string {
+        switch ((this.accent || "").toLowerCase()) {
+            case "success":
+                return "badge-success";
+            case "warning":
+                return "badge-warning";
+            case "danger":
+                return "badge-danger";
+            default:
+                return "badge-neutral";
+        }
+    }
+}

ModernUI/BuildingCustomControls/CodeSnippets/Lesson1.1/Step3/record-insights-panel.html

@@ -0,0 +1,42 @@
+<template>
+    <require from="./record-insights-panel.scss"></require>
+
+    <section class="record-insights-panel ${statusClass}">
+        <header class="panel-header">
+            <div class="panel-header-main">
+                <div class="panel-title-row">
+                    <h3 class="panel-title">${title}</h3>
+                    <span if.bind="status" class="status-badge ${badgeClass}">
+                       ${status}
+                    </span>
+                </div>
+
+                <div class="panel-subtitle">
+                    <span if.bind="screenCaption">${screenCaption}</span>
+                    <span if.bind="lastScreenUpdate">
+                        • Updated ${lastScreenUpdate}
+                    </span>
+                </div>
+            </div>
+
+            <qp-button
+                class="toggle-button"
+                caption.bind="collapsed ? 'Show Details' : 'Hide Details'"
+                click.capture="toggleDetails()">
+            </qp-button>
+        </header>
+
+        <div if.bind="hasWarning" class="warning-box">
+            <span>${warningMessage}</span>
+            <qp-button
+                class="dismiss-button"
+                caption="Dismiss"
+                click.capture="dismissWarning()">
+            </qp-button>
+        </div>
+
+        <div if.bind="!collapsed" class="panel-body">
+            <div if.bind="details" class="details-block">${details}</div>
+        </div>
+    </section>
+</template>

ModernUI/BuildingCustomControls/CodeSnippets/Lesson1.1/Step4/record-insights-panel.scss

@@ -0,0 +1,112 @@
+.record-insights-panel {
+    position: relative;
+    box-sizing: border-box;
+    border: 1px solid #d6d9de;
+    border-left-width: 5px;
+    border-radius: 8px;
+    padding: 14px 16px;
+    margin: 0 0 16px 0;
+    background: #fff;
+}
+
+.record-insights-panel.accent-warning {
+    border-left-color: #b26a00;
+}
+
+.record-insights-panel.accent-success {
+    border-left-color: #2e8540;
+}
+
+.record-insights-panel.accent-danger {
+    border-left-color: #c62828;
+}
+
+.record-insights-panel.accent-neutral {
+    border-left-color: #7a869a;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.panel-header-main {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.panel-title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.panel-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.panel-subtitle {
+    font-size: 12px;
+    line-height: 1.4;
+    color: #5f6b7a;
+}
+
+.status-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+.badge-neutral {
+    background: #eef2f7;
+    color: #5f6b7a;
+}
+
+.badge-success {
+    background: #e6f4ea;
+    color: #2e8540;
+}
+
+.badge-warning {
+    background: #fff4db;
+    color: #b26a00;
+}
+
+.badge-danger {
+    background: #fdecea;
+    color: #c62828;
+}
+
+.warning-box {
+    margin-top: 12px;
+    padding: 10px 12px;
+    background: #fff4db;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.panel-body {
+    margin-top: 12px;
+}
+
+.details-block {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.toggle-button,
+.dismiss-button {
+    white-space: nowrap;
+}