@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-resizable.mjs

@@ -0,0 +1,518 @@
+import { Directionality } from "@angular/cdk/bidi";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, effect, forwardRef, inject, input, numberAttribute, signal, untracked } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const resizablePanelGroupClass = "flex h-full w-full aria-[orientation=vertical]:flex-col";
+const resizableHandleClass = "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 after:start-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0";
+const UI_RESIZABLE_GENERATED = [];
+var UiResizablePanelGroup = class UiResizablePanelGroup {
+	direction = input("horizontal", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	dir = inject(Directionality);
+	el = inject(ElementRef).nativeElement;
+	panels = contentChildren(forwardRef(() => UiResizablePanel), {
+		...ngDevMode ? { debugName: "panels" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	sizes = signal([], ...ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(resizablePanelGroupClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const panels = this.panels();
+			untracked(() => {
+				if (this.sizes().length === panels.length) return;
+				const fixed = panels.map((p) => p.defaultSize());
+				const set = fixed.filter((s) => s !== void 0);
+				const rest = 100 - set.reduce((a, b) => a + b, 0);
+				const unset = fixed.length - set.length;
+				this.sizes.set(fixed.map((s) => s ?? (unset ? rest / unset : 0)));
+			});
+		});
+	}
+	resize(i, delta) {
+		const panels = this.panels();
+		const sizes = [...this.sizes()];
+		const a = panels[i];
+		const b = panels[i + 1];
+		if (!a || !b) return;
+		let d = delta;
+		d = Math.min(d, a.maxSize() - sizes[i], sizes[i + 1] - b.minSize());
+		d = Math.max(d, a.minSize() - sizes[i], sizes[i + 1] - b.maxSize());
+		sizes[i] += d;
+		sizes[i + 1] -= d;
+		this.sizes.set(sizes);
+	}
+	isRtl() {
+		return this.dir.value === "rtl" && this.direction() === "horizontal";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiResizablePanelGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiResizablePanelGroup,
+		isStandalone: true,
+		selector: "[uiResizablePanelGroup], ui-resizable-panel-group",
+		inputs: {
+			direction: {
+				classPropertyName: "direction",
+				publicName: "direction",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "resizable-panel-group",
+				"data-group": "true"
+			},
+			properties: {
+				"attr.aria-orientation": "direction()",
+				"attr.data-panel-group-direction": "direction()",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "panels",
+			predicate: i0.forwardRef(() => UiResizablePanel),
+			isSignal: true
+		}],
+		exportAs: ["uiResizablePanelGroup"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiResizablePanelGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiResizablePanelGroup], ui-resizable-panel-group",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiResizablePanelGroup",
+			host: {
+				"data-slot": "resizable-panel-group",
+				"data-group": "true",
+				"[attr.aria-orientation]": "direction()",
+				"[attr.data-panel-group-direction]": "direction()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		direction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "direction",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		panels: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiResizablePanel), {
+				descendants: false,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiResizablePanel = class UiResizablePanel {
+	group = inject(UiResizablePanelGroup);
+	defaultSize = input(void 0, {
+		...ngDevMode ? { debugName: "defaultSize" } : /* istanbul ignore next */ {},
+		transform: (v) => v === void 0 || v === null || v === "" ? void 0 : numberAttribute(v)
+	});
+	minSize = input(0, {
+		...ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	maxSize = input(100, {
+		...ngDevMode ? { debugName: "maxSize" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	index = computed(() => this.group.panels().indexOf(this), ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	size = computed(() => this.group.sizes()[this.index()] ?? this.defaultSize() ?? 0, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiResizablePanel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiResizablePanel,
+		isStandalone: true,
+		selector: "[uiResizablePanel], ui-resizable-panel",
+		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
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "resizable-panel",
+				"data-panel": "true"
+			},
+			properties: {
+				"attr.data-panel-size": "size().toFixed(1)",
+				"style.flex": "size() + \" 1 0px\"",
+				"style.overflow": "\"hidden\"",
+				"attr.class": "userClass()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiResizablePanel,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiResizablePanel], ui-resizable-panel",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "resizable-panel",
+				"data-panel": "true",
+				"[attr.data-panel-size]": "size().toFixed(1)",
+				"[style.flex]": "size() + \" 1 0px\"",
+				"[style.overflow]": "\"hidden\"",
+				"[attr.class]": "userClass()"
+			}
+		}]
+	}],
+	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
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiResizableHandle = class UiResizableHandle {
+	group = inject(UiResizablePanelGroup);
+	el = inject(ElementRef).nativeElement;
+	withHandle = input(false, {
+		...ngDevMode ? { debugName: "withHandle" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	keyboardStep = input(10, {
+		...ngDevMode ? { debugName: "keyboardStep" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	hover = signal(false, ...ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []);
+	dragging = signal(false, ...ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.dragging() ? "drag" : this.hover() ? "hover" : "inactive", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(resizableHandleClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	index() {
+		return Array.from(this.group.el.querySelectorAll(":scope > [data-slot=resizable-handle]")).indexOf(this.el);
+	}
+	valueNow() {
+		return Math.round(this.group.sizes()[this.index()] ?? 0);
+	}
+	onPointerDown(e) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		const horizontal = this.group.direction() === "horizontal";
+		const rect = this.group.el.getBoundingClientRect();
+		const total = horizontal ? rect.width : rect.height;
+		let last = horizontal ? e.clientX : e.clientY;
+		const sign = this.group.isRtl() ? -1 : 1;
+		const i = this.index();
+		this.dragging.set(true);
+		this.el.setPointerCapture?.(e.pointerId);
+		const move = (ev) => {
+			const cur = horizontal ? ev.clientX : ev.clientY;
+			this.group.resize(i, sign * (cur - last) * 100 / total);
+			last = cur;
+		};
+		const up = () => {
+			this.dragging.set(false);
+			this.el.removeEventListener("pointermove", move);
+			this.el.removeEventListener("pointerup", up);
+			this.el.removeEventListener("pointercancel", up);
+		};
+		this.el.addEventListener("pointermove", move);
+		this.el.addEventListener("pointerup", up);
+		this.el.addEventListener("pointercancel", up);
+	}
+	onKeydown(e) {
+		const horizontal = this.group.direction() === "horizontal";
+		const step = this.keyboardStep();
+		const sign = this.group.isRtl() ? -1 : 1;
+		const i = this.index();
+		let handled = true;
+		switch (e.key) {
+			case horizontal ? "ArrowLeft" : "ArrowUp":
+				this.group.resize(i, -step * sign);
+				break;
+			case horizontal ? "ArrowRight" : "ArrowDown":
+				this.group.resize(i, step * sign);
+				break;
+			case "Home":
+				this.group.resize(i, -100);
+				break;
+			case "End":
+				this.group.resize(i, 100);
+				break;
+			default: handled = false;
+		}
+		if (handled) e.preventDefault();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiResizableHandle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiResizableHandle,
+		isStandalone: true,
+		selector: "[uiResizableHandle], ui-resizable-handle",
+		inputs: {
+			withHandle: {
+				classPropertyName: "withHandle",
+				publicName: "withHandle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			keyboardStep: {
+				classPropertyName: "keyboardStep",
+				publicName: "keyboardStep",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "separator",
+				"tabindex": "0",
+				"data-slot": "resizable-handle"
+			},
+			listeners: {
+				"pointerdown": "onPointerDown($event)",
+				"pointerenter": "hover.set(true)",
+				"pointerleave": "hover.set(false)",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"attr.aria-orientation": "group.direction() === \"horizontal\" ? \"vertical\" : \"horizontal\"",
+				"attr.aria-valuemin": "0",
+				"attr.aria-valuemax": "100",
+				"attr.aria-valuenow": "valueNow()",
+				"attr.data-separator": "state()",
+				"attr.data-panel-group-direction": "group.direction()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    @if (withHandle()) {
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
+        <svg uiIcon="grip-vertical" class="size-2.5"></svg>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiResizableHandle,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiResizableHandle], ui-resizable-handle",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "separator",
+				tabindex: "0",
+				"data-slot": "resizable-handle",
+				"[attr.aria-orientation]": "group.direction() === \"horizontal\" ? \"vertical\" : \"horizontal\"",
+				"[attr.aria-valuemin]": "0",
+				"[attr.aria-valuemax]": "100",
+				"[attr.aria-valuenow]": "valueNow()",
+				"[attr.data-separator]": "state()",
+				"[attr.data-panel-group-direction]": "group.direction()",
+				"[attr.class]": "classes()",
+				"(pointerdown)": "onPointerDown($event)",
+				"(pointerenter)": "hover.set(true)",
+				"(pointerleave)": "hover.set(false)",
+				"(keydown)": "onKeydown($event)"
+			},
+			template: `
+    @if (withHandle()) {
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
+        <svg uiIcon="grip-vertical" class="size-2.5"></svg>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		withHandle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "withHandle",
+				required: false
+			}]
+		}],
+		keyboardStep: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keyboardStep",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_RESIZABLE = [
+	UiResizablePanelGroup,
+	UiResizablePanel,
+	UiResizableHandle
+];
+export { UI_RESIZABLE, UI_RESIZABLE_GENERATED, UiResizableHandle, UiResizablePanel, UiResizablePanelGroup, resizableHandleClass, resizablePanelGroupClass };
+
+//# sourceMappingURL=loomui-ng-ui-resizable.mjs.map

package/fesm2022/loomui-ng-ui-resizable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-resizable.mjs","names":[],"sources":["../../../libs/ui/resizable/resizable.ts","../../../libs/ui/resizable/resizable.manual.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/resizable.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./resizable.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\n\nexport const resizablePanelGroupClass =\n  'flex h-full w-full aria-[orientation=vertical]:flex-col';\n\nexport const resizableHandleClass =\n  'relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 after:start-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0';\n\nexport const UI_RESIZABLE_GENERATED = [] as const;\n","import { Directionality } from '@angular/cdk/bidi';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  Directive,\n  effect,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  numberAttribute,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { resizableHandleClass, resizablePanelGroupClass } from './resizable';\nimport { UiIconSvg } from '@loomui-ng/ui/icon';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiResizablePanelGroup direction=\"horizontal\" class=\"max-w-sm rounded-lg border\">\n *   <div uiResizablePanel [defaultSize]=\"50\">One</div>\n *   <div uiResizableHandle withHandle></div>\n *   <div uiResizablePanel [defaultSize]=\"50\">Two</div>\n * </div>\n * Observed (react-resizable-panels): group `data-group`, panel `data-panel`, handle role=\"separator\" tabindex=0\n * aria-valuemin/max/now, aria-orientation (perpendicular to the group), data-separator inactive|hover|active.\n * Own implementation (the original wraps a React library): pointer drag + keyboard (arrows ±step, Home/End).\n */\n@Directive({\n  selector: '[uiResizablePanelGroup], ui-resizable-panel-group', hostDirectives: [UiElementHost],\n  exportAs: 'uiResizablePanelGroup',\n  host: {\n    'data-slot': 'resizable-panel-group',\n    'data-group': 'true',\n    '[attr.aria-orientation]': 'direction()',\n    '[attr.data-panel-group-direction]': 'direction()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiResizablePanelGroup {\n  readonly direction = input<'horizontal' | 'vertical'>('horizontal');\n  readonly userClass = input<string>('', { alias: 'class' });\n  readonly dir = inject(Directionality);\n  readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  readonly panels = contentChildren(forwardRef(() => UiResizablePanel), { descendants: false });\n  readonly sizes = signal<number[]>([]);\n  protected readonly classes = computed(() => cn(resizablePanelGroupClass, this.userClass()));\n\n  constructor() {\n    effect(() => {\n      const panels = this.panels();\n      untracked(() => {\n        if (this.sizes().length === panels.length) return;\n        const fixed = panels.map((p) => p.defaultSize());\n        const set = fixed.filter((s): s is number => s !== undefined);\n        const rest = 100 - set.reduce((a, b) => a + b, 0);\n        const unset = fixed.length - set.length;\n        this.sizes.set(fixed.map((s) => s ?? (unset ? rest / unset : 0)));\n      });\n    });\n  }\n\n  /** Move the boundary after panel `i` by `delta` percent (positive grows panel i). */\n  resize(i: number, delta: number): void {\n    const panels = this.panels();\n    const sizes = [...this.sizes()];\n    const a = panels[i];\n    const b = panels[i + 1];\n    if (!a || !b) return;\n    let d = delta;\n    d = Math.min(d, a.maxSize() - sizes[i], sizes[i + 1] - b.minSize());\n    d = Math.max(d, a.minSize() - sizes[i], sizes[i + 1] - b.maxSize());\n    sizes[i] += d;\n    sizes[i + 1] -= d;\n    this.sizes.set(sizes);\n  }\n\n  isRtl(): boolean {\n    return this.dir.value === 'rtl' && this.direction() === 'horizontal';\n  }\n}\n\n@Directive({\n  selector: '[uiResizablePanel], ui-resizable-panel', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'resizable-panel',\n    'data-panel': 'true',\n    '[attr.data-panel-size]': 'size().toFixed(1)',\n    '[style.flex]': 'size() + \" 1 0px\"',\n    '[style.overflow]': '\"hidden\"',\n    '[attr.class]': 'userClass()',\n  },\n})\nexport class UiResizablePanel {\n  private readonly group = inject(UiResizablePanelGroup);\n  readonly defaultSize = input<number | undefined, unknown>(undefined, {\n    transform: (v: unknown) => (v === undefined || v === null || v === '' ? undefined : numberAttribute(v)),\n  });\n  readonly minSize = input(0, { transform: numberAttribute });\n  readonly maxSize = input(100, { transform: numberAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  readonly index = computed(() => this.group.panels().indexOf(this));\n  readonly size = computed(() => this.group.sizes()[this.index()] ?? this.defaultSize() ?? 0);\n}\n\n@Component({\n  selector: '[uiResizableHandle], ui-resizable-handle', hostDirectives: [UiElementHost],\n  imports: [UiIconSvg],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    role: 'separator',\n    tabindex: '0',\n    'data-slot': 'resizable-handle',\n    '[attr.aria-orientation]': 'group.direction() === \"horizontal\" ? \"vertical\" : \"horizontal\"',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuemax]': '100',\n    '[attr.aria-valuenow]': 'valueNow()',\n    '[attr.data-separator]': 'state()',\n    '[attr.data-panel-group-direction]': 'group.direction()',\n    '[attr.class]': 'classes()',\n    '(pointerdown)': 'onPointerDown($event)',\n    '(pointerenter)': 'hover.set(true)',\n    '(pointerleave)': 'hover.set(false)',\n    '(keydown)': 'onKeydown($event)',\n  },\n  template: `\n    @if (withHandle()) {\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border\">\n        <svg uiIcon=\"grip-vertical\" class=\"size-2.5\"></svg>\n      </div>\n    }\n  `,\n})\nexport class UiResizableHandle {\n  protected readonly group = inject(UiResizablePanelGroup);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  readonly withHandle = input(false, { transform: booleanAttribute });\n  readonly keyboardStep = input(10, { transform: numberAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly hover = signal(false);\n  private readonly dragging = signal(false);\n  protected readonly state = computed(() => (this.dragging() ? 'drag' : this.hover() ? 'hover' : 'inactive'));\n  protected readonly classes = computed(() => cn(resizableHandleClass, this.userClass()));\n\n  /** Handle i sits between panel i and i+1: index = number of handles before it. */\n  private index(): number {\n    const handles = Array.from(this.group.el.querySelectorAll(':scope > [data-slot=resizable-handle]'));\n    return handles.indexOf(this.el);\n  }\n  protected valueNow(): number {\n    return Math.round(this.group.sizes()[this.index()] ?? 0);\n  }\n\n  protected onPointerDown(e: PointerEvent): void {\n    if (e.button !== 0) return;\n    e.preventDefault();\n    const horizontal = this.group.direction() === 'horizontal';\n    const rect = this.group.el.getBoundingClientRect();\n    const total = horizontal ? rect.width : rect.height;\n    let last = horizontal ? e.clientX : e.clientY;\n    const sign = this.group.isRtl() ? -1 : 1;\n    const i = this.index();\n    this.dragging.set(true);\n    this.el.setPointerCapture?.(e.pointerId);\n    const move = (ev: PointerEvent) => {\n      const cur = horizontal ? ev.clientX : ev.clientY;\n      this.group.resize(i, (sign * (cur - last) * 100) / total);\n      last = cur;\n    };\n    const up = () => {\n      this.dragging.set(false);\n      this.el.removeEventListener('pointermove', move);\n      this.el.removeEventListener('pointerup', up);\n      this.el.removeEventListener('pointercancel', up);\n    };\n    this.el.addEventListener('pointermove', move);\n    this.el.addEventListener('pointerup', up);\n    this.el.addEventListener('pointercancel', up);\n  }\n\n  protected onKeydown(e: KeyboardEvent): void {\n    const horizontal = this.group.direction() === 'horizontal';\n    const step = this.keyboardStep();\n    const sign = this.group.isRtl() ? -1 : 1;\n    const i = this.index();\n    let handled = true;\n    switch (e.key) {\n      case horizontal ? 'ArrowLeft' : 'ArrowUp':\n        this.group.resize(i, -step * sign);\n        break;\n      case horizontal ? 'ArrowRight' : 'ArrowDown':\n        this.group.resize(i, step * sign);\n        break;\n      case 'Home':\n        this.group.resize(i, -100);\n        break;\n      case 'End':\n        this.group.resize(i, 100);\n        break;\n      default:\n        handled = false;\n    }\n    if (handled) e.preventDefault();\n  }\n}\n\nexport const UI_RESIZABLE = [UiResizablePanelGroup, UiResizablePanel, UiResizableHandle] as const;\n"],"mappings":";;;;;;AAKA,MAAa,2BACX;AAEF,MAAa,uBACX;AAEF,MAAa,yBAAyB,CAAA;ACgCtC,IAAa,wBAAb,MAAa,sBAAqB;CACvB,YAAY,MAAiC,cAAa,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC1D,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CAC9C,MAAM,OAAO,cAAc;CAC3B,KAAK,OAAgC,UAAU,CAAC,CAAC;CACjD,SAAS,gBAAgB,iBAAiB,gBAAgB,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,aAAa;CAAK,CAAA;CACjF,QAAQ,OAAiB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,UAAU,eAAe,GAAG,0BAA0B,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAE3F,cAAA;EACE,aAAY;GACV,MAAM,SAAS,KAAK,OAAM;GAC1B,gBAAe;IACb,IAAI,KAAK,MAAK,CAAE,CAAC,WAAW,OAAO,QAAQ;IAC3C,MAAM,QAAQ,OAAO,KAAK,MAAM,EAAE,YAAW,CAAE;IAC/C,MAAM,MAAM,MAAM,QAAQ,MAAmB,MAAM,MAAS;IAC5D,MAAM,OAAO,MAAM,IAAI,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC;IAChD,MAAM,QAAQ,MAAM,SAAS,IAAI;IACjC,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,MAAM,QAAQ,OAAO,QAAQ,EAAE,CAAC;GAClE,CAAC;EACH,CAAC;CACH;CAGA,OAAO,GAAW,OAAa;EAC7B,MAAM,SAAS,KAAK,OAAM;EAC1B,MAAM,QAAQ,CAAC,GAAG,KAAK,MAAK,CAAE;EAC9B,MAAM,IAAI,OAAO;EACjB,MAAM,IAAI,OAAO,IAAI;EACrB,IAAI,CAAC,KAAK,CAAC,GAAG;EACd,IAAI,IAAI;EACR,IAAI,KAAK,IAAI,GAAG,EAAE,QAAO,IAAK,MAAM,IAAI,MAAM,IAAI,KAAK,EAAE,QAAO,CAAE;EAClE,IAAI,KAAK,IAAI,GAAG,EAAE,QAAO,IAAK,MAAM,IAAI,MAAM,IAAI,KAAK,EAAE,QAAO,CAAE;EAClE,MAAM,MAAM;EACZ,MAAM,IAAI,MAAM;EAChB,KAAK,MAAM,IAAI,KAAK;CACtB;CAEA,QAAK;EACH,OAAO,KAAK,IAAI,UAAU,SAAS,KAAK,UAAS,MAAO;CAC1D;CAxCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAqB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAArB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAqB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,aAAA;IAAA,cAAA;GAAA;GAAA,YAAA;IAAA,yBAAA;IAAA,mCAAA;IAAA,cAAA;GAAA;EAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,WAAA,GAAA,iBAKmB,gBAAgB;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA,CAAA,uBAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AALxD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAXjC,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAqD,gBAAgB,CAAC,aAAa;GAC7F,UAAU;GACV,MAAM;IACJ,aAAa;IACb,cAAc;IACd,2BAA2B;IAC3B,qCAAqC;IACrC,gBAAgB;GACjB;EACF,CAAA;CAMmC,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,QAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,iBAAiB,gBAAgB,GAAC;IAAI,aAAa;IAAO,UAAA;GAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA;AAiD9F,IAAa,mBAAb,MAAa,iBAAgB;CACV,QAAQ,OAAO,qBAAqB;CAC5C,cAAc,MAAmC,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EACjE,YAAY,MAAgB,MAAM,UAAa,MAAM,QAAQ,MAAM,KAAK,SAAY,gBAAgB,CAAC;CAAE,CAAA;CAEhG,UAAU,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAC/C,UAAU,MAAM,KAAG;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CACjD,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CAC9C,QAAQ,eAAe,KAAK,MAAM,OAAM,CAAE,CAAC,QAAQ,IAAI,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACzD,OAAO,eAAe,KAAK,MAAM,MAAK,CAAE,CAAC,KAAK,MAAK,MAAO,KAAK,YAAW,KAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAThF,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,aAAA;IAAA,cAAA;GAAA;GAAA,YAAA;IAAA,wBAAA;IAAA,cAAA;IAAA,kBAAA;IAAA,cAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAhB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAX5B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAA0C,gBAAgB,CAAC,aAAa;GAClF,MAAM;IACJ,aAAa;IACb,cAAc;IACd,0BAA0B;IAC1B,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;GACjB;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,IAAa,oBAAb,MAAa,kBAAiB;CACT,QAAQ,OAAO,qBAAqB;CACtC,KAAK,OAAgC,UAAU,CAAC,CAAC;CACzD,aAAa,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACvD,eAAe,MAAM,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,eAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CACrD,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,QAAQ,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,WAAW,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,QAAQ,eAAgB,KAAK,SAAQ,IAAK,SAAS,KAAK,MAAK,IAAK,UAAU,YAAY,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACxF,UAAU,eAAe,GAAG,sBAAsB,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG/E,QAAK;EAEX,OADgB,MAAM,KAAK,KAAK,MAAM,GAAG,iBAAiB,uCAAuC,CAC1F,CAAA,CAAQ,QAAQ,KAAK,EAAE;CAChC;CACU,WAAQ;EAChB,OAAO,KAAK,MAAM,KAAK,MAAM,MAAK,CAAE,CAAC,KAAK,MAAK,MAAO,CAAC;CACzD;CAEU,cAAc,GAAe;EACrC,IAAI,EAAE,WAAW,GAAG;EACpB,EAAE,eAAc;EAChB,MAAM,aAAa,KAAK,MAAM,UAAS,MAAO;EAC9C,MAAM,OAAO,KAAK,MAAM,GAAG,sBAAqB;EAChD,MAAM,QAAQ,aAAa,KAAK,QAAQ,KAAK;EAC7C,IAAI,OAAO,aAAa,EAAE,UAAU,EAAE;EACtC,MAAM,OAAO,KAAK,MAAM,MAAK,IAAK,KAAK;EACvC,MAAM,IAAI,KAAK,MAAK;EACpB,KAAK,SAAS,IAAI,IAAI;EACtB,KAAK,GAAG,oBAAoB,EAAE,SAAS;EACvC,MAAM,QAAQ,OAAoB;GAChC,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;GACzC,KAAK,MAAM,OAAO,GAAI,QAAQ,MAAM,QAAQ,MAAO,KAAK;GACxD,OAAO;EACT;EACA,MAAM,WAAU;GACd,KAAK,SAAS,IAAI,KAAK;GACvB,KAAK,GAAG,oBAAoB,eAAe,IAAI;GAC/C,KAAK,GAAG,oBAAoB,aAAa,EAAE;GAC3C,KAAK,GAAG,oBAAoB,iBAAiB,EAAE;EACjD;EACA,KAAK,GAAG,iBAAiB,eAAe,IAAI;EAC5C,KAAK,GAAG,iBAAiB,aAAa,EAAE;EACxC,KAAK,GAAG,iBAAiB,iBAAiB,EAAE;CAC9C;CAEU,UAAU,GAAgB;EAClC,MAAM,aAAa,KAAK,MAAM,UAAS,MAAO;EAC9C,MAAM,OAAO,KAAK,aAAY;EAC9B,MAAM,OAAO,KAAK,MAAM,MAAK,IAAK,KAAK;EACvC,MAAM,IAAI,KAAK,MAAK;EACpB,IAAI,UAAU;EACd,QAAQ,EAAE,KAAV;GACE,KAAK,aAAa,cAAc;IAC9B,KAAK,MAAM,OAAO,GAAG,CAAC,OAAO,IAAI;IACjC;GACF,KAAK,aAAa,eAAe;IAC/B,KAAK,MAAM,OAAO,GAAG,OAAO,IAAI;IAChC;GACF,KAAK;IACH,KAAK,MAAM,OAAO,GAAG,IAAI;IACzB;GACF,KAAK;IACH,KAAK,MAAM,OAAO,GAAG,GAAG;IACxB;GACF,SACE,UAAU;EACd;EACA,IAAI,SAAS,EAAE,eAAc;CAC/B;CAtEW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,YAAA;IAAA,aAAA;GAAA;GAAA,WAAA;IAAA,eAAA;IAAA,gBAAA;IAAA,gBAAA;IAAA,WAAA;GAAA;GAAA,YAAA;IAAA,yBAAA;IAAA,sBAAA;IAAA,sBAAA;IAAA,sBAAA;IAAA,uBAAA;IAAA,mCAAA;IAAA,cAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;EAAA,UARlB;;;;;;;EAMT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAxBS;GAAS,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA0BR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EA5B7B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAA4C,gBAAgB,CAAC,aAAa;GACpF,SAAS,CAAC,SAAS;GACnB,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,MAAM;IACN,UAAU;IACV,aAAa;IACb,2BAA2B;IAC3B,wBAAwB;IACxB,wBAAwB;IACxB,wBAAwB;IACxB,yBAAyB;IACzB,qCAAqC;IACrC,gBAAgB;IAChB,iBAAiB;IACjB,kBAAkB;IAClB,kBAAkB;IAClB,aAAa;GACd;GACD,UAAU;;;;;;;EAOX,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0ED,MAAa,eAAe;CAAC;CAAuB;CAAkB;AAAiB"}

package/fesm2022/loomui-ng-ui-scroll-area.mjs

@@ -0,0 +1,135 @@
+import * as i0 from "@angular/core";
+import { Directive, computed, input } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const scrollAreaClass = "relative w-96 whitespace-nowrap";
+const scrollAreaViewportClass = "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1";
+const UI_SCROLL_AREA_GENERATED = [];
+var UiScrollArea = class UiScrollArea {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(scrollAreaClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiScrollArea,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiScrollArea,
+		isStandalone: true,
+		selector: "[uiScrollArea], ui-scroll-area",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "scroll-area" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiScrollArea,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiScrollArea], ui-scroll-area",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "scroll-area",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiScrollAreaViewport = class UiScrollAreaViewport {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(scrollAreaViewportClass, "overflow-auto [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiScrollAreaViewport,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiScrollAreaViewport,
+		isStandalone: true,
+		selector: "[uiScrollAreaViewport], ui-scroll-area-viewport",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "scroll-area-viewport",
+				"tabindex": "0"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiScrollAreaViewport,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiScrollAreaViewport], ui-scroll-area-viewport",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "scroll-area-viewport",
+				tabindex: "0",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_SCROLL_AREA = [UiScrollArea, UiScrollAreaViewport];
+export { UI_SCROLL_AREA, UI_SCROLL_AREA_GENERATED, UiScrollArea, UiScrollAreaViewport, scrollAreaClass, scrollAreaViewportClass };
+
+//# sourceMappingURL=loomui-ng-ui-scroll-area.mjs.map