@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,335 @@
-export * from '@ojiepermana/angular-theme/layout/services';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, Service, DestroyRef } from '@angular/core';
+import { globalLocalStorage } from '@ojiepermana/angular/component/utils/core';
+import { LAYOUT_LOCKED_WIDTH, LAYOUT_SURFACE_STORAGE_KEY, isUiLayoutSurface, LAYOUT_TYPE_STORAGE_KEY, isUiLayoutType, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutWidth, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_WIDTH, isUiLayoutAppearance } from '@ojiepermana/angular/theme/layout/types';
+import { ShellService } from '@ojiepermana/angular/theme/shell/services';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, NavigationSkipped } from '@angular/router';
+import { HttpContextToken } from '@angular/common/http';
+import { finalize } from 'rxjs';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+class LayoutService {
+    platformId = inject(PLATFORM_ID);
+    storage = globalLocalStorage(isPlatformBrowser(this.platformId));
+    shell = inject(ShellService);
+    surfaceState = signal(this.getStoredSurface(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surfaceState" }] : /* istanbul ignore next */ []));
+    typeState = signal(this.getStoredType(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeState" }] : /* istanbul ignore next */ []));
+    appearanceState = signal(this.getStoredAppearance(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearanceState" }] : /* istanbul ignore next */ []));
+    widthState = signal(this.getStoredWidth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthState" }] : /* istanbul ignore next */ []));
+    surface = this.surfaceState.asReadonly();
+    type = this.typeState.asReadonly();
+    appearance = this.appearanceState.asReadonly();
+    /**
+     * `true` on every shell mode but `web`. An app that owns its whole surface has
+     * no page to be inset within, so the width axis is not the user's to choose
+     * there — see {@link LAYOUT_LOCKED_WIDTH}.
+     */
+    widthLocked = computed(() => this.shell.mode() !== 'web', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthLocked" }] : /* istanbul ignore next */ []));
+    /**
+     * The width in effect. While `widthLocked()`, this reports the locked width and
+     * `widthState` keeps the user's own choice aside, so returning to `web` restores
+     * it instead of silently flattening it to `full`.
+     */
+    width = computed(() => this.widthLocked() ? LAYOUT_LOCKED_WIDTH : this.widthState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** The stored preference, ignoring the lock. */
+    preferredWidth = this.widthState.asReadonly();
+    /**
+     * Seed several axes at once. See {@link registerSurface} for what "register"
+     * means here — an omitted axis is left exactly as it was.
+     */
+    registerDefaults(defaults) {
+        if (defaults.surface !== undefined) {
+            this.registerSurface(defaults.surface);
+        }
+        if (defaults.appearance !== undefined) {
+            this.registerAppearance(defaults.appearance);
+        }
+        if (defaults.type !== undefined) {
+            this.registerType(defaults.type);
+        }
+        if (defaults.width !== undefined) {
+            this.registerWidth(defaults.width);
+        }
+        return this;
+    }
+    /**
+     * Seed the axis with a default, unless the user already stored a choice of
+     * their own — that one always wins.
+     *
+     * Registering deliberately does NOT persist. Storage is the record of what the
+     * USER picked, and writing a seeded default into it would make the two
+     * indistinguishable: a bare `<Layout>` would record a library default nobody
+     * asked for, and neither the library nor the consumer could ever change their
+     * own default again for anyone who had merely rendered the component once.
+     * Only {@link setSurface} and its siblings — the settings UI — write.
+     */
+    registerSurface(surface) {
+        const storedSurface = this.storage.read(LAYOUT_SURFACE_STORAGE_KEY);
+        const resolved = isUiLayoutSurface(storedSurface) ? storedSurface : surface;
+        this.setSurface(resolved, { persist: false });
+    }
+    /** Seeds the axis without persisting — see {@link registerSurface}. */
+    registerType(type) {
+        const storedType = this.storage.read(LAYOUT_TYPE_STORAGE_KEY);
+        const resolved = isUiLayoutType(storedType) ? storedType : type;
+        this.setType(resolved, { persist: false });
+    }
+    /** Seeds the axis without persisting — see {@link registerSurface}. */
+    registerAppearance(appearance) {
+        this.setAppearance(this.getStoredAppearanceOrDefault(appearance), { persist: false });
+    }
+    /** Seeds the axis without persisting — see {@link registerSurface}. */
+    registerWidth(width) {
+        const storedWidth = this.storage.read(LAYOUT_WIDTH_STORAGE_KEY);
+        const resolved = isUiLayoutWidth(storedWidth) ? storedWidth : width;
+        this.setWidth(resolved, { persist: false });
+    }
+    setSurface(surface, options = {}) {
+        this.surfaceState.set(surface);
+        if (options.persist === false) {
+            return;
+        }
+        this.storage.write(LAYOUT_SURFACE_STORAGE_KEY, surface);
+    }
+    setType(type, options = {}) {
+        this.typeState.set(type);
+        if (options.persist === false) {
+            return;
+        }
+        this.storage.write(LAYOUT_TYPE_STORAGE_KEY, type);
+    }
+    setAppearance(appearance, options = {}) {
+        this.appearanceState.set(appearance);
+        if (options.persist === false) {
+            return;
+        }
+        this.storage.write(LAYOUT_APPEARANCE_STORAGE_KEY, appearance);
+    }
+    setWidth(width, options = {}) {
+        this.widthState.set(width);
+        if (options.persist === false) {
+            return;
+        }
+        this.storage.write(LAYOUT_WIDTH_STORAGE_KEY, width);
+    }
+    getStoredSurface() {
+        const value = this.storage.read(LAYOUT_SURFACE_STORAGE_KEY);
+        return isUiLayoutSurface(value) ? value : LAYOUT_DEFAULT_SURFACE;
+    }
+    getStoredType() {
+        const value = this.storage.read(LAYOUT_TYPE_STORAGE_KEY);
+        return isUiLayoutType(value) ? value : LAYOUT_DEFAULT_TYPE;
+    }
+    getStoredAppearance() {
+        const value = this.readStoredAppearance();
+        return value ?? LAYOUT_DEFAULT_APPEARANCE;
+    }
+    getStoredWidth() {
+        const value = this.storage.read(LAYOUT_WIDTH_STORAGE_KEY);
+        return isUiLayoutWidth(value) ? value : LAYOUT_DEFAULT_WIDTH;
+    }
+    readStoredAppearance() {
+        const appearance = this.storage.read(LAYOUT_APPEARANCE_STORAGE_KEY);
+        return isUiLayoutAppearance(appearance) ? appearance : null;
+    }
+    getStoredAppearanceOrDefault(fallback) {
+        return this.readStoredAppearance() ?? fallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: LayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutService, decorators: [{
+            type: Service
+        }] });
+
+/** Progress the bar starts at, so the line is visibly moving the moment it appears. */
+const LAYOUT_LOADING_INITIAL_PROGRESS = 8;
+/** Batas atas progres trickle; sisanya menunggu seluruh pekerjaan selesai. */
+const LAYOUT_LOADING_TRICKLE_CEILING = 90;
+/** How often the trickle raises progress while work is still outstanding. */
+const LAYOUT_LOADING_TRICKLE_INTERVAL_MS = 250;
+/** Delay after progress reaches 100% before the bar is hidden, so the finish reads. */
+const LAYOUT_LOADING_HIDE_DELAY_MS = 200;
+/**
+ * Global loading tracker behind the progress line at the top of the viewport.
+ *
+ * It turns on by itself when the router starts a navigation and while an HTTP
+ * request runs through `layoutLoadingInterceptor`. Any other source — a manual
+ * data load, say — can join in through the ref-counted `start()`/`done()` pair.
+ */
+class LayoutLoadingService {
+    platformId = inject(PLATFORM_ID);
+    router = inject(Router, { optional: true });
+    pendingCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingCount" }] : /* istanbul ignore next */ []));
+    activeState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
+    progressState = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressState" }] : /* istanbul ignore next */ []));
+    /** The bar is on screen, including the short finish to 100%. */
+    active = this.activeState.asReadonly();
+    /** Progres garis 0–100. */
+    progress = this.progressState.asReadonly();
+    /** Work (a navigation, a request, a data load) is still outstanding. */
+    pending = computed(() => this.pendingCount() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    hostRegistry = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostRegistry" }] : /* istanbul ignore next */ []));
+    /**
+     * The earliest registered `LayoutLoading` host, which is the one that draws the
+     * bar. Every other instance — the one inside `Layout` when the app root also
+     * mounts `LayoutLoading` — goes inert, so the line is never drawn twice.
+     */
+    primaryHostId = computed(() => this.hostRegistry()[0] ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryHostId" }] : /* istanbul ignore next */ []));
+    trickleTimer = null;
+    hideTimer = null;
+    navigationPending = false;
+    nextHostId = 0;
+    constructor() {
+        this.observeRouterNavigation();
+        inject(DestroyRef).onDestroy(() => {
+            this.stopTrickle();
+            this.cancelScheduledHide();
+        });
+    }
+    /** Mark one unit of work started; the bar appears with the first one. */
+    start() {
+        this.pendingCount.update((count) => count + 1);
+        if (this.pendingCount() === 1) {
+            this.show();
+        }
+    }
+    /** Mark one unit of work finished; the bar completes when the count returns to zero. */
+    done() {
+        if (this.pendingCount() === 0) {
+            return;
+        }
+        this.pendingCount.update((count) => count - 1);
+        if (this.pendingCount() === 0) {
+            this.finish();
+        }
+    }
+    /** Register one `LayoutLoading` host; returns the id used to unregister it. */
+    registerHost() {
+        const hostId = this.nextHostId++;
+        this.hostRegistry.update((hosts) => [...hosts, hostId]);
+        return hostId;
+    }
+    /** Release a host; the next registered one becomes primary on its own. */
+    unregisterHost(hostId) {
+        this.hostRegistry.update((hosts) => hosts.filter((registered) => registered !== hostId));
+    }
+    /** Force the progress value (0–100) while the bar is active, e.g. for a large upload. */
+    setProgress(value) {
+        if (!this.activeState()) {
+            return;
+        }
+        this.progressState.set(Math.min(100, Math.max(0, value)));
+    }
+    observeRouterNavigation() {
+        if (!this.router) {
+            return;
+        }
+        this.router.events.pipe(takeUntilDestroyed()).subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                if (!this.navigationPending) {
+                    this.navigationPending = true;
+                    this.start();
+                }
+                return;
+            }
+            const navigationSettled = event instanceof NavigationEnd ||
+                event instanceof NavigationCancel ||
+                event instanceof NavigationError ||
+                event instanceof NavigationSkipped;
+            if (navigationSettled && this.navigationPending) {
+                this.navigationPending = false;
+                this.done();
+            }
+        });
+    }
+    show() {
+        this.cancelScheduledHide();
+        this.activeState.set(true);
+        this.progressState.set(LAYOUT_LOADING_INITIAL_PROGRESS);
+        this.startTrickle();
+    }
+    finish() {
+        this.stopTrickle();
+        this.progressState.set(100);
+        if (!this.isBrowser()) {
+            this.hide();
+            return;
+        }
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.hide();
+        }, LAYOUT_LOADING_HIDE_DELAY_MS);
+    }
+    hide() {
+        this.activeState.set(false);
+        this.progressState.set(0);
+    }
+    startTrickle() {
+        if (!this.isBrowser() || this.trickleTimer !== null) {
+            return;
+        }
+        this.trickleTimer = setInterval(() => {
+            const current = this.progressState();
+            const next = current + (LAYOUT_LOADING_TRICKLE_CEILING - current) * 0.15;
+            this.progressState.set(Math.min(LAYOUT_LOADING_TRICKLE_CEILING, next));
+        }, LAYOUT_LOADING_TRICKLE_INTERVAL_MS);
+    }
+    stopTrickle() {
+        if (this.trickleTimer !== null) {
+            clearInterval(this.trickleTimer);
+            this.trickleTimer = null;
+        }
+    }
+    cancelScheduledHide() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    isBrowser() {
+        return isPlatformBrowser(this.platformId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: LayoutLoadingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LayoutLoadingService, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+
+/**
+ * Set `true` on a request's `HttpContext` to keep it out of the progress line —
+ * a poll or a heartbeat that must not raise a loading indicator.
+ */
+const LAYOUT_LOADING_SKIP = new HttpContextToken(() => false);
+/**
+ * Interceptor that lights the `LayoutLoading` progress line while an HTTP
+ * request is in flight. Register it through `withInterceptors([...])`.
+ */
+const layoutLoadingInterceptor = (request, next) => {
+    if (request.context.get(LAYOUT_LOADING_SKIP)) {
+        return next(request);
+    }
+    const loading = inject(LayoutLoadingService);
+    loading.start();
+    return next(request).pipe(finalize(() => loading.done()));
+};
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+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 };

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

@@ -1,7 +1,48 @@
-export * from '@ojiepermana/angular-theme/layout/types';
-
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const LAYOUT_TYPES = ['vertical', 'horizontal', 'empty', 'fluid'];
+const LAYOUT_SURFACES = [
+    'flat',
+    'grid',
+    'grid-line',
+    'honeycomb',
+    'matrix',
+    'circuit',
+    'line-vertical',
+    'line-horizontal',
+];
+const LAYOUT_APPEARANCES = ['flat', 'border-rail'];
+const LAYOUT_WIDTHS = ['full', 'wide', 'container', 'fluid'];
+const LAYOUT_DEFAULT_SURFACE = 'flat';
+const LAYOUT_DEFAULT_TYPE = 'vertical';
+const LAYOUT_DEFAULT_APPEARANCE = 'flat';
+const LAYOUT_DEFAULT_WIDTH = 'full';
+/**
+ * The width forced whenever the shell mode is not `web`.
+ *
+ * Only a browser page can be narrower than the surface it sits on. On desktop,
+ * tablet, and mobile the app *is* the surface, so a wide/container/fluid frame
+ * would leave dead canvas inside the window — `LayoutService` locks the axis here
+ * and keeps the user's own choice aside for when they return to `web`.
+ */
+const LAYOUT_LOCKED_WIDTH = 'full';
+const LAYOUT_SURFACE_STORAGE_KEY = 'layout-surface';
+const LAYOUT_APPEARANCE_STORAGE_KEY = 'layout-appearance';
+const LAYOUT_TYPE_STORAGE_KEY = 'layout-type';
+const LAYOUT_WIDTH_STORAGE_KEY = 'layout-width';
+function isUiLayoutSurface(value) {
+    return value !== null && LAYOUT_SURFACES.includes(value);
+}
+function isUiLayoutType(value) {
+    return value !== null && LAYOUT_TYPES.includes(value);
+}
+function isUiLayoutAppearance(value) {
+    return value !== null && LAYOUT_APPEARANCES.includes(value);
+}
+function isUiLayoutWidth(value) {
+    return value !== null && LAYOUT_WIDTHS.includes(value);
+}
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { LAYOUT_APPEARANCES, LAYOUT_APPEARANCE_STORAGE_KEY, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_TYPE, LAYOUT_DEFAULT_WIDTH, LAYOUT_LOCKED_WIDTH, LAYOUT_SURFACES, LAYOUT_SURFACE_STORAGE_KEY, LAYOUT_TYPES, LAYOUT_TYPE_STORAGE_KEY, LAYOUT_WIDTHS, LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutAppearance, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth };