@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-tabs.mjs

@@ -0,0 +1,536 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, InjectionToken, booleanAttribute, computed, inject, input, isDevMode, model, signal } from "@angular/core";
+const RAQM_TABS = new InjectionToken("RaqmTabs");
+function moveTabsFocus(host, trigger, event) {
+	const enabled = host.enabled();
+	const index = enabled.indexOf(trigger);
+	if (index === -1) return;
+	let target;
+	switch (event.key) {
+		case "Home":
+			target = enabled[0];
+			break;
+		case "End":
+			target = enabled[enabled.length - 1];
+			break;
+		case "ArrowLeft":
+		case "ArrowRight":
+			if (host.vertical()) return;
+			target = enabled[(index + (event.key === (host.isRtl() ? "ArrowLeft" : "ArrowRight") ? 1 : -1) + enabled.length) % enabled.length];
+			break;
+		case "ArrowUp":
+		case "ArrowDown":
+			if (!host.vertical()) return;
+			target = enabled[(index + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length];
+			break;
+		default: return;
+	}
+	if (target === void 0) return;
+	event.preventDefault();
+	host.setFocused(target);
+	target.host.focus();
+}
+var RaqmTabsContentComponent = class RaqmTabsContentComponent {
+	tabs = inject(RAQM_TABS, { optional: true });
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.tabs?.isSelected(this.value()) ?? true, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => this.tabs?.panelIdFor(this.value()) ?? null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	triggerId = computed(() => this.tabs?.triggerIdFor(this.value()) ?? null, ...ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (isDevMode() && this.tabs === null) console.error("[raqm-tabs-content] No parent <raqm-tabs> found; the panel cannot know its selected state.");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmTabsContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmTabsContentComponent,
+		isStandalone: true,
+		selector: "raqm-tabs-content",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "tabpanel" },
+			properties: {
+				"attr.id": "panelId()",
+				"attr.aria-labelledby": "triggerId()",
+				"attr.tabindex": "selected() ? 0 : -1",
+				"attr.hidden": "selected() ? null : \"\""
+			},
+			classAttribute: "raqm-tabs-content"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:block;flex:1 1 0%;outline:none;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host([hidden]){display:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmTabsContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-tabs-content",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-tabs-content",
+				role: "tabpanel",
+				"[attr.id]": "panelId()",
+				"[attr.aria-labelledby]": "triggerId()",
+				"[attr.tabindex]": "selected() ? 0 : -1",
+				"[attr.hidden]": "selected() ? null : \"\""
+			},
+			styles: [":host{display:block;flex:1 1 0%;outline:none;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host([hidden]){display:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: true
+		}]
+	}] }
+});
+var RaqmTabsListComponent = class RaqmTabsListComponent {
+	tabs = inject(RAQM_TABS, { optional: true });
+	line = computed(() => this.tabs?.line() ?? false, ...ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []);
+	vertical = computed(() => this.tabs?.vertical() ?? false, ...ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []);
+	ariaOrientation = computed(() => this.vertical() ? "vertical" : null, ...ngDevMode ? [{ debugName: "ariaOrientation" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (isDevMode() && this.tabs === null) console.error("[raqm-tabs-list] No parent <raqm-tabs> found; the list has no tabs to own.");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmTabsListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmTabsListComponent,
+		isStandalone: true,
+		selector: "raqm-tabs-list",
+		host: {
+			attributes: { "role": "tablist" },
+			properties: {
+				"attr.aria-orientation": "ariaOrientation()",
+				"attr.data-raqm-line": "line() ? \"\" : null",
+				"attr.data-raqm-vertical": "vertical() ? \"\" : null"
+			},
+			classAttribute: "raqm-tabs-list"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:inline-flex;box-sizing:border-box;inline-size:fit-content;align-items:center;justify-content:center;color:var(--raqm-muted-foreground);border-radius:var(--raqm-radius-lg);padding:3px;block-size:calc(var(--raqm-spacing) * 8);background-color:var(--raqm-muted)}:host([data-raqm-line]){gap:calc(var(--raqm-spacing) * 1);border-radius:0;background-color:transparent}:host([data-raqm-vertical]){flex-direction:column;block-size:fit-content;inline-size:100%}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmTabsListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-tabs-list",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-tabs-list",
+				role: "tablist",
+				"[attr.aria-orientation]": "ariaOrientation()",
+				"[attr.data-raqm-line]": "line() ? \"\" : null",
+				"[attr.data-raqm-vertical]": "vertical() ? \"\" : null"
+			},
+			styles: [":host{display:inline-flex;box-sizing:border-box;inline-size:fit-content;align-items:center;justify-content:center;color:var(--raqm-muted-foreground);border-radius:var(--raqm-radius-lg);padding:3px;block-size:calc(var(--raqm-spacing) * 8);background-color:var(--raqm-muted)}:host([data-raqm-line]){gap:calc(var(--raqm-spacing) * 1);border-radius:0;background-color:transparent}:host([data-raqm-vertical]){flex-direction:column;block-size:fit-content;inline-size:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var RaqmTabsTriggerComponent = class RaqmTabsTriggerComponent {
+	host = inject(ElementRef);
+	authoredDisabled = this.host.nativeElement.disabled;
+	tabs = inject(RAQM_TABS, { optional: true });
+	destroyRef = inject(DestroyRef);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ref = (() => {
+		const self = this;
+		return {
+			get value() {
+				return self.value();
+			},
+			disabled: this.disabled,
+			get host() {
+				return self.host.nativeElement;
+			}
+		};
+	})();
+	vertical = computed(() => this.tabs?.vertical() ?? false, ...ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []);
+	disabledAttribute = computed(() => this.disabled() || this.authoredDisabled ? "" : null, ...ngDevMode ? [{ debugName: "disabledAttribute" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.tabs?.isSelected(this.value()) ?? false, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	id = computed(() => this.tabs?.triggerIdOf(this.ref) ?? null, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => this.tabs?.panelIdFor(this.value()) ?? null, ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	tabIndex = computed(() => {
+		if (this.tabs === null) return 0;
+		return this.tabs.isTabStop(this.ref) ? 0 : -1;
+	}, ...ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (isDevMode() && this.tabs === null) console.error("[raqm-tabs-trigger] No parent <raqm-tabs> found; the trigger has no selection state.");
+		this.destroyRef.onDestroy(() => this.tabs?.unregister(this.ref));
+	}
+	ngOnInit() {
+		this.tabs?.register(this.ref);
+	}
+	onClick() {
+		if (this.disabled()) return;
+		this.tabs?.select(this.value());
+	}
+	onKeydown(event) {
+		this.tabs?.moveFocus(this.ref, event);
+	}
+	onFocus() {
+		this.tabs?.noteFocus(this.ref);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmTabsTriggerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmTabsTriggerComponent,
+		isStandalone: true,
+		selector: "button[raqm-tabs-trigger]",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "tab",
+				"type": "button"
+			},
+			listeners: {
+				"click": "onClick()",
+				"keydown": "onKeydown($event)",
+				"focus": "onFocus()"
+			},
+			properties: {
+				"attr.aria-selected": "selected() ? \"true\" : \"false\"",
+				"attr.aria-controls": "panelId()",
+				"attr.id": "id()",
+				"attr.tabindex": "tabIndex()",
+				"attr.data-raqm-vertical": "vertical() ? \"\" : null",
+				"attr.data-raqm-state": "selected() ? \"active\" : \"inactive\"",
+				"attr.disabled": "disabledAttribute()",
+				"attr.data-raqm-disabled": "disabled() ? \"\" : null"
+			},
+			classAttribute: "raqm-tabs-trigger"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{position:relative;display:inline-flex;flex:1 1 0%;block-size:calc(100% - 1px);align-items:center;justify-content:center;white-space:nowrap;gap:calc(var(--raqm-spacing) * 1.5);border:1px solid transparent;border-radius:var(--raqm-radius-md);padding-block:calc(var(--raqm-spacing) * .5);padding-inline:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);line-height:calc(var(--raqm-spacing) * 5);color:color-mix(in oklch,var(--raqm-foreground) 60%,transparent);background-color:transparent;outline:none;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard)}:host([data-raqm-vertical]){inline-size:100%;justify-content:flex-start}:host(:hover){color:var(--raqm-foreground)}:host([data-raqm-state=active]){background-color:var(--raqm-background);color:var(--raqm-foreground);box-shadow:var(--raqm-shadow-sm)}:host(:focus-visible){border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color);outline:1px solid var(--raqm-ring)}:host(:disabled),:host([aria-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}:host:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:-5px;block-size:calc(var(--raqm-spacing) * .5);background-color:var(--raqm-foreground);opacity:0;transition:opacity var(--raqm-duration-base) var(--raqm-ease-standard)}:host([data-raqm-vertical]):after{inset-block:0;inset-inline:auto calc(var(--raqm-spacing) * -1);inline-size:calc(var(--raqm-spacing) * .5);block-size:auto}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmTabsTriggerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[raqm-tabs-trigger]",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-tabs-trigger",
+				role: "tab",
+				type: "button",
+				"[attr.aria-selected]": "selected() ? \"true\" : \"false\"",
+				"[attr.aria-controls]": "panelId()",
+				"[attr.id]": "id()",
+				"[attr.tabindex]": "tabIndex()",
+				"[attr.data-raqm-vertical]": "vertical() ? \"\" : null",
+				"[attr.data-raqm-state]": "selected() ? \"active\" : \"inactive\"",
+				"[attr.disabled]": "disabledAttribute()",
+				"[attr.data-raqm-disabled]": "disabled() ? \"\" : null",
+				"(click)": "onClick()",
+				"(keydown)": "onKeydown($event)",
+				"(focus)": "onFocus()"
+			},
+			styles: [":host{position:relative;display:inline-flex;flex:1 1 0%;block-size:calc(100% - 1px);align-items:center;justify-content:center;white-space:nowrap;gap:calc(var(--raqm-spacing) * 1.5);border:1px solid transparent;border-radius:var(--raqm-radius-md);padding-block:calc(var(--raqm-spacing) * .5);padding-inline:calc(var(--raqm-spacing) * 1.5);font-size:var(--raqm-font-size-sm);font-weight:var(--raqm-font-weight-medium);line-height:calc(var(--raqm-spacing) * 5);color:color-mix(in oklch,var(--raqm-foreground) 60%,transparent);background-color:transparent;outline:none;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard)}:host([data-raqm-vertical]){inline-size:100%;justify-content:flex-start}:host(:hover){color:var(--raqm-foreground)}:host([data-raqm-state=active]){background-color:var(--raqm-background);color:var(--raqm-foreground);box-shadow:var(--raqm-shadow-sm)}:host(:focus-visible){border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color);outline:1px solid var(--raqm-ring)}:host(:disabled),:host([aria-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}:host:after{content:\"\";position:absolute;inset-inline:0;inset-block-end:-5px;block-size:calc(var(--raqm-spacing) * .5);background-color:var(--raqm-foreground);opacity:0;transition:opacity var(--raqm-duration-base) var(--raqm-ease-standard)}:host([data-raqm-vertical]):after{inset-block:0;inset-inline:auto calc(var(--raqm-spacing) * -1);inline-size:calc(var(--raqm-spacing) * .5);block-size:auto}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+let nextTabsId = 0;
+var RaqmTabsComponent = class RaqmTabsComponent {
+	host = inject(ElementRef);
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	defaultValue = input(void 0, ...ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []);
+	vertical = input(false, {
+		...ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	line = input(false, {
+		...ngDevMode ? { debugName: "line" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tabs = signal([], ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	rootId = `raqm-tabs-${++nextTabsId}`;
+	sequence = 0;
+	enabledTabs = computed(() => this.tabs().filter((tab) => !tab.ref.disabled()).map((tab) => tab.ref), ...ngDevMode ? [{ debugName: "enabledTabs" }] : /* istanbul ignore next */ []);
+	focused = signal(null, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	selectedValue = computed(() => {
+		const declared = this.value() ?? this.defaultValue();
+		if (declared !== void 0) return declared;
+		return this.enabledTabs()[0]?.value;
+	}, ...ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []);
+	tabStop = computed(() => {
+		const enabled = this.enabledTabs();
+		const focused = this.focused();
+		if (focused !== null && enabled.includes(focused)) return focused;
+		const selected = this.selectedValue();
+		return enabled.find((trigger) => trigger.value === selected) ?? enabled[0] ?? null;
+	}, ...ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []);
+	keyboard = {
+		enabled: () => this.enabledTabs(),
+		vertical: () => this.vertical(),
+		isRtl: () => this.isRtl(),
+		setFocused: (trigger) => this.focused.set(trigger)
+	};
+	isSelected(value) {
+		return this.selectedValue() === value;
+	}
+	select(value) {
+		if (this.isSelected(value)) return;
+		const tab = this.tabs().find((registered) => registered.ref.value === value);
+		if (tab === void 0 || tab.ref.disabled()) return;
+		this.value.set(value);
+	}
+	register(trigger) {
+		if (isDevMode() && this.tabs().some((registered) => registered.ref.value === trigger.value)) console.error(`[raqm-tabs] Duplicate trigger value "${trigger.value}"; Tabs trigger values must be unique.`);
+		const sequence = ++this.sequence;
+		this.tabs.update((tabs) => [...tabs, {
+			ref: trigger,
+			triggerId: `${this.rootId}-tab-${sequence}`,
+			panelId: `${this.rootId}-panel-${sequence}`
+		}]);
+	}
+	unregister(trigger) {
+		this.tabs.update((tabs) => tabs.filter((registered) => registered.ref !== trigger));
+	}
+	isTabStop(trigger) {
+		return this.tabStop() === trigger;
+	}
+	triggerIdOf(trigger) {
+		return this.tabs().find((registered) => registered.ref === trigger)?.triggerId ?? null;
+	}
+	triggerIdFor(value) {
+		return this.tabs().find((registered) => registered.ref.value === value)?.triggerId ?? null;
+	}
+	panelIdFor(value) {
+		return this.tabs().find((registered) => registered.ref.value === value)?.panelId ?? null;
+	}
+	noteFocus(trigger) {
+		this.focused.set(trigger);
+	}
+	moveFocus(trigger, event) {
+		moveTabsFocus(this.keyboard, trigger, event);
+	}
+	isRtl() {
+		return getComputedStyle(this.host.nativeElement).direction === "rtl";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmTabsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmTabsComponent,
+		isStandalone: true,
+		selector: "raqm-tabs",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultValue: {
+				classPropertyName: "defaultValue",
+				publicName: "defaultValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			vertical: {
+				classPropertyName: "vertical",
+				publicName: "vertical",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			line: {
+				classPropertyName: "line",
+				publicName: "line",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: { "attr.data-raqm-vertical": "vertical() ? \"\" : null" },
+			classAttribute: "raqm-tabs"
+		},
+		providers: [{
+			provide: RAQM_TABS,
+			useExisting: RaqmTabsComponent
+		}],
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 2)}:host([data-raqm-vertical]){flex-direction:row}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmTabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-tabs",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-tabs",
+				"[attr.data-raqm-vertical]": "vertical() ? \"\" : null"
+			},
+			providers: [{
+				provide: RAQM_TABS,
+				useExisting: RaqmTabsComponent
+			}],
+			styles: [":host{display:flex;flex-direction:column;gap:calc(var(--raqm-spacing) * 2)}:host([data-raqm-vertical]){flex-direction:row}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		defaultValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultValue",
+				required: false
+			}]
+		}],
+		vertical: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vertical",
+				required: false
+			}]
+		}],
+		line: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "line",
+				required: false
+			}]
+		}]
+	}
+});
+const RaqmTabs = [
+	RaqmTabsComponent,
+	RaqmTabsListComponent,
+	RaqmTabsTriggerComponent,
+	RaqmTabsContentComponent
+];
+export { RaqmTabs, RaqmTabsComponent, RaqmTabsContentComponent, RaqmTabsListComponent, RaqmTabsTriggerComponent };
+
+//# sourceMappingURL=raqm-ui-tabs.mjs.map

package/fesm2022/raqm-ui-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-tabs.mjs","names":[],"sources":["../../../projects/ui/tabs/tabs-context.ts","../../../projects/ui/tabs/tabs-keyboard.ts","../../../projects/ui/tabs/tabs-content.component.ts","../../../projects/ui/tabs/tabs-list.component.ts","../../../projects/ui/tabs/tabs-trigger.component.ts","../../../projects/ui/tabs/tabs.ts","../../../projects/ui/tabs/public-api.ts"],"sourcesContent":["// Tabs contract: the trigger reference the root registers, the root context every part reads\r\n// and the token that publishes it.\r\n\r\nimport { InjectionToken, Signal } from '@angular/core';\r\n\r\nexport interface RaqmTabsTriggerRef {\r\n  /** Unique, non-empty trigger value used by the root's selection contract. */\r\n  readonly value: string;\r\n  /** Disabled triggers are skipped by the tab stop and arrows. */\r\n  readonly disabled: Signal<boolean>;\r\n  /** The trigger's native `<button>`, used only to move focus. */\r\n  readonly host: HTMLElement;\r\n}\r\n\r\n/** Root contract published under {@link RAQM_TABS}; the dedicated token avoids a runtime module cycle. */\r\nexport interface RaqmTabsContext {\r\n  /** Used for `aria-orientation` and arrow-key mapping. */\r\n  readonly vertical: Signal<boolean>;\r\n  readonly line: Signal<boolean>;\r\n  /** Bound model, else seed, else the first enabled trigger. */\r\n  readonly selectedValue: Signal<string | undefined>;\r\n  isSelected(value: string): boolean;\r\n  /** Missing, disabled or already-selected values are a no-op. */\r\n  select(value: string): void;\r\n  register(trigger: RaqmTabsTriggerRef): void;\r\n  /** Never changes the selection. */\r\n  unregister(trigger: RaqmTabsTriggerRef): void;\r\n  isTabStop(trigger: RaqmTabsTriggerRef): boolean;\r\n  /** Records the roving tab stop without changing the selection. */\r\n  noteFocus(trigger: RaqmTabsTriggerRef): void;\r\n  /** Moves focus without selecting (manual activation). */\r\n  moveFocus(trigger: RaqmTabsTriggerRef, event: KeyboardEvent): void;\r\n  triggerIdOf(trigger: RaqmTabsTriggerRef): string | null;\r\n  triggerIdFor(value: string): string | null;\r\n  panelIdFor(value: string): string | null;\r\n}\r\n\r\n/** Root token; injected optionally so a misplaced part renders and only logs a dev-mode error. */\r\nexport const RAQM_TABS = new InjectionToken<RaqmTabsContext>('RaqmTabs');\r\n","// Tabs keyboard: the arrow/Home/End walk over the enabled triggers, with the horizontal axis\r\n// following the resolved direction.\r\n\r\nimport { RaqmTabsTriggerRef } from './tabs-context';\r\n\r\nexport interface RaqmTabsKeyboardHost {\r\n  /** Enabled triggers in DOM order. */\r\n  enabled(): readonly RaqmTabsTriggerRef[];\r\n  vertical(): boolean;\r\n  /** The root's resolved reading direction, read at keydown time. */\r\n  isRtl(): boolean;\r\n  /** Records the new roving tab stop without touching the selection. */\r\n  setFocused(trigger: RaqmTabsTriggerRef): void;\r\n}\r\n\r\n/** Moves focus among enabled triggers with wrapping; Left/Right follow the resolved direction (RTL reverses them). */\r\nexport function moveTabsFocus(\r\n  host: RaqmTabsKeyboardHost,\r\n  trigger: RaqmTabsTriggerRef,\r\n  event: KeyboardEvent,\r\n): void {\r\n  const enabled = host.enabled();\r\n  const index = enabled.indexOf(trigger);\r\n  if (index === -1) {\r\n    return;\r\n  }\r\n\r\n  let target: RaqmTabsTriggerRef | undefined;\r\n  switch (event.key) {\r\n    case 'Home':\r\n      target = enabled[0];\r\n      break;\r\n    case 'End':\r\n      target = enabled[enabled.length - 1];\r\n      break;\r\n    case 'ArrowLeft':\r\n    case 'ArrowRight': {\r\n      if (host.vertical()) {\r\n        return;\r\n      }\r\n      const forward = event.key === (host.isRtl() ? 'ArrowLeft' : 'ArrowRight');\r\n      target = enabled[(index + (forward ? 1 : -1) + enabled.length) % enabled.length];\r\n      break;\r\n    }\r\n    case 'ArrowUp':\r\n    case 'ArrowDown': {\r\n      if (!host.vertical()) {\r\n        return;\r\n      }\r\n      const forward = event.key === 'ArrowDown';\r\n      target = enabled[(index + (forward ? 1 : -1) + enabled.length) % enabled.length];\r\n      break;\r\n    }\r\n    default:\r\n      return;\r\n  }\r\n\r\n  if (target === undefined) {\r\n    return;\r\n  }\r\n  event.preventDefault();\r\n  host.setFocused(target);\r\n  target.host.focus();\r\n}\r\n","// Tabs panel: `role=\"tabpanel\"` paired by the ids the root minted, mounted but hidden when\r\n// unselected.\r\n\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n} from '@angular/core';\r\n\r\nimport { RAQM_TABS, RaqmTabsContext } from './tabs-context';\r\n\r\n/** Tabs panel; `role=\"tabpanel\"` paired by owned ids. Panels stay mounted, `hidden` when unselected, and only the visible panel is a tab stop. */\r\n@Component({\r\n  selector: 'raqm-tabs-content',\r\n  template: '<ng-content />',\r\n  styles: [\r\n    `\r\n      :host {\r\n        display: block;\r\n        flex: 1 1 0%;\r\n        outline: none;\r\n        font-size: var(--raqm-font-size-sm);\r\n        line-height: calc(var(--raqm-spacing) * 5);\r\n      }\r\n\r\n      :host([hidden]) {\r\n        display: none;\r\n      }\r\n    `,\r\n  ],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-tabs-content',\r\n    role: 'tabpanel',\r\n    '[attr.id]': 'panelId()',\r\n    '[attr.aria-labelledby]': 'triggerId()',\r\n    '[attr.tabindex]': 'selected() ? 0 : -1',\r\n    // Inactive panels stay mounted but are hidden, so consumer state survives.\r\n    '[attr.hidden]': 'selected() ? null : \"\"',\r\n  },\r\n})\r\nexport class RaqmTabsContentComponent {\r\n  private readonly tabs = inject<RaqmTabsContext | null>(RAQM_TABS, { optional: true });\r\n\r\n  readonly value = input.required<string>();\r\n\r\n  protected readonly selected = computed(() => this.tabs?.isSelected(this.value()) ?? true);\r\n\r\n  protected readonly panelId = computed(() => this.tabs?.panelIdFor(this.value()) ?? null);\r\n\r\n  protected readonly triggerId = computed(() => this.tabs?.triggerIdFor(this.value()) ?? null);\r\n\r\n  constructor() {\r\n    if (isDevMode() && this.tabs === null) {\r\n      console.error(\r\n        '[raqm-tabs-content] No parent <raqm-tabs> found; the panel cannot know its selected state.',\r\n      );\r\n    }\r\n  }\r\n}\r\n","// Tabs list: the real `tablist` role, with appearance mirrored from the root context.\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, inject, isDevMode } from '@angular/core';\r\n\r\nimport { RAQM_TABS, RaqmTabsContext } from './tabs-context';\r\n\r\n/** Tabs list; the real `role=\"tablist\"`, and appearance comes from the root context so list and triggers cannot drift. */\r\n@Component({\r\n  selector: 'raqm-tabs-list',\r\n  template: '<ng-content />',\r\n  styleUrl: './tabs-list.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-tabs-list',\r\n    // The real tablist role sits on the list, never on the root.\r\n    role: 'tablist',\r\n    // Set only for a vertical list, so assistive technology keeps the ARIA default.\r\n    '[attr.aria-orientation]': 'ariaOrientation()',\r\n    '[attr.data-raqm-line]': 'line() ? \"\" : null',\r\n    '[attr.data-raqm-vertical]': 'vertical() ? \"\" : null',\r\n  },\r\n})\r\nexport class RaqmTabsListComponent {\r\n  private readonly tabs = inject<RaqmTabsContext | null>(RAQM_TABS, { optional: true });\r\n\r\n  protected readonly line = computed(() => this.tabs?.line() ?? false);\r\n\r\n  protected readonly vertical = computed(() => this.tabs?.vertical() ?? false);\r\n\r\n  protected readonly ariaOrientation = computed(() => (this.vertical() ? 'vertical' : null));\r\n\r\n  constructor() {\r\n    if (isDevMode() && this.tabs === null) {\r\n      console.error('[raqm-tabs-list] No parent <raqm-tabs> found; the list has no tabs to own.');\r\n    }\r\n  }\r\n}\r\n","// Tabs trigger: ARIA, owned ids and the roving tab stop all come from the root.\r\n\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  OnInit,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n} from '@angular/core';\r\n\r\nimport { RAQM_TABS, RaqmTabsContext, RaqmTabsTriggerRef } from './tabs-context';\r\n\r\n/** Tabs trigger on the native `<button>`; ARIA, owned id and roving `tabindex` come from the root, and it registers from `ngOnInit`. */\r\n@Component({\r\n  selector: 'button[raqm-tabs-trigger]',\r\n  template: '<ng-content />',\r\n  styleUrl: './tabs-trigger.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-tabs-trigger',\r\n    role: 'tab',\r\n    // A tab never submits a form.\r\n    type: 'button',\r\n    '[attr.aria-selected]': 'selected() ? \"true\" : \"false\"',\r\n    '[attr.aria-controls]': 'panelId()',\r\n    '[attr.id]': 'id()',\r\n    // Roving tabindex: only the root's single tab stop gets `0`.\r\n    '[attr.tabindex]': 'tabIndex()',\r\n    '[attr.data-raqm-vertical]': 'vertical() ? \"\" : null',\r\n    '[attr.data-raqm-state]': 'selected() ? \"active\" : \"inactive\"',\r\n    // Native state OR-ed with an app-authored `disabled`.\r\n    '[attr.disabled]': 'disabledAttribute()',\r\n    '[attr.data-raqm-disabled]': 'disabled() ? \"\" : null',\r\n    '(click)': 'onClick()',\r\n    // Arrow/Home/End move focus only (manual activation).\r\n    '(keydown)': 'onKeydown($event)',\r\n    // Focusing a tab makes it the roving tab stop.\r\n    '(focus)': 'onFocus()',\r\n  },\r\n})\r\nexport class RaqmTabsTriggerComponent implements OnInit {\r\n  private readonly host = inject(ElementRef<HTMLButtonElement>);\r\n\r\n  // Read at creation: the tab can add its own disabled state but never clears this one.\r\n  private readonly authoredDisabled = this.host.nativeElement.disabled;\r\n\r\n  private readonly tabs = inject<RaqmTabsContext | null>(RAQM_TABS, { optional: true });\r\n\r\n  private readonly destroyRef = inject(DestroyRef);\r\n\r\n  readonly value = input.required<string>();\r\n\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n\r\n  // Reads the live input, so registration always sees the bound value.\r\n  private readonly ref: RaqmTabsTriggerRef = (() => {\r\n    const self = this;\r\n    return {\r\n      get value(): string {\r\n        return self.value();\r\n      },\r\n      disabled: this.disabled,\r\n      get host(): HTMLElement {\r\n        return self.host.nativeElement;\r\n      },\r\n    };\r\n  })();\r\n\r\n  protected readonly vertical = computed(() => this.tabs?.vertical() ?? false);\r\n\r\n  protected readonly disabledAttribute = computed(() =>\r\n    this.disabled() || this.authoredDisabled ? '' : null,\r\n  );\r\n\r\n  protected readonly selected = computed(() => this.tabs?.isSelected(this.value()) ?? false);\r\n\r\n  protected readonly id = computed(() => this.tabs?.triggerIdOf(this.ref) ?? null);\r\n\r\n  protected readonly panelId = computed(() => this.tabs?.panelIdFor(this.value()) ?? null);\r\n\r\n  protected readonly tabIndex = computed(() => {\r\n    if (this.tabs === null) {\r\n      return 0;\r\n    }\r\n    return this.tabs.isTabStop(this.ref) ? 0 : -1;\r\n  });\r\n\r\n  constructor() {\r\n    if (isDevMode() && this.tabs === null) {\r\n      console.error(\r\n        '[raqm-tabs-trigger] No parent <raqm-tabs> found; the trigger has no selection state.',\r\n      );\r\n    }\r\n\r\n    // Registration deliberately lives in `ngOnInit`, never here.\r\n    this.destroyRef.onDestroy(() => this.tabs?.unregister(this.ref));\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.tabs?.register(this.ref);\r\n  }\r\n\r\n  protected onClick(): void {\r\n    if (this.disabled()) {\r\n      return;\r\n    }\r\n    this.tabs?.select(this.value());\r\n  }\r\n\r\n  protected onKeydown(event: KeyboardEvent): void {\r\n    this.tabs?.moveFocus(this.ref, event);\r\n  }\r\n\r\n  protected onFocus(): void {\r\n    this.tabs?.noteFocus(this.ref);\r\n  }\r\n}\r\n","// Tabs root: selection, trigger registration, id minting and the single roving tab stop; the\r\n// list, trigger and panel parts live in their own files and re-export through this module.\r\n\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n  model,\r\n  signal,\r\n} from '@angular/core';\r\n\r\nimport { RAQM_TABS, RaqmTabsContext, RaqmTabsTriggerRef } from './tabs-context';\r\nimport { moveTabsFocus, RaqmTabsKeyboardHost } from './tabs-keyboard';\r\n\r\nexport { RaqmTabsContentComponent } from './tabs-content.component';\r\nexport { RaqmTabsListComponent } from './tabs-list.component';\r\nexport { RaqmTabsTriggerComponent } from './tabs-trigger.component';\r\nexport { RAQM_TABS } from './tabs-context';\r\nexport type { RaqmTabsContext, RaqmTabsTriggerRef } from './tabs-context';\r\n\r\nlet nextTabsId = 0;\r\n\r\n// One registered trigger with the two element ids the root minted for it.\r\ninterface RegisteredTab {\r\n  readonly ref: RaqmTabsTriggerRef;\r\n  readonly triggerId: string;\r\n  readonly panelId: string;\r\n}\r\n\r\n/** Tabs root; carries no ARIA role (`tablist` belongs on the list) and uses roving tabindex with manual activation: arrows move focus, Space/Enter selects. */\r\n@Component({\r\n  selector: 'raqm-tabs',\r\n  template: '<ng-content />',\r\n  styles: [\r\n    `\r\n      :host {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: calc(var(--raqm-spacing) * 2);\r\n      }\r\n\r\n      :host([data-raqm-vertical]) {\r\n        flex-direction: row;\r\n      }\r\n    `,\r\n  ],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-tabs',\r\n    // Boolean axis for the row/column rules and the parts' mirrors.\r\n    '[attr.data-raqm-vertical]': 'vertical() ? \"\" : null',\r\n  },\r\n  providers: [{ provide: RAQM_TABS, useExisting: RaqmTabsComponent }],\r\n})\r\nexport class RaqmTabsComponent implements RaqmTabsContext {\r\n  // Resolves the nearest writing direction for horizontal arrow keys.\r\n  private readonly host = inject(ElementRef<HTMLElement>);\r\n\r\n  // `undefined` means nothing explicitly selected.\r\n  readonly value = model<string | undefined>(undefined);\r\n\r\n  readonly defaultValue = input<string | undefined>(undefined);\r\n\r\n  readonly vertical = input(false, { transform: booleanAttribute });\r\n\r\n  readonly line = input(false, { transform: booleanAttribute });\r\n\r\n  // A signal so the tab stop and arrows follow dynamic parts.\r\n  private readonly tabs = signal<readonly RegisteredTab[]>([]);\r\n\r\n  private readonly rootId = `raqm-tabs-${++nextTabsId}`;\r\n  private sequence = 0;\r\n\r\n  private readonly enabledTabs = computed<readonly RaqmTabsTriggerRef[]>(() =>\r\n    this.tabs()\r\n      .filter((tab) => !tab.ref.disabled())\r\n      .map((tab) => tab.ref),\r\n  );\r\n\r\n  private readonly focused = signal<RaqmTabsTriggerRef | null>(null);\r\n\r\n  // Bound model, then seed, then the first enabled trigger; a declared value is never replaced by the fallback.\r\n  readonly selectedValue = computed<string | undefined>(() => {\r\n    const declared = this.value() ?? this.defaultValue();\r\n    if (declared !== undefined) {\r\n      return declared;\r\n    }\r\n    return this.enabledTabs()[0]?.value;\r\n  });\r\n\r\n  // The single roving tab stop: focused, else selected, else first enabled; `null` when none.\r\n  private readonly tabStop = computed<RaqmTabsTriggerRef | null>(() => {\r\n    const enabled = this.enabledTabs();\r\n    const focused = this.focused();\r\n    if (focused !== null && enabled.includes(focused)) {\r\n      return focused;\r\n    }\r\n    const selected = this.selectedValue();\r\n    return enabled.find((trigger) => trigger.value === selected) ?? enabled[0] ?? null;\r\n  });\r\n\r\n  private readonly keyboard: RaqmTabsKeyboardHost = {\r\n    enabled: () => this.enabledTabs(),\r\n    vertical: () => this.vertical(),\r\n    isRtl: () => this.isRtl(),\r\n    setFocused: (trigger) => this.focused.set(trigger),\r\n  };\r\n\r\n  isSelected(value: string): boolean {\r\n    return this.selectedValue() === value;\r\n  }\r\n\r\n  select(value: string): void {\r\n    if (this.isSelected(value)) {\r\n      return;\r\n    }\r\n    const tab = this.tabs().find((registered) => registered.ref.value === value);\r\n    if (tab === undefined || tab.ref.disabled()) {\r\n      return;\r\n    }\r\n    this.value.set(value);\r\n  }\r\n\r\n  /** Registers a trigger in DOM order, minting its ids; called from `ngOnInit` so `value` is bound. */\r\n  register(trigger: RaqmTabsTriggerRef): void {\r\n    if (isDevMode() && this.tabs().some((registered) => registered.ref.value === trigger.value)) {\r\n      console.error(\r\n        `[raqm-tabs] Duplicate trigger value \"${trigger.value}\"; Tabs trigger values must be unique.`,\r\n      );\r\n    }\r\n    const sequence = ++this.sequence;\r\n    this.tabs.update((tabs) => [\r\n      ...tabs,\r\n      {\r\n        ref: trigger,\r\n        triggerId: `${this.rootId}-tab-${sequence}`,\r\n        panelId: `${this.rootId}-panel-${sequence}`,\r\n      },\r\n    ]);\r\n  }\r\n\r\n  /** Unregisters a trigger on destroy; survives keep their minted ids. */\r\n  unregister(trigger: RaqmTabsTriggerRef): void {\r\n    this.tabs.update((tabs) => tabs.filter((registered) => registered.ref !== trigger));\r\n  }\r\n\r\n  /** Whether the trigger is the set's single roving tab stop. */\r\n  isTabStop(trigger: RaqmTabsTriggerRef): boolean {\r\n    return this.tabStop() === trigger;\r\n  }\r\n\r\n  triggerIdOf(trigger: RaqmTabsTriggerRef): string | null {\r\n    return this.tabs().find((registered) => registered.ref === trigger)?.triggerId ?? null;\r\n  }\r\n\r\n  triggerIdFor(value: string): string | null {\r\n    return this.tabs().find((registered) => registered.ref.value === value)?.triggerId ?? null;\r\n  }\r\n\r\n  panelIdFor(value: string): string | null {\r\n    return this.tabs().find((registered) => registered.ref.value === value)?.panelId ?? null;\r\n  }\r\n\r\n  /** Records the last focused trigger as the roving tab stop; manual activation, so no selection change. */\r\n  noteFocus(trigger: RaqmTabsTriggerRef): void {\r\n    this.focused.set(trigger);\r\n  }\r\n\r\n  /** Moves focus among enabled triggers with wrapping; Left/Right follow the resolved direction (RTL reverses them). */\r\n  moveFocus(trigger: RaqmTabsTriggerRef, event: KeyboardEvent): void {\r\n    moveTabsFocus(this.keyboard, trigger, event);\r\n  }\r\n\r\n  // Follows the actual reading direction without a document query or global listener.\r\n  private isRtl(): boolean {\r\n    return getComputedStyle(this.host.nativeElement).direction === 'rtl';\r\n  }\r\n}\r\n","// Public API for the `@raqm/ui/tabs` secondary entry point; also re-exported by the root.\r\nimport {\r\n  RaqmTabsComponent,\r\n  RaqmTabsContentComponent,\r\n  RaqmTabsListComponent,\r\n  RaqmTabsTriggerComponent,\r\n} from './tabs';\r\n\r\nexport {\r\n  RaqmTabsComponent,\r\n  RaqmTabsContentComponent,\r\n  RaqmTabsListComponent,\r\n  RaqmTabsTriggerComponent,\r\n};\r\n\r\n// A nested readonly array is accepted by Angular `imports`, so the whole family imports as one entry.\r\nexport const RaqmTabs = [\r\n  RaqmTabsComponent,\r\n  RaqmTabsListComponent,\r\n  RaqmTabsTriggerComponent,\r\n  RaqmTabsContentComponent,\r\n] as const;\r\n"],"mappings":"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"}

package/fesm2022/raqm-ui-textarea.mjs

@@ -0,0 +1,37 @@
+import * as i0 from "@angular/core";
+import { Directive } from "@angular/core";
+var RaqmTextarea = class RaqmTextarea {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmTextarea,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmTextarea,
+		isStandalone: true,
+		selector: "textarea[raqm-textarea]",
+		host: { classAttribute: "raqm-textarea" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmTextarea,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "textarea[raqm-textarea]",
+			host: { class: "raqm-textarea" }
+		}]
+	}]
+});
+export { RaqmTextarea };
+
+//# sourceMappingURL=raqm-ui-textarea.mjs.map

package/fesm2022/raqm-ui-textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raqm-ui-textarea.mjs","names":[],"sources":["../../../projects/ui/textarea/textarea.ts"],"sourcesContent":["import { Directive } from '@angular/core';\r\n\r\n/** Native `<textarea>` host; value, validation and IME stay browser- and Forms-owned. */\r\n@Directive({\r\n  selector: 'textarea[raqm-textarea]',\r\n  host: {\r\n    class: 'raqm-textarea',\r\n  },\r\n})\r\nexport class RaqmTextarea {}\r\n"],"mappings":";;AASA,IAAa,eAAb,MAAa,aAAY;CAAZ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,MAAA,EAAA,gBAAA,gBAAA;EAAA,UAAA;CAAA,CAAA;;AAAZ,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EANxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EACJ,OAAO,gBACR;EACF,CAAA"}