@loomui-ng/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,274 @@
+import * as i0 from "@angular/core";
+import { Directive, ElementRef, booleanAttribute, computed, effect, inject, input, model, signal, untracked } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn, nextId, whenAnimationDone } from "@loomui-ng/ui/utils";
+const collapsibleClass = "flex gap-2";
+const collapsibleContentClass = "flex flex-col gap-2";
+const UI_COLLAPSIBLE_GENERATED = [];
+var UiCollapsible = class UiCollapsible {
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	contentId = nextId("ui-collapsible");
+	classes = computed(() => cn(collapsibleClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	toggle() {
+		if (!this.disabled()) this.open.update((v) => !v);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCollapsible,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCollapsible,
+		isStandalone: true,
+		selector: "[uiCollapsible], ui-collapsible",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { open: "openChange" },
+		host: {
+			attributes: { "data-slot": "collapsible" },
+			properties: {
+				"attr.data-state": "open() ? \"open\" : \"closed\"",
+				"attr.data-disabled": "disabled() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		exportAs: ["uiCollapsible"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCollapsible,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCollapsible], ui-collapsible",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiCollapsible",
+			host: {
+				"data-slot": "collapsible",
+				"[attr.data-state]": "open() ? \"open\" : \"closed\"",
+				"[attr.data-disabled]": "disabled() ? \"\" : null",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiCollapsibleTrigger = class UiCollapsibleTrigger {
+	root = inject(UiCollapsible);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCollapsibleTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiCollapsibleTrigger,
+		isStandalone: true,
+		selector: "[uiCollapsibleTrigger], ui-collapsible-trigger",
+		host: {
+			attributes: { "data-slot": "collapsible-trigger" },
+			listeners: { "click": "root.toggle()" },
+			properties: {
+				"attr.aria-controls": "root.contentId",
+				"attr.aria-expanded": "root.open()",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\"",
+				"attr.data-disabled": "root.disabled() ? \"\" : null",
+				"attr.disabled": "root.disabled() ? \"\" : null"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCollapsibleTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCollapsibleTrigger], ui-collapsible-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "collapsible-trigger",
+				"[attr.aria-controls]": "root.contentId",
+				"[attr.aria-expanded]": "root.open()",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"[attr.data-disabled]": "root.disabled() ? \"\" : null",
+				"[attr.disabled]": "root.disabled() ? \"\" : null",
+				"(click)": "root.toggle()"
+			}
+		}]
+	}]
+});
+var UiCollapsibleContent = class UiCollapsibleContent {
+	root = inject(UiCollapsible);
+	el = inject(ElementRef).nativeElement;
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	present = signal(false, ...ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(collapsibleContentClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const open = this.root.open();
+			untracked(() => {
+				if (open) {
+					this.present.set(true);
+					setTimeout(() => this.setHeight(), 0);
+				} else if (this.present()) {
+					this.setHeight();
+					whenAnimationDone(this.el, 300).then(() => !this.root.open() && this.present.set(false));
+				}
+			});
+		});
+	}
+	setHeight() {
+		this.el.style.setProperty("--radix-collapsible-content-height", `${this.el.scrollHeight}px`);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCollapsibleContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCollapsibleContent,
+		isStandalone: true,
+		selector: "[uiCollapsibleContent], ui-collapsible-content",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "collapsible-content" },
+			properties: {
+				"id": "root.contentId",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\"",
+				"attr.data-disabled": "root.disabled() ? \"\" : null",
+				"hidden": "!present()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCollapsibleContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCollapsibleContent], ui-collapsible-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "collapsible-content",
+				"[id]": "root.contentId",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"[attr.data-disabled]": "root.disabled() ? \"\" : null",
+				"[hidden]": "!present()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_COLLAPSIBLE = [
+	UiCollapsible,
+	UiCollapsibleTrigger,
+	UiCollapsibleContent
+];
+export { UI_COLLAPSIBLE, UI_COLLAPSIBLE_GENERATED, UiCollapsible, UiCollapsibleContent, UiCollapsibleTrigger, collapsibleClass, collapsibleContentClass };
+
+//# sourceMappingURL=loomui-ng-ui-collapsible.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-collapsible.mjs","names":[],"sources":["../../../libs/ui/collapsible/collapsible.ts","../../../libs/ui/collapsible/collapsible.manual.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/collapsible.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./collapsible.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\n\nexport const collapsibleClass =\n  'flex gap-2';\n\nexport const collapsibleContentClass =\n  'flex flex-col gap-2';\n\nexport const UI_COLLAPSIBLE_GENERATED = [] as const;\n","import {\n  booleanAttribute,\n  computed,\n  Directive,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { nextId, whenAnimationDone } from '@loomui-ng/ui/utils';\nimport { collapsibleClass, collapsibleContentClass } from './collapsible';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiCollapsible [(open)]=\"o\">\n *   <button uiCollapsibleTrigger>Toggle</button>\n *   <div uiCollapsibleContent>…</div>\n * </div>\n */\n@Directive({\n  selector: '[uiCollapsible], ui-collapsible', hostDirectives: [UiElementHost],\n  exportAs: 'uiCollapsible',\n  host: {\n    'data-slot': 'collapsible',\n    '[attr.data-state]': 'open() ? \"open\" : \"closed\"',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiCollapsible {\n  readonly open = model(false);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  readonly contentId = nextId('ui-collapsible');\n  protected readonly classes = computed(() => cn(collapsibleClass, this.userClass()));\n  toggle(): void {\n    if (!this.disabled()) this.open.update((v) => !v);\n  }\n}\n\n@Directive({\n  selector: '[uiCollapsibleTrigger], ui-collapsible-trigger', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'collapsible-trigger',\n    '[attr.aria-controls]': 'root.contentId',\n    '[attr.aria-expanded]': 'root.open()',\n    '[attr.data-state]': 'root.open() ? \"open\" : \"closed\"',\n    '[attr.data-disabled]': 'root.disabled() ? \"\" : null',\n    '[attr.disabled]': 'root.disabled() ? \"\" : null',\n    '(click)': 'root.toggle()',\n  },\n})\nexport class UiCollapsibleTrigger {\n  protected readonly root = inject(UiCollapsible);\n}\n\n@Directive({\n  selector: '[uiCollapsibleContent], ui-collapsible-content', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'collapsible-content',\n    '[id]': 'root.contentId',\n    '[attr.data-state]': 'root.open() ? \"open\" : \"closed\"',\n    '[attr.data-disabled]': 'root.disabled() ? \"\" : null',\n    '[hidden]': '!present()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiCollapsibleContent {\n  protected readonly root = inject(UiCollapsible);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly present = signal(false);\n  protected readonly classes = computed(() => cn(collapsibleContentClass, this.userClass()));\n\n  constructor() {\n    effect(() => {\n      const open = this.root.open();\n      untracked(() => {\n        if (open) {\n          this.present.set(true);\n          setTimeout(() => this.setHeight(), 0);\n        } else if (this.present()) {\n          this.setHeight();\n          void whenAnimationDone(this.el, 300).then(() => !this.root.open() && this.present.set(false));\n        }\n      });\n    });\n  }\n\n  private setHeight(): void {\n    this.el.style.setProperty('--radix-collapsible-content-height', `${this.el.scrollHeight}px`);\n  }\n}\n\nexport const UI_COLLAPSIBLE = [UiCollapsible, UiCollapsibleTrigger, UiCollapsibleContent] as const;\n"],"mappings":"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"}