@masmarino/gabarit 2.0.0 → 2.1.1

package/fesm2022/masmarino-gabarit-input.mjs

@@ -0,0 +1,493 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, output, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Icon } from "@masmarino/gabarit/icon";
+let nextInputId = 0;
+var GbtInput = class GbtInput {
+	id = input(`gbt-input-${++nextInputId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	type = input("text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	autocomplete = input("off", ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+	hint = input("", ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	hideLabel = input(false, {
+		...ngDevMode ? { debugName: "hideLabel" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	mono = input(false, {
+		...ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	leadingIcon = input(null, ...ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []);
+	inputmode = input(null, ...ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []);
+	spellcheck = input(null, ...ngDevMode ? [{ debugName: "spellcheck" }] : /* istanbul ignore next */ []);
+	autocapitalize = input(null, ...ngDevMode ? [{ debugName: "autocapitalize" }] : /* istanbul ignore next */ []);
+	enterkeyhint = input(null, ...ngDevMode ? [{ debugName: "enterkeyhint" }] : /* istanbul ignore next */ []);
+	maxlength = input(null, ...ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []);
+	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	combobox = input(null, ...ngDevMode ? [{ debugName: "combobox" }] : /* istanbul ignore next */ []);
+	showPasswordLabel = input("Show password", ...ngDevMode ? [{ debugName: "showPasswordLabel" }] : /* istanbul ignore next */ []);
+	hidePasswordLabel = input("Hide password", ...ngDevMode ? [{ debugName: "hidePasswordLabel" }] : /* istanbul ignore next */ []);
+	committed = output();
+	value = signal("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	passwordVisible = signal(false, ...ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []);
+	effectiveType = computed(() => {
+		if (this.type() !== "password") return this.type();
+		return this.passwordVisible() ? "text" : "password";
+	}, ...ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []);
+	hintId = computed(() => `${this.id()}-hint`, ...ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []);
+	errorId = computed(() => `${this.id()}-error`, ...ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []);
+	showHint = computed(() => !!this.hint() && !this.errorMessage(), ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		if (this.errorMessage()) return this.errorId();
+		return this.showHint() ? this.hintId() : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	writeValue(value) {
+		this.value.set(value ?? "");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	onInput(event) {
+		const value = event.target.value;
+		this.value.set(value);
+		this.onChange(value);
+	}
+	onBlur() {
+		this.onTouched();
+		this.committed.emit(this.value());
+	}
+	togglePasswordVisibility() {
+		this.passwordVisible.update((visible) => !visible);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: GbtInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: GbtInput,
+		isStandalone: true,
+		selector: "gbt-input",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocomplete: {
+				classPropertyName: "autocomplete",
+				publicName: "autocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideLabel: {
+				classPropertyName: "hideLabel",
+				publicName: "hideLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mono: {
+				classPropertyName: "mono",
+				publicName: "mono",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			leadingIcon: {
+				classPropertyName: "leadingIcon",
+				publicName: "leadingIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputmode: {
+				classPropertyName: "inputmode",
+				publicName: "inputmode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spellcheck: {
+				classPropertyName: "spellcheck",
+				publicName: "spellcheck",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocapitalize: {
+				classPropertyName: "autocapitalize",
+				publicName: "autocapitalize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			enterkeyhint: {
+				classPropertyName: "enterkeyhint",
+				publicName: "enterkeyhint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxlength: {
+				classPropertyName: "maxlength",
+				publicName: "maxlength",
+				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
+			},
+			combobox: {
+				classPropertyName: "combobox",
+				publicName: "combobox",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showPasswordLabel: {
+				classPropertyName: "showPasswordLabel",
+				publicName: "showPasswordLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hidePasswordLabel: {
+				classPropertyName: "hidePasswordLabel",
+				publicName: "hidePasswordLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { committed: "committed" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => GbtInput),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.role]=\"combobox() ? 'combobox' : null\"\n      [attr.aria-autocomplete]=\"combobox() ? 'list' : null\"\n      [attr.aria-expanded]=\"combobox()?.expanded ?? null\"\n      [attr.aria-controls]=\"combobox()?.controls ?? null\"\n      [attr.aria-activedescendant]=\"combobox()?.activeDescendant ?? null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"gbt-input__toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordVisible() ? hidePasswordLabel() : showPasswordLabel()\"\n      >\n        <gbt-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" aria-hidden=\"true\" />\n      </button>\n    }\n  </div>\n  @if (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		styles: [":host{display:block}.gbt-input{display:flex;flex-direction:column;gap:.375rem}.gbt-input label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-input__wrapper{position:relative;display:flex;align-items:center}.gbt-input input{box-sizing:border-box;width:100%;height:var(--gbt-control-height-md);padding:0 .75rem;font-family:var(--font-family);font-size:.875rem;color:var(--text-primary);background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);transition:border-color var(--site-transition-fast)}.gbt-input input:focus{outline:none;border-color:var(--primary)}.gbt-input input:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:1px}.gbt-input input:disabled{background:var(--bg-panel);cursor:not-allowed}.gbt-input input[type=search]{-webkit-appearance:none;appearance:none}.gbt-input__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-input__hint{margin:0;font-size:.75rem;color:var(--text-secondary)}.gbt-input__leading{position:absolute;left:.75rem;display:inline-flex;font-size:.875rem;color:var(--text-discret);pointer-events:none}.gbt-input--leading input{padding-left:2.25rem}.gbt-input--mono input{font-family:var(--gbt-font-mono, \"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace),serif;font-size:.8125rem}.gbt-input--sm input{height:var(--gbt-control-height-sm);padding:0 .625rem;font-size:.8125rem}.gbt-input--sm .gbt-input__leading{left:.625rem;font-size:.8125rem}.gbt-input--sm.gbt-input--mono input{font-size:.75rem}.gbt-input--sm.gbt-input--leading input{padding-left:2rem}.gbt-input__toggle{position:absolute;right:.5rem;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;background:none;border:none;color:var(--text-discret);cursor:pointer}.gbt-input__toggle:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-input__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: GbtInput,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-input",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => GbtInput),
+				multi: true
+			}],
+			template: "<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.role]=\"combobox() ? 'combobox' : null\"\n      [attr.aria-autocomplete]=\"combobox() ? 'list' : null\"\n      [attr.aria-expanded]=\"combobox()?.expanded ?? null\"\n      [attr.aria-controls]=\"combobox()?.controls ?? null\"\n      [attr.aria-activedescendant]=\"combobox()?.activeDescendant ?? null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"gbt-input__toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordVisible() ? hidePasswordLabel() : showPasswordLabel()\"\n      >\n        <gbt-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" aria-hidden=\"true\" />\n      </button>\n    }\n  </div>\n  @if (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			styles: [":host{display:block}.gbt-input{display:flex;flex-direction:column;gap:.375rem}.gbt-input label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-input__wrapper{position:relative;display:flex;align-items:center}.gbt-input input{box-sizing:border-box;width:100%;height:var(--gbt-control-height-md);padding:0 .75rem;font-family:var(--font-family);font-size:.875rem;color:var(--text-primary);background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);transition:border-color var(--site-transition-fast)}.gbt-input input:focus{outline:none;border-color:var(--primary)}.gbt-input input:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:1px}.gbt-input input:disabled{background:var(--bg-panel);cursor:not-allowed}.gbt-input input[type=search]{-webkit-appearance:none;appearance:none}.gbt-input__label--hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gbt-input__hint{margin:0;font-size:.75rem;color:var(--text-secondary)}.gbt-input__leading{position:absolute;left:.75rem;display:inline-flex;font-size:.875rem;color:var(--text-discret);pointer-events:none}.gbt-input--leading input{padding-left:2.25rem}.gbt-input--mono input{font-family:var(--gbt-font-mono, \"IBM Plex Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace),serif;font-size:.8125rem}.gbt-input--sm input{height:var(--gbt-control-height-sm);padding:0 .625rem;font-size:.8125rem}.gbt-input--sm .gbt-input__leading{left:.625rem;font-size:.8125rem}.gbt-input--sm.gbt-input--mono input{font-size:.75rem}.gbt-input--sm.gbt-input--leading input{padding-left:2rem}.gbt-input__toggle{position:absolute;right:.5rem;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;background:none;border:none;color:var(--text-discret);cursor:pointer}.gbt-input__toggle:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-input__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		hideLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideLabel",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		mono: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mono",
+				required: false
+			}]
+		}],
+		leadingIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "leadingIcon",
+				required: false
+			}]
+		}],
+		inputmode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputmode",
+				required: false
+			}]
+		}],
+		spellcheck: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spellcheck",
+				required: false
+			}]
+		}],
+		autocapitalize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocapitalize",
+				required: false
+			}]
+		}],
+		enterkeyhint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enterkeyhint",
+				required: false
+			}]
+		}],
+		maxlength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxlength",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		combobox: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "combobox",
+				required: false
+			}]
+		}],
+		showPasswordLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showPasswordLabel",
+				required: false
+			}]
+		}],
+		hidePasswordLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hidePasswordLabel",
+				required: false
+			}]
+		}],
+		committed: [{
+			type: i0.Output,
+			args: ["committed"]
+		}]
+	}
+});
+export { GbtInput };
+
+//# sourceMappingURL=masmarino-gabarit-input.mjs.map

package/fesm2022/masmarino-gabarit-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-input.mjs","names":[],"sources":["../../../projects/gabarit/input/input.ts","../../../projects/gabarit/input/input.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nlet nextInputId = 0\n\nexport type InputType = 'text' | 'password' | 'email' | 'number' | 'search' | 'url'\nexport type InputSize = 'md' | 'sm'\nexport type InputInputmode =\n  'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'\nexport type InputAutocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'\nexport type InputEnterkeyhint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'\n\n/** Makes the field the combobox of a suggestion list the caller renders, with its keys and active option. */\nexport interface InputCombobox {\n  /** Whether the listbox is shown. */\n  expanded: boolean\n  /** The id of the listbox. */\n  controls: string\n  /** The id of the highlighted option, `null` when none is. */\n  activeDescendant: string | null\n}\n\n@Component({\n  selector: 'gbt-input',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './input.html',\n  styleUrl: './input.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => GbtInput),\n      multi: true,\n    },\n  ],\n})\nexport class GbtInput implements ControlValueAccessor {\n  id = input<string>(`gbt-input-${++nextInputId}`)\n  label = input<string>('')\n  type = input<InputType>('text')\n  required = input(false, { transform: booleanAttribute })\n  disabled = input(false, { transform: booleanAttribute })\n  placeholder = input<string>('')\n  errorMessage = input<string | null>(null)\n  autocomplete = input<string>('off')\n\n  hint = input<string>('')\n  hideLabel = input(false, { transform: booleanAttribute })\n  size = input<InputSize>('md')\n  mono = input(false, { transform: booleanAttribute })\n  leadingIcon = input<string | null>(null)\n  inputmode = input<InputInputmode | null>(null)\n  spellcheck = input<boolean | null>(null)\n  autocapitalize = input<InputAutocapitalize | null>(null)\n  enterkeyhint = input<InputEnterkeyhint | null>(null)\n  maxlength = input<number | null>(null)\n  min = input<number | string | null>(null)\n  max = input<number | string | null>(null)\n\n  combobox = input<InputCombobox | null>(null)\n\n  showPasswordLabel = input<string>('Show password')\n\n  hidePasswordLabel = input<string>('Hide password')\n\n  committed = output<string>()\n\n  protected readonly value = signal('')\n  protected readonly passwordVisible = signal(false)\n  protected readonly effectiveType = computed(() => {\n    if (this.type() !== 'password') {\n      return this.type()\n    }\n    return this.passwordVisible() ? 'text' : 'password'\n  })\n\n  protected readonly hintId = computed(() => `${this.id()}-hint`)\n  protected readonly errorId = computed(() => `${this.id()}-error`)\n  protected readonly showHint = computed(() => !!this.hint() && !this.errorMessage())\n  protected readonly describedBy = computed(() => {\n    if (this.errorMessage()) {\n      return this.errorId()\n    }\n    return this.showHint() ? this.hintId() : null\n  })\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  private onChange: (value: string) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  writeValue(value: string): void {\n    this.value.set(value ?? '')\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled)\n  }\n\n  protected onInput(event: Event): void {\n    const value = (event.target as HTMLInputElement).value\n    this.value.set(value)\n    this.onChange(value)\n  }\n\n  protected onBlur(): void {\n    this.onTouched()\n    this.committed.emit(this.value())\n  }\n\n  protected togglePasswordVisibility(): void {\n    this.passwordVisible.update((visible) => !visible)\n  }\n}\n","<div\n  class=\"gbt-input\"\n  [class.gbt-input--sm]=\"size() === 'sm'\"\n  [class.gbt-input--mono]=\"mono()\"\n  [class.gbt-input--leading]=\"!!leadingIcon()\"\n>\n  @if (label()) {\n    <label [for]=\"id()\" [class.gbt-input__label--hidden]=\"hideLabel()\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-input__wrapper\">\n    @if (leadingIcon(); as icon) {\n      <span class=\"gbt-input__leading\" aria-hidden=\"true\">\n        <gbt-icon [name]=\"icon\" />\n      </span>\n    }\n    <input\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [disabled]=\"isDisabled()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.spellcheck]=\"spellcheck()\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.enterkeyhint]=\"enterkeyhint()\"\n      [attr.maxlength]=\"maxlength()\"\n      [attr.min]=\"min()\"\n      [attr.max]=\"max()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.role]=\"combobox() ? 'combobox' : null\"\n      [attr.aria-autocomplete]=\"combobox() ? 'list' : null\"\n      [attr.aria-expanded]=\"combobox()?.expanded ?? null\"\n      [attr.aria-controls]=\"combobox()?.controls ?? null\"\n      [attr.aria-activedescendant]=\"combobox()?.activeDescendant ?? null\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n    @if (type() === 'password') {\n      <button\n        type=\"button\"\n        class=\"gbt-input__toggle\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"passwordVisible() ? hidePasswordLabel() : showPasswordLabel()\"\n      >\n        <gbt-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" aria-hidden=\"true\" />\n      </button>\n    }\n  </div>\n  @if (showHint()) {\n    <p [id]=\"hintId()\" class=\"gbt-input__hint\">{{ hint() }}</p>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"errorId()\" class=\"gbt-input__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n"],"mappings":"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"}