@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,289 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, booleanAttribute, computed, forwardRef, input } from "@angular/core";
+import { UiNativeControl, cn } from "@loomui-ng/ui/utils";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+const inputClasses = "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+var UiInput = class UiInput {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(inputClasses, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiInput,
+		isStandalone: true,
+		selector: "input[uiInput]",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "input" },
+			properties: { "attr.class": "classes()" }
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[uiInput]",
+			host: {
+				"data-slot": "input",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiInputElement = class UiInputElement extends UiNativeControl {
+	type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	step = input(null, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	pattern = input("", ...ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []);
+	maxlength = input(null, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
+	minlength = input(null, ...ngDevMode ? [{ debugName: "minlength" }] : /* istanbul ignore next */ []);
+	accept = input("", ...ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []);
+	inputmode = input("", ...ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []);
+	multiple = input(false, {
+		...ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiInputElement,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiInputElement,
+		isStandalone: true,
+		selector: "ui-input",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pattern: {
+				classPropertyName: "pattern",
+				publicName: "pattern",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxlength: {
+				classPropertyName: "maxlength",
+				publicName: "maxlength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minlength: {
+				classPropertyName: "minlength",
+				publicName: "minlength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			accept: {
+				classPropertyName: "accept",
+				publicName: "accept",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputmode: {
+				classPropertyName: "inputmode",
+				publicName: "inputmode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			multiple: {
+				classPropertyName: "multiple",
+				publicName: "multiple",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "contents" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiInputElement),
+			multi: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<input #control uiInput [class]="userClass()" [type]="type()" [attr.id]="id() || null" [attr.name]="name() || null" [attr.placeholder]="placeholder() || null" [value]="current()" [disabled]="isDisabled()" [readOnly]="readonly()" [required]="required()" [attr.autocomplete]="autocomplete() || null" [attr.aria-label]="ariaLabel() || null" [attr.aria-describedby]="ariaDescribedby() || null" [attr.aria-invalid]="invalid() ? 'true' : null" (input)="onInput($event)" (blur)="onTouched()" [attr.min]="min() ?? null" [attr.max]="max() ?? null" [attr.step]="step() ?? null" [attr.pattern]="pattern() || null" [attr.maxlength]="maxlength() ?? null" [attr.minlength]="minlength() ?? null" [attr.accept]="accept() || null" [attr.inputmode]="inputmode() || null" [multiple]="multiple()" />`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiInput,
+			selector: "input[uiInput]",
+			inputs: ["class"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiInputElement,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-input",
+			imports: [UiInput],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiInputElement),
+				multi: true
+			}],
+			host: { class: "contents" },
+			template: `<input #control uiInput [class]="userClass()" [type]="type()" [attr.id]="id() || null" [attr.name]="name() || null" [attr.placeholder]="placeholder() || null" [value]="current()" [disabled]="isDisabled()" [readOnly]="readonly()" [required]="required()" [attr.autocomplete]="autocomplete() || null" [attr.aria-label]="ariaLabel() || null" [attr.aria-describedby]="ariaDescribedby() || null" [attr.aria-invalid]="invalid() ? 'true' : null" (input)="onInput($event)" (blur)="onTouched()" [attr.min]="min() ?? null" [attr.max]="max() ?? null" [attr.step]="step() ?? null" [attr.pattern]="pattern() || null" [attr.maxlength]="maxlength() ?? null" [attr.minlength]="minlength() ?? null" [attr.accept]="accept() || null" [attr.inputmode]="inputmode() || null" [multiple]="multiple()" />`
+		}]
+	}],
+	propDecorators: {
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		pattern: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pattern",
+				required: false
+			}]
+		}],
+		maxlength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxlength",
+				required: false
+			}]
+		}],
+		minlength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minlength",
+				required: false
+			}]
+		}],
+		accept: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "accept",
+				required: false
+			}]
+		}],
+		inputmode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputmode",
+				required: false
+			}]
+		}],
+		multiple: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "multiple",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_INPUT = [UiInput, UiInputElement];
+export { UI_INPUT, UiInput, UiInputElement, inputClasses };
+
+//# sourceMappingURL=loomui-ng-ui-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-input.mjs","names":[],"sources":["../../../libs/ui/input/input.ts"],"sourcesContent":["import { computed, Directive, input, ChangeDetectionStrategy, Component, forwardRef, booleanAttribute } from '@angular/core';\nimport { cn, UiNativeControl } from '@loomui-ng/ui/utils';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const inputClasses =\n  'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40';\n\n/**\n * <input uiInput />\n * Styles a native <input>, so ngModel, reactive forms and signal forms (`[field]`) work unchanged.\n */\n@Directive({\n  selector: 'input[uiInput]',\n  host: { 'data-slot': 'input', '[attr.class]': 'classes()' },\n})\nexport class UiInput {\n  readonly userClass = input<string>('', { alias: 'class' });\n  protected readonly classes = computed(() => cn(inputClasses, this.userClass()));\n}\n\n/**\n * <ui-input type=\"email\" placeholder=\"you@example.com\" [(ngModel)]=\"email\" />\n * Custom-element form of `<input uiInput>`: a real input lives inside, so ngModel / reactive forms work.\n */\n@Component({\n  selector: 'ui-input',\n  imports: [UiInput],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiInputElement), multi: true }],\n  host: { class: 'contents' },\n  template: `<input #control uiInput [class]=\"userClass()\" [type]=\"type()\" [attr.id]=\"id() || null\" [attr.name]=\"name() || null\" [attr.placeholder]=\"placeholder() || null\" [value]=\"current()\" [disabled]=\"isDisabled()\" [readOnly]=\"readonly()\" [required]=\"required()\" [attr.autocomplete]=\"autocomplete() || null\" [attr.aria-label]=\"ariaLabel() || null\" [attr.aria-describedby]=\"ariaDescribedby() || null\" [attr.aria-invalid]=\"invalid() ? 'true' : null\" (input)=\"onInput($event)\" (blur)=\"onTouched()\" [attr.min]=\"min() ?? null\" [attr.max]=\"max() ?? null\" [attr.step]=\"step() ?? null\" [attr.pattern]=\"pattern() || null\" [attr.maxlength]=\"maxlength() ?? null\" [attr.minlength]=\"minlength() ?? null\" [attr.accept]=\"accept() || null\" [attr.inputmode]=\"inputmode() || null\" [multiple]=\"multiple()\" />`,\n})\nexport class UiInputElement extends UiNativeControl {\n  readonly type = input<string>('text');\n  readonly min = input<string | number | null>(null);\n  readonly max = input<string | number | null>(null);\n  readonly step = input<string | number | null>(null);\n  readonly pattern = input<string>('');\n  readonly maxlength = input<number | null>(null);\n  readonly minlength = input<number | null>(null);\n  readonly accept = input<string>('');\n  readonly inputmode = input<string>('');\n  readonly multiple = input(false, { transform: booleanAttribute });\n}\n\nexport const UI_INPUT = [UiInput, UiInputElement] as const;\n"],"mappings":"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"}