@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-component-resizable.mjs

@@ -1,7 +1,497 @@
-export * from '@ojiepermana/angular-component/resizable';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, ElementRef, input, signal, computed, Component, booleanAttribute, contentChildren, effect, untracked, forwardRef } from '@angular/core';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function clampResizableValue(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function parseResizablePercent(value) {
+    if (value == null || value === '')
+        return null;
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function roundResizablePercentage(value) {
+    return Math.round(value * 1000) / 1000;
+}
+function resolveInitialResizableSizes(preferred, minimums, maximums) {
+    const unresolvedIndexes = preferred.flatMap((value, index) => (value == null ? [index] : []));
+    const specifiedTotal = sum(preferred.flatMap((value) => (value == null ? [] : [value])));
+    let sizes;
+    if (preferred.every((value) => value == null)) {
+        const equalSize = 100 / preferred.length;
+        sizes = preferred.map(() => equalSize);
+    }
+    else {
+        const share = unresolvedIndexes.length
+            ? Math.max(100 - specifiedTotal, 0) / unresolvedIndexes.length
+            : 0;
+        sizes = preferred.map((value) => value ?? share);
+    }
+    sizes = sizes.map((size, index) => clampResizableValue(size, minimums[index], maximums[index]));
+    sizes = rebalanceSizes(sizes, minimums, maximums);
+    return sizes.map(roundResizablePercentage);
+}
+function toResizableAriaValue(value) {
+    return value == null ? null : String(Math.round(value));
+}
+function sum(values) {
+    return values.reduce((total, value) => total + value, 0);
+}
+function rebalanceSizes(sizes, minimums, maximums) {
+    const next = [...sizes];
+    for (let iteration = 0; iteration < next.length * 4; iteration += 1) {
+        const difference = roundResizablePercentage(100 - sum(next));
+        if (Math.abs(difference) <= 0.001)
+            return next;
+        const adjustableIndexes = next.flatMap((size, index) => {
+            const room = difference > 0 ? maximums[index] - size : size - minimums[index];
+            return room > 0.001 ? [index] : [];
+        });
+        if (!adjustableIndexes.length)
+            return next;
+        const perPanelDelta = difference / adjustableIndexes.length;
+        adjustableIndexes.forEach((index) => {
+            next[index] = clampResizableValue(next[index] + perPanelDelta, minimums[index], maximums[index]);
+        });
+    }
+    return next;
+}
+
+class ResizableGroupContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: ResizableGroupContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableGroupContextBase, decorators: [{
+            type: Directive
+        }] });
+class ResizablePanelComponent {
+    ctx = inject(ResizableGroupContextBase);
+    host = inject((ElementRef));
+    defaultSize = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []));
+    minSize = input('10%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    maxSize = input('90%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    generatedId = injectUniqueId('ResizablePanel');
+    currentSize = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSize" }] : /* istanbul ignore next */ []));
+    resolvedId = computed(() => this.id() ?? this.generatedId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative block min-h-0 min-w-0 overflow-hidden', this.ctx.groupOrientation() === 'horizontal' ? 'h-full' : 'w-full', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    flexStyle = computed(() => {
+        const size = this.currentSize();
+        return size == null ? '1 1 0%' : `0 0 ${size}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flexStyle" }] : /* istanbul ignore next */ []));
+    panelId() {
+        return this.resolvedId();
+    }
+    preferredSizePercent() {
+        return parseResizablePercent(this.defaultSize());
+    }
+    minSizePercent() {
+        return clampResizableValue(parseResizablePercent(this.minSize()) ?? 10, 0, 100);
+    }
+    maxSizePercent() {
+        return clampResizableValue(parseResizablePercent(this.maxSize()) ?? 90, this.minSizePercent(), 100);
+    }
+    size() {
+        return this.currentSize() ?? 0;
+    }
+    setSize(size) {
+        this.currentSize.set(roundResizablePercentage(clampResizableValue(size, 0, 100)));
+    }
+    nativeElement() {
+        return this.host.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ResizablePanelComponent, isStandalone: true, selector: "ResizablePanel", inputs: { defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId()", "style.flex": "flexStyle()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizablePanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ResizablePanel',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'resolvedId()',
+                        '[style.flex]': 'flexStyle()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { defaultSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ResizableHandleComponent {
+    ctx = inject(ResizableGroupContextBase);
+    host = inject((ElementRef));
+    withHandle = input(false, { ...(ngDevMode ? { debugName: "withHandle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    lastExpandedPrimarySize = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastExpandedPrimarySize" }] : /* istanbul ignore next */ []));
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    state = computed(() => this.ctx.pairState(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('group relative flex shrink-0 select-none items-center justify-center bg-transparent text-foreground transition-colors', 'touch-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', this.ctx.groupOrientation() === 'horizontal'
+        ? 'h-full w-2 cursor-col-resize before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-border'
+        : 'h-2 w-full cursor-row-resize before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-border', this.active() ? 'before:bg-foreground/60' : 'hover:before:bg-foreground/40', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this handle sits between two panels it can actually resize.
+     *
+     * A handle with no adjacent pair -- a lone panel, or a handle at the edge of
+     * the group -- changes nothing, so it is decorative and gives up `separator`
+     * and its tab stop. A focusable `separator` owes `aria-valuenow`, and there is
+     * no honest value to give: inventing one would satisfy axe while telling a
+     * screen reader about a slider that does not exist. Dropping the role is the
+     * truthful half of that trade, and it also stops the handle from soaking up a
+     * Tab press that leads nowhere.
+     */
+    resizable = computed(() => this.state() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    separatorOrientation = computed(() => this.ctx.groupOrientation() === 'horizontal' ? 'vertical' : 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorOrientation" }] : /* istanbul ignore next */ []));
+    controls = computed(() => this.state()?.panelId ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.ariaLabel() ?? 'Resize panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    valueNow = computed(() => toResizableAriaValue(this.state()?.valueNow), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueNow" }] : /* istanbul ignore next */ []));
+    valueMin = computed(() => toResizableAriaValue(this.state()?.valueMin), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueMin" }] : /* istanbul ignore next */ []));
+    valueMax = computed(() => toResizableAriaValue(this.state()?.valueMax), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueMax" }] : /* istanbul ignore next */ []));
+    valueText = computed(() => {
+        const value = this.state()?.valueNow;
+        return value == null ? null : `${Math.round(value)}%`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    onPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        this.host.nativeElement.focus();
+        this.ctx.beginPointerResize(this, event);
+    }
+    onKeydown(event) {
+        this.ctx.handleKeydown(this, event);
+    }
+    setActive(active) {
+        this.active.set(active);
+    }
+    rememberPrimarySize(size) {
+        this.lastExpandedPrimarySize.set(roundResizablePercentage(size));
+    }
+    rememberedPrimarySize() {
+        return this.lastExpandedPrimarySize();
+    }
+    nativeElement() {
+        return this.host.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ResizableHandleComponent, isStandalone: true, selector: "ResizableHandle", inputs: { withHandle: { classPropertyName: "withHandle", publicName: "withHandle", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class": "classes()", "attr.role": "resizable() ? \"separator\" : null", "attr.tabindex": "resizable() ? 0 : null", "attr.data-active": "active() ? \"true\" : null", "attr.aria-controls": "controls()", "attr.aria-label": "resizable() ? label() : null", "attr.aria-orientation": "resizable() ? separatorOrientation() : null", "attr.aria-valuenow": "valueNow()", "attr.aria-valuemin": "valueMin()", "attr.aria-valuemax": "valueMax()", "attr.aria-valuetext": "valueText()" } }, ngImport: i0, template: `
+    @if (withHandle()) {
+      <span
+        aria-hidden="true"
+        class="pointer-events-none inline-flex items-center justify-center rounded-sm border border-border bg-background px-1 py-0.5 shadow-sm"
+      >
+        <svg class="h-3 w-3 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
+          <circle cx="9" cy="8" r="1.25" />
+          <circle cx="15" cy="8" r="1.25" />
+          <circle cx="9" cy="12" r="1.25" />
+          <circle cx="15" cy="12" r="1.25" />
+          <circle cx="9" cy="16" r="1.25" />
+          <circle cx="15" cy="16" r="1.25" />
+        </svg>
+      </span>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizableHandleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ResizableHandle',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': 'resizable() ? "separator" : null',
+                        '[attr.tabindex]': 'resizable() ? 0 : null',
+                        '[attr.data-active]': 'active() ? "true" : null',
+                        '[attr.aria-controls]': 'controls()',
+                        '[attr.aria-label]': 'resizable() ? label() : null',
+                        '[attr.aria-orientation]': 'resizable() ? separatorOrientation() : null',
+                        '[attr.aria-valuenow]': 'valueNow()',
+                        '[attr.aria-valuemin]': 'valueMin()',
+                        '[attr.aria-valuemax]': 'valueMax()',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                    template: `
+    @if (withHandle()) {
+      <span
+        aria-hidden="true"
+        class="pointer-events-none inline-flex items-center justify-center rounded-sm border border-border bg-background px-1 py-0.5 shadow-sm"
+      >
+        <svg class="h-3 w-3 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
+          <circle cx="9" cy="8" r="1.25" />
+          <circle cx="15" cy="8" r="1.25" />
+          <circle cx="9" cy="12" r="1.25" />
+          <circle cx="15" cy="12" r="1.25" />
+          <circle cx="9" cy="16" r="1.25" />
+          <circle cx="15" cy="16" r="1.25" />
+        </svg>
+      </span>
+    }
+  `,
+                }]
+        }], propDecorators: { withHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHandle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class ResizablePanelGroupComponent extends ResizableGroupContextBase {
+    host = inject((ElementRef));
+    document = inject(DOCUMENT);
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    panels = contentChildren(ResizablePanelComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    handles = contentChildren(ResizableHandleComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "handles" }] : /* istanbul ignore next */ []));
+    pointerSession = null;
+    removePointerListeners = null;
+    classes = computed(() => cn('flex w-full min-h-0 min-w-0 items-stretch', this.orientation() === 'horizontal' ? 'flex-row' : 'flex-col', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    syncLayout = effect(() => {
+        const panels = this.panels();
+        void this.handles();
+        if (!panels.length) {
+            return;
+        }
+        untracked(() => this.initializeLayout(panels));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncLayout" }] : /* istanbul ignore next */ []));
+    groupOrientation() {
+        return this.orientation();
+    }
+    panelDirection() {
+        const view = this.document.defaultView;
+        if (!view) {
+            return 'ltr';
+        }
+        return view.getComputedStyle(this.host.nativeElement).direction === 'rtl' ? 'rtl' : 'ltr';
+    }
+    pairState(handle) {
+        const pair = this.resolvePair(handle);
+        if (!pair) {
+            return null;
+        }
+        const bounds = this.boundsForPair(pair);
+        return {
+            panelId: pair.previous.panelId(),
+            valueNow: pair.previous.size(),
+            valueMin: bounds.min,
+            valueMax: bounds.max,
+        };
+    }
+    beginPointerResize(handle, event) {
+        const pair = this.resolvePair(handle);
+        if (!pair) {
+            return;
+        }
+        this.finishPointerResize();
+        handle.setActive(true);
+        this.pointerSession = {
+            handle,
+            pair,
+            startCoordinate: this.coordinateFromEvent(event),
+            previousSize: pair.previous.size(),
+        };
+        const move = (nextEvent) => {
+            const session = this.pointerSession;
+            if (!session) {
+                return;
+            }
+            const containerSize = this.containerSize();
+            if (containerSize <= 0) {
+                return;
+            }
+            const delta = this.coordinateFromEvent(nextEvent) - session.startCoordinate;
+            const directionFactor = this.orientation() === 'horizontal' && this.panelDirection() === 'rtl' ? -1 : 1;
+            const deltaPercent = (delta / containerSize) * 100 * directionFactor;
+            this.applyPrimarySize(session.pair, session.previousSize + deltaPercent);
+        };
+        const end = () => this.finishPointerResize();
+        this.document.addEventListener('pointermove', move);
+        this.document.addEventListener('pointerup', end);
+        this.document.addEventListener('pointercancel', end);
+        this.removePointerListeners = () => {
+            this.document.removeEventListener('pointermove', move);
+            this.document.removeEventListener('pointerup', end);
+            this.document.removeEventListener('pointercancel', end);
+        };
+    }
+    handleKeydown(handle, event) {
+        const pair = this.resolvePair(handle);
+        if (!pair) {
+            return;
+        }
+        const current = pair.previous.size();
+        const bounds = this.boundsForPair(pair);
+        const horizontalStep = this.panelDirection() === 'rtl' ? -10 : 10;
+        switch (event.key) {
+            case 'ArrowRight':
+                if (this.orientation() !== 'horizontal') {
+                    return;
+                }
+                this.applyPrimarySize(pair, current + horizontalStep);
+                break;
+            case 'ArrowLeft':
+                if (this.orientation() !== 'horizontal') {
+                    return;
+                }
+                this.applyPrimarySize(pair, current - horizontalStep);
+                break;
+            case 'ArrowDown':
+                if (this.orientation() !== 'vertical') {
+                    return;
+                }
+                this.applyPrimarySize(pair, current + 10);
+                break;
+            case 'ArrowUp':
+                if (this.orientation() !== 'vertical') {
+                    return;
+                }
+                this.applyPrimarySize(pair, current - 10);
+                break;
+            case 'Home':
+                this.applyPrimarySize(pair, bounds.min);
+                break;
+            case 'End':
+                this.applyPrimarySize(pair, bounds.max);
+                break;
+            case 'Enter': {
+                const remembered = handle.rememberedPrimarySize();
+                if (current > bounds.min + 0.5) {
+                    handle.rememberPrimarySize(current);
+                    this.applyPrimarySize(pair, bounds.min);
+                }
+                else if (remembered != null) {
+                    this.applyPrimarySize(pair, remembered);
+                }
+                else {
+                    this.applyPrimarySize(pair, (bounds.min + bounds.max) / 2);
+                }
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    ngOnDestroy() {
+        this.finishPointerResize();
+    }
+    finishPointerResize() {
+        this.pointerSession?.handle.setActive(false);
+        this.pointerSession = null;
+        this.removePointerListeners?.();
+        this.removePointerListeners = null;
+    }
+    initializeLayout(panels) {
+        const minimums = panels.map((panel) => panel.minSizePercent());
+        const maximums = panels.map((panel, index) => Math.max(minimums[index], panel.maxSizePercent()));
+        const preferred = panels.map((panel) => panel.preferredSizePercent());
+        const sizes = resolveInitialResizableSizes(preferred, minimums, maximums);
+        panels.forEach((panel, index) => panel.setSize(sizes[index]));
+    }
+    resolvePair(handle) {
+        const panels = new Map(this.panels().map((panel) => [panel.nativeElement(), panel]));
+        const children = Array.from(this.host.nativeElement.children);
+        const handleIndex = children.indexOf(handle.nativeElement());
+        if (handleIndex === -1) {
+            return null;
+        }
+        let previous = null;
+        let next = null;
+        for (let index = handleIndex - 1; index >= 0; index -= 1) {
+            previous = panels.get(children[index]) ?? null;
+            if (previous) {
+                break;
+            }
+        }
+        for (let index = handleIndex + 1; index < children.length; index += 1) {
+            next = panels.get(children[index]) ?? null;
+            if (next) {
+                break;
+            }
+        }
+        if (!previous || !next) {
+            return null;
+        }
+        return { previous, next };
+    }
+    boundsForPair(pair) {
+        const pairTotal = pair.previous.size() + pair.next.size();
+        const min = Math.max(pair.previous.minSizePercent(), pairTotal - pair.next.maxSizePercent());
+        const max = Math.min(pair.previous.maxSizePercent(), pairTotal - pair.next.minSizePercent());
+        if (min > max) {
+            return { min: pairTotal / 2, max: pairTotal / 2 };
+        }
+        return { min: roundResizablePercentage(min), max: roundResizablePercentage(max) };
+    }
+    applyPrimarySize(pair, nextPrimarySize) {
+        const pairTotal = pair.previous.size() + pair.next.size();
+        const bounds = this.boundsForPair(pair);
+        const primarySize = roundResizablePercentage(clampResizableValue(nextPrimarySize, bounds.min, bounds.max));
+        const secondarySize = roundResizablePercentage(pairTotal - primarySize);
+        pair.previous.setSize(primarySize);
+        pair.next.setSize(secondarySize);
+    }
+    containerSize() {
+        const rect = this.host.nativeElement.getBoundingClientRect();
+        return this.orientation() === 'horizontal' ? rect.width : rect.height;
+    }
+    coordinateFromEvent(event) {
+        return this.orientation() === 'horizontal' ? event.clientX : event.clientY;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizablePanelGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: ResizablePanelGroupComponent, isStandalone: true, selector: "ResizablePanelGroup", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-orientation": "orientation()" } }, providers: [
+            {
+                provide: ResizableGroupContextBase,
+                useExisting: forwardRef(() => ResizablePanelGroupComponent),
+            },
+        ], queries: [{ propertyName: "panels", predicate: ResizablePanelComponent, isSignal: true }, { propertyName: "handles", predicate: ResizableHandleComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ResizablePanelGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ResizablePanelGroup',
+                    providers: [
+                        {
+                            provide: ResizableGroupContextBase,
+                            useExisting: forwardRef(() => ResizablePanelGroupComponent),
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-orientation]': 'orientation()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ResizablePanelComponent), { isSignal: true }] }], handles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ResizableHandleComponent), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ResizableGroupContextBase, ResizableHandleComponent, ResizablePanelComponent, ResizablePanelGroupComponent, clampResizableValue, parseResizablePercent, resolveInitialResizableSizes, roundResizablePercentage, toResizableAriaValue };

package/fesm2022/ojiepermana-angular-component-scroll-area.mjs

@@ -1,7 +1,55 @@
-export * from '@ojiepermana/angular-component/scroll-area';
+import * as i0 from '@angular/core';
+import { input, numberAttribute, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Lightweight scroll area using native scrollbars styled via CSS.
+ * Fully accessible — real scrolling, keyboard, wheel, momentum.
+ */
+class ScrollAreaComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    viewportClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportClass" }] : /* istanbul ignore next */ []));
+    viewportAriaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportAriaLabel" }] : /* istanbul ignore next */ []));
+    viewportTabIndex = input(0, { ...(ngDevMode ? { debugName: "viewportTabIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    classes = computed(() => cn('relative overflow-hidden', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    viewportRole = computed(() => (this.viewportAriaLabel() ? 'region' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportRole" }] : /* istanbul ignore next */ []));
+    viewportClasses = computed(() => cn('scroll-area-viewport h-full w-full rounded-[inherit]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring', this.viewportClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewportClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: ScrollAreaComponent, isStandalone: true, selector: "ScrollArea", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, viewportClass: { classPropertyName: "viewportClass", publicName: "viewportClass", isSignal: true, isRequired: false, transformFunction: null }, viewportAriaLabel: { classPropertyName: "viewportAriaLabel", publicName: "viewportAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, viewportTabIndex: { classPropertyName: "viewportTabIndex", publicName: "viewportTabIndex", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <div
+      [class]="viewportClasses()"
+      [attr.aria-label]="viewportAriaLabel()"
+      [attr.role]="viewportRole()"
+      [attr.tabindex]="viewportTabIndex()"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block;overflow:hidden;position:relative}.scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb))) var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar{width:var(--scrollbar-size, .5rem);height:var(--scrollbar-size, .5rem)}.scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--scrollbar-radius, 9999px)}.scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var( --scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb-hover))) );background-clip:padding-box}@media(forced-colors:active){.scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScrollAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ScrollArea', host: {
+                        '[class]': 'classes()',
+                    }, template: `
+    <div
+      [class]="viewportClasses()"
+      [attr.aria-label]="viewportAriaLabel()"
+      [attr.role]="viewportRole()"
+      [attr.tabindex]="viewportTabIndex()"
+    >
+      <ng-content />
+    </div>
+  `, styles: [":host{display:block;overflow:hidden;position:relative}.scroll-area-viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb))) var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar{width:var(--scrollbar-size, .5rem);height:var(--scrollbar-size, .5rem)}.scroll-area-viewport::-webkit-scrollbar-track{background:var(--tw-scrollbar-track, hsl(var(--scrollbar-track)))}.scroll-area-viewport::-webkit-scrollbar-thumb{background:var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb)));border:var(--border-width) solid transparent;background-clip:padding-box;border-radius:var(--scrollbar-radius, 9999px)}.scroll-area-viewport::-webkit-scrollbar-thumb:hover{background:var( --scrollbar-thumb-hover, var(--tw-scrollbar-thumb, hsl(var(--scrollbar-thumb-hover))) );background-clip:padding-box}@media(forced-colors:active){.scroll-area-viewport{scrollbar-width:auto;scrollbar-color:auto}.scroll-area-viewport::-webkit-scrollbar-thumb{background:CanvasText;border-color:transparent}}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], viewportClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportClass", required: false }] }], viewportAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportAriaLabel", required: false }] }], viewportTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportTabIndex", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ScrollAreaComponent };