@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-theme-page-side.mjs

@@ -1,161 +1,276 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, input, computed, effect, untracked, Component, output } from '@angular/core';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { PageStateService, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_SCROLL, ɵsetupOverlayFocusManagement as _setupOverlayFocusManagement } from '@ojiepermana/angular/theme/page/core';
-
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, computed, effect, inject, input, output, untracked } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_WIDTH, PageStateService, ɵsetupOverlayFocusManagement } from "@ojiepermana/angular/theme/page/core";
 let nextPageSideId = 0;
-class PageSideComponent {
-    document = inject(DOCUMENT, { optional: true });
-    host = inject((ElementRef));
-    page = inject(PageStateService);
-    resolvedId = `page-side-${++nextPageSideId}`;
-    mode = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    position = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    width = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    closeOnEsc = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeOnEsc" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the panel in `drawer`/`overlay` mode (set as the dialog's `aria-label`). */
-    ariaLabel = input('Side panel', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedMode = computed(() => this.mode() ?? this.page.sideMode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
-    resolvedPosition = computed(() => this.position() ?? this.page.position(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
-    resolvedWidth = computed(() => this.width() ?? this.page.sideWidth() ?? PAGE_DEFAULT_SIDE_WIDTH, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
-    isSticky = computed(() => this.resolvedMode() === 'sticky', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
-    isDrawer = computed(() => this.resolvedMode() === 'drawer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []));
-    isOverlay = computed(() => this.resolvedMode() === 'overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []));
-    /** Mode mengambang (drawer/overlay) — bersifat dialog dan butuh manajemen fokus + `inert` saat tertutup. */
-    isInteractive = computed(() => this.isDrawer() || this.isOverlay(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
-    resolvedScroll = computed(() => this.page.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
-    ariaHidden = computed(() => !this.isSticky() && !this.page.sideOpen() ? 'true' : null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
-    /** Saat panel mengambang tertutup, `inert` mengeluarkan isinya dari tab order & pohon aksesibilitas (AXE). */
-    inertWhenClosed = computed(() => this.isInteractive() && !this.page.sideOpen() ? '' : null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inertWhenClosed" }] : /* istanbul ignore next */ []));
-    dialogRole = computed(() => (this.isInteractive() ? 'dialog' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogRole" }] : /* istanbul ignore next */ []));
-    ariaModal = computed(() => (this.isOverlay() ? 'true' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
-    dialogLabel = computed(() => (this.isInteractive() ? this.ariaLabel() : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []));
-    dialogTabindex = computed(() => (this.isInteractive() ? '-1' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialogTabindex" }] : /* istanbul ignore next */ []));
-    classes = computed(() => {
-        const position = this.resolvedPosition();
-        const sideOpen = this.page.sideOpen();
-        return cn('block min-h-0 border-border bg-background', this.resolvedScroll() === 'content' && 'h-full overflow-auto', this.resolvedScroll() === 'page' && 'overflow-visible', this.isSticky() && 'shrink-0 w-[var(--page-side-width)]', 
-        // Urutan DOM body = rail-lalu-content; `left` tak perlu reorder, `right` mendorong rail ke kolom kedua.
-        this.isSticky() && position === 'left' && 'border-r', this.isSticky() && position === 'right' && 'order-last border-l', this.isDrawer() &&
-            'absolute inset-y-0 z-20 w-[var(--page-side-width)] border shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none', this.isDrawer() &&
-            position === 'left' &&
-            (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() &&
-            position === 'right' &&
-            (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.isOverlay() &&
-            'absolute inset-y-0 z-30 w-[var(--page-side-width)] border shadow-md transition-transform duration-200 ease-out motion-reduce:transition-none', this.isOverlay() &&
-            position === 'left' &&
-            (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() &&
-            position === 'right' &&
-            (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.class());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        _setupOverlayFocusManagement({
-            document: this.document,
-            host: this.host.nativeElement,
-            isOpen: this.page.sideOpen,
-            isInteractive: this.isInteractive,
-            isModal: this.isOverlay,
-            takeReturnFocus: () => this.page.takeSideReturnFocus(),
-        });
-        effect(() => {
-            this.page.registerSide({
-                mode: this.resolvedMode(),
-                position: this.resolvedPosition(),
-                width: this.resolvedWidth(),
-                id: this.resolvedId,
-            });
-        });
-        effect((onCleanup) => {
-            if (!this.closeOnEsc() || this.isSticky()) {
-                return;
-            }
-            const defaultView = this.document?.defaultView;
-            if (!defaultView) {
-                return;
-            }
-            const handler = (event) => {
-                if (event.key !== 'Escape') {
-                    return;
-                }
-                if (!untracked(() => this.page.sideOpen())) {
-                    return;
-                }
-                untracked(() => {
-                    this.page.closeSide();
-                });
-            };
-            defaultView.addEventListener('keydown', handler);
-            onCleanup(() => defaultView.removeEventListener('keydown', handler));
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: PageSideComponent, isStandalone: true, selector: "PageSide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"side\"", "attr.data-page-side-mode": "resolvedMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "attr.inert": "inertWhenClosed()", "attr.role": "dialogRole()", "attr.aria-modal": "ariaModal()", "attr.aria-label": "dialogLabel()", "attr.tabindex": "dialogTabindex()", "style.--page-side-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageSide',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'resolvedId',
-                        '[attr.data-page-slot]': '"side"',
-                        '[attr.data-page-side-mode]': 'resolvedMode()',
-                        '[attr.data-page-side-open]': 'page.sideOpen()',
-                        '[attr.data-page-position]': 'resolvedPosition()',
-                        '[attr.aria-hidden]': 'ariaHidden()',
-                        '[attr.inert]': 'inertWhenClosed()',
-                        '[attr.role]': 'dialogRole()',
-                        '[attr.aria-modal]': 'ariaModal()',
-                        '[attr.aria-label]': 'dialogLabel()',
-                        '[attr.tabindex]': 'dialogTabindex()',
-                        '[style.--page-side-width]': 'resolvedWidth()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-class PageSideToggleComponent {
-    page = inject(PageStateService);
-    ariaLabel = input('Toggle page side', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    toggled = output();
-    hostClasses = computed(() => cn('inline-flex shrink-0', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    buttonClasses = computed(() => cn('inline-flex h-9 min-w-9 items-center justify-center rounded-base border border-border bg-background px-3 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
-    handleClick(event) {
-        if (!this.page.sideOpen() && event.currentTarget instanceof HTMLElement) {
-            this.page.setSideReturnFocus(event.currentTarget);
-        }
-        this.toggled.emit(this.page.toggleSide());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: PageSideToggleComponent, isStandalone: true, selector: "PageSideToggle", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { attributes: { "data-page-control": "side-toggle" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+var PageSideComponent = class PageSideComponent {
+	document = inject(DOCUMENT, { optional: true });
+	host = inject(ElementRef);
+	page = inject(PageStateService);
+	resolvedId = `page-side-${++nextPageSideId}`;
+	mode = input(null, ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	position = input(null, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	closeOnEsc = input(true, ...ngDevMode ? [{ debugName: "closeOnEsc" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Side panel", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	resolvedMode = computed(() => this.mode() ?? this.page.sideMode(), ...ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []);
+	resolvedPosition = computed(() => this.position() ?? this.page.position(), ...ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []);
+	resolvedWidth = computed(() => this.width() ?? this.page.sideWidth() ?? PAGE_DEFAULT_SIDE_WIDTH, ...ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []);
+	isSticky = computed(() => this.resolvedMode() === "sticky", ...ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []);
+	isDrawer = computed(() => this.resolvedMode() === "drawer", ...ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []);
+	isOverlay = computed(() => this.resolvedMode() === "overlay", ...ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []);
+	isInteractive = computed(() => this.isDrawer() || this.isOverlay(), ...ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []);
+	resolvedScroll = computed(() => this.page.scroll() ?? PAGE_DEFAULT_SCROLL, ...ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []);
+	ariaHidden = computed(() => !this.isSticky() && !this.page.sideOpen() ? "true" : null, ...ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []);
+	inertWhenClosed = computed(() => this.isInteractive() && !this.page.sideOpen() ? "" : null, ...ngDevMode ? [{ debugName: "inertWhenClosed" }] : /* istanbul ignore next */ []);
+	dialogRole = computed(() => this.isInteractive() ? "dialog" : null, ...ngDevMode ? [{ debugName: "dialogRole" }] : /* istanbul ignore next */ []);
+	ariaModal = computed(() => this.isOverlay() ? "true" : null, ...ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []);
+	dialogLabel = computed(() => this.isInteractive() ? this.ariaLabel() : null, ...ngDevMode ? [{ debugName: "dialogLabel" }] : /* istanbul ignore next */ []);
+	dialogTabindex = computed(() => this.isInteractive() ? "-1" : null, ...ngDevMode ? [{ debugName: "dialogTabindex" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const position = this.resolvedPosition();
+		const sideOpen = this.page.sideOpen();
+		return cn("block min-h-0 border-border bg-background", this.resolvedScroll() === "content" && "h-full overflow-auto", this.resolvedScroll() === "page" && "overflow-visible", this.isSticky() && "shrink-0 w-[var(--page-side-width)]", this.isSticky() && position === "left" && "border-r", this.isSticky() && position === "right" && "order-last border-l", this.isDrawer() && "absolute inset-y-0 z-20 w-[var(--page-side-width)] border shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none", this.isDrawer() && position === "left" && (sideOpen ? "left-0 translate-x-0" : "left-0 -translate-x-full"), this.isDrawer() && position === "right" && (sideOpen ? "right-0 translate-x-0" : "right-0 translate-x-full"), this.isOverlay() && "absolute inset-y-0 z-30 w-[var(--page-side-width)] border shadow-md transition-transform duration-200 ease-out motion-reduce:transition-none", this.isOverlay() && position === "left" && (sideOpen ? "left-0 translate-x-0" : "left-0 -translate-x-full"), this.isOverlay() && position === "right" && (sideOpen ? "right-0 translate-x-0" : "right-0 translate-x-full"), this.class());
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		ɵsetupOverlayFocusManagement({
+			document: this.document,
+			host: this.host.nativeElement,
+			isOpen: this.page.sideOpen,
+			isInteractive: this.isInteractive,
+			isModal: this.isOverlay,
+			takeReturnFocus: () => this.page.takeSideReturnFocus()
+		});
+		effect(() => {
+			this.page.registerSide({
+				mode: this.resolvedMode(),
+				position: this.resolvedPosition(),
+				width: this.resolvedWidth(),
+				id: this.resolvedId
+			});
+		});
+		effect((onCleanup) => {
+			if (!this.closeOnEsc() || this.isSticky()) return;
+			const defaultView = this.document?.defaultView;
+			if (!defaultView) return;
+			const handler = (event) => {
+				if (event.key !== "Escape") return;
+				if (!untracked(() => this.page.sideOpen())) return;
+				untracked(() => {
+					this.page.closeSide();
+				});
+			};
+			defaultView.addEventListener("keydown", handler);
+			onCleanup(() => defaultView.removeEventListener("keydown", handler));
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PageSideComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: PageSideComponent,
+		isStandalone: true,
+		selector: "PageSide",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeOnEsc: {
+				classPropertyName: "closeOnEsc",
+				publicName: "closeOnEsc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.id": "resolvedId",
+			"attr.data-page-slot": "\"side\"",
+			"attr.data-page-side-mode": "resolvedMode()",
+			"attr.data-page-side-open": "page.sideOpen()",
+			"attr.data-page-position": "resolvedPosition()",
+			"attr.aria-hidden": "ariaHidden()",
+			"attr.inert": "inertWhenClosed()",
+			"attr.role": "dialogRole()",
+			"attr.aria-modal": "ariaModal()",
+			"attr.aria-label": "dialogLabel()",
+			"attr.tabindex": "dialogTabindex()",
+			"style.--page-side-width": "resolvedWidth()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PageSideComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "PageSide",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "resolvedId",
+				"[attr.data-page-slot]": "\"side\"",
+				"[attr.data-page-side-mode]": "resolvedMode()",
+				"[attr.data-page-side-open]": "page.sideOpen()",
+				"[attr.data-page-position]": "resolvedPosition()",
+				"[attr.aria-hidden]": "ariaHidden()",
+				"[attr.inert]": "inertWhenClosed()",
+				"[attr.role]": "dialogRole()",
+				"[attr.aria-modal]": "ariaModal()",
+				"[attr.aria-label]": "dialogLabel()",
+				"[attr.tabindex]": "dialogTabindex()",
+				"[style.--page-side-width]": "resolvedWidth()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		closeOnEsc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnEsc",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var PageSideToggleComponent = class PageSideToggleComponent {
+	page = inject(PageStateService);
+	ariaLabel = input("Toggle page side", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	toggled = output();
+	hostClasses = computed(() => cn("inline-flex shrink-0", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	buttonClasses = computed(() => cn("inline-flex h-9 min-w-9 items-center justify-center rounded-base border border-border bg-background px-3 text-sm text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"), ...ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []);
+	handleClick(event) {
+		if (!this.page.sideOpen() && event.currentTarget instanceof HTMLElement) this.page.setSideReturnFocus(event.currentTarget);
+		this.toggled.emit(this.page.toggleSide());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: PageSideToggleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: PageSideToggleComponent,
+		isStandalone: true,
+		selector: "PageSideToggle",
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { toggled: "toggled" },
+		host: {
+			attributes: { "data-page-control": "side-toggle" },
+			properties: { "class": "hostClasses()" }
+		},
+		ngImport: i0,
+		template: `
     <button
       type="button"
       [class]="buttonClasses()"
@@ -168,17 +283,24 @@ class PageSideToggleComponent {
         <span aria-hidden="true" class="text-lg leading-none">☰</span>
       </ng-content>
     </button>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageSideToggleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageSideToggle',
-                    host: {
-                        '[class]': 'hostClasses()',
-                        'data-page-control': 'side-toggle',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: PageSideToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "PageSideToggle",
+			host: {
+				"[class]": "hostClasses()",
+				"data-page-control": "side-toggle"
+			},
+			template: `
     <button
       type="button"
       [class]="buttonClasses()"
@@ -191,12 +313,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         <span aria-hidden="true" class="text-lg leading-none">☰</span>
       </ng-content>
     </button>
-  `,
-                }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { PageSideComponent, PageSideToggleComponent };
+  `
+		}]
+	}],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		toggled: [{
+			type: i0.Output,
+			args: ["toggled"]
+		}]
+	}
+});
+export { PageSideComponent, PageSideToggleComponent };