@magmonium/one 0.4.29 → 0.4.31

package/fesm2022/magmonium-one-text-FXb-RyBh.mjs

@@ -0,0 +1,406 @@
+import { t as __exportAll } from "./magmonium-one-rolldown-runtime-DpJrqANO.mjs";
+import { c as TranslatePipe } from "./magmonium-one-size-converter-B-UubQQ0.mjs";
+import { t as LabelComponent } from "./magmonium-one-label-B30Q4Vut.mjs";
+import { r as IconComponent } from "./magmonium-one-icon-Dso-9RMN.mjs";
+import { t as TextOutputComponent } from "./magmonium-one-text-output-D2XQWyL0.mjs";
+import { t as BaseTextInputComponent } from "./magmonium-one-base-text-D6p6_vsb.mjs";
+import { t as InputType } from "./magmonium-one-input-DqHPorA1.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model } from "@angular/core";
+var text_exports = /* @__PURE__ */ __exportAll({ TextInputComponent: () => TextInputComponent });
+var TextInputComponent = class TextInputComponent extends BaseTextInputComponent {
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	config = input(...ngDevMode ? [void 0, { debugName: "config" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	invalid = input(false, ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
+	touched = model(false, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	focused = input(false, ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+	showErrors = computed(() => this.touched() && this.invalid(), ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
+	hideErrors = input(false, ...ngDevMode ? [{ debugName: "hideErrors" }] : /* istanbul ignore next */ []);
+	isNumber = computed(() => {
+		const config = this.config();
+		return !!config && config.type === InputType.NUMBER;
+	}, ...ngDevMode ? [{ debugName: "isNumber" }] : /* istanbul ignore next */ []);
+	onInput(event) {
+		const target = event.target;
+		this.setValue(target?.value ?? "");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: TextInputComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: TextInputComponent,
+		isStandalone: true,
+		selector: "m-text-input",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				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
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			focused: {
+				classPropertyName: "focused",
+				publicName: "focused",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errors: {
+				classPropertyName: "errors",
+				publicName: "errors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideErrors: {
+				classPropertyName: "hideErrors",
+				publicName: "hideErrors",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touched: "touchedChange"
+		},
+		host: { properties: { "class": "config()?.variant ? 'm-input--' + config()?.variant : ''" } },
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (config(); as text) {
+      @if (text.label) {
+        <m-label
+          [for]="text.name ?? ''"
+          [placeholder]="text.label"
+          [params]="text.params"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+      }
+      <div class="input-wrapper">
+        @if (text.icon) {
+          <m-icon
+            [name]="text.icon"
+            [color]="iconColor()"
+            [one]="text.one"
+          />
+        }
+        @if (text.prefix) {
+          <span class="input-prefix">{{ text.prefix }}</span>
+        }
+        <input
+          [id]="text.name ?? ''"
+          [attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
+          [value]="value()"
+          #inputElement
+          [class.error]="showErrors()"
+          [class.has-icon]="!!text.icon"
+          [class.has-prefix]="!!text.prefix"
+          [disabled]="disabled()"
+          [readOnly]="readonly() || config()?.readonly"
+          [placeholder]="text.placeholder ?? '' | translate: text.params"
+          (input)="onInput($event)"
+          (focus)="isFocused.set(true)"
+          (blur)="isFocused.set(false); touched.set(true)"
+          [type]="isNumber() ? 'number' : 'text'"
+          [attr.min]="isNumber() ? text.min ?? null : null"
+          [attr.max]="isNumber() ? text.max ?? null : null"
+          [attr.step]="isNumber() ? text.step ?? null : null"
+        />
+        @if (config()?.status; as status) {
+          <div class="input-indicator" [class]="'input-indicator--' + status">
+            @if (status === 'checking') {
+              <span class="spinner"></span>
+            } @else if (status === 'available') {
+              <m-icon name="check" color="success" />
+            }
+          </div>
+        }
+        @if (text.suffix) {
+          <span class="input-suffix">{{ text.suffix }}</span>
+        }
+      </div>
+      @if (showErrors() && !hideErrors()) {
+        @for (error of errors(); track $index) {
+          <m-text-output
+            variant="footer"
+            color="error"
+            [label]="error.message"
+          />
+        }
+      }
+    }
+  `,
+		isInline: true,
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}m-text-output{box-sizing:border-box;padding-left:var(--m-text-input-padding-left, var(--m-label-required-space, .75em))}.input-wrapper{display:flex;align-items:center;background:var(--m-background);overflow:hidden;height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 1px);border-radius:var(--m-input-radius, calc(var(--input-size, 1em) * .5));height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.input-wrapper:has(.warning){border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)));box-shadow:none}.input-wrapper:has(.warning):focus-within{border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)))}.input-wrapper:has(.warning) input::placeholder,.input-wrapper:has(.warning) textarea::placeholder{color:var(--m-warning, var(--m-warning))}.input-wrapper:has(.error){border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--m-border, var(--m-border))}.input-wrapper:focus-within input::placeholder,.input-wrapper:focus-visible input::placeholder,.input-wrapper:focus-within textarea::placeholder,.input-wrapper:focus-visible textarea::placeholder{color:var(--m-focus, var(--m-focus))}.input-wrapper:has(.error) input::placeholder,.input-wrapper:has(.error) textarea::placeholder{color:var(--m-error, var(--m-error))}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, var(--m-label-required-space, .75em));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background)));border-color:var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover:not(:has(.error)):not(:has(.warning)){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))))}.input-wrapper:focus-within:not(:has(.error)):not(:has(.warning)){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;background:var(--m-text-input-focus-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: LabelComponent,
+				selector: "m-label",
+				inputs: [
+					"for",
+					"placeholder",
+					"params",
+					"required",
+					"disabled",
+					"color",
+					"noTranslate"
+				]
+			},
+			{
+				kind: "component",
+				type: TextOutputComponent,
+				selector: "m-text-output",
+				inputs: [
+					"config",
+					"align",
+					"variant",
+					"color",
+					"fontWeight",
+					"label",
+					"noTranslate",
+					"params"
+				],
+				outputs: ["configChange", "clicked"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "m-icon, m-one-icon",
+				inputs: [
+					"config",
+					"name",
+					"color",
+					"size",
+					"one",
+					"baseUrl",
+					"remote"
+				],
+				outputs: ["configChange"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TextInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-text-input",
+			template: `
+    @if (config(); as text) {
+      @if (text.label) {
+        <m-label
+          [for]="text.name ?? ''"
+          [placeholder]="text.label"
+          [params]="text.params"
+          [required]="required()"
+          [disabled]="disabled()"
+        />
+      }
+      <div class="input-wrapper">
+        @if (text.icon) {
+          <m-icon
+            [name]="text.icon"
+            [color]="iconColor()"
+            [one]="text.one"
+          />
+        }
+        @if (text.prefix) {
+          <span class="input-prefix">{{ text.prefix }}</span>
+        }
+        <input
+          [id]="text.name ?? ''"
+          [attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
+          [value]="value()"
+          #inputElement
+          [class.error]="showErrors()"
+          [class.has-icon]="!!text.icon"
+          [class.has-prefix]="!!text.prefix"
+          [disabled]="disabled()"
+          [readOnly]="readonly() || config()?.readonly"
+          [placeholder]="text.placeholder ?? '' | translate: text.params"
+          (input)="onInput($event)"
+          (focus)="isFocused.set(true)"
+          (blur)="isFocused.set(false); touched.set(true)"
+          [type]="isNumber() ? 'number' : 'text'"
+          [attr.min]="isNumber() ? text.min ?? null : null"
+          [attr.max]="isNumber() ? text.max ?? null : null"
+          [attr.step]="isNumber() ? text.step ?? null : null"
+        />
+        @if (config()?.status; as status) {
+          <div class="input-indicator" [class]="'input-indicator--' + status">
+            @if (status === 'checking') {
+              <span class="spinner"></span>
+            } @else if (status === 'available') {
+              <m-icon name="check" color="success" />
+            }
+          </div>
+        }
+        @if (text.suffix) {
+          <span class="input-suffix">{{ text.suffix }}</span>
+        }
+      </div>
+      @if (showErrors() && !hideErrors()) {
+        @for (error of errors(); track $index) {
+          <m-text-output
+            variant="footer"
+            color="error"
+            [label]="error.message"
+          />
+        }
+      }
+    }
+  `,
+			imports: [
+				LabelComponent,
+				TextOutputComponent,
+				IconComponent,
+				TranslatePipe
+			],
+			host: { "[class]": "config()?.variant ? 'm-input--' + config()?.variant : ''" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:contents}m-text-output{box-sizing:border-box;padding-left:var(--m-text-input-padding-left, var(--m-label-required-space, .75em))}.input-wrapper{display:flex;align-items:center;background:var(--m-background);overflow:hidden;height:calc(var(--input-size, 1em) * 2);min-height:calc(var(--input-size, 1em) * 2);border-width:max(1px,var(--input-size, 1em) * .0625);border-radius:calc(var(--input-size, 1em) * .4);padding:calc(var(--input-size, 1em) * .5) calc(var(--input-size, 1em) * .5);gap:calc(var(--input-size, 1em) * .375);font-size:var(--input-size, 1em);border-width:var(--m-input-border-width, 1px);border-radius:var(--m-input-radius, calc(var(--input-size, 1em) * .5));height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);padding-top:0;padding-bottom:0;border-color:var(--m-input-color, var(--m-mm));transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,opacity .2s ease}.input-wrapper:hover:not(:disabled){background-color:color-mix(in srgb,var(--m-input-color, var(--m-mm)) 6%,transparent)}.input-wrapper:disabled{opacity:.6;cursor:not-allowed}.input-wrapper{border-style:solid;backdrop-filter:var(--m-text-input-backdrop-filter, none);-webkit-backdrop-filter:var(--m-text-input-backdrop-filter, none);box-shadow:var(--m-text-input-shadow, none)}.input-wrapper:has(>m-one-button,>m-button,>.input-indicator,>.input-suffix,>m-icon:last-child){padding-right:0}.input-wrapper:focus-visible:not(:disabled),.input-wrapper:focus-within:not(:disabled){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none}.input-wrapper:has(.warning){border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)));box-shadow:none}.input-wrapper:has(.warning):focus-within{border-color:var(--m-input-warning-border, var(--m-warning));background:var(--m-input-warning-background, color-mix(in srgb, var(--m-warning) 6%, var(--m-background)))}.input-wrapper:has(.warning) input::placeholder,.input-wrapper:has(.warning) textarea::placeholder{color:var(--m-warning, var(--m-warning))}.input-wrapper:has(.error){border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper:has(.error):focus-within{border-color:var(--m-error);background:var(--m-input-error-background, color-mix(in srgb, var(--m-error) 5%, var(--m-background)));box-shadow:none}.input-wrapper input::placeholder,.input-wrapper textarea::placeholder{color:var(--m-border, var(--m-border))}.input-wrapper:focus-within input::placeholder,.input-wrapper:focus-visible input::placeholder,.input-wrapper:focus-within textarea::placeholder,.input-wrapper:focus-visible textarea::placeholder{color:var(--m-focus, var(--m-focus))}.input-wrapper:has(.error) input::placeholder,.input-wrapper:has(.error) textarea::placeholder{color:var(--m-error, var(--m-error))}.input-wrapper input,.input-wrapper textarea{flex:1;border:none;outline:none;background:transparent;color:var(--m-text);font-family:inherit;font-size:inherit;padding:0}.input-wrapper input:focus,.input-wrapper textarea:focus{border-color:transparent;box-shadow:none}.input-wrapper{width:100%;padding-left:var(--m-text-input-padding-left, var(--m-label-required-space, .75em));padding-right:var(--m-text-input-padding-right, calc(var(--input-size, 1em) * .5 * .7));background:var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background)));border-color:var(--m-text-input-border, color-mix(in srgb, var(--m-text) 18%, var(--m-background)));transition:var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease)}.input-wrapper:hover:not(:has(.error)):not(:has(.warning)){border-color:var(--m-text-input-hover-border, color-mix(in srgb, var(--m-focus) 55%, var(--m-background)));background:var(--m-text-input-hover-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))))}.input-wrapper:focus-within:not(:has(.error)):not(:has(.warning)){border-color:var(--m-text-input-focus-border, var(--m-focus));box-shadow:none;background:var(--m-text-input-focus-background, var(--m-text-input-background, color-mix(in srgb, var(--m-focus) 2%, var(--m-background))))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important;opacity:var(--m-text-input-icon-opacity, 1);transition:opacity .2s ease}.input-wrapper:focus-within .m-icon{opacity:var(--m-text-input-icon-focus-opacity, var(--m-text-input-icon-opacity, 1))}.input-wrapper input{appearance:none;color:var(--m-text-input-color, var(--m-text));font-weight:var(--m-text-input-font-weight, inherit);font-size:var(--input-size, 1em)}.input-wrapper input::placeholder{font-weight:var(--m-text-input-placeholder-weight, inherit);opacity:var(--m-text-input-placeholder-opacity, inherit)}.input-wrapper .input-prefix,.input-wrapper .input-suffix{font-size:.9rem;font-weight:700;color:var(--m-text-tertiary);-webkit-user-select:none;user-select:none;display:flex;align-items:center;flex-shrink:0}.input-wrapper .input-prefix{margin-right:.25rem}.input-wrapper .input-suffix{margin-left:.25rem}:host(.m-input--underlined) .input-wrapper{background:transparent;border:none;border-bottom:2px solid var(--m-backdrop-border);border-radius:0;padding:.5rem 0;min-height:auto;height:auto;transition:border-color .3s ease}:host(.m-input--underlined) .input-wrapper:focus-within{border-bottom-color:var(--m-mm);box-shadow:none}:host(.m-input--underlined) input{font-size:1.125rem;font-weight:700;color:var(--m-text)}:host(.m-input--underlined) .input-prefix,:host(.m-input--underlined) .input-suffix{color:var(--m-mm);font-weight:800;font-size:1rem}:host(.m-input--underlined) .input-indicator{display:flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;margin-left:.375em}:host(.m-input--underlined) .input-indicator--available{color:var(--m-success, #10b981)}:host(.m-input--underlined) .input-indicator .spinner{width:.875rem;height:.875rem;border:2px solid var(--m-border, rgba(255, 255, 255, .1));border-top-color:var(--m-focus, #14b8a6);border-radius:50%;animation:m-spin .8s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["touchedChange"]
+		}],
+		focused: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "focused",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		hideErrors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideErrors",
+				required: false
+			}]
+		}]
+	}
+});
+export { text_exports as n, TextInputComponent as t };
+
+//# sourceMappingURL=magmonium-one-text-FXb-RyBh.mjs.map

package/fesm2022/magmonium-one-text-FXb-RyBh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-text-FXb-RyBh.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/text.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { TextOutputComponent } from '../../../text-output';\nimport { BaseTextInputComponent } from './base-text';\nimport { IconComponent } from '../../../icon';\nimport { TranslatePipe } from '../../../../pipe';\nimport { Input, InputType, NumberInput } from '../../model/input';\nimport { ValidationError, WithOptionalFieldTree } from '@angular/forms/signals';\n\n/**\n * What this one component draws: a line of text, or the same line typed\n * `number`. WrapperInputComponent has no case for a `number` Field, so it\n * lands here — and the figures a NumberInput carries have to be readable off\n * the config the template already holds.\n */\nexport type TextOrNumberInput = Omit<Input, 'type'> &\n  Pick<NumberInput, 'min' | 'max' | 'step'> & {\n    type: InputType.TEXT | InputType.NUMBER;\n  };\n\n@Component({\n  selector: 'm-text-input',\n  template: `\n    @if (config(); as text) {\n      @if (text.label) {\n        <m-label\n          [for]=\"text.name ?? ''\"\n          [placeholder]=\"text.label\"\n          [params]=\"text.params\"\n          [required]=\"required()\"\n          [disabled]=\"disabled()\"\n        />\n      }\n      <div class=\"input-wrapper\">\n        @if (text.icon) {\n          <m-icon\n            [name]=\"text.icon\"\n            [color]=\"iconColor()\"\n            [one]=\"text.one\"\n          />\n        }\n        @if (text.prefix) {\n          <span class=\"input-prefix\">{{ text.prefix }}</span>\n        }\n        <input\n          [id]=\"text.name ?? ''\"\n          [attr.data-testid]=\"text.testid ?? (text.name ? text.name + '-input' : null)\"\n          [value]=\"value()\"\n          #inputElement\n          [class.error]=\"showErrors()\"\n          [class.has-icon]=\"!!text.icon\"\n          [class.has-prefix]=\"!!text.prefix\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readonly() || config()?.readonly\"\n          [placeholder]=\"text.placeholder ?? '' | translate: text.params\"\n          (input)=\"onInput($event)\"\n          (focus)=\"isFocused.set(true)\"\n          (blur)=\"isFocused.set(false); touched.set(true)\"\n          [type]=\"isNumber() ? 'number' : 'text'\"\n          [attr.min]=\"isNumber() ? text.min ?? null : null\"\n          [attr.max]=\"isNumber() ? text.max ?? null : null\"\n          [attr.step]=\"isNumber() ? text.step ?? null : null\"\n        />\n        @if (config()?.status; as status) {\n          <div class=\"input-indicator\" [class]=\"'input-indicator--' + status\">\n            @if (status === 'checking') {\n              <span class=\"spinner\"></span>\n            } @else if (status === 'available') {\n              <m-icon name=\"check\" color=\"success\" />\n            }\n          </div>\n        }\n        @if (text.suffix) {\n          <span class=\"input-suffix\">{{ text.suffix }}</span>\n        }\n      </div>\n      @if (showErrors() && !hideErrors()) {\n        @for (error of errors(); track $index) {\n          <m-text-output\n            variant=\"footer\"\n            color=\"error\"\n            [label]=\"error.message\"\n          />\n        }\n      }\n    }\n  `,\n  imports: [LabelComponent, TextOutputComponent, IconComponent, TranslatePipe],\n  styleUrl: './text.sass',\n  host: {\n    '[class]': \"config()?.variant ? 'm-input--' + config()?.variant : ''\",\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TextInputComponent extends BaseTextInputComponent<TextOrNumberInput> {\n  public override value = model<string>('');\n  public override config = input<Partial<TextOrNumberInput> | undefined>();\n  public override required = input<boolean>(false);\n  public override disabled = input<boolean>(false);\n  public override invalid = input<boolean>(false);\n  public override touched = model<boolean>(false);\n  public override focused = input<boolean>(false);\n  public override errors = input<readonly WithOptionalFieldTree<ValidationError>[]>(\n    []\n  );\n  public override showErrors = computed(() => this.touched() && this.invalid());\n  readonly hideErrors = input<boolean>(false);\n\n  // A `number` Field draws this same component (WrapperInputComponent has no\n  // case of its own for it), so the type it declares decides the element it\n  // draws. What *leaves* the field is coerced a level up, in the wrapper: an\n  // `<input>` reads its value as text whatever its type, and every other\n  // component on this base is a string field.\n  protected readonly isNumber = computed(() => {\n    const config = this.config();\n    return !!config && config.type === InputType.NUMBER;\n  });\n\n  protected onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.setValue(target?.value ?? '');\n  }\n}\n"],"mappings":"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"}