@forgeroute/ui 0.3.13 → 0.4.0

package/fesm2022/forgeroute-ui.mjs

@@ -13891,6 +13891,8 @@ var AlertComponent = class AlertComponent {
 		this.variant = input("info", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
 		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+		this.quiet = input(false, ...ngDevMode ? [{ debugName: "quiet" }] : /* istanbul ignore next */ []);
+		this.compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
 		this.dismissed = output();
 	}
 	static {
@@ -13931,12 +13933,26 @@ var AlertComponent = class AlertComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				quiet: {
+					classPropertyName: "quiet",
+					publicName: "quiet",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				compact: {
+					classPropertyName: "compact",
+					publicName: "compact",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { dismissed: "dismissed" },
 			ngImport: i0,
 			template: `
-    <div class="alert" [class]="'alert alert--' + variant()" [attr.role]="variant() === 'danger' ? 'alert' : 'status'">
+    <div class="alert" [class]="'alert alert--' + variant()" [class.alert--compact]="compact()" [attr.role]="quiet() ? null : (variant() === 'danger' ? 'alert' : 'status')">
       <div class="alert-content">
         @if (title()) { <div class="alert-title">{{ title() }}</div> }
         <div class="alert-body"><ng-content /></div>
@@ -13951,7 +13967,7 @@ var AlertComponent = class AlertComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"],
+			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -13968,7 +13984,7 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
-    <div class="alert" [class]="'alert alert--' + variant()" [attr.role]="variant() === 'danger' ? 'alert' : 'status'">
+    <div class="alert" [class]="'alert alert--' + variant()" [class.alert--compact]="compact()" [attr.role]="quiet() ? null : (variant() === 'danger' ? 'alert' : 'status')">
       <div class="alert-content">
         @if (title()) { <div class="alert-title">{{ title() }}</div> }
         <div class="alert-body"><ng-content /></div>
@@ -13982,7 +13998,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"]
+			styles: [":host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:8px;border-left:4px solid transparent;font-size:13px;line-height:1.5}.alert--info{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a}.alert--success{background:#dcfce7;border-color:#22c55e;color:#14532d}.alert--warning{background:#ffedd5;border-color:#f97316;color:#7c2d12}.alert--danger{background:#fee2e2;border-color:#ef4444;color:#7f1d1d}.alert--compact{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.4}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-weight:700}.alert-body{opacity:.9;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.alert-dismiss{flex-shrink:0;background:none;border:none;cursor:pointer;padding:2px;border-radius:4px;color:inherit;opacity:.6;display:flex;align-items:center;transition:opacity .15s}.alert-dismiss:hover{opacity:1}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -14010,6 +14026,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		quiet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "quiet",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
 		dismissed: [{
 			type: i0.Output,
 			args: ["dismissed"]
@@ -14563,7 +14595,9 @@ var PhoneNumberPickerComponent = class PhoneNumberPickerComponent {
 					inputs: [
 						"variant",
 						"title",
-						"dismissible"
+						"dismissible",
+						"quiet",
+						"compact"
 					],
 					outputs: ["dismissed"]
 				},
@@ -22845,7 +22879,9 @@ var SendEmailComponent = class SendEmailComponent {
 					inputs: [
 						"variant",
 						"title",
-						"dismissible"
+						"dismissible",
+						"quiet",
+						"compact"
 					],
 					outputs: ["dismissed"]
 				}
@@ -24463,7 +24499,9 @@ var SendTextComponent = class SendTextComponent {
 					inputs: [
 						"variant",
 						"title",
-						"dismissible"
+						"dismissible",
+						"quiet",
+						"compact"
 					],
 					outputs: ["dismissed"]
 				}
@@ -26546,6 +26584,108 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const SIZE_REM = {
+	sm: "0.8125rem",
+	md: "0.875rem",
+	lg: "1rem"
+};
+var TextComponent = class TextComponent {
+	constructor() {
+		this.text = input("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.tone = input("default", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+		this.fontSize = computed(() => SIZE_REM[this.size()] ?? SIZE_REM.md, ...ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TextComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: TextComponent,
+			isStandalone: true,
+			selector: "ui-text",
+			inputs: {
+				text: {
+					classPropertyName: "text",
+					publicName: "text",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tone: {
+					classPropertyName: "tone",
+					publicName: "tone",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()">{{ text() }}</div>`,
+			isInline: true,
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TextComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-text",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<div class="tx" [class.tx-muted]="tone() === 'muted'" [style.font-size]="fontSize()">{{ text() }}</div>`,
+			styles: [":host{display:block;min-width:0}.tx{margin:0;line-height:1.5;color:#1f2937;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;-webkit-user-select:text;user-select:text}.tx-muted{color:#64748b}\n"]
+		}]
+	}],
+	propDecorators: {
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}]
+	}
+});
 var ImagePreviewComponent = class ImagePreviewComponent {
 	constructor() {
 		this.src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
@@ -29733,6 +29873,21 @@ function provideForgerouteToast(options = {}) {
 		});
 	})]);
 }
+const LAYOUT_GAP_PX = {
+	none: 0,
+	xs: 4,
+	sm: 8,
+	md: 16,
+	lg: 24,
+	xl: 32
+};
+const CSS_LENGTH = /^(?: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;
+	return `${LAYOUT_GAP_PX[fallback]}px`;
+}
 function reorderItems(items, order) {
 	return order.map((i) => items[i]);
 }
@@ -29752,30 +29907,69 @@ function defaultLabel(item, index) {
 	if (typeof item === "number") return String(item);
 	return `Item ${index + 1}`;
 }
+const DEFAULT_GAP_LIST = "0px";
+const DEFAULT_GAP_GRID = "12px";
+let nextId$2 = 0;
 var ListComponent = class ListComponent {
 	constructor() {
 		this.host = inject(ElementRef);
 		this.injector = inject(Injector);
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.ordered = input(false, ...ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []);
+		this.layout = input("list", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+		this.gridMin = input(130, ...ngDevMode ? [{ debugName: "gridMin" }] : /* istanbul ignore next */ []);
+		this.gap = input(void 0, ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
 		this.reorderable = input(false, ...ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []);
 		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.moveControls = input("auto", ...ngDevMode ? [{ debugName: "moveControls" }] : /* istanbul ignore next */ []);
+		this.dragDrop = input("auto", ...ngDevMode ? [{ debugName: "dragDrop" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.ariaLabelledby = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
 		this.itemLabelFn = input(defaultLabel, ...ngDevMode ? [{ debugName: "itemLabelFn" }] : /* istanbul ignore next */ []);
 		this.trackBy = input((item) => item, ...ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []);
+		this.moveEarlierLabel = input(void 0, ...ngDevMode ? [{ debugName: "moveEarlierLabel" }] : /* istanbul ignore next */ []);
+		this.moveLaterLabel = input(void 0, ...ngDevMode ? [{ debugName: "moveLaterLabel" }] : /* istanbul ignore next */ []);
+		this.helpText = input("Hold Shift and press the arrow keys to move this item. Shift plus Home or End moves it to the start or end.", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
+		this.moveAnnouncement = input((label, position, total) => `${label} moved to position ${position} of ${total}`, ...ngDevMode ? [{ debugName: "moveAnnouncement" }] : /* istanbul ignore next */ []);
+		this.itemsChange = output();
 		this.reorder = output();
 		this.rowTemplate = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "rowTemplate" }] : /* istanbul ignore next */ []);
+		this.helpId = `ul-help-${nextId$2++}`;
 		this.announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
 		this.movedKey = signal(void 0, ...ngDevMode ? [{ debugName: "movedKey" }] : /* istanbul ignore next */ []);
+		this.dragIndex = signal(null, ...ngDevMode ? [{ debugName: "dragIndex" }] : /* istanbul ignore next */ []);
+		this.overIndex = signal(null, ...ngDevMode ? [{ debugName: "overIndex" }] : /* istanbul ignore next */ []);
 		this.pendingFocus = null;
 		this.announceSeq = 0;
 		this.dupTokens = /* @__PURE__ */ new Map();
+		this.isGrid = computed(() => this.layout() === "grid", ...ngDevMode ? [{ debugName: "isGrid" }] : /* istanbul ignore next */ []);
+		this.canReorder = computed(() => this.reorderable() && !this.disabled(), ...ngDevMode ? [{ debugName: "canReorder" }] : /* istanbul ignore next */ []);
+		this.showControls = computed(() => {
+			if (!this.reorderable()) return false;
+			const m = this.moveControls();
+			return m === true || m === "auto" && !this.isGrid();
+		}, ...ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []);
+		this.direct = computed(() => {
+			if (!this.canReorder()) return false;
+			const d = this.dragDrop();
+			return d === true || d === "auto" && this.isGrid();
+		}, ...ngDevMode ? [{ debugName: "direct" }] : /* istanbul ignore next */ []);
+		this.gapCss = computed(() => {
+			const fallback = this.isGrid() ? DEFAULT_GAP_GRID : DEFAULT_GAP_LIST;
+			const g = this.gap();
+			if (g == null || String(g).trim() === "") return fallback;
+			const a = resolveLayoutGap(g, "none");
+			return a === resolveLayoutGap(g, "xl") ? a : fallback;
+		}, ...ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []);
 		this.rows = computed(() => {
 			const items = this.items();
 			const n = items.length;
 			const keyFn = this.trackBy();
 			const labelFn = this.itemLabelFn();
+			const grid = this.isGrid();
+			const earlier = this.moveEarlierLabel();
+			const later = this.moveLaterLabel();
+			const dragging = this.dragIndex();
 			const out = new Array(n);
 			const seen = /* @__PURE__ */ new Map();
 			const nextTokens = /* @__PURE__ */ new Map();
@@ -29795,14 +29989,18 @@ var ListComponent = class ListComponent {
 					key,
 					index: i,
 					label,
-					upLabel: `Move ${label} up`,
-					downLabel: `Move ${label} down`,
+					earlierLabel: earlier !== void 0 ? `${earlier} ${label}` : grid ? `Move earlier ${label}` : `Move ${label} up`,
+					laterLabel: later !== void 0 ? `${later} ${label}` : grid ? `Move later ${label}` : `Move ${label} down`,
 					first: i === 0,
 					last: i === n - 1,
+					dragging: dragging === i,
 					ctx: {
 						$implicit: item,
 						index: i,
-						count: n
+						count: n,
+						first: i === 0,
+						last: i === n - 1,
+						dragging: dragging === i
 					}
 				};
 			}
@@ -29810,23 +30008,52 @@ var ListComponent = class ListComponent {
 			return out;
 		}, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
 	}
-	canReorder() {
-		return this.reorderable() && !this.disabled();
-	}
 	rowIndexOf(el, list) {
 		const li = el?.closest(".ul-item") ?? null;
 		if (!li || li.parentElement !== list) return -1;
 		return Number(li.getAttribute("data-index"));
 	}
+	move(from, to) {
+		return this.apply(from, to, null);
+	}
 	onKeydown(e) {
-		if (!e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
-		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-		if (!this.canReorder()) return;
+		if (!this.canReorder() || e.ctrlKey || e.metaKey) return;
+		const list = e.currentTarget;
 		const target = e.target;
-		if (target?.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]")) return;
-		const idx = this.rowIndexOf(target, e.currentTarget);
-		if (idx < 0) return;
-		if (this.move(idx, e.key === "ArrowUp" ? -1 : 1)) e.preventDefault();
+		if (e.altKey && !e.shiftKey) {
+			if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+			if (target?.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]")) return;
+			const idx = this.rowIndexOf(target, list);
+			if (idx < 0) return;
+			const onRow = this.direct() && target?.classList.contains("ul-item") === true;
+			if (this.apply(idx, idx + (e.key === "ArrowUp" ? -1 : 1), onRow ? "row" : "button")) e.preventDefault();
+			return;
+		}
+		if (e.shiftKey && !e.altKey && this.direct()) {
+			if (!target?.classList.contains("ul-item")) return;
+			const idx = this.rowIndexOf(target, list);
+			if (idx < 0) return;
+			let to;
+			switch (e.key) {
+				case "ArrowUp":
+				case "ArrowLeft":
+					to = idx - 1;
+					break;
+				case "ArrowDown":
+				case "ArrowRight":
+					to = idx + 1;
+					break;
+				case "Home":
+					to = 0;
+					break;
+				case "End":
+					to = this.rows().length - 1;
+					break;
+				default: return;
+			}
+			e.preventDefault();
+			this.apply(idx, to, "row");
+		}
 	}
 	onClick(e) {
 		if (!this.canReorder()) return;
@@ -29835,34 +30062,75 @@ var ListComponent = class ListComponent {
 		if (btn.querySelector("button")?.disabled) return;
 		const idx = this.rowIndexOf(btn, e.currentTarget);
 		if (idx < 0) return;
-		this.move(idx, btn.getAttribute("data-move") === "up" ? -1 : 1);
+		const dir = btn.getAttribute("data-move") === "up" ? -1 : 1;
+		this.apply(idx, idx + dir, "button");
 	}
 	onFocusOut(e) {
 		if (this.pendingFocus) return;
 		const next = e.relatedTarget;
 		if (!next || !e.currentTarget.contains(next)) this.movedKey.set(void 0);
 	}
-	move(from, dir) {
+	onDragStart(e) {
+		if (!this.direct()) return;
+		const idx = this.rowIndexOf(e.target, e.currentTarget);
+		if (idx < 0) return;
+		this.dragIndex.set(idx);
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/plain", String(idx));
+		}
+	}
+	onDragOver(e) {
+		if (!this.direct() || this.dragIndex() === null) return;
+		const idx = this.rowIndexOf(e.target, e.currentTarget);
+		if (idx < 0) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+		this.overIndex.set(idx);
+	}
+	onDrop(e) {
+		const from = this.dragIndex();
+		if (!this.direct() || from === null) return;
+		const idx = this.rowIndexOf(e.target, e.currentTarget);
+		if (idx < 0) return;
+		e.preventDefault();
+		this.onDragEnd();
+		this.apply(from, idx, null);
+	}
+	onDragEnd() {
+		this.dragIndex.set(null);
+		this.overIndex.set(null);
+	}
+	apply(from, to, focus) {
 		const rows = this.rows();
-		const to = from + dir;
-		if (to < 0 || to >= rows.length) return false;
+		const n = rows.length;
+		if (!this.canReorder() || !Number.isInteger(from) || from < 0 || from >= n) return false;
+		const target = Math.max(0, Math.min(n - 1, Number.isFinite(to) ? to : from));
+		if (target === from) return false;
 		const order = rows.map((r) => r.index);
 		const [moved] = order.splice(from, 1);
-		order.splice(to, 0, moved);
+		order.splice(target, 0, moved);
 		const row = rows[from];
-		this.movedKey.set(row.key);
-		this.announce(`${row.label} moved to position ${to + 1} of ${rows.length}`);
-		this.pendingFocus = {
-			key: row.key,
-			item: row.item,
-			to,
-			dir
-		};
-		afterNextRender(() => this.restoreFocus(), { injector: this.injector });
+		const items = reorderItems(this.items(), order);
+		this.announce(this.moveAnnouncement()(this.itemLabelFn()(row.item, target), target + 1, n));
+		if (focus) {
+			this.movedKey.set(row.key);
+			this.pendingFocus = {
+				key: row.key,
+				item: row.item,
+				to: target,
+				dir: target < from ? -1 : 1,
+				target: focus
+			};
+			afterNextRender(() => this.restoreFocus(), { injector: this.injector });
+		}
+		this.itemsChange.emit(items);
 		this.reorder.emit({
+			item: row.item,
 			from,
-			to,
-			order
+			to: target,
+			order,
+			items
 		});
 		return true;
 	}
@@ -29886,9 +30154,15 @@ var ListComponent = class ListComponent {
 		if (idx < 0) return;
 		const li = this.host.nativeElement.querySelector(`:scope > .ul-list > .ul-item[data-index="${idx}"]`);
 		if (!li) return;
+		if (p.target === "row") {
+			li.focus();
+			return;
+		}
 		const pick = (d) => li.querySelector(`:scope > .ul-row > .ul-controls > [data-move="${d}"] button:not(:disabled)`);
 		const preferred = p.dir === -1 ? "up" : "down";
-		(pick(preferred) ?? pick(preferred === "up" ? "down" : "up"))?.focus();
+		const btn = pick(preferred) ?? pick(preferred === "up" ? "down" : "up");
+		if (btn) btn.focus();
+		else if (this.direct()) li.focus();
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -29922,6 +30196,27 @@ var ListComponent = class ListComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				layout: {
+					classPropertyName: "layout",
+					publicName: "layout",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				gridMin: {
+					classPropertyName: "gridMin",
+					publicName: "gridMin",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				gap: {
+					classPropertyName: "gap",
+					publicName: "gap",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				reorderable: {
 					classPropertyName: "reorderable",
 					publicName: "reorderable",
@@ -29936,6 +30231,20 @@ var ListComponent = class ListComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				moveControls: {
+					classPropertyName: "moveControls",
+					publicName: "moveControls",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dragDrop: {
+					classPropertyName: "dragDrop",
+					publicName: "dragDrop",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				ariaLabel: {
 					classPropertyName: "ariaLabel",
 					publicName: "ariaLabel",
@@ -29963,9 +30272,40 @@ var ListComponent = class ListComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				moveEarlierLabel: {
+					classPropertyName: "moveEarlierLabel",
+					publicName: "moveEarlierLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				moveLaterLabel: {
+					classPropertyName: "moveLaterLabel",
+					publicName: "moveLaterLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				helpText: {
+					classPropertyName: "helpText",
+					publicName: "helpText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				moveAnnouncement: {
+					classPropertyName: "moveAnnouncement",
+					publicName: "moveAnnouncement",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
-			outputs: { reorder: "reorder" },
+			outputs: {
+				itemsChange: "itemsChange",
+				reorder: "reorder"
+			},
 			queries: [{
 				propertyName: "rowTemplate",
 				first: true,
@@ -29977,7 +30317,17 @@ var ListComponent = class ListComponent {
 			template: `
     <ng-template #rowsTpl>
       @for (row of rows(); track row.key) {
-        <li class="ul-item" [class.ul-item--moved]="row.key === movedKey()" [attr.data-index]="row.index">
+        <li class="ul-item" role="listitem"
+            [class.ul-item--moved]="row.key === movedKey()"
+            [class.ul-item--draggable]="direct()"
+            [class.ul-item--dragging]="row.dragging"
+            [class.ul-item--over]="dragIndex() !== null && dragIndex() !== row.index && overIndex() === row.index"
+            [attr.data-index]="row.index"
+            [attr.draggable]="direct() ? 'true' : null"
+            [attr.tabindex]="direct() ? 0 : null"
+            [attr.aria-roledescription]="direct() ? 'sortable item' : null"
+            [attr.aria-label]="direct() ? row.label : null"
+            [attr.aria-describedby]="direct() ? helpId : null">
           <div class="ul-row">
             <div class="ul-content">
               @if (rowTemplate(); as tpl) {
@@ -29986,12 +30336,12 @@ var ListComponent = class ListComponent {
                 {{ row.label }}
               }
             </div>
-            @if (reorderable()) {
+            @if (showControls()) {
               <div class="ul-controls">
-                <ui-button variant="icon" data-move="up" [ariaLabel]="row.upLabel" [disabled]="disabled() || row.first">
+                <ui-button variant="icon" data-move="up" [ariaLabel]="row.earlierLabel" [disabled]="disabled() || row.first">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 15l-6-6-6 6"/></svg>
                 </ui-button>
-                <ui-button variant="icon" data-move="down" [ariaLabel]="row.downLabel" [disabled]="disabled() || row.last">
+                <ui-button variant="icon" data-move="down" [ariaLabel]="row.laterLabel" [disabled]="disabled() || row.last">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6"/></svg>
                 </ui-button>
               </div>
@@ -30003,15 +30353,19 @@ var ListComponent = class ListComponent {
 
     @if (rows().length) {
       @if (ordered()) {
-        <ol class="ul-list ul-list--ordered" role="list"
+        <ol class="ul-list ul-list--ordered" role="list" [class.ul-list--grid]="isGrid()"
+            [style.--ul-gap]="gapCss()" [style.--ul-min.px]="isGrid() ? gridMin() : null"
             [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
-            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ol>
       } @else {
-        <ul class="ul-list ul-list--unordered" role="list"
+        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="isGrid()"
+            [style.--ul-gap]="gapCss()" [style.--ul-min.px]="isGrid() ? gridMin() : null"
             [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
-            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ul>
       }
@@ -30019,12 +30373,15 @@ var ListComponent = class ListComponent {
       <ng-content select="[list-empty]" />
     }
 
+    @if (direct() && rows().length) {
+      <span class="ul-sr" [id]="helpId">{{ helpText() }}</span>
+    }
     @if (reorderable()) {
-      <div class="ul-sr" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
+      <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
 			isInline: true,
-			styles: [":host{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
+			styles: [":host{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}:host ::ng-deep .ul-item--draggable img,:host ::ng-deep .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -30079,7 +30436,17 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <ng-template #rowsTpl>
       @for (row of rows(); track row.key) {
-        <li class="ul-item" [class.ul-item--moved]="row.key === movedKey()" [attr.data-index]="row.index">
+        <li class="ul-item" role="listitem"
+            [class.ul-item--moved]="row.key === movedKey()"
+            [class.ul-item--draggable]="direct()"
+            [class.ul-item--dragging]="row.dragging"
+            [class.ul-item--over]="dragIndex() !== null && dragIndex() !== row.index && overIndex() === row.index"
+            [attr.data-index]="row.index"
+            [attr.draggable]="direct() ? 'true' : null"
+            [attr.tabindex]="direct() ? 0 : null"
+            [attr.aria-roledescription]="direct() ? 'sortable item' : null"
+            [attr.aria-label]="direct() ? row.label : null"
+            [attr.aria-describedby]="direct() ? helpId : null">
           <div class="ul-row">
             <div class="ul-content">
               @if (rowTemplate(); as tpl) {
@@ -30088,12 +30455,12 @@ i0.ɵɵngDeclareClassMetadata({
                 {{ row.label }}
               }
             </div>
-            @if (reorderable()) {
+            @if (showControls()) {
               <div class="ul-controls">
-                <ui-button variant="icon" data-move="up" [ariaLabel]="row.upLabel" [disabled]="disabled() || row.first">
+                <ui-button variant="icon" data-move="up" [ariaLabel]="row.earlierLabel" [disabled]="disabled() || row.first">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 15l-6-6-6 6"/></svg>
                 </ui-button>
-                <ui-button variant="icon" data-move="down" [ariaLabel]="row.downLabel" [disabled]="disabled() || row.last">
+                <ui-button variant="icon" data-move="down" [ariaLabel]="row.laterLabel" [disabled]="disabled() || row.last">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6"/></svg>
                 </ui-button>
               </div>
@@ -30105,15 +30472,19 @@ i0.ɵɵngDeclareClassMetadata({
 
     @if (rows().length) {
       @if (ordered()) {
-        <ol class="ul-list ul-list--ordered" role="list"
+        <ol class="ul-list ul-list--ordered" role="list" [class.ul-list--grid]="isGrid()"
+            [style.--ul-gap]="gapCss()" [style.--ul-min.px]="isGrid() ? gridMin() : null"
             [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
-            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ol>
       } @else {
-        <ul class="ul-list ul-list--unordered" role="list"
+        <ul class="ul-list ul-list--unordered" role="list" [class.ul-list--grid]="isGrid()"
+            [style.--ul-gap]="gapCss()" [style.--ul-min.px]="isGrid() ? gridMin() : null"
             [attr.aria-label]="ariaLabel() || null" [attr.aria-labelledby]="ariaLabelledby() || null"
-            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)">
+            (keydown)="onKeydown($event)" (click)="onClick($event)" (focusout)="onFocusOut($event)"
+            (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDrop($event)" (dragend)="onDragEnd()">
           <ng-container [ngTemplateOutlet]="rowsTpl" />
         </ul>
       }
@@ -30121,11 +30492,14 @@ i0.ɵɵngDeclareClassMetadata({
       <ng-content select="[list-empty]" />
     }
 
+    @if (direct() && rows().length) {
+      <span class="ul-sr" [id]="helpId">{{ helpText() }}</span>
+    }
     @if (reorderable()) {
-      <div class="ul-sr" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
+      <div class="ul-sr" role="status" aria-live="polite" aria-atomic="true">{{ announcement() }}</div>
     }
   `,
-			styles: [":host{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+			styles: [":host{display:block;min-width:0}.ul-list{margin:0;padding:0;min-width:0}.ul-list--unordered{list-style:none}.ul-list--ordered{list-style:decimal;-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}.ul-list--ordered>.ul-item::marker{color:var(--text-secondary, #64748b);font-size:.875rem}.ul-item{min-width:0;transition:background-color .4s ease}.ul-item.ul-item--moved{background-color:var(--surface-hover, #f1f5f9)}.ul-list:not(.ul-list--grid)>.ul-item+.ul-item{margin-top:var(--ul-gap, 0px)}.ul-row{display:flex;align-items:center;gap:8px;min-width:0}.ul-content{flex:1 1 auto;min-width:0;word-break:break-word;overflow-wrap:anywhere}.ul-controls{display:flex;flex:0 0 auto;align-items:center;gap:2px}.ul-list.ul-list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--ul-min, 130px),100%),1fr));gap:var(--ul-gap, 12px);list-style:none;-webkit-padding-start:0;padding-inline-start:0}.ul-list--grid>.ul-item>.ul-row{flex-direction:column;align-items:stretch;gap:6px}.ul-list--grid>.ul-item>.ul-row>.ul-controls{align-self:center}@media(pointer:coarse),(max-width:480px){.ul-controls{gap:16px}}.ul-item--draggable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.ul-item--draggable{cursor:grab}.ul-item--draggable:active{cursor:grabbing}}.ul-item--draggable:focus{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}.ul-item--draggable:focus:not(:focus-visible){outline:none}:host ::ng-deep .ul-item--draggable img,:host ::ng-deep .ul-item--draggable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.ul-item--dragging{opacity:.5}.ul-item--over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}@media(prefers-reduced-motion:reduce){.ul-item{transition:none}}@media(forced-colors:active){.ul-item.ul-item--moved{outline:2px solid Highlight;outline-offset:-2px}}@media(forced-colors:active){.ul-item.ul-item--dragging{outline:2px dotted Highlight;outline-offset:2px}.ul-item.ul-item--over{outline:2px dashed Highlight;outline-offset:2px}.ul-item--draggable:focus{outline:2px solid Highlight;outline-offset:2px}}.ul-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -30145,6 +30519,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		gridMin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gridMin",
+				required: false
+			}]
+		}],
+		gap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gap",
+				required: false
+			}]
+		}],
 		reorderable: [{
 			type: i0.Input,
 			args: [{
@@ -30161,6 +30559,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		moveControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveControls",
+				required: false
+			}]
+		}],
+		dragDrop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dragDrop",
+				required: false
+			}]
+		}],
 		ariaLabel: [{
 			type: i0.Input,
 			args: [{
@@ -30193,8 +30607,44 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		reorder: [{
-			type: i0.Output,
+		moveEarlierLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveEarlierLabel",
+				required: false
+			}]
+		}],
+		moveLaterLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveLaterLabel",
+				required: false
+			}]
+		}],
+		helpText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helpText",
+				required: false
+			}]
+		}],
+		moveAnnouncement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveAnnouncement",
+				required: false
+			}]
+		}],
+		itemsChange: [{
+			type: i0.Output,
+			args: ["itemsChange"]
+		}],
+		reorder: [{
+			type: i0.Output,
 			args: ["reorder"]
 		}],
 		rowTemplate: [{
@@ -32985,448 +33435,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var SortableItemDirective = class SortableItemDirective {
-	constructor() {
-		this.template = inject(TemplateRef);
-	}
-	static ngTemplateContextGuard(_dir, _ctx) {
-		return true;
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: SortableItemDirective,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Directive
-		});
-	}
-	static {
-		this.ɵdir = i0.ɵɵngDeclareDirective({
-			minVersion: "14.0.0",
-			version: "22.2.2",
-			type: SortableItemDirective,
-			isStandalone: true,
-			selector: "ng-template[uiSortableItem]",
-			ngImport: i0
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: SortableItemDirective,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "ng-template[uiSortableItem]",
-			standalone: true
-		}]
-	}]
-});
-let nextId$2 = 0;
-var SortableListComponent = class SortableListComponent {
-	constructor() {
-		this.items = model([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
-		this.sortable = input(false, ...ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []);
-		this.layout = input("list", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
-		this.gridMin = input(130, ...ngDevMode ? [{ debugName: "gridMin" }] : /* istanbul ignore next */ []);
-		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
-		this.itemLabel = input((_item, index) => `Item ${index + 1}`, ...ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []);
-		this.moveControls = input(false, ...ngDevMode ? [{ debugName: "moveControls" }] : /* istanbul ignore next */ []);
-		this.moveEarlierLabel = input("Move earlier", ...ngDevMode ? [{ debugName: "moveEarlierLabel" }] : /* istanbul ignore next */ []);
-		this.moveLaterLabel = input("Move later", ...ngDevMode ? [{ debugName: "moveLaterLabel" }] : /* istanbul ignore next */ []);
-		this.helpText = input("Hold Shift and press the arrow keys to move this item. Shift plus Home or End moves it to the start or end.", ...ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []);
-		this.moveAnnouncement = input((label, position, total) => `${label} moved to position ${position} of ${total}`, ...ngDevMode ? [{ debugName: "moveAnnouncement" }] : /* istanbul ignore next */ []);
-		this.orderChange = output();
-		this.itemTemplate = contentChild.required(SortableItemDirective, ...ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []);
-		this._helpId = `sl-help-${nextId$2++}`;
-		this._dragIndex = signal(null, ...ngDevMode ? [{ debugName: "_dragIndex" }] : /* istanbul ignore next */ []);
-		this._overIndex = signal(null, ...ngDevMode ? [{ debugName: "_overIndex" }] : /* istanbul ignore next */ []);
-		this._announcement = signal("", ...ngDevMode ? [{ debugName: "_announcement" }] : /* istanbul ignore next */ []);
-		this._count = computed(() => this.items().length, ...ngDevMode ? [{ debugName: "_count" }] : /* istanbul ignore next */ []);
-	}
-	move(from, to) {
-		const list = this.items();
-		if (!this.sortable() || from < 0 || from >= list.length) return;
-		const target = Math.max(0, Math.min(list.length - 1, to));
-		if (target === from) return;
-		const next = [...list];
-		const [item] = next.splice(from, 1);
-		next.splice(target, 0, item);
-		this.items.set(next);
-		this._announcement.set(this.moveAnnouncement()(this.itemLabel()(item, target), target + 1, next.length));
-		this.orderChange.emit({
-			item,
-			from,
-			to: target,
-			items: next
-		});
-	}
-	onDragStart(event, index) {
-		if (!this.sortable()) return;
-		this._dragIndex.set(index);
-		if (event.dataTransfer) {
-			event.dataTransfer.effectAllowed = "move";
-			event.dataTransfer.setData("text/plain", String(index));
-		}
-	}
-	onDragOver(event, index) {
-		if (!this.sortable() || this._dragIndex() === null) return;
-		event.preventDefault();
-		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-		this._overIndex.set(index);
-	}
-	onDrop(event, index) {
-		const from = this._dragIndex();
-		if (!this.sortable() || from === null) return;
-		event.preventDefault();
-		this.onDragEnd();
-		this.move(from, index);
-	}
-	onDragEnd() {
-		this._dragIndex.set(null);
-		this._overIndex.set(null);
-	}
-	onKeydown(event, index) {
-		if (!this.sortable() || event.target !== event.currentTarget || !event.shiftKey) return;
-		let to = null;
-		switch (event.key) {
-			case "ArrowUp":
-			case "ArrowLeft":
-				to = index - 1;
-				break;
-			case "ArrowDown":
-			case "ArrowRight":
-				to = index + 1;
-				break;
-			case "Home":
-				to = 0;
-				break;
-			case "End": to = this._count() - 1;
-		}
-		if (to === null) return;
-		event.preventDefault();
-		this.move(index, to);
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: SortableListComponent,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Component
-		});
-	}
-	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.0.0",
-			version: "22.2.2",
-			type: SortableListComponent,
-			isStandalone: true,
-			selector: "ui-sortable-list",
-			inputs: {
-				items: {
-					classPropertyName: "items",
-					publicName: "items",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				sortable: {
-					classPropertyName: "sortable",
-					publicName: "sortable",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				layout: {
-					classPropertyName: "layout",
-					publicName: "layout",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				gridMin: {
-					classPropertyName: "gridMin",
-					publicName: "gridMin",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				ariaLabel: {
-					classPropertyName: "ariaLabel",
-					publicName: "ariaLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				itemLabel: {
-					classPropertyName: "itemLabel",
-					publicName: "itemLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveControls: {
-					classPropertyName: "moveControls",
-					publicName: "moveControls",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveEarlierLabel: {
-					classPropertyName: "moveEarlierLabel",
-					publicName: "moveEarlierLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveLaterLabel: {
-					classPropertyName: "moveLaterLabel",
-					publicName: "moveLaterLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				helpText: {
-					classPropertyName: "helpText",
-					publicName: "helpText",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				moveAnnouncement: {
-					classPropertyName: "moveAnnouncement",
-					publicName: "moveAnnouncement",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				}
-			},
-			outputs: {
-				items: "itemsChange",
-				orderChange: "orderChange"
-			},
-			queries: [{
-				propertyName: "itemTemplate",
-				first: true,
-				predicate: SortableItemDirective,
-				descendants: true,
-				isSignal: true
-			}],
-			ngImport: i0,
-			template: `
-    <div class="sl" [class.sl-grid]="layout() === 'grid'" [style.--sl-min.px]="gridMin()" role="list" [attr.aria-label]="ariaLabel() || null">
-      @for (item of items(); track item; let i = $index; let first = $first; let last = $last) {
-        <div class="sl-item" role="listitem"
-          [class.sl-sortable]="sortable()"
-          [class.sl-dragging]="_dragIndex() === i"
-          [class.sl-over]="_overIndex() === i && _dragIndex() !== null && _dragIndex() !== i"
-          [attr.draggable]="sortable() ? 'true' : null"
-          [attr.tabindex]="sortable() ? 0 : null"
-          [attr.aria-roledescription]="sortable() ? 'sortable item' : null"
-          [attr.aria-label]="sortable() ? itemLabel()(item, i) : null"
-          [attr.aria-describedby]="sortable() ? _helpId : null"
-          (dragstart)="onDragStart($event, i)" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragend)="onDragEnd()"
-          (keydown)="onKeydown($event, i)">
-          <ng-container [ngTemplateOutlet]="itemTemplate().template"
-            [ngTemplateOutletContext]="{ $implicit: item, index: i, first: first, last: last, dragging: _dragIndex() === i }" />
-          @if (sortable() && moveControls()) {
-            <div class="sl-move">
-              <ui-icon name="chevron-up" [size]="16" [disabled]="first" [tooltip]="moveEarlierLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i - 1)" />
-              <ui-icon name="chevron-down" [size]="16" [disabled]="last" [tooltip]="moveLaterLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i + 1)" />
-            </div>
-          }
-        </div>
-      }
-    </div>
-    @if (sortable()) {
-      <span class="sl-sr" [id]="_helpId">{{ helpText() }}</span>
-    }
-    <span class="sl-sr" role="status" aria-live="polite">{{ _announcement() }}</span>
-  `,
-			isInline: true,
-			styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:12px}.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sl-min, 130px),1fr));gap:12px}.sl-item{position:relative;min-width:0}.sl-sortable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.sl-sortable{cursor:grab}.sl-sortable:active{cursor:grabbing}}.sl-sortable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}:host ::ng-deep .sl-sortable img,:host ::ng-deep .sl-sortable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.sl-dragging{opacity:.5}.sl-over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}.sl-move{display:flex;justify-content:center;gap:4px;margin-top:6px}.sl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"],
-			dependencies: [{
-				kind: "directive",
-				type: NgTemplateOutlet,
-				selector: "[ngTemplateOutlet]",
-				inputs: [
-					"ngTemplateOutletContext",
-					"ngTemplateOutlet",
-					"ngTemplateOutletInjector"
-				]
-			}, {
-				kind: "component",
-				type: IconComponent,
-				selector: "ui-icon",
-				inputs: [
-					"name",
-					"tooltip",
-					"ariaLabel",
-					"size",
-					"variant",
-					"disabled",
-					"loading",
-					"interactive"
-				],
-				outputs: ["iconClick"]
-			}],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: SortableListComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ui-sortable-list",
-			standalone: true,
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			imports: [NgTemplateOutlet, IconComponent],
-			template: `
-    <div class="sl" [class.sl-grid]="layout() === 'grid'" [style.--sl-min.px]="gridMin()" role="list" [attr.aria-label]="ariaLabel() || null">
-      @for (item of items(); track item; let i = $index; let first = $first; let last = $last) {
-        <div class="sl-item" role="listitem"
-          [class.sl-sortable]="sortable()"
-          [class.sl-dragging]="_dragIndex() === i"
-          [class.sl-over]="_overIndex() === i && _dragIndex() !== null && _dragIndex() !== i"
-          [attr.draggable]="sortable() ? 'true' : null"
-          [attr.tabindex]="sortable() ? 0 : null"
-          [attr.aria-roledescription]="sortable() ? 'sortable item' : null"
-          [attr.aria-label]="sortable() ? itemLabel()(item, i) : null"
-          [attr.aria-describedby]="sortable() ? _helpId : null"
-          (dragstart)="onDragStart($event, i)" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragend)="onDragEnd()"
-          (keydown)="onKeydown($event, i)">
-          <ng-container [ngTemplateOutlet]="itemTemplate().template"
-            [ngTemplateOutletContext]="{ $implicit: item, index: i, first: first, last: last, dragging: _dragIndex() === i }" />
-          @if (sortable() && moveControls()) {
-            <div class="sl-move">
-              <ui-icon name="chevron-up" [size]="16" [disabled]="first" [tooltip]="moveEarlierLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i - 1)" />
-              <ui-icon name="chevron-down" [size]="16" [disabled]="last" [tooltip]="moveLaterLabel() + ' ' + itemLabel()(item, i)" (iconClick)="move(i, i + 1)" />
-            </div>
-          }
-        </div>
-      }
-    </div>
-    @if (sortable()) {
-      <span class="sl-sr" [id]="_helpId">{{ helpText() }}</span>
-    }
-    <span class="sl-sr" role="status" aria-live="polite">{{ _announcement() }}</span>
-  `,
-			styles: [":host{display:block}.sl{display:flex;flex-direction:column;gap:12px}.sl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sl-min, 130px),1fr));gap:12px}.sl-item{position:relative;min-width:0}.sl-sortable{-webkit-user-select:none;user-select:none;-webkit-user-drag:element}@media(hover:hover)and (pointer:fine){.sl-sortable{cursor:grab}.sl-sortable:active{cursor:grabbing}}.sl-sortable:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:6px}:host ::ng-deep .sl-sortable img,:host ::ng-deep .sl-sortable ui-image-preview{pointer-events:none;-webkit-user-drag:none}.sl-dragging{opacity:.5}.sl-over{outline:2px dashed #3b82f6;outline-offset:2px;border-radius:6px}.sl-move{display:flex;justify-content:center;gap:4px;margin-top:6px}.sl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"]
-		}]
-	}],
-	propDecorators: {
-		items: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "items",
-				required: false
-			}]
-		}, {
-			type: i0.Output,
-			args: ["itemsChange"]
-		}],
-		sortable: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "sortable",
-				required: false
-			}]
-		}],
-		layout: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "layout",
-				required: false
-			}]
-		}],
-		gridMin: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "gridMin",
-				required: false
-			}]
-		}],
-		ariaLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "ariaLabel",
-				required: false
-			}]
-		}],
-		itemLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "itemLabel",
-				required: false
-			}]
-		}],
-		moveControls: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "moveControls",
-				required: false
-			}]
-		}],
-		moveEarlierLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "moveEarlierLabel",
-				required: false
-			}]
-		}],
-		moveLaterLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "moveLaterLabel",
-				required: false
-			}]
-		}],
-		helpText: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "helpText",
-				required: false
-			}]
-		}],
-		moveAnnouncement: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "moveAnnouncement",
-				required: false
-			}]
-		}],
-		orderChange: [{
-			type: i0.Output,
-			args: ["orderChange"]
-		}],
-		itemTemplate: [{
-			type: i0.ContentChild,
-			args: [i0.forwardRef(() => SortableItemDirective), { isSignal: true }]
-		}]
-	}
-});
 var KpiCardComponent = class KpiCardComponent {
 	constructor() {
 		this.sanitizer = inject(DomSanitizer);
@@ -37339,21 +37347,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const LAYOUT_GAP_PX = {
-	none: 0,
-	xs: 4,
-	sm: 8,
-	md: 16,
-	lg: 24,
-	xl: 32
-};
-const CSS_LENGTH = /^(?: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;
-	return `${LAYOUT_GAP_PX[fallback]}px`;
-}
 var ColumnsComponent = class ColumnsComponent {
 	constructor() {
 		this.count = input(2, ...ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []);
@@ -37807,6 +37800,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DEFAULT_SIGNING_OPTIONS, DOCUMENT_PROVIDER_OPTIONS, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentMergeCheckComponent, DocumentSendOptionsComponent, DocumentSignersComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, MAX_CC, MERGE_CHECK_DEBOUNCE_MS, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SIGNER_ROLES, SIGNER_ROLE_LABEL_DEFAULT, SIGNING_LIMITS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, SortableItemDirective, SortableListComponent, StackComponent, StepperComponent, TableToolbarComponent, TemplatePickerComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, acceptLabel, appShellGroupsStorageKey, appendVideoLink, applyVideoLine, autoVariant, buildDefaultSchedule, buildSigners, buildVideoLink, builtInActionIcon, businessTimeOptions, countersignLine, countersignPlaceLabel, createFieldReveal, decodeFilterValues, describeDocumentSigners, digitsOnly, effectiveRoles, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, forwardContext, getEligibleIds, getEligibleOptions, getErrorMessage, hasMappedDataFields, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, mergeFieldText, mergeWarningLines, messagePreviewHtml, normalizeHexColor, normalizeRoles, parseBizHours, parseCcList, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, roleNumber, sendExistingEnvelope, serializeBizHours, signerProblems, signerRoleLabel, stripVideoLink, suggestDocumentSubject, videoMessageLine };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DEFAULT_SIGNING_OPTIONS, DOCUMENT_PROVIDER_OPTIONS, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentMergeCheckComponent, DocumentSendOptionsComponent, DocumentSignersComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, MAX_CC, MERGE_CHECK_DEBOUNCE_MS, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SIGNER_ROLES, SIGNER_ROLE_LABEL_DEFAULT, SIGNING_LIMITS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, StackComponent, StepperComponent, TableToolbarComponent, TemplatePickerComponent, TextComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, acceptLabel, appShellGroupsStorageKey, appendVideoLink, applyVideoLine, autoVariant, buildDefaultSchedule, buildSigners, buildVideoLink, builtInActionIcon, businessTimeOptions, countersignLine, countersignPlaceLabel, createFieldReveal, decodeFilterValues, describeDocumentSigners, digitsOnly, effectiveRoles, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, forwardContext, getEligibleIds, getEligibleOptions, getErrorMessage, hasMappedDataFields, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, mergeFieldText, mergeWarningLines, messagePreviewHtml, normalizeHexColor, normalizeRoles, parseBizHours, parseCcList, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, roleNumber, sendExistingEnvelope, serializeBizHours, signerProblems, signerRoleLabel, stripVideoLink, suggestDocumentSubject, videoMessageLine };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map