@ojiepermana/angular 22.1.14 → 22.2.0

package/fesm2022/ojiepermana-angular-component-checkbox.mjs

@@ -1,91 +1,189 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, viewChild, signal, computed, forwardRef, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
-
-/**
- * Checkbox built on a native `<input type="checkbox">` (shadcn pattern) — no
- * Material dependency. Projected content renders as the clickable label.
- */
-class CheckboxComponent {
-    id = input(injectUniqueId('Checkbox'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    name = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    indeterminate = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
-    required = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
-    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    ariaInvalid = input(null, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid' });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    checkedChange = output();
-    ref = viewChild.required('ref', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
-    checked = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-    disabledState = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
-    ariaInvalidAttr = computed(() => {
-        const value = this.ariaInvalid();
-        if (value === false || value === 'false' || value == null) {
-            return null;
-        }
-        return value === true || value === '' ? 'true' : `${value}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.disabledState(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn('Checkbox inline-flex', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    labelClasses = computed(() => cn('inline-flex select-none items-center gap-2 text-sm font-medium leading-none', this.isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
-    boxClasses = computed(() => cn('inline-flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-sm transition-colors', 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background', this.invalid()
-        ? 'border-destructive'
-        : this.checked() || this.indeterminate()
-            ? 'border-primary'
-            : 'border-input', this.checked() || this.indeterminate()
-        ? this.invalid()
-            ? 'bg-destructive text-destructive-foreground'
-            : 'bg-primary text-primary-foreground'
-        : 'bg-background'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
-    invalid = computed(() => this.ariaInvalidAttr() === 'true', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-    onChange = () => { };
-    onTouched = () => { };
-    handleChange(event) {
-        const next = event.target.checked;
-        this.checked.set(next);
-        this.onChange(next);
-        this.checkedChange.emit(next);
-    }
-    handleBlur() {
-        this.onTouched();
-    }
-    focus() {
-        this.ref().nativeElement.focus();
-    }
-    writeValue(v) {
-        this.checked.set(!!v);
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(d) {
-        this.disabledState.set(d);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: CheckboxComponent, isStandalone: true, selector: "Checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true },
-        ], viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, forwardRef, input, model, output, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+var CheckboxComponent = class CheckboxComponent {
+	id = input(injectUniqueId("Checkbox"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	name = input("", {
+		...ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {},
+		transform: (value) => value == null ? "" : String(value)
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	indeterminate = input(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaDescribedby = input(null, {
+		...ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {},
+		alias: "aria-describedby"
+	});
+	ariaLabelledby = input(null, {
+		...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	ariaInvalid = input(null, {
+		...ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {},
+		alias: "aria-invalid"
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	checkedChange = this.checked;
+	touch = output();
+	ref = viewChild.required("ref", ...ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []);
+	disabledState = signal(false, ...ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []);
+	ariaInvalidAttr = computed(() => {
+		const value = this.ariaInvalid();
+		if (value === false || value === "false" || value == null) return null;
+		return value === true || value === "" ? "true" : `${value}`;
+	}, ...ngDevMode ? [{ debugName: "ariaInvalidAttr" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.disabledState(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("Checkbox inline-flex", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	labelClasses = computed(() => cn("inline-flex select-none items-center gap-2 text-sm font-medium leading-none", this.isDisabled() ? "cursor-not-allowed opacity-50" : "cursor-pointer"), ...ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []);
+	boxClasses = computed(() => cn("inline-flex size-4 shrink-0 items-center justify-center rounded-sm border shadow-sm transition-colors", "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background", this.isInvalid() ? "border-destructive" : this.checked() || this.indeterminate() ? "border-primary" : "border-input", this.checked() || this.indeterminate() ? this.isInvalid() ? "bg-destructive text-destructive-foreground" : "bg-primary text-primary-foreground" : "bg-background"), ...ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []);
+	isInvalid = computed(() => this.ariaInvalidAttr() === "true", ...ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	handleChange(event) {
+		const next = event.target.checked;
+		this.checked.set(next);
+		this.onChange(next);
+	}
+	handleBlur() {
+		this.onTouched();
+		this.touch.emit();
+	}
+	focus() {
+		this.ref().nativeElement.focus();
+	}
+	writeValue(v) {
+		this.checked.set(!!v);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.disabledState.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CheckboxComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: CheckboxComponent,
+		isStandalone: true,
+		selector: "Checkbox",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indeterminate: {
+				classPropertyName: "indeterminate",
+				publicName: "indeterminate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaDescribedby: {
+				classPropertyName: "ariaDescribedby",
+				publicName: "aria-describedby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaInvalid: {
+				classPropertyName: "ariaInvalid",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			touch: "touch"
+		},
+		host: { properties: { "class": "hostClasses()" } },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => CheckboxComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "ref",
+			first: true,
+			predicate: ["ref"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <label [class]="labelClasses()" [attr.for]="id()">
       <input
         #ref
@@ -129,17 +227,26 @@ class CheckboxComponent {
       </span>
       <ng-content />
     </label>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Checkbox',
-                    providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true },
-                    ],
-                    host: { '[class]': 'hostClasses()' },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CheckboxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Checkbox",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => CheckboxComponent),
+				multi: true
+			}],
+			host: { "[class]": "hostClasses()" },
+			template: `
     <label [class]="labelClasses()" [attr.for]="id()">
       <input
         #ref
@@ -183,12 +290,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       </span>
       <ng-content />
     </label>
-  `,
-                }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CheckboxComponent };
+  `
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		indeterminate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indeterminate",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaDescribedby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-describedby",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}],
+		ariaInvalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		ref: [{
+			type: i0.ViewChild,
+			args: ["ref", { isSignal: true }]
+		}]
+	}
+});
+export { CheckboxComponent };