@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,385 @@
-export * from '@ojiepermana/angular-theme/page/core';
+import * as i0 from '@angular/core';
+import { signal, computed, Service, effect } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const PAGE_VARIANTS = ['stacked', 'side'];
+const PAGE_SIDE_POSITIONS = ['left', 'right'];
+const PAGE_SIDE_MODES = ['sticky', 'drawer', 'overlay'];
+const PAGE_SCROLL_VALUES = ['content', 'page'];
+const PAGE_HEIGHT_VALUES = ['auto', 'fix'];
+/** Visual appearance shared with the layout/navigation axes — unifies borders. */
+const PAGE_APPEARANCES = ['flat', 'border-rail'];
+/** `PageFilter` placement: `stacked` = a bar between header and content; `side` = a column beside content. */
+const PAGE_FILTER_PLACEMENTS = ['stacked', 'side'];
+const PAGE_DEFAULT_VARIANT = 'stacked';
+const PAGE_DEFAULT_SIDE_POSITION = 'left';
+const PAGE_DEFAULT_SIDE_MODE = 'sticky';
+const PAGE_DEFAULT_SCROLL = 'content';
+const PAGE_DEFAULT_HEIGHT = 'auto';
+const PAGE_DEFAULT_APPEARANCE = 'flat';
+const PAGE_DEFAULT_SIDE_WIDTH = '16rem';
+/** Placement default `PageFilter`. */
+const PAGE_DEFAULT_FILTER_PLACEMENT = 'stacked';
+/** Default `PageFilter` mode under `placement="side"`; `stacked` always behaves as `sticky`. */
+const PAGE_DEFAULT_FILTER_MODE = 'sticky';
+/** Default position of the `PageFilter` column under `placement="side"`. */
+const PAGE_DEFAULT_FILTER_POSITION = 'left';
+/** Default width of the `PageFilter` column under `placement="side"` (sticky/drawer/overlay). */
+const PAGE_DEFAULT_FILTER_WIDTH = '18rem';
+function isUiPageVariant(value) {
+    return value !== null && PAGE_VARIANTS.includes(value);
+}
+function isUiPageSidePosition(value) {
+    return value !== null && PAGE_SIDE_POSITIONS.includes(value);
+}
+function isUiPageSideMode(value) {
+    return value !== null && PAGE_SIDE_MODES.includes(value);
+}
+function isUiPageScroll(value) {
+    return value !== null && PAGE_SCROLL_VALUES.includes(value);
+}
+function isUiPageHeight(value) {
+    return value !== null && PAGE_HEIGHT_VALUES.includes(value);
+}
+function isUiPageAppearance(value) {
+    return value !== null && PAGE_APPEARANCES.includes(value);
+}
+function isUiPageFilterPlacement(value) {
+    return value !== null && PAGE_FILTER_PLACEMENTS.includes(value);
+}
+
+class PageStateService {
+    variantState = signal(PAGE_DEFAULT_VARIANT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantState" }] : /* istanbul ignore next */ []));
+    heightState = signal(PAGE_DEFAULT_HEIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heightState" }] : /* istanbul ignore next */ []));
+    scrollState = signal(PAGE_DEFAULT_SCROLL, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollState" }] : /* istanbul ignore next */ []));
+    appearanceState = signal(PAGE_DEFAULT_APPEARANCE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceState" }] : /* istanbul ignore next */ []));
+    positionState = signal(PAGE_DEFAULT_SIDE_POSITION, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positionState" }] : /* istanbul ignore next */ []));
+    sideModeState = signal(PAGE_DEFAULT_SIDE_MODE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideModeState" }] : /* istanbul ignore next */ []));
+    internalSideOpenState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalSideOpenState" }] : /* istanbul ignore next */ []));
+    controlledSideOpenState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlledSideOpenState" }] : /* istanbul ignore next */ []));
+    sideWidthState = signal(PAGE_DEFAULT_SIDE_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideWidthState" }] : /* istanbul ignore next */ []));
+    sideIdState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideIdState" }] : /* istanbul ignore next */ []));
+    sideOpenRequestState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOpenRequestState" }] : /* istanbul ignore next */ []));
+    sideOpenRequestVersionState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOpenRequestVersionState" }] : /* istanbul ignore next */ []));
+    sideReturnFocus = null;
+    /** Aktif saat apps-launcher mengambang di atas `PageHeader`; header memesan ruang kanan agar isinya tidak tertimpa. */
+    appsLauncherReserveState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appsLauncherReserveState" }] : /* istanbul ignore next */ []));
+    // Filter state — paralel dengan side state agar `PageFilter` punya open/close sendiri yang independen.
+    filterPlacementState = signal(PAGE_DEFAULT_FILTER_PLACEMENT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlacementState" }] : /* istanbul ignore next */ []));
+    filterModeState = signal(PAGE_DEFAULT_FILTER_MODE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterModeState" }] : /* istanbul ignore next */ []));
+    filterPositionState = signal(PAGE_DEFAULT_FILTER_POSITION, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPositionState" }] : /* istanbul ignore next */ []));
+    filterWidthState = signal(PAGE_DEFAULT_FILTER_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterWidthState" }] : /* istanbul ignore next */ []));
+    filterIdState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterIdState" }] : /* istanbul ignore next */ []));
+    internalFilterOpenState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalFilterOpenState" }] : /* istanbul ignore next */ []));
+    controlledFilterOpenState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlledFilterOpenState" }] : /* istanbul ignore next */ []));
+    filterOpenRequestState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterOpenRequestState" }] : /* istanbul ignore next */ []));
+    filterOpenRequestVersionState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterOpenRequestVersionState" }] : /* istanbul ignore next */ []));
+    filterReturnFocus = null;
+    variant = this.variantState.asReadonly();
+    height = this.heightState.asReadonly();
+    scroll = this.scrollState.asReadonly();
+    appearance = this.appearanceState.asReadonly();
+    position = this.positionState.asReadonly();
+    sideMode = this.sideModeState.asReadonly();
+    sideWidth = this.sideWidthState.asReadonly();
+    sideId = this.sideIdState.asReadonly();
+    sideOpenRequest = this.sideOpenRequestState.asReadonly();
+    sideOpenRequestVersion = this.sideOpenRequestVersionState.asReadonly();
+    appsLauncherReserve = this.appsLauncherReserveState.asReadonly();
+    sideOpen = computed(() => this.controlledSideOpenState() ?? this.internalSideOpenState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sideOpen" }] : /* istanbul ignore next */ []));
+    isSideInteractive = computed(() => this.sideMode() === 'drawer' || this.sideMode() === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSideInteractive" }] : /* istanbul ignore next */ []));
+    isSideVisible = computed(() => this.sideMode() === 'sticky' || this.sideOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSideVisible" }] : /* istanbul ignore next */ []));
+    filterPlacement = this.filterPlacementState.asReadonly();
+    filterMode = this.filterModeState.asReadonly();
+    filterPosition = this.filterPositionState.asReadonly();
+    filterWidth = this.filterWidthState.asReadonly();
+    filterId = this.filterIdState.asReadonly();
+    filterOpenRequest = this.filterOpenRequestState.asReadonly();
+    filterOpenRequestVersion = this.filterOpenRequestVersionState.asReadonly();
+    filterOpen = computed(() => this.controlledFilterOpenState() ?? this.internalFilterOpenState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterOpen" }] : /* istanbul ignore next */ []));
+    isFilterInteractive = computed(() => this.filterMode() === 'drawer' || this.filterMode() === 'overlay', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFilterInteractive" }] : /* istanbul ignore next */ []));
+    isFilterVisible = computed(() => this.filterMode() === 'sticky' || this.filterOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFilterVisible" }] : /* istanbul ignore next */ []));
+    registerRoot(config) {
+        this.variantState.set(config.variant);
+        this.heightState.set(config.height);
+        this.scrollState.set(config.scroll);
+        this.appearanceState.set(config.appearance);
+        this.positionState.set(config.position);
+        this.sideModeState.set(config.sideMode);
+        this.sideWidthState.set(config.sideWidth);
+    }
+    registerSide(config) {
+        this.sideModeState.set(config.mode);
+        this.positionState.set(config.position);
+        this.sideWidthState.set(config.width);
+        this.sideIdState.set(config.id);
+    }
+    setAppsLauncherReserve(reserve) {
+        this.appsLauncherReserveState.set(reserve);
+    }
+    setControlledSideOpen(open) {
+        this.controlledSideOpenState.set(open);
+        if (open !== null) {
+            this.internalSideOpenState.set(open);
+        }
+    }
+    setSideOpen(open) {
+        this.internalSideOpenState.set(open);
+    }
+    openSide() {
+        return this.requestSideOpenChange(true);
+    }
+    closeSide() {
+        return this.requestSideOpenChange(false);
+    }
+    toggleSide() {
+        return this.requestSideOpenChange(!this.sideOpen());
+    }
+    /** Stores the concrete trigger before opening so restoration is not browser-timing dependent. */
+    setSideReturnFocus(element) {
+        this.sideReturnFocus = element;
+    }
+    takeSideReturnFocus() {
+        const element = this.sideReturnFocus;
+        this.sideReturnFocus = null;
+        return element;
+    }
+    requestSideOpenChange(open) {
+        if (this.controlledSideOpenState() === null) {
+            this.internalSideOpenState.set(open);
+        }
+        this.sideOpenRequestState.set(open);
+        this.sideOpenRequestVersionState.update((version) => version + 1);
+        return open;
+    }
+    registerFilter(config) {
+        this.filterPlacementState.set(config.placement);
+        this.filterModeState.set(config.mode);
+        this.filterPositionState.set(config.position);
+        this.filterWidthState.set(config.width);
+        this.filterIdState.set(config.id);
+    }
+    setControlledFilterOpen(open) {
+        this.controlledFilterOpenState.set(open);
+        if (open !== null) {
+            this.internalFilterOpenState.set(open);
+        }
+    }
+    setFilterOpen(open) {
+        this.internalFilterOpenState.set(open);
+    }
+    openFilter() {
+        return this.requestFilterOpenChange(true);
+    }
+    closeFilter() {
+        return this.requestFilterOpenChange(false);
+    }
+    toggleFilter() {
+        return this.requestFilterOpenChange(!this.filterOpen());
+    }
+    /** Mirrors side focus ownership for filter drawer/overlay triggers. */
+    setFilterReturnFocus(element) {
+        this.filterReturnFocus = element;
+    }
+    takeFilterReturnFocus() {
+        const element = this.filterReturnFocus;
+        this.filterReturnFocus = null;
+        return element;
+    }
+    requestFilterOpenChange(open) {
+        if (this.controlledFilterOpenState() === null) {
+            this.internalFilterOpenState.set(open);
+        }
+        this.filterOpenRequestState.set(open);
+        this.filterOpenRequestVersionState.update((version) => version + 1);
+        return open;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageStateService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: PageStateService, autoProvided: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageStateService, decorators: [{
+            type: Service,
+            args: [{ autoProvided: false }]
+        }] });
+
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+const inertLocks = new WeakMap();
+const scrollLocks = new WeakMap();
+/**
+ * Accessibility management for the Page panels.
+ *
+ * A drawer only gets initial focus and focus restoration. An overlay is a modal dialog:
+ * focus is trapped, the background is made inert, and document scrolling is locked until
+ * the panel closes. Must be called from an injection context, because it uses `effect`.
+ */
+/** @internal */
+function ɵsetupOverlayFocusManagement(config) {
+    effect((onCleanup) => {
+        if (!config.isInteractive() || !config.isOpen()) {
+            return;
+        }
+        const document = config.document;
+        const view = document?.defaultView;
+        if (!document || !view) {
+            return;
+        }
+        const returnFocus = config.takeReturnFocus?.() ?? document.activeElement;
+        const modal = config.isModal();
+        const inertSnapshots = modal ? makeBackgroundInert(config.host) : [];
+        if (modal) {
+            lockDocumentScroll(document);
+        }
+        const handleKeydown = (event) => {
+            if (!modal || event.key !== 'Tab') {
+                return;
+            }
+            const focusable = getFocusableElements(config.host);
+            if (focusable.length === 0) {
+                event.preventDefault();
+                config.host.focus();
+                return;
+            }
+            const active = document.activeElement;
+            const first = focusable[0];
+            const last = focusable.at(-1);
+            const activeIndex = focusable.indexOf(active);
+            if (event.shiftKey && activeIndex <= 0) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && (activeIndex === -1 || active === last)) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        config.host.addEventListener('keydown', handleKeydown);
+        const animationFrame = view.requestAnimationFrame(() => {
+            const initial = config.host.querySelector('[data-page-initial-focus], [autofocus]') ??
+                getFocusableElements(config.host)[0] ??
+                config.host;
+            initial.focus();
+        });
+        onCleanup(() => {
+            view.cancelAnimationFrame(animationFrame);
+            config.host.removeEventListener('keydown', handleKeydown);
+            restoreBackground(inertSnapshots);
+            if (modal) {
+                unlockDocumentScroll(document);
+            }
+            if (returnFocus?.isConnected && typeof returnFocus.focus === 'function') {
+                view.requestAnimationFrame(() => returnFocus.focus());
+            }
+        });
+    });
+}
+function getFocusableElements(host) {
+    return Array.from(host.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hidden && !element.inert && element.getAttribute('aria-hidden') !== 'true');
+}
+/** Make every sibling along the panel → Page host path inert, without killing backdrop dismiss. */
+function makeBackgroundInert(host) {
+    const snapshots = [];
+    const pageRoot = host.closest('Page');
+    if (!pageRoot) {
+        return snapshots;
+    }
+    let branch = host;
+    let parent = branch.parentElement;
+    while (parent) {
+        for (const sibling of Array.from(parent.children)) {
+            if (sibling === branch ||
+                !(sibling instanceof HTMLElement) ||
+                sibling.hasAttribute('data-page-overlay-backdrop')) {
+                continue;
+            }
+            const lock = inertLocks.get(sibling);
+            if (lock) {
+                lock.count += 1;
+            }
+            else {
+                inertLocks.set(sibling, { count: 1, initial: sibling.inert === true });
+            }
+            snapshots.push({ element: sibling });
+            sibling.inert = true;
+        }
+        if (parent === pageRoot) {
+            break;
+        }
+        branch = parent;
+        parent = parent.parentElement;
+    }
+    return snapshots;
+}
+function restoreBackground(snapshots) {
+    for (const snapshot of snapshots) {
+        const lock = inertLocks.get(snapshot.element);
+        if (!lock) {
+            continue;
+        }
+        lock.count -= 1;
+        if (lock.count === 0) {
+            snapshot.element.inert = lock.initial;
+            inertLocks.delete(snapshot.element);
+        }
+    }
+}
+function lockDocumentScroll(document) {
+    const lock = scrollLocks.get(document);
+    if (lock) {
+        lock.count += 1;
+    }
+    else {
+        scrollLocks.set(document, { count: 1, initialOverflow: document.body.style.overflow });
+    }
+    document.body.style.overflow = 'hidden';
+}
+function unlockDocumentScroll(document) {
+    const lock = scrollLocks.get(document);
+    if (!lock) {
+        return;
+    }
+    lock.count -= 1;
+    if (lock.count === 0) {
+        document.body.style.overflow = lock.initialOverflow;
+        scrollLocks.delete(document);
+    }
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { PAGE_APPEARANCES, PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_FILTER_MODE, PAGE_DEFAULT_FILTER_PLACEMENT, PAGE_DEFAULT_FILTER_POSITION, PAGE_DEFAULT_FILTER_WIDTH, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_FILTER_PLACEMENTS, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageStateService, isUiPageAppearance, isUiPageFilterPlacement, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant, ɵsetupOverlayFocusManagement };

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

@@ -1,7 +1,271 @@
-export * from '@ojiepermana/angular-theme/page/filter';
+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';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+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.4", ngImport: i0, type: PageFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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.4", 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.4", ngImport: i0, type: PageFilterToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", 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()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-controls]="page.filterId()"
+      [attr.aria-expanded]="page.filterOpen()"
+      (click)="handleClick($event)"
+    >
+      <ng-content>
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M3 5h18l-7 8v5l-4 2v-7z" />
+        </svg>
+      </ng-content>
+    </button>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PageFilterToggleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'PageFilterToggle',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        'data-page-control': 'filter-toggle',
+                    },
+                    template: `
+    <button
+      type="button"
+      [class]="buttonClasses()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-controls]="page.filterId()"
+      [attr.aria-expanded]="page.filterOpen()"
+      (click)="handleClick($event)"
+    >
+      <ng-content>
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          class="h-4 w-4"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M3 5h18l-7 8v5l-4 2v-7z" />
+        </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 };