@forgeroute/ui 0.4.22 → 0.4.23

package/fesm2022/forgeroute-ui.mjs

@@ -371,7 +371,7 @@ var SearchInputComponent = class SearchInputComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;flex:0 1 325px;min-width:0}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;color:#94a3b8;pointer-events:none}.search-input{width:100%;padding:9px 10px 9px 34px;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;background:#fff;color:#1e293b;outline:none;min-width:0;font-family:inherit;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.search-input::placeholder{color:#94a3b8}.search-input-loading{padding-right:34px}.search-input-loading::-webkit-search-cancel-button{display:none}.search-spinner{position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none}.search-spinner-ring{display:block;width:16px;height:16px;box-sizing:border-box;border:2px solid #e2e8f0;border-top-color:#64748b;border-radius:50%;animation:search-spin .6s linear infinite}.search-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}@keyframes search-spin{to{transform:rotate(360deg)}}@media(pointer:coarse),(max-width:480px){.search-input{min-height:44px}}@media(max-width:1024px){:host{flex:0 1 280px}}@media(max-width:768px){:host{flex:0 1 240px}}@media(max-width:640px){:host{flex:1 1 auto}.search-input{font-size:16px}}\n"],
+			styles: [":host{display:block;flex:0 1 var(--ui-search-width, 325px);min-width:0}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;color:#94a3b8;pointer-events:none}.search-input{width:100%;padding:9px 10px 9px 34px;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;background:#fff;color:#1e293b;outline:none;min-width:0;font-family:inherit;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.search-input::placeholder{color:#94a3b8}.search-input-loading{padding-right:34px}.search-input-loading::-webkit-search-cancel-button{display:none}.search-spinner{position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none}.search-spinner-ring{display:block;width:16px;height:16px;box-sizing:border-box;border:2px solid #e2e8f0;border-top-color:#64748b;border-radius:50%;animation:search-spin .6s linear infinite}.search-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}@keyframes search-spin{to{transform:rotate(360deg)}}@media(pointer:coarse),(max-width:480px){.search-input{min-height:44px}}@media(max-width:1024px){:host{flex:0 1 280px}}@media(max-width:768px){:host{flex:0 1 240px}}@media(max-width:640px){:host{flex:1 1 auto}.search-input{font-size:16px}}\n"],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -424,7 +424,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block;flex:0 1 325px;min-width:0}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;color:#94a3b8;pointer-events:none}.search-input{width:100%;padding:9px 10px 9px 34px;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;background:#fff;color:#1e293b;outline:none;min-width:0;font-family:inherit;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.search-input::placeholder{color:#94a3b8}.search-input-loading{padding-right:34px}.search-input-loading::-webkit-search-cancel-button{display:none}.search-spinner{position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none}.search-spinner-ring{display:block;width:16px;height:16px;box-sizing:border-box;border:2px solid #e2e8f0;border-top-color:#64748b;border-radius:50%;animation:search-spin .6s linear infinite}.search-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}@keyframes search-spin{to{transform:rotate(360deg)}}@media(pointer:coarse),(max-width:480px){.search-input{min-height:44px}}@media(max-width:1024px){:host{flex:0 1 280px}}@media(max-width:768px){:host{flex:0 1 240px}}@media(max-width:640px){:host{flex:1 1 auto}.search-input{font-size:16px}}\n"]
+			styles: [":host{display:block;flex:0 1 var(--ui-search-width, 325px);min-width:0}.search-bar{position:relative;display:flex;align-items:center;width:100%}.search-icon{position:absolute;left:10px;color:#94a3b8;pointer-events:none}.search-input{width:100%;padding:9px 10px 9px 34px;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem;background:#fff;color:#1e293b;outline:none;min-width:0;font-family:inherit;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61f}.search-input::placeholder{color:#94a3b8}.search-input-loading{padding-right:34px}.search-input-loading::-webkit-search-cancel-button{display:none}.search-spinner{position:absolute;right:10px;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none}.search-spinner-ring{display:block;width:16px;height:16px;box-sizing:border-box;border:2px solid #e2e8f0;border-top-color:#64748b;border-radius:50%;animation:search-spin .6s linear infinite}.search-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}@keyframes search-spin{to{transform:rotate(360deg)}}@media(pointer:coarse),(max-width:480px){.search-input{min-height:44px}}@media(max-width:1024px){:host{flex:0 1 280px}}@media(max-width:768px){:host{flex:0 1 240px}}@media(max-width:640px){:host{flex:1 1 auto}.search-input{font-size:16px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -4497,6 +4497,7 @@ const EXTRA_ICONS = {
 	"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",
+	"clipboard": "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2 M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z",
 	"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"
 };
@@ -5762,7 +5763,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 		this.saveNameModalOpen = signal(false, ...ngDevMode ? [{ debugName: "saveNameModalOpen" }] : /* istanbul ignore next */ []);
 		this._saveViewName = "";
 		this._pendingCols = signal([], ...ngDevMode ? [{ debugName: "_pendingCols" }] : /* istanbul ignore next */ []);
-		this._allowedButtons = computed(() => this.readOnly() ? this.tableButtons().filter((b) => b.type === "export") : this.tableButtons(), ...ngDevMode ? [{ debugName: "_allowedButtons" }] : /* istanbul ignore next */ []);
+		this._allowedButtons = computed(() => this.readOnly() ? this.tableButtons().filter((b) => b.type === "export" || b.allowReadOnly && b.type !== "import") : this.tableButtons(), ...ngDevMode ? [{ debugName: "_allowedButtons" }] : /* istanbul ignore next */ []);
 		this.standaloneButtons = computed(() => this._allowedButtons().filter((b) => (b.variant === "primary" || b.variant === "secondary") && !b.hidden).sort((a, b) => {
 			if (a.variant === b.variant) return 0;
 			return a.variant === "primary" ? -1 : 1;
@@ -10351,7 +10352,7 @@ var DataTableComponent = class DataTableComponent {
 		}, ...ngDevMode ? [{ debugName: "_exportParams" }] : /* istanbul ignore next */ []);
 		this._effectiveButtons = computed(() => {
 			const canEdit = this._canEdit();
-			const buttons = canEdit ? this.tableButtons() : [];
+			const buttons = canEdit ? this.tableButtons() : this.tableButtons().filter((b) => b.allowReadOnly);
 			const cfg = this.importExportConfig();
 			if (!cfg) return buttons;
 			return [
@@ -35375,6 +35376,8 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+const MOVE_PREFIX = "ub-move:";
+const MOVE_ICON = "M4 12h12m0 0l-4-4m4 4l-4 4M20 5v14";
 let nextBoardId = 0;
 const DOT_COLORS = {
 	blue: "#3b82f6",
@@ -35413,6 +35416,7 @@ var BoardComponent = class BoardComponent {
 		this.itemKey = input.required(...ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []);
 		this.itemLabel = input.required(...ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []);
 		this.cardActions = input([], ...ngDevMode ? [{ debugName: "cardActions" }] : /* istanbul ignore next */ []);
+		this.moveMenu = input(true, ...ngDevMode ? [{ debugName: "moveMenu" }] : /* istanbul ignore next */ []);
 		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 		this.error = input(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 		this.readOnly = input(false, ...ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []);
@@ -35454,6 +35458,27 @@ 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.menuActions = computed(() => {
+			const out = /* @__PURE__ */ new Map();
+			const own = this.cardActions();
+			if (!this.moveMenu() || !this.canDrag()) return out;
+			const cols = this.cols();
+			const shared = /* @__PURE__ */ new Map();
+			for (const from of cols) for (const item of from.items) {
+				let list = this.canMove() ? void 0 : shared.get(from.key);
+				if (!list) {
+					const moves = cols.filter((to) => this.accepts(item, from.key, to)).map((to) => ({
+						type: MOVE_PREFIX + to.key,
+						label: `Move to ${to.label}`,
+						icon: MOVE_ICON
+					}));
+					list = moves.length ? [...own, ...moves] : own;
+					if (!this.canMove()) shared.set(from.key, list);
+				}
+				out.set(this.itemKey()(item), list);
+			}
+			return out;
+		}, ...ngDevMode ? [{ debugName: "menuActions" }] : /* istanbul ignore next */ []);
 		effect(() => {
 			if (this.loading()) {
 				this.drawn.set({});
@@ -35518,13 +35543,32 @@ var BoardComponent = class BoardComponent {
 		for (let i = cols.findIndex((c) => c.key === col.key) + step; i >= 0 && i < cols.length; i += step) if (this.accepts(item, col.key, cols[i])) {
 			this.move(item, col.key, cols[i].key);
 			this.announcement.set(`${this.itemLabel()(item)} moved to ${cols[i].label}`);
-			const key = this.itemKey()(item);
-			setTimeout(() => {
-				const cards = this.host.nativeElement.querySelectorAll(".ub-card");
-				Array.from(cards).find((c) => c.dataset["boardKey"] === key)?.focus();
+			this.focusCard(item);
+			return;
+		}
+	}
+	onMenuAction(type, item) {
+		if (!type.startsWith(MOVE_PREFIX)) {
+			this.cardAction.emit({
+				type,
+				item
 			});
 			return;
 		}
+		const key = this.itemKey()(item);
+		const from = this.cols().find((c) => c.items.some((i) => this.itemKey()(i) === key));
+		const to = this.cols().find((c) => c.key === type.slice(8));
+		if (!from || !to || !this.accepts(item, from.key, to)) return;
+		this.move(item, from.key, to.key);
+		this.announcement.set(`${this.itemLabel()(item)} moved to ${to.label}`);
+		this.focusCard(item);
+	}
+	focusCard(item) {
+		const key = this.itemKey()(item);
+		setTimeout(() => {
+			const cards = this.host.nativeElement.querySelectorAll(".ub-card");
+			Array.from(cards).find((c) => c.dataset["boardKey"] === key)?.focus();
+		});
 	}
 	accepts(item, from, to) {
 		if (from === to.key || to.dropDisabled || this.moveDisabled() || this.readOnly()) return false;
@@ -35605,6 +35649,13 @@ var BoardComponent = class BoardComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				moveMenu: {
+					classPropertyName: "moveMenu",
+					publicName: "moveMenu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				loading: {
 					classPropertyName: "loading",
 					publicName: "loading",
@@ -35707,10 +35758,11 @@ var BoardComponent = class BoardComponent {
 			template: `
     <!-- The card's "⋮" menu. Place it in the card's top row: <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: item }" /> -->
     <ng-template #menuTpl let-item>
-      @if (cardActions().length) {
+      @let actions = menuActions().get(itemKey()(item)) ?? cardActions();
+      @if (actions.length) {
         <div class="ub-card__top-right" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
-          <ui-more-menu [actions]="cardActions()" [ariaLabel]="'Actions for ' + itemLabel()(item)"
-                        (actionClick)="cardAction.emit({ type: $event, item })" />
+          <ui-more-menu [actions]="actions" [ariaLabel]="'Actions for ' + itemLabel()(item)"
+                        (actionClick)="onMenuAction($event, item)" />
         </div>
       }
     </ng-template>
@@ -35869,10 +35921,11 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <!-- The card's "⋮" menu. Place it in the card's top row: <ng-container [ngTemplateOutlet]="menu" [ngTemplateOutletContext]="{ $implicit: item }" /> -->
     <ng-template #menuTpl let-item>
-      @if (cardActions().length) {
+      @let actions = menuActions().get(itemKey()(item)) ?? cardActions();
+      @if (actions.length) {
         <div class="ub-card__top-right" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
-          <ui-more-menu [actions]="cardActions()" [ariaLabel]="'Actions for ' + itemLabel()(item)"
-                        (actionClick)="cardAction.emit({ type: $event, item })" />
+          <ui-more-menu [actions]="actions" [ariaLabel]="'Actions for ' + itemLabel()(item)"
+                        (actionClick)="onMenuAction($event, item)" />
         </div>
       }
     </ng-template>
@@ -35992,6 +36045,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		moveMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moveMenu",
+				required: false
+			}]
+		}],
 		loading: [{
 			type: i0.Input,
 			args: [{
@@ -37502,7 +37563,17 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const CSS_LENGTH = /^(?:0|-?(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+const CSS_LENGTH = /^(?:0|(?:\d+\.?\d*|\.\d+)(?:px|rem|em|%|vh|vw|ch)|(?:calc|var)\([^;{}]*\))$/i;
+const BREAKPOINT_PX = {
+	sm: 640,
+	md: 900,
+	lg: 1200
+};
+function lengthOr(v, fallback) {
+	const t = String(v ?? "").trim();
+	if (!t || !CSS_LENGTH.test(t)) return fallback;
+	return t === "0" ? "0px" : t;
+}
 function px(v, fallback) {
 	if (v === null || v === void 0 || v === "") return fallback;
 	const n = Number(v);
@@ -37518,24 +37589,55 @@ var SidebarLayoutComponent = class SidebarLayoutComponent {
 		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.sideFirstInDom = input(false, ...ngDevMode ? [{ debugName: "sideFirstInDom" }] : /* istanbul ignore next */ []);
+		this.sideBleed = input("4px", ...ngDevMode ? [{ debugName: "sideBleed" }] : /* istanbul ignore next */ []);
+		this.collapsed = signal(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* 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.collapseKey = computed(() => {
+			const c = this.collapseAt();
+			return c === "never" || c === "sm" || c === "lg" ? c : "md";
+		}, ...ngDevMode ? [{ debugName: "collapseKey" }] : /* istanbul ignore next */ []);
+		this.domSideFirst = computed(() => this.sideFirstInDom() && this.sideFirstWhenCollapsed() && this.collapsed(), ...ngDevMode ? [{ debugName: "domSideFirst" }] : /* istanbul ignore next */ []);
+		this.domOrder = computed(() => this.domSideFirst() ? "side-first" : "main-first", ...ngDevMode ? [{ debugName: "domOrder" }] : /* istanbul ignore next */ []);
+		this.sideCss = computed(() => lengthOr(this.sideWidth(), "320px"), ...ngDevMode ? [{ debugName: "sideCss" }] : /* istanbul ignore next */ []);
+		this.bleedCss = computed(() => lengthOr(this.sideBleed(), "4px"), ...ngDevMode ? [{ debugName: "bleedCss" }] : /* istanbul ignore next */ []);
+		this.gapCss = computed(() => {
+			const g = resolveLayoutGap(this.gap(), "md");
+			if (g.startsWith("-")) return "16px";
+			return g === "0" ? "0px" : g;
+		}, ...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";
+			const key = this.collapseKey();
+			const collapse = key === "never" ? "" : `sl-c-${key}`;
+			const domFirst = this.domSideFirst();
 			return [
 				this.position() === "start" ? "sl-start" : "",
 				this.stickySide() ? "sl-sticky" : "",
 				collapse,
-				collapse && this.sideFirstWhenCollapsed() ? "sl-first" : ""
+				collapse && this.sideFirstWhenCollapsed() && !domFirst ? "sl-first" : "",
+				domFirst ? "sl-dom-first" : ""
 			].filter(Boolean).join(" ");
 		}, ...ngDevMode ? [{ debugName: "rootClass" }] : /* istanbul ignore next */ []);
+		effect((onCleanup) => {
+			const key = this.collapseKey();
+			if (!this.sideFirstInDom() || key === "never" || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+				this.collapsed.set(false);
+				return;
+			}
+			const mql = window.matchMedia(`(max-width: ${BREAKPOINT_PX[key]}px)`);
+			this.collapsed.set(mql.matches);
+			const onChange = (e) => this.collapsed.set(e.matches);
+			if (typeof mql.addEventListener === "function") {
+				mql.addEventListener("change", onChange);
+				onCleanup(() => mql.removeEventListener("change", onChange));
+			} else {
+				const legacy = mql;
+				legacy.addListener(onChange);
+				onCleanup(() => legacy.removeListener(onChange));
+			}
+		});
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -37549,7 +37651,7 @@ var SidebarLayoutComponent = class SidebarLayoutComponent {
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.1.0",
+			minVersion: "17.0.0",
 			version: "22.2.2",
 			type: SidebarLayoutComponent,
 			isStandalone: true,
@@ -37610,13 +37712,37 @@ var SidebarLayoutComponent = class SidebarLayoutComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				sideFirstInDom: {
+					classPropertyName: "sideFirstInDom",
+					publicName: "sideFirstInDom",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sideBleed: {
+					classPropertyName: "sideBleed",
+					publicName: "sideBleed",
+					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>`,
+			template: `<div class="sl" [class]="rootClass()" [attr.data-dom-order]="domOrder()" [style.--sl-side-w]="sideCss()" [style.--sl-gap]="gapCss()" [style.--sl-top]="topCss()" [style.--sl-off]="offCss()" [style.--sl-bleed]="bleedCss()" [style.row-gap]="gapCss()">@if (domSideFirst()) {<ng-container [ngTemplateOutlet]="sideTpl" /><ng-container [ngTemplateOutlet]="mainTpl" />} @else {<ng-container [ngTemplateOutlet]="mainTpl" /><ng-container [ngTemplateOutlet]="sideTpl" />}</div><ng-template #mainTpl><div class="sl-main"><ng-content select="[layout-main]" /></div></ng-template><ng-template #sideTpl><div class="sl-side"><ng-content select="[layout-side]" /></div></ng-template>`,
 			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"],
+			styles: [":host{display:block}.sl{display:grid;grid-template-columns:minmax(0,1fr) auto;--sl-mis: var(--sl-gap, 16px);--sl-mie: 0px}.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);min-width:0;margin-inline-start:var(--sl-mis);margin-inline-end:var(--sl-mie)}.sl-side:empty{display:none}.sl.sl-start{grid-template-columns:auto minmax(0,1fr);--sl-mis: 0px;--sl-mie: var(--sl-gap, 16px)}.sl.sl-start .sl-main{grid-column:2}.sl.sl-start .sl-side{grid-column:1}.sl.sl-sticky{--sl-bin: min(var(--sl-bleed, 4px), var(--sl-gap, 16px));--sl-mis: calc(var(--sl-gap, 16px) - var(--sl-bin));--sl-mie: calc(-1 * var(--sl-bleed, 4px));--sl-pis: var(--sl-bin);--sl-pie: var(--sl-bleed, 4px)}.sl.sl-sticky.sl-start{--sl-mis: calc(-1 * var(--sl-bleed, 4px));--sl-mie: calc(var(--sl-gap, 16px) - var(--sl-bin));--sl-pis: var(--sl-bleed, 4px);--sl-pie: var(--sl-bin)}.sl.sl-sticky .sl-side{position:-webkit-sticky;position:sticky;top:calc(var(--sl-top, 16px) - var(--sl-bleed, 4px));align-self:start;width:calc(var(--sl-side-w, 320px) + var(--sl-bleed, 4px) + var(--sl-bin));padding-block:var(--sl-bleed, 4px);padding-inline-start:var(--sl-pis);padding-inline-end:var(--sl-pie);margin-block-start:calc(-1 * var(--sl-bleed, 4px));margin-block-end:calc(-1 * var(--sl-bleed, 4px));max-height:calc(100vh - (var(--sl-top, 16px) + var(--sl-off, 32px)) + 2 * var(--sl-bleed, 4px));max-height:calc(100dvh - (var(--sl-top, 16px) + var(--sl-off, 32px)) + 2 * var(--sl-bleed, 4px));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;padding:0;margin-inline-start:0;margin-inline-end:0;margin-block-start:0;margin-block-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;padding:0;margin-inline-start:0;margin-inline-end:0;margin-block-start:0;margin-block-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;padding:0;margin-inline-start:0;margin-inline-end:0;margin-block-start:0;margin-block-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"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -37632,11 +37758,13 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ui-sidebar-layout",
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [NgTemplateOutlet],
 			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"]
+			template: `<div class="sl" [class]="rootClass()" [attr.data-dom-order]="domOrder()" [style.--sl-side-w]="sideCss()" [style.--sl-gap]="gapCss()" [style.--sl-top]="topCss()" [style.--sl-off]="offCss()" [style.--sl-bleed]="bleedCss()" [style.row-gap]="gapCss()">@if (domSideFirst()) {<ng-container [ngTemplateOutlet]="sideTpl" /><ng-container [ngTemplateOutlet]="mainTpl" />} @else {<ng-container [ngTemplateOutlet]="mainTpl" /><ng-container [ngTemplateOutlet]="sideTpl" />}</div><ng-template #mainTpl><div class="sl-main"><ng-content select="[layout-main]" /></div></ng-template><ng-template #sideTpl><div class="sl-side"><ng-content select="[layout-side]" /></div></ng-template>`,
+			styles: [":host{display:block}.sl{display:grid;grid-template-columns:minmax(0,1fr) auto;--sl-mis: var(--sl-gap, 16px);--sl-mie: 0px}.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);min-width:0;margin-inline-start:var(--sl-mis);margin-inline-end:var(--sl-mie)}.sl-side:empty{display:none}.sl.sl-start{grid-template-columns:auto minmax(0,1fr);--sl-mis: 0px;--sl-mie: var(--sl-gap, 16px)}.sl.sl-start .sl-main{grid-column:2}.sl.sl-start .sl-side{grid-column:1}.sl.sl-sticky{--sl-bin: min(var(--sl-bleed, 4px), var(--sl-gap, 16px));--sl-mis: calc(var(--sl-gap, 16px) - var(--sl-bin));--sl-mie: calc(-1 * var(--sl-bleed, 4px));--sl-pis: var(--sl-bin);--sl-pie: var(--sl-bleed, 4px)}.sl.sl-sticky.sl-start{--sl-mis: calc(-1 * var(--sl-bleed, 4px));--sl-mie: calc(var(--sl-gap, 16px) - var(--sl-bin));--sl-pis: var(--sl-bleed, 4px);--sl-pie: var(--sl-bin)}.sl.sl-sticky .sl-side{position:-webkit-sticky;position:sticky;top:calc(var(--sl-top, 16px) - var(--sl-bleed, 4px));align-self:start;width:calc(var(--sl-side-w, 320px) + var(--sl-bleed, 4px) + var(--sl-bin));padding-block:var(--sl-bleed, 4px);padding-inline-start:var(--sl-pis);padding-inline-end:var(--sl-pie);margin-block-start:calc(-1 * var(--sl-bleed, 4px));margin-block-end:calc(-1 * var(--sl-bleed, 4px));max-height:calc(100vh - (var(--sl-top, 16px) + var(--sl-off, 32px)) + 2 * var(--sl-bleed, 4px));max-height:calc(100dvh - (var(--sl-top, 16px) + var(--sl-off, 32px)) + 2 * var(--sl-bleed, 4px));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;padding:0;margin-inline-start:0;margin-inline-end:0;margin-block-start:0;margin-block-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;padding:0;margin-inline-start:0;margin-inline-end:0;margin-block-start:0;margin-block-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;padding:0;margin-inline-start:0;margin-inline-end:0;margin-block-start:0;margin-block-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"]
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		sideWidth: [{
 			type: i0.Input,
@@ -37701,6 +37829,22 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "sideFirstWhenCollapsed",
 				required: false
 			}]
+		}],
+		sideFirstInDom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideFirstInDom",
+				required: false
+			}]
+		}],
+		sideBleed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideBleed",
+				required: false
+			}]
 		}]
 	}
 });