@ojiepermana/angular 22.1.14 → 22.2.1

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

@@ -1,208 +1,321 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, ElementRef, input, booleanAttribute, computed, effect, untracked, Component, output } from '@angular/core';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { PageStateService, PAGE_DEFAULT_FILTER_PLACEMENT, PAGE_DEFAULT_FILTER_MODE, PAGE_DEFAULT_FILTER_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, booleanAttribute, computed, effect, inject, input, output, untracked } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { PAGE_DEFAULT_FILTER_MODE, PAGE_DEFAULT_FILTER_PLACEMENT, PAGE_DEFAULT_FILTER_WIDTH, PAGE_DEFAULT_SCROLL, PageStateService, ɵsetupOverlayFocusManagement } from "@ojiepermana/angular/theme/page/core";
 let nextPageFilterId = 0;
-/**
- * `PageFilter` — the filter slot between `PageHeader` and `PageContent`
- * (`placement="stacked"`) or beside `PageContent` (`placement="side"`). Stacked, the
- * filter pushes content down and content takes the remaining height. Side, it pushes
- * content across, in `sticky | drawer | overlay` mode, following the `PageSide` pattern.
- *
- * `placement="stacked"` always behaves as `sticky` — `drawer` and `overlay` apply to
- * `side` only.
- */
-class PageFilterComponent {
-    document = inject(DOCUMENT, { optional: true });
-    host = inject((ElementRef));
-    page = inject(PageStateService);
-    resolvedId = `page-filter-${++nextPageFilterId}`;
-    placement = input(PAGE_DEFAULT_FILTER_PLACEMENT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    mode = input(PAGE_DEFAULT_FILTER_MODE, /* @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 */ []));
-    /**
-     * `placement="stacked"` only: let `PageFilterToggle` open and close the bar (closed by
-     * default). Closed, the bar is hidden and content reclaims its space. Ignored under
-     * `placement="side"` — use `mode="drawer"` or `mode="overlay"` for a dismissible side.
-     */
-    collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Accessible name for the panel in `drawer`/`overlay` mode (set as the dialog's `aria-label`). */
-    ariaLabel = input('Filters', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedPlacement = computed(() => this.placement(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []));
-    /** `stacked` adalah bar horizontal — tidak punya drawer/overlay, jadi mode efektifnya selalu `sticky`. */
-    effectiveMode = computed(() => this.resolvedPlacement() === 'stacked' ? 'sticky' : this.mode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
-    resolvedPosition = computed(() => this.position() ?? this.page.filterPosition(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []));
-    resolvedWidth = computed(() => this.width() ?? this.page.filterWidth() ?? PAGE_DEFAULT_FILTER_WIDTH, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
-    resolvedScroll = computed(() => this.page.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
-    isStacked = computed(() => this.resolvedPlacement() === 'stacked', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isStacked" }] : /* istanbul ignore next */ []));
-    /** Bar stacked yang dapat ditutup dan sedang tertutup → disembunyikan dari layout. */
-    isCollapsedStacked = computed(() => this.isStacked() && this.collapsible() && !this.page.filterOpen(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isCollapsedStacked" }] : /* istanbul ignore next */ []));
-    isSticky = computed(() => this.effectiveMode() === 'sticky', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []));
-    isDrawer = computed(() => this.effectiveMode() === 'drawer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []));
-    isOverlay = computed(() => this.effectiveMode() === '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 */ []));
-    /** Drawer/overlay yang tertutup disembunyikan dari pohon aksesibilitas. */
-    ariaHidden = computed(() => !this.isSticky() && !this.page.filterOpen() ? '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.filterOpen() ? '' : 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 scroll = this.resolvedScroll();
-        const open = this.page.filterOpen();
-        // STACKED: bar selebar content yang mendorong content ke bawah (shrink-0 = tinggi mengikuti isi).
-        if (this.isStacked()) {
-            return cn('block shrink-0 border-b border-border bg-background', 
-            // Saat seluruh page yang scroll, filter dipin ke atas area scroll agar tetap terjangkau.
-            scroll === 'page' && 'sticky top-0 z-10', this.class(), 
-            // Collapsible & tertutup → `hidden` (menang atas `block`); content mengisi ruangnya kembali.
-            this.isCollapsedStacked() && 'hidden');
-        }
-        // SIDE: kolom di samping content.
-        return cn('block min-h-0 border-border bg-background', scroll === 'content' && 'h-full overflow-auto', scroll === 'page' && 'overflow-visible', 
-        // sticky → mendorong content (push); urutan kolom di-handle oleh `order-last` saat di kanan.
-        this.isSticky() && 'shrink-0 w-[var(--page-filter-width)]', this.isSticky() && position === 'left' && 'border-r', this.isSticky() && position === 'right' && 'order-last border-l', 
-        // drawer → meluncur dari tepi content region, mengambang di atas content.
-        this.isDrawer() &&
-            'absolute inset-y-0 z-20 w-[var(--page-filter-width)] border shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none', this.isDrawer() &&
-            position === 'left' &&
-            (open ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() &&
-            position === 'right' &&
-            (open ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), 
-        // overlay → seperti drawer, tapi di atas drawer (z lebih tinggi) dengan backdrop.
-        this.isOverlay() &&
-            'absolute inset-y-0 z-30 w-[var(--page-filter-width)] border shadow-md transition-transform duration-200 ease-out motion-reduce:transition-none', this.isOverlay() &&
-            position === 'left' &&
-            (open ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() &&
-            position === 'right' &&
-            (open ? '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.filterOpen,
-            isInteractive: this.isInteractive,
-            isModal: this.isOverlay,
-            takeReturnFocus: () => this.page.takeFilterReturnFocus(),
-        });
-        effect(() => {
-            this.page.registerFilter({
-                placement: this.resolvedPlacement(),
-                mode: this.effectiveMode(),
-                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.filterOpen())) {
-                    return;
-                }
-                untracked(() => {
-                    this.page.closeFilter();
-                });
-            };
-            defaultView.addEventListener('keydown', handler);
-            onCleanup(() => defaultView.removeEventListener('keydown', handler));
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: PageFilterComponent, isStandalone: true, selector: "PageFilter", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, 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 }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", 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": "\"filter\"", "attr.data-page-filter-placement": "resolvedPlacement()", "attr.data-page-filter-mode": "effectiveMode()", "attr.data-page-filter-open": "page.filterOpen()", "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-filter-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageFilter',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'resolvedId',
-                        '[attr.data-page-slot]': '"filter"',
-                        '[attr.data-page-filter-placement]': 'resolvedPlacement()',
-                        '[attr.data-page-filter-mode]': 'effectiveMode()',
-                        '[attr.data-page-filter-open]': 'page.filterOpen()',
-                        '[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-filter-width]': 'resolvedWidth()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], 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 }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * `PageFilterToggle` — the button that opens and closes a `PageFilter` in `drawer` or
- * `overlay` mode. Projected content replaces the label or icon; the fallback is the
- * built-in funnel icon.
- */
-class PageFilterToggleComponent {
-    page = inject(PageStateService);
-    ariaLabel = input('Toggle page filter', /* @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.filterOpen() && event.currentTarget instanceof HTMLElement) {
-            this.page.setFilterReturnFocus(event.currentTarget);
-        }
-        this.toggled.emit(this.page.toggleFilter());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageFilterToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: PageFilterToggleComponent, isStandalone: true, selector: "PageFilterToggle", 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": "filter-toggle" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+const FILTER_BG = "bg-surface/50";
+const FILTER_BG_OPAQUE = "bg-[color-mix(in_srgb,var(--color-surface)_50%,var(--color-background))]";
+var PageFilterComponent = class PageFilterComponent {
+	document = inject(DOCUMENT, { optional: true });
+	host = inject(ElementRef);
+	page = inject(PageStateService);
+	resolvedId = `page-filter-${++nextPageFilterId}`;
+	placement = input(PAGE_DEFAULT_FILTER_PLACEMENT, ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	mode = input(PAGE_DEFAULT_FILTER_MODE, ...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 */ []);
+	collapsible = input(false, {
+		...ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input("Filters", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	resolvedPlacement = computed(() => this.placement(), ...ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []);
+	effectiveMode = computed(() => this.resolvedPlacement() === "stacked" ? "sticky" : this.mode(), ...ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []);
+	resolvedPosition = computed(() => this.position() ?? this.page.filterPosition(), ...ngDevMode ? [{ debugName: "resolvedPosition" }] : /* istanbul ignore next */ []);
+	resolvedWidth = computed(() => this.width() ?? this.page.filterWidth() ?? PAGE_DEFAULT_FILTER_WIDTH, ...ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []);
+	resolvedScroll = computed(() => this.page.scroll() ?? PAGE_DEFAULT_SCROLL, ...ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []);
+	isStacked = computed(() => this.resolvedPlacement() === "stacked", ...ngDevMode ? [{ debugName: "isStacked" }] : /* istanbul ignore next */ []);
+	isCollapsedStacked = computed(() => this.isStacked() && this.collapsible() && !this.page.filterOpen(), ...ngDevMode ? [{ debugName: "isCollapsedStacked" }] : /* istanbul ignore next */ []);
+	isSticky = computed(() => this.effectiveMode() === "sticky", ...ngDevMode ? [{ debugName: "isSticky" }] : /* istanbul ignore next */ []);
+	isDrawer = computed(() => this.effectiveMode() === "drawer", ...ngDevMode ? [{ debugName: "isDrawer" }] : /* istanbul ignore next */ []);
+	isOverlay = computed(() => this.effectiveMode() === "overlay", ...ngDevMode ? [{ debugName: "isOverlay" }] : /* istanbul ignore next */ []);
+	isInteractive = computed(() => this.isDrawer() || this.isOverlay(), ...ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []);
+	ariaHidden = computed(() => !this.isSticky() && !this.page.filterOpen() ? "true" : null, ...ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []);
+	inertWhenClosed = computed(() => this.isInteractive() && !this.page.filterOpen() ? "" : 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 scroll = this.resolvedScroll();
+		const open = this.page.filterOpen();
+		if (this.isStacked()) return cn("block shrink-0 border-b border-border text-surface-foreground", scroll === "page" ? `sticky top-0 z-10 ${FILTER_BG_OPAQUE}` : FILTER_BG, this.class(), this.isCollapsedStacked() && "hidden");
+		return cn("block min-h-0 border-border text-surface-foreground", this.isSticky() ? FILTER_BG : FILTER_BG_OPAQUE, scroll === "content" && "h-full overflow-auto", scroll === "page" && "overflow-visible", this.isSticky() && "shrink-0 w-[var(--page-filter-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-filter-width)] border shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none", this.isDrawer() && position === "left" && (open ? "left-0 translate-x-0" : "left-0 -translate-x-full"), this.isDrawer() && position === "right" && (open ? "right-0 translate-x-0" : "right-0 translate-x-full"), this.isOverlay() && "absolute inset-y-0 z-30 w-[var(--page-filter-width)] border shadow-md transition-transform duration-200 ease-out motion-reduce:transition-none", this.isOverlay() && position === "left" && (open ? "left-0 translate-x-0" : "left-0 -translate-x-full"), this.isOverlay() && position === "right" && (open ? "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.filterOpen,
+			isInteractive: this.isInteractive,
+			isModal: this.isOverlay,
+			takeReturnFocus: () => this.page.takeFilterReturnFocus()
+		});
+		effect(() => {
+			this.page.registerFilter({
+				placement: this.resolvedPlacement(),
+				mode: this.effectiveMode(),
+				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.filterOpen())) return;
+				untracked(() => {
+					this.page.closeFilter();
+				});
+			};
+			defaultView.addEventListener("keydown", handler);
+			onCleanup(() => defaultView.removeEventListener("keydown", handler));
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PageFilterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: PageFilterComponent,
+		isStandalone: true,
+		selector: "PageFilter",
+		inputs: {
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			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
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				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": "\"filter\"",
+			"attr.data-page-filter-placement": "resolvedPlacement()",
+			"attr.data-page-filter-mode": "effectiveMode()",
+			"attr.data-page-filter-open": "page.filterOpen()",
+			"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-filter-width": "resolvedWidth()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PageFilterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "PageFilter",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "resolvedId",
+				"[attr.data-page-slot]": "\"filter\"",
+				"[attr.data-page-filter-placement]": "resolvedPlacement()",
+				"[attr.data-page-filter-mode]": "effectiveMode()",
+				"[attr.data-page-filter-open]": "page.filterOpen()",
+				"[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-filter-width]": "resolvedWidth()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		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
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				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 PageFilterToggleComponent = class PageFilterToggleComponent {
+	page = inject(PageStateService);
+	ariaLabel = input("Toggle page filter", ...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.filterOpen() && event.currentTarget instanceof HTMLElement) this.page.setFilterReturnFocus(event.currentTarget);
+		this.toggled.emit(this.page.toggleFilter());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PageFilterToggleComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: PageFilterToggleComponent,
+		isStandalone: true,
+		selector: "PageFilterToggle",
+		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": "filter-toggle" },
+			properties: { "class": "hostClasses()" }
+		},
+		ngImport: i0,
+		template: `
     <button
       type="button"
       [class]="buttonClasses()"
@@ -226,17 +339,24 @@ class PageFilterToggleComponent {
         </svg>
       </ng-content>
     </button>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PageFilterToggleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'PageFilterToggle',
-                    host: {
-                        '[class]': 'hostClasses()',
-                        'data-page-control': 'filter-toggle',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PageFilterToggleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "PageFilterToggle",
+			host: {
+				"[class]": "hostClasses()",
+				"data-page-control": "filter-toggle"
+			},
+			template: `
     <button
       type="button"
       [class]="buttonClasses()"
@@ -260,12 +380,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </svg>
       </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 { PageFilterComponent, PageFilterToggleComponent };
+  `
+		}]
+	}],
+	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 { PageFilterComponent, PageFilterToggleComponent };