@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,286 @@
+import * as i0 from "@angular/core";
+import { Directive, computed, input } from "@angular/core";
+import { cva } from "class-variance-authority";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>ui-icon]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 has-[>ui-icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 bg-card text-card-foreground", {
+	variants: { variant: {
+		default: "",
+		destructive: "text-destructive *:data-[slot=alert-description]:text-destructive/90"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var UiAlert = class UiAlert {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(alertVariants({ variant: this.variant() }), this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiAlert,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiAlert,
+		isStandalone: true,
+		selector: "[uiAlert], ui-alert",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"data-slot": "alert",
+				"role": "alert"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiAlert,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiAlert], ui-alert",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "alert",
+				"role": "alert",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiAlertTitle = class UiAlertTitle {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("font-medium group-has-[>svg]/alert:col-start-2 group-has-[>ui-icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiAlertTitle,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiAlertTitle,
+		isStandalone: true,
+		selector: "[uiAlertTitle], ui-alert-title",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "alert-title" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiAlertTitle,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiAlertTitle], ui-alert-title",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "alert-title",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiAlertDescription = class UiAlertDescription {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiAlertDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiAlertDescription,
+		isStandalone: true,
+		selector: "[uiAlertDescription], ui-alert-description",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "alert-description" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiAlertDescription,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiAlertDescription], ui-alert-description",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "alert-description",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiAlertAction = class UiAlertAction {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("absolute top-2 end-2", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiAlertAction,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiAlertAction,
+		isStandalone: true,
+		selector: "[uiAlertAction], ui-alert-action",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "alert-action" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiAlertAction,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiAlertAction], ui-alert-action",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "alert-action",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+const UI_ALERT_GENERATED = [
+	UiAlert,
+	UiAlertTitle,
+	UiAlertDescription,
+	UiAlertAction
+];
+const UI_ALERT = UI_ALERT_GENERATED;
+export { UI_ALERT, UI_ALERT_GENERATED, UiAlert, UiAlertAction, UiAlertDescription, UiAlertTitle, alertVariants };
+
+//# sourceMappingURL=loomui-ng-ui-alert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-alert.mjs","names":[],"sources":["../../../libs/ui/alert/alert.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/alert.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./alert.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nexport const alertVariants = cva('group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>ui-icon]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 has-[>ui-icon]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\\'size-\\'])]:size-4 bg-card text-card-foreground', {\n  variants: {\n    variant: {\n      default: '',\n      destructive: 'text-destructive *:data-[slot=alert-description]:text-destructive/90',\n    },\n  },\n  defaultVariants: { variant: 'default' },\n});\n\n@Directive({\n  selector: '[uiAlert], ui-alert', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'alert',\n    'role': 'alert',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiAlert {\n  readonly variant = input<'default' | 'destructive'>('default');\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(alertVariants({ variant: this.variant() }), this.userClass()));\n}\n\n@Directive({\n  selector: '[uiAlertTitle], ui-alert-title', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'alert-title',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiAlertTitle {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('font-medium group-has-[>svg]/alert:col-start-2 group-has-[>ui-icon]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiAlertDescription], ui-alert-description', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'alert-description',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiAlertDescription {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4', this.userClass()));\n}\n\n@Directive({\n  selector: '[uiAlertAction], ui-alert-action', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'alert-action',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiAlertAction {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn('absolute top-2 end-2', this.userClass()));\n}\n\nexport const UI_ALERT_GENERATED = [UiAlert, UiAlertTitle, UiAlertDescription, UiAlertAction] as const;\nexport const UI_ALERT = UI_ALERT_GENERATED;\n"],"mappings":"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"}

package/fesm2022/loomui-ng-ui-aspect-ratio.mjs

@@ -0,0 +1,97 @@
+import * as i0 from "@angular/core";
+import { Directive, computed, input, numberAttribute } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+const aspectRatioClass = "";
+const UI_ASPECT_RATIO_GENERATED = [];
+var UiAspectRatio = class UiAspectRatio {
+	ratio = input(1, {
+		...ngDevMode ? { debugName: "ratio" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiAspectRatio,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiAspectRatio,
+		isStandalone: true,
+		selector: "[uiAspectRatio], ui-aspect-ratio",
+		inputs: {
+			ratio: {
+				classPropertyName: "ratio",
+				publicName: "ratio",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "aspect-ratio" },
+			properties: {
+				"style.aspect-ratio": "ratio()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiAspectRatio,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiAspectRatio], ui-aspect-ratio",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "aspect-ratio",
+				"[style.aspect-ratio]": "ratio()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		ratio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ratio",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_ASPECT_RATIO = [UiAspectRatio];
+export { UI_ASPECT_RATIO, UI_ASPECT_RATIO_GENERATED, UiAspectRatio, aspectRatioClass };
+
+//# sourceMappingURL=loomui-ng-ui-aspect-ratio.mjs.map

package/fesm2022/loomui-ng-ui-aspect-ratio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-aspect-ratio.mjs","names":[],"sources":["../../../libs/ui/aspect-ratio/aspect-ratio.ts","../../../libs/ui/aspect-ratio/aspect-ratio.manual.ts"],"sourcesContent":["// GENERATED by tools/gen-ui.mjs from docs/evidence/slots/aspect-ratio.json.\n// Change tools/ui-specs.mjs and regenerate; hand-written parts live in ./aspect-ratio.manual.ts.\nimport { Directive, computed, input } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\n\nexport const aspectRatioClass =\n  '';\n\nexport const UI_ASPECT_RATIO_GENERATED = [] as const;\n","import { computed, Directive, input, numberAttribute } from '@angular/core';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { aspectRatioClass } from './aspect-ratio';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\n/**\n * <div uiAspectRatio [ratio]=\"16 / 9\"><img class=\"size-full object-cover\" … /></div>\n * Uses the CSS `aspect-ratio` property (Radix uses a padding-bottom wrapper; the visible result is the same).\n */\n@Directive({\n  selector: '[uiAspectRatio], ui-aspect-ratio', hostDirectives: [UiElementHost],\n  host: {\n    'data-slot': 'aspect-ratio',\n    '[style.aspect-ratio]': 'ratio()',\n    '[attr.class]': 'classes()',\n  },\n})\nexport class UiAspectRatio {\n  readonly ratio = input(1, { transform: numberAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(aspectRatioClass, this.userClass()));\n}\n\nexport const UI_ASPECT_RATIO = [UiAspectRatio] as const;\n"],"mappings":";;;;AAKA,MAAa,mBACX;AAEF,MAAa,4BAA4B,CAAA;ACSzC,IAAa,gBAAb,MAAa,cAAa;CACf,QAAQ,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,QAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAC7C,YAAY,MAAc,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,YAAA,+BAAA,CAAA;EAAI,OAAO;CAAO,CAAA;CACpC,UAAU,eAAe,GAAA,IAAqB,KAAK,UAAS,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAHxE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;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,EAAA,aAAA,eAAA;GAAA,YAAA;IAAA,sBAAA;IAAA,cAAA;GAAA;EAAA;EAAA,gBAAA,CAAA,EAAA,WAAA,GAAA,cAAA,CAAA;EAAA,UAAA;CAAA,CAAA;;AAAb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GAAoC,gBAAgB,CAAC,aAAa;GAC5E,MAAM;IACJ,aAAa;IACb,wBAAwB;IACxB,gBAAgB;GACjB;EACF,CAAA;;;;;;;;;;;;;;;;;;;;;AAOD,MAAa,kBAAkB,CAAC,aAAa"}