@forgeroute/ui 0.4.20 → 0.4.22

package/fesm2022/forgeroute-ui.mjs

@@ -496,6 +496,7 @@ var PaginationComponent = class PaginationComponent {
 		this.pageSize = input(25, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
 		this.totalItems = input(0, ...ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []);
 		this.detached = input(false, ...ngDevMode ? [{ debugName: "detached" }] : /* istanbul ignore next */ []);
+		this.embedded = input(false, ...ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []);
 		this.pageChange = output();
 		this.totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()) || 1, ...ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []);
 		this.startItem = computed(() => (this.page() - 1) * this.pageSize() + 1, ...ngDevMode ? [{ debugName: "startItem" }] : /* istanbul ignore next */ []);
@@ -561,10 +562,20 @@ var PaginationComponent = class PaginationComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				embedded: {
+					classPropertyName: "embedded",
+					publicName: "embedded",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { pageChange: "pageChange" },
-			host: { properties: { "class.pagination-detached": "detached()" } },
+			host: { properties: {
+				"class.pagination-detached": "detached()",
+				"class.pagination-embedded": "embedded()"
+			} },
 			ngImport: i0,
 			template: `
     @if (totalItems() > pageSize()) {
@@ -589,7 +600,7 @@ var PaginationComponent = class PaginationComponent {
     }
   `,
 			isInline: true,
-			styles: [".pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 10px 10px}:host(.pagination-detached) .pagination{border:1px solid #e2e8f0;border-radius:10px;margin-top:4px}.pagination-info{font-size:.8125rem;color:#64748b}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-nav{width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#334155;font-family:inherit;transition:background .1s}.pagination-nav:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.pagination-nav:disabled{opacity:.4;cursor:default}.pagination-nav:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-page{min-width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .1s,border-color .1s}.pagination-page:hover{background:#f8fafc;border-color:#cbd5e1}.pagination-page.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.pagination-page:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-ellipsis{padding:0 4px;color:#94a3b8;font-size:.8125rem}@media(max-width:640px),(pointer:coarse){.pagination-controls{flex-wrap:wrap;justify-content:center}.pagination-nav{width:44px;height:44px}.pagination-page{min-width:44px;height:44px}}@media(max-width:480px){.pagination{justify-content:center;padding:10px 12px}.pagination-info{width:100%;text-align:center}}\n"],
+			styles: [".pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 10px 10px}:host(.pagination-detached) .pagination{border:1px solid #e2e8f0;border-radius:10px;margin-top:4px}:host(.pagination-embedded) .pagination{background:transparent;border:none;border-radius:0;padding:0;margin-top:0}.pagination-info{font-size:.8125rem;color:#64748b}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-nav{width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#334155;font-family:inherit;transition:background .1s}.pagination-nav:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.pagination-nav:disabled{opacity:.4;cursor:default}.pagination-nav:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-page{min-width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .1s,border-color .1s}.pagination-page:hover{background:#f8fafc;border-color:#cbd5e1}.pagination-page.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.pagination-page:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-ellipsis{padding:0 4px;color:#94a3b8;font-size:.8125rem}@media(max-width:640px),(pointer:coarse){.pagination-controls{flex-wrap:wrap;justify-content:center}.pagination-nav{width:44px;height:44px}.pagination-page{min-width:44px;height:44px}}@media(max-width:480px){.pagination{justify-content:center;padding:10px 12px}.pagination-info{width:100%;text-align:center}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -605,7 +616,10 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-pagination",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			host: { "[class.pagination-detached]": "detached()" },
+			host: {
+				"[class.pagination-detached]": "detached()",
+				"[class.pagination-embedded]": "embedded()"
+			},
 			template: `
     @if (totalItems() > pageSize()) {
       <nav class="pagination" role="navigation" aria-label="Pagination">
@@ -628,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({
       </nav>
     }
   `,
-			styles: [".pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 10px 10px}:host(.pagination-detached) .pagination{border:1px solid #e2e8f0;border-radius:10px;margin-top:4px}.pagination-info{font-size:.8125rem;color:#64748b}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-nav{width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#334155;font-family:inherit;transition:background .1s}.pagination-nav:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.pagination-nav:disabled{opacity:.4;cursor:default}.pagination-nav:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-page{min-width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .1s,border-color .1s}.pagination-page:hover{background:#f8fafc;border-color:#cbd5e1}.pagination-page.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.pagination-page:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-ellipsis{padding:0 4px;color:#94a3b8;font-size:.8125rem}@media(max-width:640px),(pointer:coarse){.pagination-controls{flex-wrap:wrap;justify-content:center}.pagination-nav{width:44px;height:44px}.pagination-page{min-width:44px;height:44px}}@media(max-width:480px){.pagination{justify-content:center;padding:10px 12px}.pagination-info{width:100%;text-align:center}}\n"]
+			styles: [".pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 10px 10px}:host(.pagination-detached) .pagination{border:1px solid #e2e8f0;border-radius:10px;margin-top:4px}:host(.pagination-embedded) .pagination{background:transparent;border:none;border-radius:0;padding:0;margin-top:0}.pagination-info{font-size:.8125rem;color:#64748b}.pagination-controls{display:flex;align-items:center;gap:4px}.pagination-nav{width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#334155;font-family:inherit;transition:background .1s}.pagination-nav:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.pagination-nav:disabled{opacity:.4;cursor:default}.pagination-nav:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-page{min-width:32px;height:32px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;font-size:.8125rem;font-weight:500;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .1s,border-color .1s}.pagination-page:hover{background:#f8fafc;border-color:#cbd5e1}.pagination-page.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.pagination-page:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.pagination-ellipsis{padding:0 4px;color:#94a3b8;font-size:.8125rem}@media(max-width:640px),(pointer:coarse){.pagination-controls{flex-wrap:wrap;justify-content:center}.pagination-nav{width:44px;height:44px}.pagination-page{min-width:44px;height:44px}}@media(max-width:480px){.pagination{justify-content:center;padding:10px 12px}.pagination-info{width:100%;text-align:center}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -664,6 +678,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		embedded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "embedded",
+				required: false
+			}]
+		}],
 		pageChange: [{
 			type: i0.Output,
 			args: ["pageChange"]
@@ -1472,9 +1494,33 @@ var AvatarComponent = class AvatarComponent {
 		this.initials = input.required(...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
 		this.name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
 		this.size = input(32, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.imageUrl = input(void 0, ...ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []);
+		this.editable = input(false, ...ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []);
+		this.editLabel = input("Change photo", ...ngDevMode ? [{ debugName: "editLabel" }] : /* istanbul ignore next */ []);
+		this.busy = input(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+		this.editClick = output();
+		this.imageError = output();
+		this.failedUrl = signal(null, ...ngDevMode ? [{ debugName: "failedUrl" }] : /* istanbul ignore next */ []);
+		this.showImage = computed(() => {
+			const url = this.imageUrl();
+			return !!url && this.failedUrl() !== url;
+		}, ...ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []);
+		this.badgeSize = computed(() => Math.max(18, Math.round(this.size() * .3)), ...ngDevMode ? [{ debugName: "badgeSize" }] : /* istanbul ignore next */ []);
 		this.bg = computed(() => BG_PALETTE[colorIndex(this.initials())], ...ngDevMode ? [{ debugName: "bg" }] : /* istanbul ignore next */ []);
 		this.color = computed(() => COLOR_PALETTE[colorIndex(this.initials())], ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 	}
+	onImageError() {
+		this.failedUrl.set(this.imageUrl() ?? null);
+		this.imageError.emit();
+	}
+	onEdit() {
+		if (this.busy()) return;
+		this.editClick.emit();
+	}
+	onKey(event) {
+		event.preventDefault();
+		this.onEdit();
+	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
@@ -1487,7 +1533,7 @@ var AvatarComponent = class AvatarComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.1.0",
+			minVersion: "17.0.0",
 			version: "22.2.2",
 			type: AvatarComponent,
 			isStandalone: true,
@@ -1513,24 +1559,91 @@ var AvatarComponent = class AvatarComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				imageUrl: {
+					classPropertyName: "imageUrl",
+					publicName: "imageUrl",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editable: {
+					classPropertyName: "editable",
+					publicName: "editable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editLabel: {
+					classPropertyName: "editLabel",
+					publicName: "editLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				busy: {
+					classPropertyName: "busy",
+					publicName: "busy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
+			outputs: {
+				editClick: "editClick",
+				imageError: "imageError"
+			},
 			ngImport: i0,
 			template: `
-    <span
-      class="avatar"
-      role="img"
-      [style.width.px]="size()"
-      [style.height.px]="size()"
-      [style.font-size.px]="size() * 0.38"
-      [style.background]="bg()"
-      [style.color]="color()"
-      [attr.aria-label]="name() || initials()">
-      {{ initials() }}
-    </span>
+    @if (editable()) {
+      <span class="av-edit" role="button" [attr.tabindex]="busy() ? -1 : 0" [attr.aria-label]="editLabel()" [attr.title]="editLabel()"
+        [attr.aria-busy]="busy() ? 'true' : null" [attr.aria-disabled]="busy() ? 'true' : null" [class.av-busy]="busy()"
+        [style.width.px]="size()" [style.height.px]="size()"
+        (click)="onEdit()" (keydown.enter)="onKey($event)" (keydown.space)="onKey($event)">
+        <ng-container [ngTemplateOutlet]="face" />
+        <span class="av-badge" aria-hidden="true" [style.width.px]="badgeSize()" [style.height.px]="badgeSize()">
+          @if (busy()) {
+            <span class="av-spinner" [style.width.px]="badgeSize() * 0.6" [style.height.px]="badgeSize() * 0.6"></span>
+          } @else {
+            <svg [attr.width]="badgeSize() * 0.6" [attr.height]="badgeSize() * 0.6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+          }
+        </span>
+      </span>
+    } @else {
+      <ng-container [ngTemplateOutlet]="face" />
+    }
+    <ng-template #face>
+      @if (showImage()) {
+        <img class="avatar avatar-img" [src]="imageUrl()" [attr.alt]="editable() ? '' : (name() || initials())"
+          [style.width.px]="size()" [style.height.px]="size()" (error)="onImageError()" />
+      } @else {
+        <span
+          class="avatar"
+          [attr.role]="editable() ? null : 'img'"
+          [attr.aria-hidden]="editable() ? 'true' : null"
+          [style.width.px]="size()"
+          [style.height.px]="size()"
+          [style.font-size.px]="size() * 0.38"
+          [style.background]="bg()"
+          [style.color]="color()"
+          [attr.aria-label]="editable() ? null : (name() || initials())">
+          {{ initials() }}
+        </span>
+      }
+    </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"],
+			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}.avatar-img{display:block;object-fit:cover}.av-edit{position:relative;display:inline-flex;flex-shrink:0;border-radius:50%;cursor:pointer}.av-edit:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.av-edit.av-busy{cursor:progress}.av-edit.av-busy .avatar{opacity:.55}.av-badge{position:absolute;right:-2px;bottom:-2px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#475569;border:1px solid #cbd5e1;box-shadow:0 1px 2px #0f172a1f}@media(hover:hover){.av-edit:hover:not(.av-busy) .av-badge{color:#0f172a;border-color:#94a3b8}}.av-spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:av-spin .6s linear infinite}@keyframes av-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.av-spinner{animation-duration:2s}}@media(pointer:coarse){.av-edit:after{content:\"\";position:absolute;inset:-6px}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -1545,21 +1658,47 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-avatar",
 			standalone: true,
+			imports: [NgTemplateOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
-    <span
-      class="avatar"
-      role="img"
-      [style.width.px]="size()"
-      [style.height.px]="size()"
-      [style.font-size.px]="size() * 0.38"
-      [style.background]="bg()"
-      [style.color]="color()"
-      [attr.aria-label]="name() || initials()">
-      {{ initials() }}
-    </span>
+    @if (editable()) {
+      <span class="av-edit" role="button" [attr.tabindex]="busy() ? -1 : 0" [attr.aria-label]="editLabel()" [attr.title]="editLabel()"
+        [attr.aria-busy]="busy() ? 'true' : null" [attr.aria-disabled]="busy() ? 'true' : null" [class.av-busy]="busy()"
+        [style.width.px]="size()" [style.height.px]="size()"
+        (click)="onEdit()" (keydown.enter)="onKey($event)" (keydown.space)="onKey($event)">
+        <ng-container [ngTemplateOutlet]="face" />
+        <span class="av-badge" aria-hidden="true" [style.width.px]="badgeSize()" [style.height.px]="badgeSize()">
+          @if (busy()) {
+            <span class="av-spinner" [style.width.px]="badgeSize() * 0.6" [style.height.px]="badgeSize() * 0.6"></span>
+          } @else {
+            <svg [attr.width]="badgeSize() * 0.6" [attr.height]="badgeSize() * 0.6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+          }
+        </span>
+      </span>
+    } @else {
+      <ng-container [ngTemplateOutlet]="face" />
+    }
+    <ng-template #face>
+      @if (showImage()) {
+        <img class="avatar avatar-img" [src]="imageUrl()" [attr.alt]="editable() ? '' : (name() || initials())"
+          [style.width.px]="size()" [style.height.px]="size()" (error)="onImageError()" />
+      } @else {
+        <span
+          class="avatar"
+          [attr.role]="editable() ? null : 'img'"
+          [attr.aria-hidden]="editable() ? 'true' : null"
+          [style.width.px]="size()"
+          [style.height.px]="size()"
+          [style.font-size.px]="size() * 0.38"
+          [style.background]="bg()"
+          [style.color]="color()"
+          [attr.aria-label]="editable() ? null : (name() || initials())">
+          {{ initials() }}
+        </span>
+      }
+    </ng-template>
   `,
-			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}\n"]
+			styles: [":host{display:inline-flex;flex-shrink:0}.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none;flex-shrink:0}.avatar-img{display:block;object-fit:cover}.av-edit{position:relative;display:inline-flex;flex-shrink:0;border-radius:50%;cursor:pointer}.av-edit:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.av-edit.av-busy{cursor:progress}.av-edit.av-busy .avatar{opacity:.55}.av-badge{position:absolute;right:-2px;bottom:-2px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#475569;border:1px solid #cbd5e1;box-shadow:0 1px 2px #0f172a1f}@media(hover:hover){.av-edit:hover:not(.av-busy) .av-badge{color:#0f172a;border-color:#94a3b8}}.av-spinner{display:block;box-sizing:border-box;border:2px solid rgba(100,116,139,.3);border-top-color:currentColor;border-radius:50%;animation:av-spin .6s linear infinite}@keyframes av-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.av-spinner{animation-duration:2s}}@media(pointer:coarse){.av-edit:after{content:\"\";position:absolute;inset:-6px}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -1586,6 +1725,46 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "size",
 				required: false
 			}]
+		}],
+		imageUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageUrl",
+				required: false
+			}]
+		}],
+		editable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editable",
+				required: false
+			}]
+		}],
+		editLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editLabel",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		editClick: [{
+			type: i0.Output,
+			args: ["editClick"]
+		}],
+		imageError: [{
+			type: i0.Output,
+			args: ["imageError"]
 		}]
 	}
 });
@@ -4316,6 +4495,9 @@ const EXTRA_ICONS = {
 	"card": "M3 4h18a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M1 10h22",
 	"view-off": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z M3 3l18 18",
 	"refund": "M3 10h10a8 8 0 0 1 8 8v2 M3 10l6 6 M3 10l6-6",
+	"link": "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71 M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+	"chart": "M18 20V10 M12 20V4 M6 20v-6",
+	"save": "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z M17 21v-8H7v8 M7 3v5h8",
 	"bank": "M3 21h18 M3 10h18 M5 6l7-3 7 3 M4 10v11 M20 10v11 M8 14v3 M12 14v3 M16 14v3"
 };
 function iconPath(name) {
@@ -7333,7 +7515,7 @@ var SelectComponent = class SelectComponent {
             <option value="" [disabled]="true" [selected]="_value() === ''">{{ placeholder() }}</option>
           }
           @for (opt of options(); track opt.value; let i = $index) {
-            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [attr.title]="opt.description || null">{{ opt.badge ? opt.label + ' — ' + opt.badge : opt.label }}</option>
+            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [disabled]="!!opt.disabled" [attr.title]="opt.description || null">{{ opt.badge ? opt.label + ' — ' + opt.badge : opt.label }}</option>
           }
         </select>
         <svg class="sl-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
@@ -7404,7 +7586,7 @@ i0.ɵɵngDeclareClassMetadata({
             <option value="" [disabled]="true" [selected]="_value() === ''">{{ placeholder() }}</option>
           }
           @for (opt of options(); track opt.value; let i = $index) {
-            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [attr.title]="opt.description || null">{{ opt.badge ? opt.label + ' — ' + opt.badge : opt.label }}</option>
+            <option [value]="_key(opt)" [selected]="i === _selectedIndex()" [disabled]="!!opt.disabled" [attr.title]="opt.description || null">{{ opt.badge ? opt.label + ' — ' + opt.badge : opt.label }}</option>
           }
         </select>
         <svg class="sl-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
@@ -9231,6 +9413,15 @@ var EmptyStateComponent = class EmptyStateComponent {
           @case ('shield') {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
           }
+          @case ('pipeline') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8.5V19l-4 2v-8.5z"/></svg>
+          }
+          @case ('property') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/><path d="M16 11h2a2 2 0 0 1 2 2v8"/><path d="M2 21h20"/><path d="M8 7h4M8 11h4M8 15h4"/></svg>
+          }
+          @case ('clipboard') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="18" rx="2"/><path d="M9 2h6v4H9z"/><path d="m8.5 12 1.5 1.5 2.5-3"/><path d="M14.5 12.5H16M8.5 18H16"/></svg>
+          }
           @default {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
           }
@@ -9305,6 +9496,15 @@ i0.ɵɵngDeclareClassMetadata({
           @case ('shield') {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
           }
+          @case ('pipeline') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 4h18l-7 8.5V19l-4 2v-8.5z"/></svg>
+          }
+          @case ('property') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/><path d="M16 11h2a2 2 0 0 1 2 2v8"/><path d="M2 21h20"/><path d="M8 7h4M8 11h4M8 15h4"/></svg>
+          }
+          @case ('clipboard') {
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="14" height="18" rx="2"/><path d="M9 2h6v4H9z"/><path d="m8.5 12 1.5 1.5 2.5-3"/><path d="M14.5 12.5H16M8.5 18H16"/></svg>
+          }
           @default {
             <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
           }
@@ -9985,7 +10185,8 @@ var DataTableComponent = class DataTableComponent {
 		this.showMoreActions = input(true, ...ngDevMode ? [{ debugName: "showMoreActions" }] : /* istanbul ignore next */ []);
 		this.showSearch = input(true, ...ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []);
 		this.showQuickTabs = input(true, ...ngDevMode ? [{ debugName: "showQuickTabs" }] : /* istanbul ignore next */ []);
-		this._showHeader = computed(() => this.showSearch() || this.showToolbar() || this._effectiveTabs().length > 0, ...ngDevMode ? [{ debugName: "_showHeader" }] : /* istanbul ignore next */ []);
+		this.tableTitle = input("", ...ngDevMode ? [{ debugName: "tableTitle" }] : /* istanbul ignore next */ []);
+		this._showHeader = computed(() => !!this.tableTitle() || this.showSearch() || this.showToolbar() || this._effectiveTabs().length > 0, ...ngDevMode ? [{ debugName: "_showHeader" }] : /* istanbul ignore next */ []);
 		this.countsEndpoint = input("", ...ngDevMode ? [{ debugName: "countsEndpoint" }] : /* istanbul ignore next */ []);
 		this.params = input(null, ...ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []);
 		this.tableButtons = input([], ...ngDevMode ? [{ debugName: "tableButtons" }] : /* istanbul ignore next */ []);
@@ -10964,6 +11165,13 @@ var DataTableComponent = class DataTableComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				tableTitle: {
+					classPropertyName: "tableTitle",
+					publicName: "tableTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				countsEndpoint: {
 					classPropertyName: "countsEndpoint",
 					publicName: "countsEndpoint",
@@ -11099,6 +11307,9 @@ var DataTableComponent = class DataTableComponent {
         @if (_showHeader()) {
         <div class="dt-sk-toolbar">
           <div class="dt-sk-toolbar-left">
+            @if (tableTitle()) {
+              <h3 class="dt-title">{{ tableTitle() }}</h3>
+            }
             @if (showSearch()) {
             <div class="dt-sk-search">
               <div class="dt-sk-shimmer dt-sk-search-icon"></div>
@@ -11124,6 +11335,9 @@ var DataTableComponent = class DataTableComponent {
       } @else if (_showHeader()) {
         <div class="dt-header alive-header">
           <div class="dt-header-left">
+            @if (tableTitle()) {
+              <h3 class="dt-title">{{ tableTitle() }}</h3>
+            }
             @if (showSearch() && !_emptyUnfiltered()) {
             <ui-search-input
               [value]="_search()"
@@ -11767,7 +11981,7 @@ var DataTableComponent = class DataTableComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;align-items:stretch}.dt-header-left,.dt-header-right{width:100%}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1}.dt-bulk-actions{width:100%}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 12px;font-family:inherit;font-size:1rem;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}\n"],
+			styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;overflow-wrap:anywhere}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;align-items:stretch}.dt-header-left,.dt-header-right{width:100%}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1}.dt-bulk-actions{width:100%}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 12px;font-family:inherit;font-size:1rem;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -11805,7 +12019,8 @@ var DataTableComponent = class DataTableComponent {
 						"page",
 						"pageSize",
 						"totalItems",
-						"detached"
+						"detached",
+						"embedded"
 					],
 					outputs: ["pageChange"]
 				},
@@ -11903,8 +12118,13 @@ var DataTableComponent = class DataTableComponent {
 					inputs: [
 						"initials",
 						"name",
-						"size"
-					]
+						"size",
+						"imageUrl",
+						"editable",
+						"editLabel",
+						"busy"
+					],
+					outputs: ["editClick", "imageError"]
 				},
 				{
 					kind: "component",
@@ -12153,6 +12373,9 @@ i0.ɵɵngDeclareClassMetadata({
         @if (_showHeader()) {
         <div class="dt-sk-toolbar">
           <div class="dt-sk-toolbar-left">
+            @if (tableTitle()) {
+              <h3 class="dt-title">{{ tableTitle() }}</h3>
+            }
             @if (showSearch()) {
             <div class="dt-sk-search">
               <div class="dt-sk-shimmer dt-sk-search-icon"></div>
@@ -12178,6 +12401,9 @@ i0.ɵɵngDeclareClassMetadata({
       } @else if (_showHeader()) {
         <div class="dt-header alive-header">
           <div class="dt-header-left">
+            @if (tableTitle()) {
+              <h3 class="dt-title">{{ tableTitle() }}</h3>
+            }
             @if (showSearch() && !_emptyUnfiltered()) {
             <ui-search-input
               [value]="_search()"
@@ -12820,7 +13046,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;align-items:stretch}.dt-header-left,.dt-header-right{width:100%}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1}.dt-bulk-actions{width:100%}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 12px;font-family:inherit;font-size:1rem;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}\n"]
+			styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.dt-host{display:flex;flex-direction:column;height:100%;min-height:0}.dt-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:space-between;position:relative;z-index:10}.dt-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.dt-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dt-title{margin:0;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;overflow-wrap:anywhere}.dt-sk-shimmer{position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-shimmer:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}@keyframes dt-shimmer{to{transform:translate(200%)}}.dt-sk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.dt-sk-toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dt-sk-toolbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.dt-sk-search{display:flex;align-items:center;gap:10px;width:380px;height:36px;padding:0 12px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;box-sizing:border-box}.dt-sk-search-icon{width:16px;height:16px;border-radius:50%;flex-shrink:0}.dt-sk-search-text{flex:1;height:11px;border-radius:4px}.dt-sk-tab-strip{display:flex;gap:2px;padding:3px;background:#f1f5f9;border-radius:8px}.dt-sk-tab{height:28px;width:70px;border-radius:6px}.dt-sk-icon-btn{width:32px;height:32px;border-radius:6px}.dt-skeleton{border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dt-sk-header{display:flex;gap:24px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.dt-sk-row{display:flex;gap:24px;padding:13px 16px;border-bottom:1px solid #f1f5f9}.dt-sk-row:last-child{border-bottom:none}.dt-sk-cell{flex:1;height:13px;border-radius:4px;position:relative;overflow:hidden;background:#f1f5f9}.dt-sk-cell:first-child{max-width:100px}.dt-sk-cell:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.65) 50%,transparent 75%);transform:translate(-100%);animation:dt-shimmer 1.4s ease-in-out infinite}.dt-sk-head{height:10px}.dt-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid #e2e8f0;border-radius:10px 10px 0 0}.dt-sk-reload-row td{padding:10px 14px;border-bottom:1px solid #f1f5f9}table{width:100%;border-collapse:collapse;font-size:.875rem}thead tr{background:#f8fafc;border-bottom:1px solid #e2e8f0}thead{position:sticky;top:0;z-index:2}th{padding:10px 14px;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-right:1px solid #e2e8f0;text-align:center;background:#f8fafc}th:last-child{border-right:none}th.dt-th-sorted{background:#f1f5f9}th.dt-th-actions{width:48px}.dt-th-inner{display:flex;align-items:center;justify-content:center;gap:4px}.dt-sort-btn{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;padding:0;text-transform:inherit;letter-spacing:inherit}.dt-sort-btn:hover{color:#1e293b}.dt-sort-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:2px}@media(pointer:coarse){.dt-sort-btn{position:relative}.dt-sort-btn:after{content:\"\";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}}.dt-sort-icon{transition:transform .15s}.dt-sort-desc{transform:rotate(180deg)}.dt-sort-inactive{opacity:.4}tbody tr{border-bottom:1px solid #f1f5f9;background:#fff;transition:background .1s}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:#f8fafc}.dt-row-clickable{cursor:pointer}.dt-row-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}td{padding:10px 14px;color:#334155;vertical-align:middle;white-space:nowrap;border-right:1px solid #f1f5f9}td:last-child{border-right:none}.dt-td-actions{text-align:center;padding:6px 8px}.dt-td-width{overflow:hidden;text-overflow:ellipsis}.dt-img{display:inline-block;vertical-align:middle;object-fit:cover;border:1px solid #e2e8f0;background:#f1f5f9;flex-shrink:0}.dt-img-ph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;color:#94a3b8;background:#f1f5f9;border:1px solid #e2e8f0;flex-shrink:0}.dt-img-ph svg{width:55%;height:55%}.dt-img-circle-md{width:40px;height:40px;border-radius:50%}.dt-img-circle-sm{width:28px;height:28px;border-radius:50%}.dt-img-rounded-md{width:48px;height:32px;border-radius:6px}.dt-img-rounded-sm{width:36px;height:24px;border-radius:5px}.dt-avatar-name{display:flex;align-items:center;gap:8px}.dt-name-text{color:#1e293b}.dt-overdue{color:#dc2626;font-weight:500}.dt-none{color:#94a3b8}.dt-link{position:relative;display:inline-block;max-width:100%;padding:1px 2px;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2563eb;text-decoration:none;border-radius:3px;cursor:pointer}.dt-link:hover{text-decoration:underline;color:#1d4ed8}.dt-link:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px;text-decoration:underline}.dt-card-detail-value .dt-link,.dt-card-name .dt-link{white-space:normal;overflow-wrap:anywhere}.dt-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt-tags{display:flex;align-items:center;gap:4px}.dt-tags-more{font-size:.75rem;font-weight:600;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 7px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid #e2e8f0}.dt-tags-more:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:999px}.dt-tag-tooltip{position:fixed;z-index:9999;pointer-events:none;background:#1e293b;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;box-shadow:0 4px 6px #0000000f,0 10px 24px #00000024;transform:translate(-50%) translateY(-100%);animation:dt-tip-in .12s ease;max-width:220px}@keyframes dt-tip-in{0%{opacity:0;transform:translate(-50%) translateY(calc(-100% + 4px))}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.dt-cell-star{margin-right:6px}.dt-actions-cell{display:flex;align-items:center;justify-content:center}.dt-bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:flex-start;padding:10px 14px;margin-bottom:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px}.dt-bulk-count{font-size:.875rem;font-weight:600;color:#1e40af;white-space:nowrap;flex-shrink:0}.dt-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}.dt-bulk-actions ui-select{max-width:180px;min-width:120px}.dt-bulk-hint{font-size:.8125rem;line-height:1.35;color:#475569}.dt-card-cb{display:flex;align-items:center;padding:0 0 6px}.dt-card-selected{background:#eff6ff!important;border-color:#bfdbfe!important}.dt-th-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-cb{width:44px;padding:0 10px!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-th-grip{width:36px;padding:0!important;border-right:1px solid #e2e8f0;background:#f8fafc}.dt-td-grip{width:36px;padding:0!important;text-align:center!important;border-right:1px solid #f1f5f9}.dt-grip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#64748b;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.dt-grip:hover{background:#f1f5f9;color:#334155}.dt-grip:active{cursor:grabbing}.dt-grip:focus-visible{outline:2px solid #3b82f6;outline-offset:1px}.dt-grip-off{color:#cbd5e1;cursor:not-allowed}.dt-grip-off:hover{background:none;color:#cbd5e1}.dt-row-move{display:none}@media(pointer:coarse){.dt-grip{display:none}.dt-row-move{display:inline-flex;flex-direction:column;align-items:center}.dt-th-grip,.dt-td-grip{width:56px}}.dt-row-dragging{opacity:.45}.dt-row-over-before>td{box-shadow:inset 0 2px #3b82f6}.dt-row-over-after>td{box-shadow:inset 0 -2px #3b82f6}.dt-card-move{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}@media(forced-colors:active){.dt-row-over-before>td{box-shadow:inset 0 2px 0 Highlight}.dt-row-over-after>td{box-shadow:inset 0 -2px 0 Highlight}.dt-grip:focus-visible{outline-color:Highlight}}.dt-row-selected{background:#eff6ff!important}.dt-row-selected:hover{background:#dbeafe!important}.dt-state-cell{padding:0!important;border:none!important;background:#fff!important}@media(max-width:1024px){th{padding:10px 12px}td{padding:11px 12px}.dt-sort-btn{padding:4px 0}.dt-td-actions{padding:6px}.dt-bulk-bar{align-self:stretch}}@media(max-width:820px){.dt-header-left{flex-basis:100%}.dt-header-right{flex-basis:100%;justify-content:flex-start}}@media(max-width:768px){th{padding:9px 10px;font-size:.8125rem}td{padding:10px;font-size:.8125rem}.dt-sk-search{width:100%}}@media(max-width:640px){.dt-header{flex-direction:column;align-items:stretch}.dt-header-left,.dt-header-right{width:100%}.dt-table-wrap{display:none}.dt-sk-search{width:100%}.dt-sk-toolbar{flex-direction:column;align-items:stretch;gap:8px}.dt-sk-toolbar-right{align-self:flex-end}.dt-bulk-bar{align-self:stretch;padding:10px 12px;row-gap:8px}.dt-bulk-count{flex:1}.dt-bulk-actions{width:100%}.dt-bulk-hint{flex-basis:100%}.dt-bulk-actions ui-select{max-width:100%;flex:1}}.dt-confirm-msg{margin:0;font-size:.9375rem;color:#334155;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;white-space:pre-line}.dt-confirm-details{margin:10px 0 0;padding-left:20px;font-size:.875rem;color:#64748b;line-height:1.5;overflow-wrap:anywhere;word-break:break-word}.dt-confirm-details li+li{margin-top:4px}ui-pagination{flex-shrink:0}.dt-phone-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;flex-shrink:0}.dt-phone-sort{display:flex;align-items:center;gap:8px}.dt-phone-sort-label{font-size:.8125rem;font-weight:600;color:#64748b;flex-shrink:0}.dt-phone-sort-select{flex:1;min-width:0;min-height:44px;box-sizing:border-box;padding:0 12px;font-family:inherit;font-size:1rem;color:#1e293b;background:#fff;border:1px solid #e2e8f0;border-radius:8px}.dt-phone-filters{display:flex;flex-wrap:wrap;gap:8px}.dt-card-list{display:none;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto}@media(max-width:640px){.dt-card-list{display:flex;padding-bottom:8px}}.dt-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;contain:layout style;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:background .1s}.dt-card:has(.mm-dropdown){position:relative;z-index:1}.dt-card-clickable{cursor:pointer}.dt-card-clickable:active{background:#f8fafc}.dt-card-clickable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.dt-card-header{display:flex;align-items:center;gap:10px}.dt-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.dt-card-name{min-width:0;font-weight:600;color:#1e293b;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-card-name-plain{flex:1}.dt-card-actions{margin-left:auto;flex-shrink:0}.dt-card-badges{display:flex;flex-wrap:wrap;gap:6px}.dt-card-tags{display:flex;flex-wrap:wrap;gap:4px}.dt-card-details{display:flex;flex-direction:column;gap:5px}.dt-card-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.8125rem}.dt-card-detail-label{color:#64748b;flex-shrink:0}.dt-card-detail-value{color:#334155;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere;word-break:break-word}.dt-card-sk{gap:12px}.dt-card-sk-header{display:flex;align-items:center;gap:10px}.dt-card-sk-badges{display:flex;gap:6px}.dt-card-sk-rows{display:flex;flex-direction:column;gap:8px}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -12937,6 +13163,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		tableTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tableTitle",
+				required: false
+			}]
+		}],
 		countsEndpoint: [{
 			type: i0.Input,
 			args: [{
@@ -24823,6 +25057,976 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const ICON_PATHS = {
+	call: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6 6l1-1a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z",
+	email: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",
+	sms: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
+	task: "M9 11l3 3L22 4 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
+	doc: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6",
+	money: "M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6",
+	deal: "M22 7l-8.5 8.5-5-5L2 17 M16 7h6v6",
+	survey: "M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2 M10 3h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z M9 12h6 M9 16h4",
+	property: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10",
+	search: "M11 3a8 8 0 1 0 0 16 8 8 0 0 0 0-16z M21 21l-4.35-4.35",
+	heart: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
+	calc: "M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M8 6h8 M8 10h2 M14 10h2 M8 14h2 M14 14h2 M8 18h2 M14 18h2",
+	repeat: "M17 1l4 4-4 4 M3 11V9a4 4 0 0 1 4-4h14 M7 23l-4-4 4-4 M21 13v2a4 4 0 0 1-4 4H3"
+};
+const CALENDAR_PATH = "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M16 2v4 M8 2v4 M3 10h18";
+const EDIT_PATH = "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z";
+const INDICATOR_LABEL = {
+	high: "High priority",
+	medium: "Medium priority",
+	low: "Low priority"
+};
+var CardListItemComponent = class CardListItemComponent {
+	constructor() {
+		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.description = input(void 0, ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+		this.date = input(void 0, ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+		this.type = input(void 0, ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+		this.typeVariant = input("gray", ...ngDevMode ? [{ debugName: "typeVariant" }] : /* istanbul ignore next */ []);
+		this.status = input(void 0, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+		this.statusVariant = input(void 0, ...ngDevMode ? [{ debugName: "statusVariant" }] : /* istanbul ignore next */ []);
+		this.indicator = input("none", ...ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []);
+		this.icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.editButton = input(false, ...ngDevMode ? [{ debugName: "editButton" }] : /* istanbul ignore next */ []);
+		this.viewButton = input(false, ...ngDevMode ? [{ debugName: "viewButton" }] : /* istanbul ignore next */ []);
+		this.editAriaLabel = input("", ...ngDevMode ? [{ debugName: "editAriaLabel" }] : /* istanbul ignore next */ []);
+		this.viewAriaLabel = input("", ...ngDevMode ? [{ debugName: "viewAriaLabel" }] : /* istanbul ignore next */ []);
+		this.editClick = output();
+		this.viewClick = output();
+		this.calendarPath = CALENDAR_PATH;
+		this.editPath = EDIT_PATH;
+		this.iconPath = computed(() => {
+			const i = this.icon();
+			return i ? ICON_PATHS[i] ?? null : null;
+		}, ...ngDevMode ? [{ debugName: "iconPath" }] : /* istanbul ignore next */ []);
+		this.indicatorLabel = computed(() => INDICATOR_LABEL[this.indicator()] ?? "", ...ngDevMode ? [{ debugName: "indicatorLabel" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardListItemComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: CardListItemComponent,
+			isStandalone: true,
+			selector: "ui-card-list-item",
+			inputs: {
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				description: {
+					classPropertyName: "description",
+					publicName: "description",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				date: {
+					classPropertyName: "date",
+					publicName: "date",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				type: {
+					classPropertyName: "type",
+					publicName: "type",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				typeVariant: {
+					classPropertyName: "typeVariant",
+					publicName: "typeVariant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				status: {
+					classPropertyName: "status",
+					publicName: "status",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				statusVariant: {
+					classPropertyName: "statusVariant",
+					publicName: "statusVariant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				indicator: {
+					classPropertyName: "indicator",
+					publicName: "indicator",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editButton: {
+					classPropertyName: "editButton",
+					publicName: "editButton",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				viewButton: {
+					classPropertyName: "viewButton",
+					publicName: "viewButton",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				editAriaLabel: {
+					classPropertyName: "editAriaLabel",
+					publicName: "editAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				viewAriaLabel: {
+					classPropertyName: "viewAriaLabel",
+					publicName: "viewAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				editClick: "editClick",
+				viewClick: "viewClick"
+			},
+			ngImport: i0,
+			template: `
+    <div class="cli-row">
+      @if (iconPath(); as d) {
+        <div class="cli-icon-circle" [class]="'cli-icon-circle cli-icon-circle--' + icon()" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path [attr.d]="d" /></svg>
+        </div>
+      } @else if (indicator() !== 'none') {
+        @if (indicatorLabel(); as label) {
+          <div class="cli-dot" [class]="'cli-dot cli-dot--' + indicator()" [uiTooltip]="label" tabindex="0" role="img" [attr.aria-label]="label"></div>
+        } @else {
+          <div class="cli-dot" [class]="'cli-dot cli-dot--' + indicator()" aria-hidden="true"></div>
+        }
+      }
+
+      <div class="cli-body">
+        <div class="cli-title-row">
+          <span class="cli-title">{{ title() }}</span>
+          @if (type()) { <ui-badge [label]="type()!" [variant]="typeVariant()" /> }
+          @if (status() && statusVariant()) { <ui-badge [label]="status()!" [variant]="statusVariant()!" /> }
+        </div>
+        <div class="cli-desc-row">
+          @if (description()) { <span class="cli-description">{{ description() }}</span> }
+          <ng-content select="[card-list-inline]" />
+        </div>
+        @if (date()) {
+          <span class="cli-date">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="calendarPath" /></svg>
+            {{ date() }}
+          </span>
+        }
+      </div>
+
+      @if (editButton()) {
+        <button class="cli-chip cli-chip--edit" type="button" [attr.aria-label]="editAriaLabel() || null" (click)="editClick.emit()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="editPath" /></svg>
+          Edit
+        </button>
+      }
+      @if (viewButton()) {
+        <button class="cli-chip cli-chip--view" type="button" [attr.aria-label]="viewAriaLabel() || null" (click)="viewClick.emit()">View</button>
+      }
+      <ng-content select="[card-list-action]" />
+      <ng-content />
+    </div>
+    <ng-content select="[card-stats]" />
+    <ng-content select="[card-detail]" />
+  `,
+			isInline: true,
+			styles: ["ui-card-list-item{display:block;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-bottom:8px}ui-card-list-item:last-child{margin-bottom:0}ui-card-list-item .cli-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;transition:background .12s}ui-card-list-item .cli-row:hover{background:#f8fafc}@media(prefers-reduced-motion:reduce){ui-card-list-item .cli-row{transition:none}}ui-card-list-item .cli-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}ui-card-list-item .cli-dot:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-dot--high{background:#ef4444}ui-card-list-item .cli-dot--medium{background:#f59e0b}ui-card-list-item .cli-dot--low{background:#94a3b8}ui-card-list-item .cli-dot--blue{background:#3b82f6}ui-card-list-item .cli-dot--green{background:#22c55e}ui-card-list-item .cli-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}ui-card-list-item .cli-icon-circle--call{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--email{background:#dcfce7;color:#16a34a}ui-card-list-item .cli-icon-circle--sms{background:#fef9c3;color:#ca8a04}ui-card-list-item .cli-icon-circle--task{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--doc{background:#ffedd5;color:#ea580c}ui-card-list-item .cli-icon-circle--money{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--deal{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--survey{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--property{background:#fef3c7;color:#d97706}ui-card-list-item .cli-icon-circle--search{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--heart{background:#fce7f3;color:#db2777}ui-card-list-item .cli-icon-circle--calc{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--repeat{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;word-break:break-word}ui-card-list-item .cli-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}ui-card-list-item .cli-title{font-size:.875rem;font-weight:600;color:#1e293b}ui-card-list-item .cli-desc-row{display:flex;align-items:center;gap:8px}ui-card-list-item .cli-desc-row:empty{display:none}ui-card-list-item .cli-description{font-size:.8125rem;color:#64748b;min-width:0}ui-card-list-item .cli-date{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b}ui-card-list-item .cli-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;align-self:center;box-sizing:border-box;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;background:none;cursor:pointer;padding:4px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}ui-card-list-item .cli-chip--edit{color:#64748b;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--edit:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--view{color:#2563eb;border:1px solid #dbeafe}ui-card-list-item .cli-chip--view:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}ui-card-list-item .cli-chip:focus-visible,ui-card-list-item .cli-inline-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-inline-link{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500;color:#2563eb;text-decoration:none;transition:color .15s}ui-card-list-item .cli-inline-link:hover{color:#1d4ed8}@media(pointer:coarse),(max-width:480px){ui-card-list-item .cli-chip{min-height:44px;padding:4px 14px}}ui-card-list-item [card-stats]{display:flex;align-items:stretch;background:#f8fafc;border-top:1px solid #f1f5f9}ui-card-list-item [card-detail]{background:#f8fafc;border-top:1px solid #e2e8f0}ui-card-list-item .cli-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px}ui-card-list-item .cli-stat-label{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}ui-card-list-item .cli-stat-value{font-size:.9375rem;font-weight:600;color:#0f172a}ui-card-list-item .cli-stat-divider{width:1px;background:#e2e8f0;margin:8px 0}\n"],
+			dependencies: [{
+				kind: "component",
+				type: BadgeComponent,
+				selector: "ui-badge",
+				inputs: ["label", "variant"]
+			}, {
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[uiTooltip]",
+				inputs: ["uiTooltip", "tooltipPosition"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CardListItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-card-list-item",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [BadgeComponent, TooltipDirective],
+			template: `
+    <div class="cli-row">
+      @if (iconPath(); as d) {
+        <div class="cli-icon-circle" [class]="'cli-icon-circle cli-icon-circle--' + icon()" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path [attr.d]="d" /></svg>
+        </div>
+      } @else if (indicator() !== 'none') {
+        @if (indicatorLabel(); as label) {
+          <div class="cli-dot" [class]="'cli-dot cli-dot--' + indicator()" [uiTooltip]="label" tabindex="0" role="img" [attr.aria-label]="label"></div>
+        } @else {
+          <div class="cli-dot" [class]="'cli-dot cli-dot--' + indicator()" aria-hidden="true"></div>
+        }
+      }
+
+      <div class="cli-body">
+        <div class="cli-title-row">
+          <span class="cli-title">{{ title() }}</span>
+          @if (type()) { <ui-badge [label]="type()!" [variant]="typeVariant()" /> }
+          @if (status() && statusVariant()) { <ui-badge [label]="status()!" [variant]="statusVariant()!" /> }
+        </div>
+        <div class="cli-desc-row">
+          @if (description()) { <span class="cli-description">{{ description() }}</span> }
+          <ng-content select="[card-list-inline]" />
+        </div>
+        @if (date()) {
+          <span class="cli-date">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="calendarPath" /></svg>
+            {{ date() }}
+          </span>
+        }
+      </div>
+
+      @if (editButton()) {
+        <button class="cli-chip cli-chip--edit" type="button" [attr.aria-label]="editAriaLabel() || null" (click)="editClick.emit()">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path [attr.d]="editPath" /></svg>
+          Edit
+        </button>
+      }
+      @if (viewButton()) {
+        <button class="cli-chip cli-chip--view" type="button" [attr.aria-label]="viewAriaLabel() || null" (click)="viewClick.emit()">View</button>
+      }
+      <ng-content select="[card-list-action]" />
+      <ng-content />
+    </div>
+    <ng-content select="[card-stats]" />
+    <ng-content select="[card-detail]" />
+  `,
+			styles: ["ui-card-list-item{display:block;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin-bottom:8px}ui-card-list-item:last-child{margin-bottom:0}ui-card-list-item .cli-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;transition:background .12s}ui-card-list-item .cli-row:hover{background:#f8fafc}@media(prefers-reduced-motion:reduce){ui-card-list-item .cli-row{transition:none}}ui-card-list-item .cli-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}ui-card-list-item .cli-dot:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-dot--high{background:#ef4444}ui-card-list-item .cli-dot--medium{background:#f59e0b}ui-card-list-item .cli-dot--low{background:#94a3b8}ui-card-list-item .cli-dot--blue{background:#3b82f6}ui-card-list-item .cli-dot--green{background:#22c55e}ui-card-list-item .cli-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}ui-card-list-item .cli-icon-circle--call{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--email{background:#dcfce7;color:#16a34a}ui-card-list-item .cli-icon-circle--sms{background:#fef9c3;color:#ca8a04}ui-card-list-item .cli-icon-circle--task{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--doc{background:#ffedd5;color:#ea580c}ui-card-list-item .cli-icon-circle--money{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--deal{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--survey{background:#dbeafe;color:#2563eb}ui-card-list-item .cli-icon-circle--property{background:#fef3c7;color:#d97706}ui-card-list-item .cli-icon-circle--search{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-icon-circle--heart{background:#fce7f3;color:#db2777}ui-card-list-item .cli-icon-circle--calc{background:#d1fae5;color:#059669}ui-card-list-item .cli-icon-circle--repeat{background:#e0f2fe;color:#0284c7}ui-card-list-item .cli-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;word-break:break-word}ui-card-list-item .cli-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}ui-card-list-item .cli-title{font-size:.875rem;font-weight:600;color:#1e293b}ui-card-list-item .cli-desc-row{display:flex;align-items:center;gap:8px}ui-card-list-item .cli-desc-row:empty{display:none}ui-card-list-item .cli-description{font-size:.8125rem;color:#64748b;min-width:0}ui-card-list-item .cli-date{display:flex;align-items:center;gap:4px;font-size:.75rem;color:#64748b}ui-card-list-item .cli-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;align-self:center;box-sizing:border-box;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;background:none;cursor:pointer;padding:4px 10px;border-radius:6px;text-decoration:none;transition:background .15s,color .15s,border-color .15s}ui-card-list-item .cli-chip--edit{color:#64748b;border:1px solid #e2e8f0}ui-card-list-item .cli-chip--edit:hover{background:#f1f5f9;color:#1e293b}ui-card-list-item .cli-chip--view{color:#2563eb;border:1px solid #dbeafe}ui-card-list-item .cli-chip--view:hover{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}ui-card-list-item .cli-chip:focus-visible,ui-card-list-item .cli-inline-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}ui-card-list-item .cli-inline-link{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500;color:#2563eb;text-decoration:none;transition:color .15s}ui-card-list-item .cli-inline-link:hover{color:#1d4ed8}@media(pointer:coarse),(max-width:480px){ui-card-list-item .cli-chip{min-height:44px;padding:4px 14px}}ui-card-list-item [card-stats]{display:flex;align-items:stretch;background:#f8fafc;border-top:1px solid #f1f5f9}ui-card-list-item [card-detail]{background:#f8fafc;border-top:1px solid #e2e8f0}ui-card-list-item .cli-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 14px}ui-card-list-item .cli-stat-label{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#64748b}ui-card-list-item .cli-stat-value{font-size:.9375rem;font-weight:600;color:#0f172a}ui-card-list-item .cli-stat-divider{width:1px;background:#e2e8f0;margin:8px 0}\n"]
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		date: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "date",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		typeVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typeVariant",
+				required: false
+			}]
+		}],
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		statusVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusVariant",
+				required: false
+			}]
+		}],
+		indicator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indicator",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		editButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editButton",
+				required: false
+			}]
+		}],
+		viewButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "viewButton",
+				required: false
+			}]
+		}],
+		editAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "editAriaLabel",
+				required: false
+			}]
+		}],
+		viewAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "viewAriaLabel",
+				required: false
+			}]
+		}],
+		editClick: [{
+			type: i0.Output,
+			args: ["editClick"]
+		}],
+		viewClick: [{
+			type: i0.Output,
+			args: ["viewClick"]
+		}]
+	}
+});
+const ACTION_VERB = {
+	load: "loading",
+	save: "saving",
+	create: "creating",
+	update: "updating",
+	delete: "deleting",
+	send: "sending",
+	export: "exporting",
+	import: "importing",
+	upload: "uploading",
+	download: "downloading"
+};
+const ACTION_PERMISSION_VERB = {
+	load: "access",
+	save: "save",
+	create: "create",
+	update: "update",
+	delete: "delete",
+	send: "send",
+	export: "export",
+	import: "import",
+	upload: "upload",
+	download: "download"
+};
+const REQUEST_METHOD = "__forgerouteRequestMethod";
+const errorContextInterceptor = (req, next) => next(req).pipe(catchError$1((err) => {
+	if (err instanceof HttpErrorResponse && !(REQUEST_METHOD in err)) Object.defineProperty(err, REQUEST_METHOD, {
+		value: req.method.toUpperCase(),
+		enumerable: false
+	});
+	return throwError(() => err);
+}));
+function actionFromMethod(error) {
+	switch (error[REQUEST_METHOD]) {
+		case "POST":
+		case "PUT":
+		case "PATCH": return "save";
+		case "DELETE": return "delete";
+		default: return "load";
+	}
+}
+function withoutLeadingArticle(ctx) {
+	return ctx.replace(/^(?:the|an?)\s+/i, "") || ctx;
+}
+function getErrorMessage(error, fallbackContext, action) {
+	const ctx = fallbackContext?.trim() || "data";
+	const act = action ?? (error instanceof HttpErrorResponse ? actionFromMethod(error) : "load");
+	const failed = `There was an error ${ACTION_VERB[act]} ${ctx}.`;
+	if (error instanceof HttpErrorResponse) {
+		if (error.error?.message) return error.error.message;
+		if (typeof error.error === "string" && error.error.length < 200) return error.error;
+		switch (error.status) {
+			case 0: return `${failed} Please check your connection and try again.`;
+			case 401: return "Your session has expired. Please log in again.";
+			case 403: return `You don't have permission to ${ACTION_PERMISSION_VERB[act]} ${ctx}.`;
+			case 404: return `The ${withoutLeadingArticle(ctx)} you're looking for could not be found.`;
+			case 408: return `${failed} The request timed out — please try again.`;
+			case 422: return "The data you submitted is invalid. Please check your input and try again.";
+			case 429: return `${failed} Too many requests — please wait a moment and try again.`;
+			case 502:
+			case 503:
+			case 504: return `${failed} Please try again in a few minutes.`;
+			default: return `${failed} Please try again.`;
+		}
+	}
+	if (error instanceof Error) return error.message;
+	if (typeof error === "string") return error;
+	return `${failed} Please try again.`;
+}
+const NOTES_MAX_LENGTH = 1e4;
+const NOTES_PAGE_SIZE = 5;
+var NotesComponent = class NotesComponent {
+	initials(name) {
+		const parts = (name || "You").trim().split(/\s+/).filter(Boolean);
+		return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts[parts.length - 1][0] : "")).toUpperCase();
+	}
+	tooLong(text) {
+		return text.trim().length > NOTES_MAX_LENGTH;
+	}
+	validBody(text) {
+		const n = text.trim().length;
+		return n > 0 && n <= 1e4;
+	}
+	get listUrl() {
+		return `${this.apiBase}/notes/${this.resourceType()}/${this.resourceId()}`;
+	}
+	constructor() {
+		this.resourceType = input("", ...ngDevMode ? [{ debugName: "resourceType" }] : /* istanbul ignore next */ []);
+		this.resourceId = input("", ...ngDevMode ? [{ debugName: "resourceId" }] : /* istanbul ignore next */ []);
+		this.readOnly = input(false, ...ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []);
+		this.totalChange = output();
+		this.http = inject(HttpClient);
+		this.toast = inject(ToastService);
+		this.destroyRef = inject(DestroyRef);
+		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
+		this.pageSize = NOTES_PAGE_SIZE;
+		this.maxLength = NOTES_MAX_LENGTH;
+		this.notes = signal([], ...ngDevMode ? [{ debugName: "notes" }] : /* istanbul ignore next */ []);
+		this.loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.saving = signal(false, ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
+		this.page = signal(0, ...ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []);
+		this.totalElements = signal(0, ...ngDevMode ? [{ debugName: "totalElements" }] : /* istanbul ignore next */ []);
+		this.editingId = signal(null, ...ngDevMode ? [{ debugName: "editingId" }] : /* istanbul ignore next */ []);
+		this.deletingId = signal(null, ...ngDevMode ? [{ debugName: "deletingId" }] : /* istanbul ignore next */ []);
+		this.newBody = "";
+		this.editBody = "";
+		effect(() => {
+			const id = this.resourceId();
+			const type = this.resourceType();
+			if (id && type) untracked(() => this.loadPage(0));
+		});
+	}
+	loadPage(p) {
+		if (!this.resourceType() || !this.resourceId()) return;
+		this.loading.set(true);
+		this.http.get(`${this.listUrl}?page=${p}&size=${this.pageSize}`).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (res) => {
+				this.notes.set(res.content);
+				this.page.set(res.page);
+				this.totalElements.set(res.totalElements);
+				this.loading.set(false);
+				this.totalChange.emit(res.totalElements);
+			},
+			error: (err) => {
+				this.loading.set(false);
+				this.toast.error(getErrorMessage(err, "notes"));
+			}
+		});
+	}
+	addNote() {
+		if (this.readOnly() || !this.validBody(this.newBody) || this.saving()) return;
+		this.saving.set(true);
+		this.http.post(this.listUrl, { body: this.newBody.trim() }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: () => {
+				this.newBody = "";
+				this.saving.set(false);
+				this.loadPage(0);
+			},
+			error: (err) => {
+				this.saving.set(false);
+				this.toast.error(getErrorMessage(err, "note", "create"));
+			}
+		});
+	}
+	startEdit(note) {
+		if (this.readOnly()) return;
+		this.editingId.set(note.id);
+		this.editBody = note.body;
+	}
+	cancelEdit() {
+		this.editingId.set(null);
+		this.editBody = "";
+	}
+	saveEdit(noteId) {
+		if (this.readOnly() || !this.validBody(this.editBody) || this.saving()) return;
+		this.saving.set(true);
+		this.http.put(`${this.apiBase}/notes/${noteId}`, { body: this.editBody.trim() }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: (updated) => {
+				this.notes.update((arr) => arr.map((n) => n.id === noteId ? updated : n));
+				this.editingId.set(null);
+				this.saving.set(false);
+			},
+			error: (err) => {
+				this.saving.set(false);
+				this.toast.error(getErrorMessage(err, "note", "update"));
+			}
+		});
+	}
+	confirmDelete(id) {
+		if (this.readOnly()) return;
+		this.deletingId.set(id);
+	}
+	deleteNote() {
+		const id = this.deletingId();
+		if (this.readOnly() || !id || this.saving()) return;
+		this.saving.set(true);
+		this.http.delete(`${this.apiBase}/notes/${id}`).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			next: () => {
+				this.deletingId.set(null);
+				this.saving.set(false);
+				this.loadPage(this.notes().length === 1 && this.page() > 0 ? this.page() - 1 : this.page());
+			},
+			error: (err) => {
+				this.deletingId.set(null);
+				this.saving.set(false);
+				this.toast.error(getErrorMessage(err, "note", "delete"));
+			}
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: NotesComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: NotesComponent,
+			isStandalone: true,
+			selector: "ui-notes",
+			inputs: {
+				resourceType: {
+					classPropertyName: "resourceType",
+					publicName: "resourceType",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				resourceId: {
+					classPropertyName: "resourceId",
+					publicName: "resourceId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				readOnly: {
+					classPropertyName: "readOnly",
+					publicName: "readOnly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { totalChange: "totalChange" },
+			ngImport: i0,
+			template: `
+    @if (!readOnly()) {
+      <div class="note-add">
+        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(newBody)" [disabled]="saving()" [(ngModel)]="newBody"
+          (keydown.meta.enter)="addNote()" (keydown.control.enter)="addNote()" />
+        <div class="note-add-footer">
+          <ui-button variant="primary" size="sm" data-testid="note-add-btn" [loading]="saving()" [disabled]="!validBody(newBody)" (click)="addNote()">Add Note</ui-button>
+        </div>
+      </div>
+    }
+
+    @if (loading() && notes().length === 0) {
+      <div class="note-loading" role="status">Loading notes...</div>
+    } @else if (notes().length === 0) {
+      <ui-empty-state iconType="person" title="No notes yet" [message]="readOnly() ? 'No notes have been added.' : 'Add your first note above.'" />
+    } @else {
+      <ul class="note-list" aria-label="Notes">
+        @for (note of notes(); track note.id) {
+          <li class="note-item" [class.editing]="editingId() === note.id">
+            <ui-avatar class="note-avatar" [initials]="initials(note.createdByName)" [name]="note.createdByName || 'You'" [size]="32" />
+            <div class="note-main">
+              <div class="note-head">
+                <span class="note-author">{{ note.createdByName || 'You' }}</span>
+                <span class="note-dot" aria-hidden="true">·</span>
+                <time class="note-date" [attr.datetime]="note.createdAt">{{ note.createdAt | date:'MMM d, yyyy h:mm a' }}</time>
+                @if (note.updatedAt !== note.createdAt) {
+                  <span class="note-edited">edited</span>
+                }
+                @if (!readOnly() && editingId() !== note.id) {
+                  <div class="note-actions">
+                    <ui-icon name="edit" [size]="14" tooltip="Edit note" (iconClick)="startEdit(note)" />
+                    <ui-icon name="delete" variant="danger" [size]="14" tooltip="Delete note" (iconClick)="confirmDelete(note.id)" />
+                  </div>
+                }
+              </div>
+              @if (editingId() === note.id) {
+                <ui-textarea-input ariaLabel="Edit note" [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(editBody)" [disabled]="saving()" [(ngModel)]="editBody" />
+                <div class="note-item-footer">
+                  <ui-button variant="secondary" size="sm" (click)="cancelEdit()">Cancel</ui-button>
+                  <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="!validBody(editBody)" (click)="saveEdit(note.id)">Save</ui-button>
+                </div>
+              } @else {
+                <p class="note-body">{{ note.body }}</p>
+              }
+            </div>
+          </li>
+        }
+      </ul>
+      <ui-pagination [page]="page() + 1" [pageSize]="pageSize" [totalItems]="totalElements()" (pageChange)="loadPage($event - 1)" />
+    }
+
+    <ui-modal [open]="!!deletingId()" title="Delete Note" maxWidth="420px" dialogTestId="delete-note-modal" (close)="deletingId.set(null)">
+      <p class="note-delete-msg" data-testid="delete-note-message">Delete this note? It is permanently removed from this record and cannot be undone.</p>
+      <ui-button modal-footer-left variant="secondary" size="sm" data-testid="delete-note-cancel" (click)="deletingId.set(null)">Cancel</ui-button>
+      <ui-button modal-footer-right variant="danger" size="sm" data-testid="delete-note-confirm" [loading]="saving()" (click)="deleteNote()">Delete Note</ui-button>
+    </ui-modal>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.note-add{padding:14px;margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}.note-add-footer{display:flex;justify-content:flex-end;margin-top:10px}.note-loading{padding:24px 0;font-size:.875rem;color:#64748b;text-align:center}.note-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.note-item{display:flex;gap:12px;padding:14px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;transition:border-color .15s,box-shadow .15s}@media(hover:hover){.note-item:hover{border-color:#cbd5e1;box-shadow:0 1px 3px #0f172a0f}}.note-item.editing{background:#f8fafc;border-color:#bfdbfe}@media(prefers-reduced-motion:reduce){.note-item{transition:none}}.note-avatar{flex-shrink:0}.note-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.note-head{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-height:28px}.note-author{font-size:.875rem;font-weight:600;color:#0f172a}.note-dot{color:#94a3b8;font-size:.75rem}.note-date{font-size:.75rem;color:#64748b}.note-edited{font-size:.75rem;font-style:italic;color:#64748b}.note-actions{display:flex;align-items:center;gap:2px;margin-left:auto}.note-body{margin:0;font-size:.9375rem;line-height:1.6;color:#1e293b;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.note-item-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.note-delete-msg{margin:0;font-size:.9375rem;line-height:1.5;color:#334155}@media(max-width:480px){.note-item{padding:12px;gap:10px}.note-add{padding:12px}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.MaxLengthValidator,
+					selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+					inputs: ["maxlength"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: ModalComponent,
+					selector: "ui-modal",
+					inputs: [
+						"open",
+						"title",
+						"description",
+						"maxWidth",
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable",
+						"returnFocusTo"
+					],
+					outputs: ["close"]
+				},
+				{
+					kind: "component",
+					type: EmptyStateComponent,
+					selector: "ui-empty-state",
+					inputs: [
+						"message",
+						"title",
+						"iconType"
+					]
+				},
+				{
+					kind: "component",
+					type: PaginationComponent,
+					selector: "ui-pagination",
+					inputs: [
+						"page",
+						"pageSize",
+						"totalItems",
+						"detached",
+						"embedded"
+					],
+					outputs: ["pageChange"]
+				},
+				{
+					kind: "component",
+					type: TextareaInputComponent,
+					selector: "ui-textarea-input",
+					inputs: [
+						"label",
+						"ariaLabel",
+						"placeholder",
+						"rows",
+						"maxlength",
+						"required",
+						"readonly",
+						"hint",
+						"hintAsDescription",
+						"error",
+						"monospace",
+						"showErrors",
+						"disabled"
+					],
+					outputs: ["invalidChange"]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"name",
+						"tooltip",
+						"ariaLabel",
+						"size",
+						"variant",
+						"disabled",
+						"loading",
+						"interactive"
+					],
+					outputs: ["iconClick"]
+				},
+				{
+					kind: "component",
+					type: AvatarComponent,
+					selector: "ui-avatar",
+					inputs: [
+						"initials",
+						"name",
+						"size",
+						"imageUrl",
+						"editable",
+						"editLabel",
+						"busy"
+					],
+					outputs: ["editClick", "imageError"]
+				},
+				{
+					kind: "pipe",
+					type: DatePipe,
+					name: "date"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: NotesComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-notes",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				DatePipe,
+				FormsModule,
+				ButtonComponent,
+				ModalComponent,
+				EmptyStateComponent,
+				PaginationComponent,
+				TextareaInputComponent,
+				IconComponent,
+				AvatarComponent
+			],
+			template: `
+    @if (!readOnly()) {
+      <div class="note-add">
+        <ui-textarea-input ariaLabel="Add a note" placeholder="Add a note..." [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(newBody)" [disabled]="saving()" [(ngModel)]="newBody"
+          (keydown.meta.enter)="addNote()" (keydown.control.enter)="addNote()" />
+        <div class="note-add-footer">
+          <ui-button variant="primary" size="sm" data-testid="note-add-btn" [loading]="saving()" [disabled]="!validBody(newBody)" (click)="addNote()">Add Note</ui-button>
+        </div>
+      </div>
+    }
+
+    @if (loading() && notes().length === 0) {
+      <div class="note-loading" role="status">Loading notes...</div>
+    } @else if (notes().length === 0) {
+      <ui-empty-state iconType="person" title="No notes yet" [message]="readOnly() ? 'No notes have been added.' : 'Add your first note above.'" />
+    } @else {
+      <ul class="note-list" aria-label="Notes">
+        @for (note of notes(); track note.id) {
+          <li class="note-item" [class.editing]="editingId() === note.id">
+            <ui-avatar class="note-avatar" [initials]="initials(note.createdByName)" [name]="note.createdByName || 'You'" [size]="32" />
+            <div class="note-main">
+              <div class="note-head">
+                <span class="note-author">{{ note.createdByName || 'You' }}</span>
+                <span class="note-dot" aria-hidden="true">·</span>
+                <time class="note-date" [attr.datetime]="note.createdAt">{{ note.createdAt | date:'MMM d, yyyy h:mm a' }}</time>
+                @if (note.updatedAt !== note.createdAt) {
+                  <span class="note-edited">edited</span>
+                }
+                @if (!readOnly() && editingId() !== note.id) {
+                  <div class="note-actions">
+                    <ui-icon name="edit" [size]="14" tooltip="Edit note" (iconClick)="startEdit(note)" />
+                    <ui-icon name="delete" variant="danger" [size]="14" tooltip="Delete note" (iconClick)="confirmDelete(note.id)" />
+                  </div>
+                }
+              </div>
+              @if (editingId() === note.id) {
+                <ui-textarea-input ariaLabel="Edit note" [rows]="3" [maxlength]="maxLength" [showErrors]="tooLong(editBody)" [disabled]="saving()" [(ngModel)]="editBody" />
+                <div class="note-item-footer">
+                  <ui-button variant="secondary" size="sm" (click)="cancelEdit()">Cancel</ui-button>
+                  <ui-button variant="primary" size="sm" [loading]="saving()" [disabled]="!validBody(editBody)" (click)="saveEdit(note.id)">Save</ui-button>
+                </div>
+              } @else {
+                <p class="note-body">{{ note.body }}</p>
+              }
+            </div>
+          </li>
+        }
+      </ul>
+      <ui-pagination [page]="page() + 1" [pageSize]="pageSize" [totalItems]="totalElements()" (pageChange)="loadPage($event - 1)" />
+    }
+
+    <ui-modal [open]="!!deletingId()" title="Delete Note" maxWidth="420px" dialogTestId="delete-note-modal" (close)="deletingId.set(null)">
+      <p class="note-delete-msg" data-testid="delete-note-message">Delete this note? It is permanently removed from this record and cannot be undone.</p>
+      <ui-button modal-footer-left variant="secondary" size="sm" data-testid="delete-note-cancel" (click)="deletingId.set(null)">Cancel</ui-button>
+      <ui-button modal-footer-right variant="danger" size="sm" data-testid="delete-note-confirm" [loading]="saving()" (click)="deleteNote()">Delete Note</ui-button>
+    </ui-modal>
+  `,
+			styles: [":host{display:block}.note-add{padding:14px;margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}.note-add-footer{display:flex;justify-content:flex-end;margin-top:10px}.note-loading{padding:24px 0;font-size:.875rem;color:#64748b;text-align:center}.note-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.note-item{display:flex;gap:12px;padding:14px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;transition:border-color .15s,box-shadow .15s}@media(hover:hover){.note-item:hover{border-color:#cbd5e1;box-shadow:0 1px 3px #0f172a0f}}.note-item.editing{background:#f8fafc;border-color:#bfdbfe}@media(prefers-reduced-motion:reduce){.note-item{transition:none}}.note-avatar{flex-shrink:0}.note-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.note-head{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-height:28px}.note-author{font-size:.875rem;font-weight:600;color:#0f172a}.note-dot{color:#94a3b8;font-size:.75rem}.note-date{font-size:.75rem;color:#64748b}.note-edited{font-size:.75rem;font-style:italic;color:#64748b}.note-actions{display:flex;align-items:center;gap:2px;margin-left:auto}.note-body{margin:0;font-size:.9375rem;line-height:1.6;color:#1e293b;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.note-item-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.note-delete-msg{margin:0;font-size:.9375rem;line-height:1.5;color:#334155}@media(max-width:480px){.note-item{padding:12px;gap:10px}.note-add{padding:12px}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		resourceType: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resourceType",
+				required: false
+			}]
+		}],
+		resourceId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resourceId",
+				required: false
+			}]
+		}],
+		readOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readOnly",
+				required: false
+			}]
+		}],
+		totalChange: [{
+			type: i0.Output,
+			args: ["totalChange"]
+		}]
+	}
+});
 function provideForgerouteToast(options = {}) {
 	return makeEnvironmentProviders([provideEnvironmentInitializer(() => {
 		if (options.dismissible) inject(ToastService).dismissible.set(true);
@@ -24847,11 +26051,11 @@ const LAYOUT_GAP_PX = {
 	lg: 24,
 	xl: 32
 };
-const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+const CSS_LENGTH$1 = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
 function resolveLayoutGap(gap, fallback) {
 	const v = (gap ?? "").trim();
 	if (Object.prototype.hasOwnProperty.call(LAYOUT_GAP_PX, v)) return `${LAYOUT_GAP_PX[v]}px`;
-	if (v && CSS_LENGTH.test(v)) return v;
+	if (v && CSS_LENGTH$1.test(v)) return v;
 	return `${LAYOUT_GAP_PX[fallback]}px`;
 }
 function reorderItems(items, order) {
@@ -26845,6 +28049,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 		this.sections = input([], ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 		this.showEmptyState = input(false, ...ngDevMode ? [{ debugName: "showEmptyState" }] : /* istanbul ignore next */ []);
 		this.labelColon = input(false, ...ngDevMode ? [{ debugName: "labelColon" }] : /* istanbul ignore next */ []);
+		this.fill = input(false, ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
 		this.displaySections = computed(() => this.showEmptyState() ? this.sections() : this.sections().filter((s) => s.items.some((i) => !i.hidden)), ...ngDevMode ? [{ debugName: "displaySections" }] : /* istanbul ignore next */ []);
 	}
 	hrefOf(item) {
@@ -26910,8 +28115,16 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				fill: {
+					classPropertyName: "fill",
+					publicName: "fill",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
+			host: { properties: { "class.pil-fill": "fill()" } },
 			ngImport: i0,
 			template: `
     @for (section of displaySections(); track section.title ?? $index) {
@@ -26969,11 +28182,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
                   <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
                 }
                 @if (item.editAction) {
-                  <ui-button class="pil-edit-btn" variant="icon" size="xs"
-                    [ariaLabel]="item.editTooltip ?? 'Edit'" [attr.title]="item.editTooltip ?? 'Edit'"
-                    (click)="item.editAction!()">
-                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                  </ui-button>
+                  <ui-icon class="pil-edit-btn" name="edit" [size]="14" [tooltip]="item.editTooltip ?? 'Edit'" (iconClick)="item.editAction!()" />
                 }
               </span>
             </div>
@@ -26983,7 +28192,7 @@ var PanelInfoListComponent = class PanelInfoListComponent {
     }
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
+			styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -27022,33 +28231,19 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 				},
 				{
 					kind: "component",
-					type: ButtonComponent,
-					selector: "ui-button",
+					type: IconComponent,
+					selector: "ui-icon",
 					inputs: [
-						"variant",
-						"routerLink",
-						"queryParams",
-						"fragment",
-						"state",
-						"href",
-						"target",
-						"rel",
-						"shortLabel",
-						"shortBelow",
-						"color",
-						"active",
+						"name",
+						"tooltip",
+						"ariaLabel",
 						"size",
-						"type",
+						"variant",
 						"disabled",
 						"loading",
-						"fullWidth",
-						"ariaLabel",
-						"ariaExpanded",
-						"ariaPressed",
-						"ariaDescribedBy",
-						"modal-footer-left",
-						"modal-footer-right"
-					]
+						"interactive"
+					],
+					outputs: ["iconClick"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -27070,8 +28265,9 @@ i0.ɵɵngDeclareClassMetadata({
 				BadgeComponent,
 				RouterLink,
 				EmptyStateComponent,
-				ButtonComponent
+				IconComponent
 			],
+			host: { "[class.pil-fill]": "fill()" },
 			template: `
     @for (section of displaySections(); track section.title ?? $index) {
       <div class="pil-section">
@@ -27128,11 +28324,7 @@ i0.ɵɵngDeclareClassMetadata({
                   <span [class.pil-muted]="item.muted" [class.pil-danger]="item.danger" [class.pil-multiline]="item.multiline">{{ item.value || '—' }}</span>
                 }
                 @if (item.editAction) {
-                  <ui-button class="pil-edit-btn" variant="icon" size="xs"
-                    [ariaLabel]="item.editTooltip ?? 'Edit'" [attr.title]="item.editTooltip ?? 'Edit'"
-                    (click)="item.editAction!()">
-                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                  </ui-button>
+                  <ui-icon class="pil-edit-btn" name="edit" [size]="14" [tooltip]="item.editTooltip ?? 'Edit'" (iconClick)="item.editAction!()" />
                 }
               </span>
             </div>
@@ -27141,7 +28333,7 @@ i0.ɵɵngDeclareClassMetadata({
       </div>
     }
   `,
-			styles: [":host{display:flex;flex-direction:column;gap:12px}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
+			styles: [":host{display:flex;flex-direction:column;gap:12px}:host(.pil-fill){flex:1;min-height:0}:host(.pil-fill) .pil-section{flex:1}.pil-section{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.pil-section-label{display:flex;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;letter-spacing:.07em;color:#94a3b8;text-transform:uppercase;padding:8px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.pil-header-link{font-size:.75rem;font-weight:500;color:#2563eb;text-decoration:none;text-transform:none;letter-spacing:0}.pil-header-link:hover{text-decoration:underline}.pil-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid #f1f5f9}.pil-row:last-child{border-bottom:none}.pil-row--inline{justify-content:flex-start}.pil-row--inline .pil-value{text-align:left;justify-content:flex-start;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;word-break:break-word}.pil-label{font-size:.8125rem;color:#64748b;flex-shrink:0}.pil-value{font-size:.875rem;font-weight:500;color:#1e293b;text-align:right;display:flex;align-items:center;justify-content:flex-end}.pil-multiline{white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}.pil-strong .pil-label,.pil-strong .pil-value,.pil-strong .pil-muted{font-weight:700;color:#0f172a}.pil-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}.pil-edit-btn{margin-left:4px;flex-shrink:0}ui-empty-state{padding:12px 0}.pil-muted{color:#1e293b;font-weight:400}.pil-danger{color:#ef4444;font-weight:600}.pil-link{font-size:.875rem;font-weight:500;color:#2563eb;text-decoration:none}.pil-link:hover{text-decoration:underline}.pil-link--href{overflow-wrap:anywhere;word-break:break-word}.pil-link:focus-visible,.pil-header-link:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}.pil-link-icon{display:inline-flex;align-items:center;gap:5px;font-size:.875rem;font-weight:500;color:#1e293b;text-decoration:none}.pil-link-icon svg{color:#94a3b8;flex-shrink:0}.pil-grid-2{display:grid;grid-template-columns:1fr 1fr}.pil-grid-cell{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-right:1px solid #f1f5f9}.pil-grid-cell:last-child{border-right:none}.pil-value--block{text-align:left;justify-content:flex-start}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -27168,6 +28360,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "labelColon",
 				required: false
 			}]
+		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
 		}]
 	}
 });
@@ -27298,75 +28498,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const ACTION_VERB = {
-	load: "loading",
-	save: "saving",
-	create: "creating",
-	update: "updating",
-	delete: "deleting",
-	send: "sending",
-	export: "exporting",
-	import: "importing",
-	upload: "uploading",
-	download: "downloading"
-};
-const ACTION_PERMISSION_VERB = {
-	load: "access",
-	save: "save",
-	create: "create",
-	update: "update",
-	delete: "delete",
-	send: "send",
-	export: "export",
-	import: "import",
-	upload: "upload",
-	download: "download"
-};
-const REQUEST_METHOD = "__forgerouteRequestMethod";
-const errorContextInterceptor = (req, next) => next(req).pipe(catchError$1((err) => {
-	if (err instanceof HttpErrorResponse && !(REQUEST_METHOD in err)) Object.defineProperty(err, REQUEST_METHOD, {
-		value: req.method.toUpperCase(),
-		enumerable: false
-	});
-	return throwError(() => err);
-}));
-function actionFromMethod(error) {
-	switch (error[REQUEST_METHOD]) {
-		case "POST":
-		case "PUT":
-		case "PATCH": return "save";
-		case "DELETE": return "delete";
-		default: return "load";
-	}
-}
-function withoutLeadingArticle(ctx) {
-	return ctx.replace(/^(?:the|an?)\s+/i, "") || ctx;
-}
-function getErrorMessage(error, fallbackContext, action) {
-	const ctx = fallbackContext?.trim() || "data";
-	const act = action ?? (error instanceof HttpErrorResponse ? actionFromMethod(error) : "load");
-	const failed = `There was an error ${ACTION_VERB[act]} ${ctx}.`;
-	if (error instanceof HttpErrorResponse) {
-		if (error.error?.message) return error.error.message;
-		if (typeof error.error === "string" && error.error.length < 200) return error.error;
-		switch (error.status) {
-			case 0: return `${failed} Please check your connection and try again.`;
-			case 401: return "Your session has expired. Please log in again.";
-			case 403: return `You don't have permission to ${ACTION_PERMISSION_VERB[act]} ${ctx}.`;
-			case 404: return `The ${withoutLeadingArticle(ctx)} you're looking for could not be found.`;
-			case 408: return `${failed} The request timed out — please try again.`;
-			case 422: return "The data you submitted is invalid. Please check your input and try again.";
-			case 429: return `${failed} Too many requests — please wait a moment and try again.`;
-			case 502:
-			case 503:
-			case 504: return `${failed} Please try again in a few minutes.`;
-			default: return `${failed} Please try again.`;
-		}
-	}
-	if (error instanceof Error) return error.message;
-	if (typeof error === "string") return error;
-	return `${failed} Please try again.`;
-}
 const US_STATES = [
 	{
 		value: "AL",
@@ -28416,6 +29547,98 @@ var TimelineComponent = class TimelineComponent {
 		this.emptyMessage = input("", ...ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []);
 		this.maxHeight = input("", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
 		this.timePosition = input("below", ...ngDevMode ? [{ debugName: "timePosition" }] : /* istanbul ignore next */ []);
+		this.groupByDay = input(false, ...ngDevMode ? [{ debugName: "groupByDay" }] : /* istanbul ignore next */ []);
+		this.timeZone = input("", ...ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []);
+		this.now = input(null, ...ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []);
+		this.dayHeadingLevel = input(3, ...ngDevMode ? [{ debugName: "dayHeadingLevel" }] : /* istanbul ignore next */ []);
+		this.headingLevel = computed(() => {
+			const n = this.dayHeadingLevel();
+			return Number.isInteger(n) && n >= 1 && n <= 6 ? n : 3;
+		}, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+		this.groups = computed(() => {
+			if (!this.groupByDay()) return [];
+			const zone = this.timeZone() || void 0;
+			let fmt;
+			try {
+				fmt = new Intl.DateTimeFormat("en-US", {
+					timeZone: zone,
+					year: "numeric",
+					month: "2-digit",
+					day: "2-digit"
+				});
+			} catch {
+				fmt = new Intl.DateTimeFormat("en-US", {
+					year: "numeric",
+					month: "2-digit",
+					day: "2-digit"
+				});
+			}
+			const parts = (d) => {
+				const p = fmt.formatToParts(d);
+				const get = (t) => Number(p.find((x) => x.type === t)?.value);
+				return {
+					y: get("year"),
+					m: get("month"),
+					d: get("day")
+				};
+			};
+			const keyOf = (v) => `${v.y}-${String(v.m).padStart(2, "0")}-${String(v.d).padStart(2, "0")}`;
+			const nowRaw = this.now();
+			let nowDate = nowRaw == null ? /* @__PURE__ */ new Date() : new Date(nowRaw);
+			if (isNaN(nowDate.getTime())) nowDate = /* @__PURE__ */ new Date();
+			const t = parts(nowDate);
+			const todayKey = keyOf(t);
+			const yd = new Date(Date.UTC(t.y, t.m - 1, t.d - 1));
+			const yesterdayKey = keyOf({
+				y: yd.getUTCFullYear(),
+				m: yd.getUTCMonth() + 1,
+				d: yd.getUTCDate()
+			});
+			const labelFmt = (withYear, tz) => new Intl.DateTimeFormat("en-US", {
+				timeZone: tz,
+				month: "short",
+				day: "numeric",
+				...withYear ? { year: "numeric" } : {}
+			});
+			const label = (v) => keyOf(v) === todayKey ? "Today" : keyOf(v) === yesterdayKey ? "Yesterday" : labelFmt(v.y !== t.y, "UTC").format(new Date(Date.UTC(v.y, v.m - 1, v.d)));
+			const dayOf = (iso) => {
+				const m = iso ? /^(\d{4})-(\d{2})-(\d{2})(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?$/.exec(iso) : null;
+				if (!m) return null;
+				const y = Number(m[1]), mo = Number(m[2]), d = Number(m[3]);
+				const probe = new Date(Date.UTC(y, mo - 1, d));
+				if (probe.getUTCFullYear() !== y || probe.getUTCMonth() !== mo - 1 || probe.getUTCDate() !== d) return null;
+				if (m[4] !== void 0 && (Number(m[4]) > 23 || Number(m[5]) > 59 || m[6] !== void 0 && Number(m[6]) > 59)) return null;
+				if (m[7] === void 0) return {
+					y,
+					m: mo,
+					d
+				};
+				const inst = new Date(iso.replace(/([+-]\d{2})(\d{2})$/, "$1:$2"));
+				return isNaN(inst.getTime()) ? null : parts(inst);
+			};
+			const groups = [];
+			for (const item of this.items()) {
+				const v = dayOf(item.dateTime);
+				const last = groups[groups.length - 1];
+				if (!v) {
+					if (last) last.items.push(item);
+					else groups.push({
+						key: "",
+						label: "",
+						items: [item]
+					});
+					continue;
+				}
+				const key = keyOf(v);
+				if (last && last.key === key) last.items.push(item);
+				else groups.push({
+					key,
+					label: label(v),
+					items: [item]
+				});
+			}
+			return groups;
+		}, ...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
 	}
 	dotColor(item) {
 		return item.dotVariant ? BADGE_VARIANT_STYLES[item.dotVariant]?.color ?? null : null;
@@ -28472,6 +29695,34 @@ var TimelineComponent = class TimelineComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				groupByDay: {
+					classPropertyName: "groupByDay",
+					publicName: "groupByDay",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				timeZone: {
+					classPropertyName: "timeZone",
+					publicName: "timeZone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				now: {
+					classPropertyName: "now",
+					publicName: "now",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dayHeadingLevel: {
+					classPropertyName: "dayHeadingLevel",
+					publicName: "dayHeadingLevel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			ngImport: i0,
@@ -28488,29 +29739,47 @@ var TimelineComponent = class TimelineComponent {
       <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
     }
     <ng-template #listTpl>
-      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
-        @for (item of items(); track item.id ?? $index) {
-          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
-            <span class="tl-marker" aria-hidden="true">
-              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
-            </span>
-            <div class="tl-content">
-              <div class="tl-head">
-                <span class="tl-title">{{ item.title }}</span>
-                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
-                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
-                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
-                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+      @if (groupByDay()) {
+        <ol class="tl tl-grouped" [attr.aria-label]="ariaLabel() || null">
+          @for (g of groups(); track $index) {
+            <li class="tl-day-group" [attr.data-day]="g.key || null">
+              @if (g.label) { <div class="tl-day" role="heading" [attr.aria-level]="headingLevel()">{{ g.label }}</div> }
+              <ol class="tl-sub">
+                @for (item of g.items; track item.id ?? $index) {
+                  <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 }
-              </div>
-              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
-              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
-                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
-              }
-            </div>
-          </li>
-        }
-      </ol>
+              </ol>
+            </li>
+          }
+        </ol>
+      } @else {
+        <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+          @for (item of items(); track item.id ?? $index) {
+            <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+        </ol>
+      }
+    </ng-template>
+    <ng-template #itemTpl let-item>
+      <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
+        <span class="tl-marker" aria-hidden="true">
+          @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+        </span>
+        <div class="tl-content">
+          <div class="tl-head">
+            <span class="tl-title">{{ item.title }}</span>
+            @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+            @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+            @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+              <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+            }
+          </div>
+          @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+          @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
+            <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+          }
+        </div>
+      </li>
     </ng-template>
     <ng-template #badgeTpl let-b>
       @if (b.tooltip) {
@@ -28521,7 +29790,7 @@ var TimelineComponent = class TimelineComponent {
     </ng-template>
   `,
 			isInline: true,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
+			styles: [":host{display:block}.tl,.tl-sub{list-style:none;margin:0;padding:0}.tl-day-group+.tl-day-group{margin-top:16px}.tl-day{margin:0 0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#64748b}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -28602,29 +29871,47 @@ i0.ɵɵngDeclareClassMetadata({
       <ui-hint class="tl-empty">{{ emptyMessage() }}</ui-hint>
     }
     <ng-template #listTpl>
-      <ol class="tl" [attr.aria-label]="ariaLabel() || null">
-        @for (item of items(); track item.id ?? $index) {
-          <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
-            <span class="tl-marker" aria-hidden="true">
-              @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
-            </span>
-            <div class="tl-content">
-              <div class="tl-head">
-                <span class="tl-title">{{ item.title }}</span>
-                @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
-                @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
-                @if (timePosition() === 'end' && (item.time || item.dateTime)) {
-                  <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+      @if (groupByDay()) {
+        <ol class="tl tl-grouped" [attr.aria-label]="ariaLabel() || null">
+          @for (g of groups(); track $index) {
+            <li class="tl-day-group" [attr.data-day]="g.key || null">
+              @if (g.label) { <div class="tl-day" role="heading" [attr.aria-level]="headingLevel()">{{ g.label }}</div> }
+              <ol class="tl-sub">
+                @for (item of g.items; track item.id ?? $index) {
+                  <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
                 }
-              </div>
-              @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
-              @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
-                <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
-              }
-            </div>
-          </li>
-        }
-      </ol>
+              </ol>
+            </li>
+          }
+        </ol>
+      } @else {
+        <ol class="tl" [attr.aria-label]="ariaLabel() || null">
+          @for (item of items(); track item.id ?? $index) {
+            <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{ $implicit: item }" />
+          }
+        </ol>
+      }
+    </ng-template>
+    <ng-template #itemTpl let-item>
+      <li [attr.data-testid]="item.testId || null" class="tl-item" [class]="'tl-item tl-item--' + (item.tone ?? 'default')" [class.tl-item--icon]="!!item.icon" [style.--tl-color]="dotColor(item)">
+        <span class="tl-marker" aria-hidden="true">
+          @if (item.icon) { <ui-icon [name]="item.icon" [interactive]="false" [size]="12" /> }
+        </span>
+        <div class="tl-content">
+          <div class="tl-head">
+            <span class="tl-title">{{ item.title }}</span>
+            @if (item.badge) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: item.badge }" /> }
+            @for (b of item.badges ?? []; track $index) { <ng-container [ngTemplateOutlet]="badgeTpl" [ngTemplateOutletContext]="{ $implicit: b }" /> }
+            @if (timePosition() === 'end' && (item.time || item.dateTime)) {
+              <time class="tl-time tl-time--end" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+            }
+          </div>
+          @if (item.description) { <p class="tl-description">{{ item.description }}</p> }
+          @if (timePosition() !== 'end' && (item.time || item.dateTime)) {
+            <time class="tl-time" [attr.datetime]="item.dateTime || null">{{ item.time || item.dateTime }}</time>
+          }
+        </div>
+      </li>
     </ng-template>
     <ng-template #badgeTpl let-b>
       @if (b.tooltip) {
@@ -28634,7 +29921,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </ng-template>
   `,
-			styles: [":host{display:block}.tl{list-style:none;margin:0;padding:0}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
+			styles: [":host{display:block}.tl,.tl-sub{list-style:none;margin:0;padding:0}.tl-day-group+.tl-day-group{margin-top:16px}.tl-day{margin:0 0 10px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#64748b}.tl-item{position:relative;display:flex;gap:12px;padding-bottom:16px;--tl-color: #475569}.tl-item:last-child{padding-bottom:0}.tl-item:before{content:\"\";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;background:#e2e8f0}.tl-item:last-child:before{display:none}.tl-item--success{--tl-color: #15803d}.tl-item--warning{--tl-color: #b45309}.tl-item--danger{--tl-color: #b91c1c}.tl-marker{flex-shrink:0;box-sizing:border-box;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--tl-color);border:3px solid #fff;box-shadow:0 0 0 1px var(--tl-color);display:inline-flex;align-items:center;justify-content:center;position:relative;z-index:1}.tl-item--icon .tl-marker{border:none;box-shadow:none;color:#fff}.tl-content{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}.tl-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}.tl-badge-tip{display:inline-flex;border-radius:999px}.tl-badge-tip:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.tl-time--end{display:inline;margin:0 0 0 auto;padding-left:8px;white-space:nowrap}.tl-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:8px}.tl-scroll:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.tl-title{font-size:.875rem;font-weight:600;color:#1e293b;line-height:1.4}.tl-description{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:#475569}.tl-time{display:block;margin-top:2px;font-size:.75rem;color:#64748b}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -28677,6 +29964,38 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "timePosition",
 				required: false
 			}]
+		}],
+		groupByDay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupByDay",
+				required: false
+			}]
+		}],
+		timeZone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeZone",
+				required: false
+			}]
+		}],
+		now: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "now",
+				required: false
+			}]
+		}],
+		dayHeadingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayHeadingLevel",
+				required: false
+			}]
 		}]
 	}
 });
@@ -33305,6 +34624,7 @@ var DetailCardComponent = class DetailCardComponent {
 		this.subtitle = input("", ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
 		this.background = input("", ...ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []);
 		this.headerBackground = input("", ...ngDevMode ? [{ debugName: "headerBackground" }] : /* istanbul ignore next */ []);
+		this.footerBackground = input("", ...ngDevMode ? [{ debugName: "footerBackground" }] : /* istanbul ignore next */ []);
 		this.textColor = input("", ...ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []);
 		this.showHeader = input(true, ...ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []);
 		this.collapsible = input(true, ...ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []);
@@ -33421,6 +34741,13 @@ var DetailCardComponent = class DetailCardComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				footerBackground: {
+					classPropertyName: "footerBackground",
+					publicName: "footerBackground",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				textColor: {
 					classPropertyName: "textColor",
 					publicName: "textColor",
@@ -33578,10 +34905,11 @@ var DetailCardComponent = class DetailCardComponent {
           <ng-content />
         </div>
       </div>
+      <div class="dc-footer" [class.dc-footer--hidden]="!isOpen()" [style.background]="footerBackground() || null"><ng-content select="[card-footer]" /></div>
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.8125rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}.dc-footer{padding:10px 18px;border-top:1px solid #f1f5f9}.dc-footer:empty,.dc-footer.dc-footer--hidden{display:none}.dc-has-bg .dc-footer{border-top-color:#94a3b859}@media(max-width:480px){.dc-footer{padding:10px 14px}.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"],
 			dependencies: [{
 				kind: "component",
 				type: ButtonComponent,
@@ -33678,9 +35006,10 @@ i0.ɵɵngDeclareClassMetadata({
           <ng-content />
         </div>
       </div>
+      <div class="dc-footer" [class.dc-footer--hidden]="!isOpen()" [style.background]="footerBackground() || null"><ng-content select="[card-footer]" /></div>
     </div>
   `,
-			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.75rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}@media(max-width:480px){.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
+			styles: [":host{display:block;margin-bottom:16px}:host(:last-child){margin-bottom:0}:host(.dc-fill-host){height:100%;margin-bottom:0}.dc.dc-fill{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.dc.dc-fill .dc-body-wrap{flex:1 1 auto;min-height:0}.dc.dc-fill .dc-body{display:flex;flex-direction:column}.dc-selectable{cursor:pointer}.dc-selected{outline:2px solid #3b82f6;outline-offset:-1px}.dc{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.dc-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:14px 18px}.dc-header.open{border-bottom:1px solid #f1f5f9}.dc-has-bg .dc-header.open{border-bottom-color:#94a3b859}.dc-header.collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}@media(hover:hover){.dc-header.collapsible:hover{background:#f8fafc}}.dc-chevron{flex-shrink:0;color:var(--dc-text, #64748b)}.dc-chevron svg{transition:transform .2s}.dc-chevron svg.rotated{transform:rotate(-90deg)}.dc-header-text{display:flex;flex-direction:column;gap:2px;flex:1 1 160px;min-width:0;word-break:break-word;overflow-wrap:anywhere}.dc-title{font-size:.8125rem;font-weight:800;letter-spacing:.07em;color:var(--dc-text, #1e293b);line-height:1.3;text-transform:uppercase}.dc-title--as-written{text-transform:none}.dc-subtitle{font-size:.8125rem;color:var(--dc-text, #475569)}.dc-has-text-color .dc-subtitle{opacity:.8}.dc-has-text-color .dc-header.open{border-bottom-color:#94a3b859}.dc-edit{flex-shrink:0;margin-left:auto}.dc-edit-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;font-size:.8rem;font-weight:500;line-height:1.4;color:#64748b;background:none;border:1px solid #e2e8f0;border-radius:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.dc-edit-action:hover{background:#f1f5f9;color:#1e293b}.dc-edit-action:focus-visible{outline:2px solid var(--ui-focus, #3b82f6);outline-offset:2px}@media(pointer:coarse),(max-width:480px){.dc-edit-action{min-height:44px}}.dc-body-wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease}.dc-body-wrap.collapsed{grid-template-rows:0fr}.dc-body{padding:16px 18px;min-height:0;overflow:hidden}.dc-footer{padding:10px 18px;border-top:1px solid #f1f5f9}.dc-footer:empty,.dc-footer.dc-footer--hidden{display:none}.dc-has-bg .dc-footer{border-top-color:#94a3b859}@media(max-width:480px){.dc-footer{padding:10px 14px}.dc-header{padding:12px 14px}.dc-body{padding:14px}.dc-edit{margin-left:0}}@media(prefers-reduced-motion:reduce){.dc-body-wrap,.dc-chevron svg{transition:none}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33748,6 +35077,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		footerBackground: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "footerBackground",
+				required: false
+			}]
+		}],
 		textColor: [{
 			type: i0.Input,
 			args: [{
@@ -33980,6 +35317,10 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var BoardCardDirective = class BoardCardDirective {
 	constructor() {
+		this.typeFrom = input("", {
+			...ngDevMode ? { debugName: "typeFrom" } : /* istanbul ignore next */ {},
+			alias: "uiBoardCard"
+		});
 		this.template = inject(TemplateRef);
 	}
 	static ngTemplateContextGuard(_dir, _ctx) {
@@ -33997,11 +35338,18 @@ var BoardCardDirective = class BoardCardDirective {
 	}
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
-			minVersion: "14.0.0",
+			minVersion: "17.1.0",
 			version: "22.2.2",
 			type: BoardCardDirective,
 			isStandalone: true,
 			selector: "ng-template[uiBoardCard]",
+			inputs: { typeFrom: {
+				classPropertyName: "typeFrom",
+				publicName: "uiBoardCard",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
 			ngImport: i0
 		});
 	}
@@ -34017,8 +35365,17 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ng-template[uiBoardCard]",
 			standalone: true
 		}]
-	}]
+	}],
+	propDecorators: { typeFrom: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiBoardCard",
+			required: false
+		}]
+	}] }
 });
+let nextBoardId = 0;
 const DOT_COLORS = {
 	blue: "#3b82f6",
 	cyan: "#06b6d4",
@@ -34032,6 +35389,25 @@ const DOT_COLORS = {
 	gray: "#6b7280"
 };
 var BoardComponent = class BoardComponent {
+	limitOf(col) {
+		const size = this.pageSize() > 0 ? Math.floor(this.pageSize()) : 0;
+		if (!size) return col.items.length;
+		let limit = this.drawn()[col.key] ?? size;
+		const moved = this.movedTo();
+		if (moved?.to === col.key) limit = Math.max(limit, col.items.findIndex((i) => this.itemKey()(i) === moved.key) + 1);
+		return limit;
+	}
+	showMore(key) {
+		const size = Math.floor(this.pageSize());
+		const col = this.cols().find((c) => c.key === key);
+		if (!col || size < 1) return;
+		const limit = Math.min(col.items.length, this.limitOf(col) + size);
+		this.drawn.update((d) => ({
+			...d,
+			[key]: limit
+		}));
+		this.announcement.set(`Showing ${limit} of ${col.items.length} ${this.itemNounPlural()} in ${col.label}`);
+	}
 	constructor() {
 		this.columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
 		this.itemKey = input.required(...ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []);
@@ -34048,12 +35424,29 @@ var BoardComponent = class BoardComponent {
 		this.itemNoun = input("item", ...ngDevMode ? [{ debugName: "itemNoun" }] : /* istanbul ignore next */ []);
 		this.itemNounPlural = input("items", ...ngDevMode ? [{ debugName: "itemNounPlural" }] : /* istanbul ignore next */ []);
 		this.retryLabel = input("Retry", ...ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []);
+		this.pageSize = input(50, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
 		this.cardClick = output();
 		this.cardAction = output();
 		this.itemMove = output();
 		this.retry = output();
 		this.card = contentChild(BoardCardDirective, ...ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []);
 		this.cols = linkedSignal(() => this.columns(), ...ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []);
+		this.drawn = signal({}, ...ngDevMode ? [{ debugName: "drawn" }] : /* istanbul ignore next */ []);
+		this.movedTo = signal(null, ...ngDevMode ? [{ debugName: "movedTo" }] : /* istanbul ignore next */ []);
+		this.shownCols = computed(() => {
+			const size = this.pageSize() > 0 ? Math.floor(this.pageSize()) : 0;
+			return this.cols().map((col) => {
+				const limit = this.limitOf(col);
+				const hidden = Math.max(0, col.items.length - limit);
+				return {
+					col,
+					shown: hidden ? col.items.slice(0, limit) : col.items,
+					hidden,
+					next: Math.min(size, hidden)
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "shownCols" }] : /* istanbul ignore next */ []);
+		this.hintId = `ub-hint-${nextBoardId++}`;
 		this.overKey = signal(null, ...ngDevMode ? [{ debugName: "overKey" }] : /* istanbul ignore next */ []);
 		this.draggingKey = signal(null, ...ngDevMode ? [{ debugName: "draggingKey" }] : /* istanbul ignore next */ []);
 		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
@@ -34061,7 +35454,12 @@ var BoardComponent = class BoardComponent {
 		this.drag = null;
 		this.skeletonColumns = computed(() => Array.from({ length: Math.max(this.columns().length, 4) }, (_, i) => i), ...ngDevMode ? [{ debugName: "skeletonColumns" }] : /* istanbul ignore next */ []);
 		this.canDrag = computed(() => !this.readOnly() && !this.moveDisabled(), ...ngDevMode ? [{ debugName: "canDrag" }] : /* istanbul ignore next */ []);
-		this.canMoveAny = this.canDrag;
+		effect(() => {
+			if (this.loading()) {
+				this.drawn.set({});
+				this.movedTo.set(null);
+			}
+		});
 	}
 	dot(color) {
 		return color && DOT_COLORS[color] || color || "#3b82f6";
@@ -34147,11 +35545,18 @@ var BoardComponent = class BoardComponent {
 			};
 			return c;
 		}));
+		this.movedTo.set({
+			key,
+			to
+		});
 		this.itemMove.emit({
 			item,
 			from,
 			to,
-			revert: () => this.cols.set(before)
+			revert: () => {
+				this.cols.set(before);
+				this.movedTo.set(null);
+			}
 		});
 	}
 	static {
@@ -34276,6 +35681,13 @@ var BoardComponent = class BoardComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				pageSize: {
+					classPropertyName: "pageSize",
+					publicName: "pageSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -34320,8 +35732,9 @@ var BoardComponent = class BoardComponent {
       } @else if (cols().length === 0) {
         <div class="ub-message" role="status"><p>{{ emptyMessage() }}</p></div>
       } @else {
-        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()">
-          @for (col of cols(); track col.key) {
+        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()" [attr.aria-describedby]="canDrag() ? hintId : null">
+          @for (view of shownCols(); track view.col.key) {
+            @let col = view.col;
             <div class="ub-col"
                  [class.ub-col--over]="overKey() === col.key"
                  [class.ub-col--success]="col.tone === 'success'"
@@ -34337,19 +35750,20 @@ var BoardComponent = class BoardComponent {
                   <span class="ub-col__count" aria-hidden="true">{{ col.items.length }}</span>
                 </div>
                 @if (col.summary) {
-                  <div class="ub-col__summary" [attr.aria-label]="col.summaryLabel || col.summary">{{ col.summary }}</div>
+                  <div class="ub-col__summary"><span aria-hidden="true">{{ col.summary }}</span><span class="ub-sr-only">{{ col.summaryLabel || col.summary }}</span></div>
                 }
               </div>
-              <div class="ub-col__cards" role="list">
-                @for (item of col.items; track itemKey()(item)) {
+              <div class="ub-col__cards" [attr.role]="col.items.length ? 'list' : null">
+                @for (item of view.shown; track itemKey()(item)) {
+                  @let key = itemKey()(item);
                   <div class="ub-card"
                        [class.ub-card--success]="col.tone === 'success'"
-                       [class.ub-card--dragging]="draggingKey() === itemKey()(item)"
+                       [class.ub-card--dragging]="draggingKey() === key"
                        role="listitem"
                        tabindex="0"
-                       [attr.data-board-key]="itemKey()(item)"
+                       [attr.data-board-key]="key"
                        [attr.aria-label]="itemLabel()(item)"
-                       [attr.aria-keyshortcuts]="canMoveAny() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
+                       [attr.aria-keyshortcuts]="canDrag() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
                        [attr.draggable]="canDrag() ? 'true' : null"
                        (dragstart)="onDragStart($event, item, col)"
                        (dragend)="onDragEnd()"
@@ -34360,6 +35774,11 @@ var BoardComponent = class BoardComponent {
                     }
                   </div>
                 }
+                @if (view.hidden > 0) {
+                  <div class="ub-col__more" role="listitem">
+                    <button type="button" class="ub-more-btn" [attr.aria-label]="'Show ' + view.next + ' more (' + view.hidden + ' not shown), ' + col.label" (click)="showMore(col.key)">Show {{ view.next }} more ({{ view.hidden }} not shown)</button>
+                  </div>
+                }
                 @if (col.items.length === 0) {
                   <div class="ub-col__empty" role="status">{{ col.emptyText || emptyColumnText() }}</div>
                 }
@@ -34367,12 +35786,15 @@ var BoardComponent = class BoardComponent {
             </div>
           }
         </div>
+        @if (canDrag()) {
+          <p class="ub-sr-only" [id]="hintId">Drag a card to another column to move it, or focus a card and press Shift with the Left or Right Arrow key.</p>
+        }
         <div class="ub-sr-only" role="status" aria-live="polite">{{ announcement() }}</div>
       }
     </div>
   `,
 			isInline: true,
-			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:flex-start}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;max-height:calc(100vh - 200px);transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#94a3b8;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#94a3b8;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#94a3b8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#94a3b8}.ub-card__activity--stale{color:#d97706;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"],
+			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:stretch}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;min-height:0;transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#64748b;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__more{flex-shrink:0}.ub-more-btn{width:100%;padding:8px 10px;font:inherit;font-size:12px;font-weight:600;color:#475569;background:#fff;border:1.5px dashed #cbd5e1;border-radius:8px;cursor:pointer}.ub-more-btn:hover{background:#f1f5f9;border-color:#94a3b8}.ub-more-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#64748b;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#64748b;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#64748b}.ub-card__activity--stale{color:#b45309;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}.ub-card,.ub-col{transition:none}.ub-card--dragging{transform:none}}@media(pointer:coarse){.ub-more-btn{min-height:44px}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -34472,8 +35894,9 @@ i0.ɵɵngDeclareClassMetadata({
       } @else if (cols().length === 0) {
         <div class="ub-message" role="status"><p>{{ emptyMessage() }}</p></div>
       } @else {
-        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()">
-          @for (col of cols(); track col.key) {
+        <div class="ub-board" role="region" [attr.aria-label]="ariaLabel()" [attr.aria-describedby]="canDrag() ? hintId : null">
+          @for (view of shownCols(); track view.col.key) {
+            @let col = view.col;
             <div class="ub-col"
                  [class.ub-col--over]="overKey() === col.key"
                  [class.ub-col--success]="col.tone === 'success'"
@@ -34489,19 +35912,20 @@ i0.ɵɵngDeclareClassMetadata({
                   <span class="ub-col__count" aria-hidden="true">{{ col.items.length }}</span>
                 </div>
                 @if (col.summary) {
-                  <div class="ub-col__summary" [attr.aria-label]="col.summaryLabel || col.summary">{{ col.summary }}</div>
+                  <div class="ub-col__summary"><span aria-hidden="true">{{ col.summary }}</span><span class="ub-sr-only">{{ col.summaryLabel || col.summary }}</span></div>
                 }
               </div>
-              <div class="ub-col__cards" role="list">
-                @for (item of col.items; track itemKey()(item)) {
+              <div class="ub-col__cards" [attr.role]="col.items.length ? 'list' : null">
+                @for (item of view.shown; track itemKey()(item)) {
+                  @let key = itemKey()(item);
                   <div class="ub-card"
                        [class.ub-card--success]="col.tone === 'success'"
-                       [class.ub-card--dragging]="draggingKey() === itemKey()(item)"
+                       [class.ub-card--dragging]="draggingKey() === key"
                        role="listitem"
                        tabindex="0"
-                       [attr.data-board-key]="itemKey()(item)"
+                       [attr.data-board-key]="key"
                        [attr.aria-label]="itemLabel()(item)"
-                       [attr.aria-keyshortcuts]="canMoveAny() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
+                       [attr.aria-keyshortcuts]="canDrag() ? 'Shift+ArrowLeft Shift+ArrowRight' : null"
                        [attr.draggable]="canDrag() ? 'true' : null"
                        (dragstart)="onDragStart($event, item, col)"
                        (dragend)="onDragEnd()"
@@ -34512,6 +35936,11 @@ i0.ɵɵngDeclareClassMetadata({
                     }
                   </div>
                 }
+                @if (view.hidden > 0) {
+                  <div class="ub-col__more" role="listitem">
+                    <button type="button" class="ub-more-btn" [attr.aria-label]="'Show ' + view.next + ' more (' + view.hidden + ' not shown), ' + col.label" (click)="showMore(col.key)">Show {{ view.next }} more ({{ view.hidden }} not shown)</button>
+                  </div>
+                }
                 @if (col.items.length === 0) {
                   <div class="ub-col__empty" role="status">{{ col.emptyText || emptyColumnText() }}</div>
                 }
@@ -34519,13 +35948,17 @@ i0.ɵɵngDeclareClassMetadata({
             </div>
           }
         </div>
+        @if (canDrag()) {
+          <p class="ub-sr-only" [id]="hintId">Drag a card to another column to move it, or focus a card and press Shift with the Left or Right Arrow key.</p>
+        }
         <div class="ub-sr-only" role="status" aria-live="polite">{{ announcement() }}</div>
       }
     </div>
   `,
-			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:flex-start}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;max-height:calc(100vh - 200px);transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#94a3b8;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#94a3b8;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#94a3b8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#94a3b8}.ub-card__activity--stale{color:#d97706;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"]
+			styles: ["ui-board{display:flex;flex-direction:column;flex:1;min-height:0}.ub-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}.ub-board{display:flex;gap:12px;padding:0 0 16px;overflow-x:auto;overflow-y:hidden;height:100%;align-items:stretch}.ub-board::-webkit-scrollbar{height:6px}.ub-board::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.ub-board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.ub-col{flex:0 0 280px;min-width:280px;max-width:280px;display:flex;flex-direction:column;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;min-height:0;transition:border-color .15s,background .15s}.ub-col--over{border-color:#3b82f6;background:#eff6ff}.ub-col--success{background:#f0fdf4;border-color:#bbf7d0}.ub-col--success.ub-col--over{border-color:#22c55e;background:#dcfce7}.ub-col__header{padding:12px 14px 10px;border-bottom:1px solid #e2e8f0;flex-shrink:0}.ub-col__title{display:flex;align-items:center;gap:7px;margin-bottom:2px}.ub-col__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.ub-col__label{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.04em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-col__count{font-size:11px;font-weight:600;color:#fff;background:#64748b;border-radius:10px;padding:1px 7px;flex-shrink:0}.ub-col__summary{font-size:11px;color:#64748b;font-weight:500;margin-top:2px}.ub-col__cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:60px}.ub-col__cards::-webkit-scrollbar{width:4px}.ub-col__cards::-webkit-scrollbar-track{background:transparent}.ub-col__cards::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.ub-col__more{flex-shrink:0}.ub-more-btn{width:100%;padding:8px 10px;font:inherit;font-size:12px;font-weight:600;color:#475569;background:#fff;border:1.5px dashed #cbd5e1;border-radius:8px;cursor:pointer}.ub-more-btn:hover{background:#f1f5f9;border-color:#94a3b8}.ub-more-btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-col__empty{text-align:center;padding:24px 12px;color:#64748b;font-size:12px;border:1.5px dashed #e2e8f0;border-radius:8px;margin:4px 0}.ub-card{position:relative;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:box-shadow .12s,border-color .12s,opacity .12s,transform .12s}.ub-card[draggable=true]{cursor:grab}.ub-card[draggable=true]:active{cursor:grabbing}.ub-card:hover{border-color:#94a3b8;box-shadow:0 2px 8px #00000012}.ub-card:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ub-card--dragging{opacity:.4;transform:scale(.98);box-shadow:none}.ub-card--success{border-left:3px solid #22c55e}.ub-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}.ub-card__title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;flex:1;min-width:0;word-break:break-word}.ub-card:hover .ub-card__title{color:#2563eb}.ub-card__top-right{flex-shrink:0;margin-top:-2px}.ub-card__status-row{margin-bottom:5px}.ub-card__contact{font-size:12px;color:#475569;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__property{font-size:11px;color:#64748b;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ub-card__next-step{display:flex;align-items:flex-start;gap:4px;font-size:11px;color:#64748b;margin-bottom:6px;line-height:1.4}.ub-card__next-step svg{flex-shrink:0;margin-top:1px;color:#94a3b8}.ub-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9}.ub-card__value{font-size:12px;font-weight:700;color:#0f172a}.ub-card__activity{font-size:11px;color:#64748b}.ub-card__activity--stale{color:#b45309;font-weight:600}.ub-skeleton{display:flex;gap:12px;padding-bottom:16px}.ub-col-skeleton{flex:0 0 280px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.ub-col-skeleton__header,.ub-col-skeleton__card{background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:ub-shimmer 1.4s infinite}.ub-col-skeleton__header{height:32px;border-radius:6px}.ub-col-skeleton__card{height:90px;border-radius:8px}@keyframes ub-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.ub-col-skeleton__header,.ub-col-skeleton__card{animation:none}.ub-card,.ub-col{transition:none}.ub-card--dragging{transform:none}}@media(pointer:coarse){.ub-more-btn{min-height:44px}}.ub-message{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px;color:#64748b;font-size:14px;text-align:center}.ub-message p{margin:0}.ub-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(max-width:640px){.ub-board{flex-direction:column;overflow-x:hidden;overflow-y:auto;height:auto;align-items:stretch}.ub-col{flex:none;min-width:0;max-width:100%;width:100%;max-height:none}.ub-skeleton{flex-direction:column}.ub-col-skeleton{flex:none;width:100%}}\n"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		columns: [{
 			type: i0.Input,
@@ -34647,6 +36080,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		pageSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageSize",
+				required: false
+			}]
+		}],
 		cardClick: [{
 			type: i0.Output,
 			args: ["cardClick"]
@@ -36061,6 +37502,208 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+function px(v, fallback) {
+	if (v === null || v === void 0 || v === "") return fallback;
+	const n = Number(v);
+	return Number.isFinite(n) && n >= 0 ? n : fallback;
+}
+var SidebarLayoutComponent = class SidebarLayoutComponent {
+	constructor() {
+		this.sideWidth = input("320px", ...ngDevMode ? [{ debugName: "sideWidth" }] : /* istanbul ignore next */ []);
+		this.sidePosition = input("end", ...ngDevMode ? [{ debugName: "sidePosition" }] : /* istanbul ignore next */ []);
+		this.gap = input("md", ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
+		this.stickySide = input(true, ...ngDevMode ? [{ debugName: "stickySide" }] : /* istanbul ignore next */ []);
+		this.stickyTop = input(16, ...ngDevMode ? [{ debugName: "stickyTop" }] : /* istanbul ignore next */ []);
+		this.stickyOffset = input(32, ...ngDevMode ? [{ debugName: "stickyOffset" }] : /* istanbul ignore next */ []);
+		this.collapseAt = input("md", ...ngDevMode ? [{ debugName: "collapseAt" }] : /* istanbul ignore next */ []);
+		this.sideFirstWhenCollapsed = input(true, ...ngDevMode ? [{ debugName: "sideFirstWhenCollapsed" }] : /* istanbul ignore next */ []);
+		this.position = computed(() => this.sidePosition() === "start" ? "start" : "end", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.sideCss = computed(() => {
+			const v = String(this.sideWidth() ?? "").trim();
+			return v && CSS_LENGTH.test(v) ? v : "320px";
+		}, ...ngDevMode ? [{ debugName: "sideCss" }] : /* istanbul ignore next */ []);
+		this.gapCss = computed(() => resolveLayoutGap(this.gap(), "md"), ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
+		this.topCss = computed(() => `${px(this.stickyTop(), 16)}px`, ...ngDevMode ? [{ debugName: "topCss" }] : /* istanbul ignore next */ []);
+		this.offCss = computed(() => `${px(this.stickyOffset(), 32)}px`, ...ngDevMode ? [{ debugName: "offCss" }] : /* istanbul ignore next */ []);
+		this.rootClass = computed(() => {
+			const c = this.collapseAt();
+			const collapse = c === "never" ? "" : c === "sm" || c === "lg" ? `sl-c-${c}` : "sl-c-md";
+			return [
+				this.position() === "start" ? "sl-start" : "",
+				this.stickySide() ? "sl-sticky" : "",
+				collapse,
+				collapse && this.sideFirstWhenCollapsed() ? "sl-first" : ""
+			].filter(Boolean).join(" ");
+		}, ...ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SidebarLayoutComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: SidebarLayoutComponent,
+			isStandalone: true,
+			selector: "ui-sidebar-layout",
+			inputs: {
+				sideWidth: {
+					classPropertyName: "sideWidth",
+					publicName: "sideWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sidePosition: {
+					classPropertyName: "sidePosition",
+					publicName: "sidePosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				gap: {
+					classPropertyName: "gap",
+					publicName: "gap",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickySide: {
+					classPropertyName: "stickySide",
+					publicName: "stickySide",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyTop: {
+					classPropertyName: "stickyTop",
+					publicName: "stickyTop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyOffset: {
+					classPropertyName: "stickyOffset",
+					publicName: "stickyOffset",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				collapseAt: {
+					classPropertyName: "collapseAt",
+					publicName: "collapseAt",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sideFirstWhenCollapsed: {
+					classPropertyName: "sideFirstWhenCollapsed",
+					publicName: "sideFirstWhenCollapsed",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { properties: { "attr.data-side-position": "position()" } },
+			ngImport: i0,
+			template: `<div class="sl" [class]="rootClass()" [style.--sl-side-w]="sideCss()" [style.--sl-gap]="gapCss()" [style.--sl-top]="topCss()" [style.--sl-off]="offCss()" [style.row-gap]="gapCss()"><div class="sl-main"><ng-content select="[layout-main]" /></div><div class="sl-side"><ng-content select="[layout-side]" /></div></div>`,
+			isInline: true,
+			styles: [":host{display:block}.sl{display:grid;grid-template-columns:minmax(0,1fr) auto}.sl-main{grid-column:1;grid-row:1;min-width:0}.sl-side{grid-column:2;grid-row:1;box-sizing:border-box;width:var(--sl-side-w, 320px);max-width:100%;min-width:0;margin-inline-start:var(--sl-gap, 16px)}.sl-side:empty{display:none}.sl.sl-start{grid-template-columns:auto minmax(0,1fr)}.sl.sl-start .sl-main{grid-column:2}.sl.sl-start .sl-side{grid-column:1;margin-inline-start:0;margin-inline-end:var(--sl-gap, 16px)}.sl.sl-sticky .sl-side{position:-webkit-sticky;position:sticky;top:var(--sl-top, 16px);align-self:start;max-height:calc(100vh - (var(--sl-top, 16px) + var(--sl-off, 32px)));max-height:calc(100dvh - (var(--sl-top, 16px) + var(--sl-off, 32px)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:640px){.sl.sl-c-sm{grid-template-columns:minmax(0,1fr)}.sl.sl-c-sm .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-sm .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-sm.sl-first .sl-side{order:-1}}@media(max-width:900px){.sl.sl-c-md{grid-template-columns:minmax(0,1fr)}.sl.sl-c-md .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-md .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-md.sl-first .sl-side{order:-1}}@media(max-width:1200px){.sl.sl-c-lg{grid-template-columns:minmax(0,1fr)}.sl.sl-c-lg .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-lg .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-lg.sl-first .sl-side{order:-1}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SidebarLayoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-sidebar-layout",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[attr.data-side-position]": "position()" },
+			template: `<div class="sl" [class]="rootClass()" [style.--sl-side-w]="sideCss()" [style.--sl-gap]="gapCss()" [style.--sl-top]="topCss()" [style.--sl-off]="offCss()" [style.row-gap]="gapCss()"><div class="sl-main"><ng-content select="[layout-main]" /></div><div class="sl-side"><ng-content select="[layout-side]" /></div></div>`,
+			styles: [":host{display:block}.sl{display:grid;grid-template-columns:minmax(0,1fr) auto}.sl-main{grid-column:1;grid-row:1;min-width:0}.sl-side{grid-column:2;grid-row:1;box-sizing:border-box;width:var(--sl-side-w, 320px);max-width:100%;min-width:0;margin-inline-start:var(--sl-gap, 16px)}.sl-side:empty{display:none}.sl.sl-start{grid-template-columns:auto minmax(0,1fr)}.sl.sl-start .sl-main{grid-column:2}.sl.sl-start .sl-side{grid-column:1;margin-inline-start:0;margin-inline-end:var(--sl-gap, 16px)}.sl.sl-sticky .sl-side{position:-webkit-sticky;position:sticky;top:var(--sl-top, 16px);align-self:start;max-height:calc(100vh - (var(--sl-top, 16px) + var(--sl-off, 32px)));max-height:calc(100dvh - (var(--sl-top, 16px) + var(--sl-off, 32px)));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}@media(max-width:640px){.sl.sl-c-sm{grid-template-columns:minmax(0,1fr)}.sl.sl-c-sm .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-sm .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-sm.sl-first .sl-side{order:-1}}@media(max-width:900px){.sl.sl-c-md{grid-template-columns:minmax(0,1fr)}.sl.sl-c-md .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-md .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-md.sl-first .sl-side{order:-1}}@media(max-width:1200px){.sl.sl-c-lg{grid-template-columns:minmax(0,1fr)}.sl.sl-c-lg .sl-main{grid-column:1;grid-row:auto}.sl.sl-c-lg .sl-side{grid-column:1;grid-row:auto;width:auto;margin-inline-start:0;margin-inline-end:0;position:static;top:auto;align-self:auto;max-height:none;overflow-y:visible}.sl.sl-c-lg.sl-first .sl-side{order:-1}}\n"]
+		}]
+	}],
+	propDecorators: {
+		sideWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideWidth",
+				required: false
+			}]
+		}],
+		sidePosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sidePosition",
+				required: false
+			}]
+		}],
+		gap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gap",
+				required: false
+			}]
+		}],
+		stickySide: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickySide",
+				required: false
+			}]
+		}],
+		stickyTop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyTop",
+				required: false
+			}]
+		}],
+		stickyOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyOffset",
+				required: false
+			}]
+		}],
+		collapseAt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseAt",
+				required: false
+			}]
+		}],
+		sideFirstWhenCollapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideFirstWhenCollapsed",
+				required: false
+			}]
+		}]
+	}
+});
 const JUSTIFY = {
 	start: "flex-start",
 	center: "center",
@@ -38499,6 +40142,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BoardCardDirective, BoardComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CalendarComponent, CardListItemComponent, CheckboxComponent, CheckboxTrailingDirective, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_PASSWORD_RULES, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FadeComponent, FileInputComponent, FormColSpanDirective, FormComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImageComponent, ImageGalleryComponent, ImageGalleryDialogComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, LiveRegionComponent, ModalComponent, MoreMenuComponent, MultiSelectComponent, NOTES_MAX_LENGTH, NotesComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PageComponent, PaginationComponent, PanelInfoListComponent, PasswordRequirementsComponent, PdfHotspotComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RadioOptionContentDirective, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SectionHeaderComponent, SelectComponent, ShowComponent, SidePanelComponent, SidebarLayoutComponent, SignaturePadComponent, SkeletonComponent, StackComponent, StarComponent, StepperComponent, TableToolbarComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, TimelineComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, acceptLabel, appShellGroupsStorageKey, autoVariant, buildDefaultSchedule, builtInActionIcon, businessTimeOptions, createFieldReveal, decodeFilterValues, digitsOnly, downloadBlob, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatAddress, formatCurrency, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, normalizeHexColor, parseBizHours, parseIso, parseTime, passwordMeetsRules, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, serializeBizHours };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map