@ojiepermana/angular-theme 22.0.27

package/fesm2022/ojiepermana-angular-theme-layout.mjs

@@ -0,0 +1,574 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, DestroyRef, Component, effect, ChangeDetectionStrategy, contentChild } from '@angular/core';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { LayoutLoadingService, LayoutService } from '@ojiepermana/angular-theme/layout/services';
+export { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutService, layoutLoadingInterceptor } from '@ojiepermana/angular-theme/layout/services';
+import { LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_STYLE, LAYOUT_DEFAULT_WIDTH } from '@ojiepermana/angular-theme/layout/types';
+export { LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_STYLE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_STYLES, LAYOUT_STYLE_STORAGE_KEY, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutStyle, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from '@ojiepermana/angular-theme/layout/types';
+import { NavigationContainerComponent } from '@ojiepermana/angular-navigation';
+
+/**
+ * Garis progres tipis di tepi atas browser yang bergerak dari kiri ke kanan.
+ * Dirender otomatis oleh `Layout` dan dikendalikan `LayoutLoadingService`,
+ * sehingga aktif sendiri saat navigasi halaman atau pemuatan data berjalan.
+ *
+ * Boleh juga dipasang langsung di root aplikasi agar bar sudah tampil sejak
+ * navigasi awal; instance tambahan di dalam `Layout` otomatis inert sehingga
+ * garis tidak pernah dirender ganda.
+ */
+class LayoutLoadingComponent {
+    loading = inject(LayoutLoadingService);
+    hostId = this.loading.registerHost();
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Memuat halaman', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    isPrimary = computed(() => this.loading.primaryHostId() === this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPrimary" }] : /* istanbul ignore next */ []));
+    state = computed(() => {
+        if (!this.isPrimary()) {
+            return 'inert';
+        }
+        return this.loading.active() ? 'active' : 'idle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('pointer-events-none fixed inset-x-0 top-0 z-50 block h-0.5', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    roundedProgress = computed(() => Math.round(this.loading.progress()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roundedProgress" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.loading.unregisterHost(this.hostId));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutLoadingComponent, isStandalone: true, selector: "LayoutLoading", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-state": "state()" } }, ngImport: i0, template: `
+    @if (isPrimary() && loading.active()) {
+      <div
+        role="progressbar"
+        data-layout-loading-track
+        class="h-full w-full"
+        [attr.aria-label]="ariaLabel()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [attr.aria-valuenow]="roundedProgress()">
+        <div
+          data-layout-loading-bar
+          class="h-full rounded-r-full bg-primary transition-[width] duration-200 ease-out"
+          [style.width.%]="loading.progress()"></div>
+      </div>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutLoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutLoading',
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-state]': 'state()',
+                    },
+                    template: `
+    @if (isPrimary() && loading.active()) {
+      <div
+        role="progressbar"
+        data-layout-loading-track
+        class="h-full w-full"
+        [attr.aria-label]="ariaLabel()"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        [attr.aria-valuenow]="roundedProgress()">
+        <div
+          data-layout-loading-bar
+          class="h-full rounded-r-full bg-primary transition-[width] duration-200 ease-out"
+          [style.width.%]="loading.progress()"></div>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class LayoutComponent {
+    layout = inject(LayoutService);
+    surface = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    appearance = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    layoutStyleAttribute = input(null, { ...(ngDevMode ? { debugName: "layoutStyleAttribute" } : /* istanbul ignore next */ {}), alias: 'layout-style' });
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    appearanceInput = computed(() => this.appearance() ?? this.layoutStyleAttribute(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceInput" }] : /* istanbul ignore next */ []));
+    resolvedSurface = computed(() => this.surface() ?? this.layout.surface(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
+    resolvedAppearance = computed(() => this.appearanceInput() ?? this.layout.appearance(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    resolvedStyle = computed(() => this.layout.appearance(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedStyle" }] : /* istanbul ignore next */ []));
+    resolvedWidth = computed(() => this.width() ?? this.layout.width(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => this.resolvedAppearance() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isFluidFrame = computed(() => this.resolvedWidth() === 'fluid' && this.layout.type() === 'fluid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
+    showsInsetRails = computed(() => {
+        const layoutType = this.layout.type();
+        return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsInsetRails" }] : /* istanbul ignore next */ []));
+    frameStageClasses = computed(() => cn('relative grid min-h-0 min-w-0 grid-cols-1 grid-rows-1', this.frameSizeClasses()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameStageClasses" }] : /* istanbul ignore next */ []));
+    railAnchorClasses = computed(() => 'relative h-full min-h-0 w-full min-w-0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railAnchorClasses" }] : /* istanbul ignore next */ []));
+    contentShellClasses = computed(() => cn('relative z-10 min-h-0 min-w-0', this.isFluidFrame() ? 'h-auto w-auto max-h-full max-w-full' : 'h-full w-full', this.isBorderRail() ? 'overflow-visible' : 'overflow-hidden'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('relative isolate h-dvh w-full min-w-0 box-border overflow-hidden text-foreground', this.isFluidFrame() ? 'grid place-items-center' : 'block', this.surfaceClasses(), this.widthPaddingClasses(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => cn('relative min-h-0 min-w-0 border-border bg-background/55 backdrop-blur-xs', this.frameSizeClasses(), this.isBorderRail() ? 'overflow-visible border-[1.5px]' : 'overflow-hidden border'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    frameLayerClasses = computed(() => cn('col-start-1 row-start-1', this.frameClasses()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const surface = this.surface();
+            if (surface !== null) {
+                this.layout.setSurface(surface, { persist: false });
+            }
+            else {
+                this.layout.registerSurface(LAYOUT_DEFAULT_SURFACE);
+            }
+            const appearance = this.appearanceInput();
+            if (appearance !== null) {
+                this.layout.setAppearance(appearance, { persist: false });
+            }
+            else {
+                this.layout.registerAppearance(LAYOUT_DEFAULT_STYLE);
+            }
+            const width = this.width();
+            if (width !== null) {
+                this.layout.setWidth(width, { persist: false });
+            }
+            else {
+                this.layout.registerWidth(LAYOUT_DEFAULT_WIDTH);
+            }
+        });
+    }
+    surfaceClasses() {
+        switch (this.resolvedSurface()) {
+            case 'grid':
+                return '[--layout-grid-size:2rem] bg-background bg-[linear-gradient(hsl(var(--layout-grid-line)/var(--layout-grid-line-opacity))_1px,transparent_1px),linear-gradient(to_right,hsl(var(--layout-grid-line)/var(--layout-grid-line-opacity))_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--layout-grid-size)_var(--layout-grid-size)]';
+            case 'honeycome':
+                return 'bg-background bg-[radial-gradient(circle_at_0_0,hsl(var(--layout-grid-line)/var(--layout-grid-dot-opacity))_1px,transparent_1.5px)] bg-position-[center_center] bg-size-[1.25rem_1.25rem]';
+            case 'line-vertical':
+                return 'bg-background bg-[linear-gradient(to_right,hsl(var(--layout-grid-line)/var(--layout-grid-dot-opacity))_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
+            case 'line-horizontal':
+                return 'bg-background bg-[linear-gradient(hsl(var(--layout-grid-line)/var(--layout-grid-dot-opacity))_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
+            default:
+                return 'bg-background';
+        }
+    }
+    widthPaddingClasses() {
+        switch (this.resolvedWidth()) {
+            case 'wide':
+                return 'p-4 lg:p-12';
+            case 'container':
+                return 'p-4 lg:px-0 lg:py-16';
+            case 'fluid':
+                return 'p-4 sm:p-6 lg:p-8';
+            default:
+                return 'p-4';
+        }
+    }
+    frameSizeClasses() {
+        if (this.isFluidFrame()) {
+            return 'h-auto w-auto max-h-full max-w-full';
+        }
+        return this.resolvedWidth() === 'container' ? 'h-full w-full lg:container lg:mx-auto' : 'h-full w-full';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutComponent, isStandalone: true, selector: "Layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutStyleAttribute: { classPropertyName: "layoutStyleAttribute", publicName: "layout-style", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-style": "resolvedStyle()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "layout.type()" } }, ngImport: i0, template: `
+    <LayoutLoading />
+
+    <div data-layout-stage [class]="frameStageClasses()">
+      @if (isBorderRail()) {
+        <div
+          aria-hidden="true"
+          data-layout-rail
+          class="pointer-events-none col-start-1 row-start-1 z-0 overflow-visible">
+          <div data-layout-rail-anchor [class]="railAnchorClasses()">
+            <div
+              data-layout-rail-top-left-horizontal
+              class="absolute top-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-left-vertical
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            <div
+              data-layout-rail-top-right-horizontal
+              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-right-vertical
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-horizontal
+              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-vertical
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-horizontal
+              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-vertical
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+
+            @if (showsInsetRails()) {
+              <div data-layout-horizontal-top-rail class="absolute inset-x-0 top-12 h-[1.5px] bg-border"></div>
+              <div
+                data-layout-horizontal-top-left-extension
+                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-top-right-extension
+                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div data-layout-horizontal-bottom-rail class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-left-extension
+                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-right-extension
+                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+
+              <div data-layout-vertical-left-rail class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-left-top-extension
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-left-bottom-extension
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              <div data-layout-vertical-right-rail class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-right-top-extension
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-right-bottom-extension
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            }
+          </div>
+        </div>
+      }
+
+      <div data-layout-frame [class]="frameLayerClasses()">
+        <div [class]="contentShellClasses()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [LayoutLoadingComponent],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-surface]': 'resolvedSurface()',
+                        '[attr.data-layout-appearance]': 'resolvedAppearance()',
+                        '[attr.data-layout-style]': 'resolvedStyle()',
+                        '[attr.data-layout-width]': 'resolvedWidth()',
+                        '[attr.data-layout-type]': 'layout.type()',
+                    },
+                    template: `
+    <LayoutLoading />
+
+    <div data-layout-stage [class]="frameStageClasses()">
+      @if (isBorderRail()) {
+        <div
+          aria-hidden="true"
+          data-layout-rail
+          class="pointer-events-none col-start-1 row-start-1 z-0 overflow-visible">
+          <div data-layout-rail-anchor [class]="railAnchorClasses()">
+            <div
+              data-layout-rail-top-left-horizontal
+              class="absolute top-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-left-vertical
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            <div
+              data-layout-rail-top-right-horizontal
+              class="absolute top-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-right-vertical
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-horizontal
+              class="absolute bottom-0 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-vertical
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-horizontal
+              class="absolute bottom-0 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-vertical
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+
+            @if (showsInsetRails()) {
+              <div data-layout-horizontal-top-rail class="absolute inset-x-0 top-12 h-[1.5px] bg-border"></div>
+              <div
+                data-layout-horizontal-top-left-extension
+                class="absolute top-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-top-right-extension
+                class="absolute top-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div data-layout-horizontal-bottom-rail class="absolute inset-x-0 bottom-12 h-[1.5px] bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-left-extension
+                class="absolute bottom-12 right-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-right-extension
+                class="absolute bottom-12 left-full h-[1.5px] w-[calc((100vw-100%)/2)] bg-border"></div>
+
+              <div data-layout-vertical-left-rail class="absolute inset-y-0 -left-4 w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-left-top-extension
+                class="absolute bottom-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-left-bottom-extension
+                class="absolute top-full -left-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              <div data-layout-vertical-right-rail class="absolute inset-y-0 -right-4 w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-right-top-extension
+                class="absolute bottom-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+              <div
+                data-layout-vertical-right-bottom-extension
+                class="absolute top-full -right-4 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+            }
+          </div>
+        </div>
+      }
+
+      <div data-layout-frame [class]="frameLayerClasses()">
+        <div [class]="contentShellClasses()">
+          <ng-content />
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], layoutStyleAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-style", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutVerticalComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('grid h-full min-h-0 w-full min-w-0 grid-cols-[auto_minmax(0,1fr)]', this.layout.appearance() === 'border-rail' ? 'overflow-visible' : 'overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('vertical', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutVertical',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'vertical',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutHorizontalComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('horizontal', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutHorizontal',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'horizontal',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutEmptyComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('h-full min-h-0 w-full min-w-0 overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('empty', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutEmpty',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'empty',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutFluidComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('grid min-h-0 min-w-0 place-items-center overflow-auto', this.layout.width() === 'fluid' ? 'h-auto w-auto max-h-full max-w-full' : 'h-full w-full', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('fluid', { persist: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutFluidComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutFluid',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'fluid',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutNavigationComponent {
+    layout = inject(LayoutService);
+    projectedNav = contentChild(NavigationContainerComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedNav" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Layout navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    railOffset = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railOffset" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    showsVerticalRail = computed(() => this.layout.type() === 'vertical' && this.layout.appearance() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsVerticalRail" }] : /* istanbul ignore next */ []));
+    resolvedRailOffset = computed(() => this.railOffset() ?? this.projectedNav()?.previewRailOffset() ?? '0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRailOffset" }] : /* istanbul ignore next */ []));
+    railTransform = computed(() => `translateX(${this.resolvedRailOffset()})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railTransform" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const layoutType = this.layout.type();
+        return cn('relative block min-h-0 min-w-0', layoutType === 'horizontal' && 'h-12 min-h-12 w-full shrink-0 overflow-visible', 
+        // overflow-visible: clipping diatur host <Navigation>; overlay nav (aside
+        // drawer dockbar, preview rail) keluar dari kolom w-16 dan overflow-hidden
+        // di sini ikut ter-scroll oleh focus scroll-into-view sehingga rail hilang.
+        layoutType === 'vertical' && 'h-full w-max max-w-full shrink-0 overflow-visible', layoutType === 'empty' && 'hidden', this.class());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: LayoutNavigationComponent, isStandalone: true, selector: "LayoutNavigation", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-style": "layout.appearance()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: NavigationContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showsVerticalRail()) {
+      <div
+        aria-hidden="true"
+        data-layout-nav-rail
+        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-[1.5px] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        [style.transform]="railTransform()">
+        <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-[1.5px] bg-border"></div>
+        <div
+          data-layout-nav-rail-top
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+        <div
+          data-layout-nav-rail-bottom
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+      </div>
+    }
+
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutNavigation',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-appearance]': 'layout.appearance()',
+                        '[attr.data-layout-style]': 'layout.appearance()',
+                        '[attr.data-layout-nav-rail-offset]': 'resolvedRailOffset()',
+                    },
+                    template: `
+    @if (showsVerticalRail()) {
+      <div
+        aria-hidden="true"
+        data-layout-nav-rail
+        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-[1.5px] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        [style.transform]="railTransform()">
+        <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-[1.5px] bg-border"></div>
+        <div
+          data-layout-nav-rail-top
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+        <div
+          data-layout-nav-rail-bottom
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"></div>
+      </div>
+    }
+
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { projectedNav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NavigationContainerComponent), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], railOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "railOffset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class LayoutContentComponent {
+    layout = inject(LayoutService);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const layoutType = this.layout.type();
+        return cn('block min-h-0 min-w-0 overflow-auto', layoutType === 'horizontal' && 'flex-1', layoutType === 'vertical' && 'h-full', layoutType === 'empty' && 'h-full w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LayoutContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'LayoutContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-width]': 'layout.width()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LayoutComponent, LayoutContentComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutHorizontalComponent, LayoutLoadingComponent, LayoutNavigationComponent, LayoutVerticalComponent };
+//# sourceMappingURL=ojiepermana-angular-theme-layout.mjs.map