@magmonium/one 0.4.30 → 0.4.32

package/fesm2022/magmonium-one-options-asset-CDEXIif6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-options-asset-CDEXIif6.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/form/directive/options-source.directive.ts","../../../../libs/one/src/lib/shared/ui/input/lib/options-asset.ts"],"sourcesContent":["import { Directive, input } from '@angular/core';\n\n/**\n * Names the AssetOptions list a Field chooses from (CONTEXT.md OptionsSource).\n * The markup spelling of the `optionsAsset:` config key, added beside it rather\n * than in place of it (ADR 0010) — a Field still described by a file keeps\n * declaring the key inside that file.\n *\n * Carries the name and nothing else. Resolution stays where it already lives,\n * in the inputs that read `config.optionsAsset` — the SectionFormItem folds\n * this name into its config, so a Dropdown or a SelectableCard cannot tell\n * which of the two spellings it came from, and there is no second resolver to\n * drift from the first.\n */\n@Directive({\n  selector: '[mOptions]',\n})\nexport class OptionsSourceDirective {\n  readonly name = input<string | undefined>(undefined, { alias: 'mOptions' });\n}\n","import { computed, effect, inject, Signal, untracked } from '@angular/core';\nimport { rxResource } from '@angular/core/rxjs-interop';\nimport { of } from 'rxjs';\nimport { DropdownOption, DropdownValue } from '../model/input';\nimport { AssetStore } from '../../../stores/asset.store';\nimport { OPTIONS_SOURCE } from '../../../config/tokens';\n// Direct path rather than the form barrel: the barrel pulls in the form's\n// components, which import these inputs back.\nimport { OptionsSourceDirective } from '../../form/directive/options-source.directive';\n\n// One row of a `mag_assets/options/<name>.yml` asset. `id` is accepted\n// alongside `value` because option assets predate the field types that read\n// them, and several were written with `id`.\nexport type AssetOption = {\n  id?: string;\n  value?: string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  default?: boolean;\n};\n\n// Option assets are written either flat or as rows of rows (the same shape a\n// form's `inputs` uses), so both are flattened before mapping.\nexport function normalizeAssetOptions(\n  data: AssetOption[] | AssetOption[][] | undefined\n): DropdownOption[] {\n  if (!data?.length) return [];\n  const flat: AssetOption[] = Array.isArray(data[0])\n    ? (data as AssetOption[][]).flat()\n    : (data as AssetOption[]);\n  return flat.map((option) => ({\n    value: option.value ?? option.id ?? '',\n    label: option.label,\n    icon: option.icon,\n    disabled: option.disabled,\n    ...(option.default === true ? { default: true } : {}),\n  }));\n}\n\n/**\n * The choices an OptionsSource resolves to, for whichever Field reads it —\n * Dropdown, SelectableCard, ToggleRadio. One resolver rather than one per\n * Field: the name means the same list wherever it is written, and a second\n * copy of this would be a second answer that could drift.\n *\n * The name comes from the `mOptions` directive on the Field's tag, which is\n * the spelling of the list key (ADR 0010). An `optionsAsset:` written in a\n * field asset is passed in by the Fields that still read one, and outranks the\n * directive — the nearer declaration wins, same order every other key follows.\n * The directive is injected rather than passed because an input created inside\n * a `m-section-form-item` sits under that item's host, where the directive is.\n *\n * OPTIONS_SOURCE is read ahead of the fetch, so a list held only in memory (a\n * visual editor's unsaved OptionSets) fills the Field without ever being a\n * file. Must be called from an injection context.\n */\nexport function assetOptions(\n  name?: () => string | undefined\n): Signal<DropdownOption[]> {\n  const assetStore = inject(AssetStore);\n  const optionsSource = inject(OPTIONS_SOURCE, { optional: true });\n  const directive = inject(OptionsSourceDirective, { optional: true });\n\n  const assetName = computed(\n    () => name?.()?.trim() || directive?.name()?.trim() || undefined\n  );\n\n  const suppliedRows = computed(() => {\n    const key = assetName();\n    if (!key) return undefined;\n    const rows = optionsSource?.()?.[key];\n    return Array.isArray(rows)\n      ? (rows as AssetOption[] | AssetOption[][])\n      : undefined;\n  });\n\n  const resource = rxResource({\n    // A supplied list is the answer, so the fetch never starts — asking for a\n    // file that exists only in memory would 404 on every keystroke that edits it.\n    params: () => (suppliedRows() ? undefined : assetName()),\n    stream: ({ params }) => {\n      if (!params) return of(undefined);\n      return assetStore.resolve<AssetOption[] | AssetOption[][]>(\n        'options',\n        params,\n        true\n      );\n    },\n  });\n\n  return computed(() =>\n    normalizeAssetOptions(suppliedRows() ?? resource.value())\n  );\n}\n\n/** Whether a Field holds nothing yet — no scalar, an empty string or list. */\nconst isEmptyValue = (value: unknown): boolean =>\n  value === undefined ||\n  value === null ||\n  value === '' ||\n  (Array.isArray(value) && value.length === 0);\n\n/**\n * Starts a Field on its list's `default` row when it holds no value of its own\n * (m-one-ui CONTEXT.md OptionSet). The Field's own value — its config, its form\n * data — outranks the row, so a value already held is kept.\n *\n * Each marked row is consulted once: a User who clears the pick is not handed\n * it back, and only a list that moves its mark offers the new row. A disabled\n * row is never preset — the User could not have picked it either. Must be\n * called from an injection context.\n */\nexport function presetDefaultOption(\n  options: () => readonly DropdownOption<DropdownValue>[],\n  current: () => unknown,\n  apply: (value: DropdownValue) => void\n): void {\n  let consulted: DropdownValue | undefined;\n  effect(() => {\n    const row = options().find((option) => option.default && !option.disabled);\n    if (!row || row.value === consulted) return;\n    consulted = row.value;\n    untracked(() => {\n      if (isEmptyValue(current())) apply(row.value);\n    });\n  });\n}\n"],"mappings":";;;;;AAiBA,IAAa,yBAAb,MAAa,uBAAsB;CACxB,OAAO,MAA0B,QAAS;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,OAAO;CAAU,CAAA;CAD7D,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAtB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAHlC,MAAA;EAAU,MAAA,CAAA,EACT,UAAU,aACX,CAAA;;;;;;;;;;;ACQD,SAAgB,sBACd,MAAiD;CAEjD,IAAI,CAAC,MAAM,QAAQ,OAAO,CAAA;CAI1B,QAH4B,MAAM,QAAQ,KAAK,EAAE,IAC5C,KAAyB,KAAI,IAC7B,KACE,CAAK,KAAK,YAAY;EAC3B,OAAO,OAAO,SAAS,OAAO,MAAM;EACpC,OAAO,OAAO;EACd,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,GAAI,OAAO,YAAY,OAAO,EAAE,SAAS,KAAI,IAAK,CAAA;CACnD,EAAC;AACJ;AAmBA,SAAgB,aACd,MAA+B;CAE/B,MAAM,aAAa,OAAO,UAAU;CACpC,MAAM,gBAAgB,OAAO,gBAAgB,EAAE,UAAU,KAAI,CAAE;CAC/D,MAAM,YAAY,OAAO,wBAAwB,EAAE,UAAU,KAAI,CAAE;CAEnE,MAAM,YAAY,eACV,OAAM,CAAE,EAAE,KAAI,KAAM,WAAW,KAAI,CAAE,EAAE,KAAI,KAAM,QACxD,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAED,MAAM,eAAe,eAAc;EACjC,MAAM,MAAM,UAAS;EACrB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,OAAO,gBAAe,CAAE,GAAG;EACjC,OAAO,MAAM,QAAQ,IAAI,IACpB,OACD;CACN,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,MAAM,WAAW,WAAW;EAG1B,cAAe,aAAY,IAAK,SAAY,UAAS;EACrD,SAAS,EAAE,aAAY;GACrB,IAAI,CAAC,QAAQ,OAAO,GAAG,MAAS;GAChC,OAAO,WAAW,QAChB,WACA,QACA,IAAI;EAER;CACD,CAAA;CAED,OAAO,eACL,sBAAsB,aAAY,KAAM,SAAS,MAAK,CAAE,CAAC;AAE7D;AAGA,MAAM,gBAAgB,UACpB,UAAU,UACV,UAAU,QACV,UAAU,MACT,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAY5C,SAAgB,oBACd,SACA,SACA,OAAqC;CAErC,IAAI;CACJ,aAAY;EACV,MAAM,MAAM,QAAO,CAAE,CAAC,MAAM,WAAW,OAAO,WAAW,CAAC,OAAO,QAAQ;EACzE,IAAI,CAAC,OAAO,IAAI,UAAU,WAAW;EACrC,YAAY,IAAI;EAChB,gBAAe;GACb,IAAI,aAAa,QAAO,CAAE,GAAG,MAAM,IAAI,KAAK;EAC9C,CAAC;CACH,CAAC;AACH"}

package/fesm2022/magmonium-one-otp-DO4oTeSK.mjs

@@ -0,0 +1,261 @@
+import { B as IS_DESIGN_MODE } from "./magmonium-one-size-converter-BfT0Aw0g.mjs";
+import { t as LabelComponent } from "./magmonium-one-label-D2gjTbKX.mjs";
+import { t as TextOutputComponent } from "./magmonium-one-text-output-CfVeqYM7.mjs";
+import { t as BaseTextInputComponent } from "./magmonium-one-base-text-Zb0oLNRX.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, afterRenderEffect, computed, effect, inject, signal, untracked, viewChildren } from "@angular/core";
+import { CommonModule } from "@angular/common";
+var OtpInputComponent = class OtpInputComponent extends BaseTextInputComponent {
+	otpValues = signal([], ...ngDevMode ? [{ debugName: "otpValues" }] : /* istanbul ignore next */ []);
+	otpInputs = viewChildren("otpInput", ...ngDevMode ? [{ debugName: "otpInputs" }] : /* istanbul ignore next */ []);
+	otpConfig = computed(() => this.config(), ...ngDevMode ? [{ debugName: "otpConfig" }] : /* istanbul ignore next */ []);
+	otpArray = computed(() => {
+		const length = this.otpConfig()?.length || 6;
+		return Array(length).fill(0);
+	}, ...ngDevMode ? [{ debugName: "otpArray" }] : /* istanbul ignore next */ []);
+	isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });
+	isDisabled = computed(() => this.isDesignMode || this.disabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	hasAutofocused = false;
+	constructor() {
+		super();
+		effect(() => {
+			const length = this.otpConfig()?.length || 6;
+			this.otpValues.set(Array(length).fill(""));
+		});
+		afterRenderEffect(() => {
+			const inputs = this.otpInputs();
+			if (!this.focused() || !inputs.length || this.hasAutofocused) return;
+			this.hasAutofocused = true;
+			untracked(() => this.focusInput(0));
+		});
+	}
+	onInput = (event, index) => {
+		if (this.isDisabled()) return;
+		const input = event.target;
+		let value = input.value;
+		value = value.replace(/[^a-zA-Z0-9]/g, "");
+		if (value.length > 1) value = value.slice(-1);
+		input.value = value.toUpperCase();
+		const newValues = [...this.otpValues()];
+		newValues[index] = value.toUpperCase();
+		this.otpValues.set(newValues);
+		const length = this.otpConfig()?.length || 6;
+		if (value && index < length - 1) this.focusInput(index + 1);
+		this.updateValue();
+	};
+	onKeyDown = (event, index) => {
+		if (this.isDisabled()) return;
+		const input = event.target;
+		const length = this.otpConfig()?.length || 6;
+		const isAlphaNumeric = /^[a-zA-Z0-9]$/.test(event.key);
+		const isControlKey = [
+			"Backspace",
+			"Delete",
+			"ArrowLeft",
+			"ArrowRight",
+			"Tab"
+		].includes(event.key);
+		if (!isAlphaNumeric && !isControlKey) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "Backspace") {
+			if (!input.value && index > 0) this.focusInput(index - 1);
+		}
+		if (event.key === "ArrowLeft" && index > 0) {
+			event.preventDefault();
+			this.focusInput(index - 1);
+		}
+		if (event.key === "ArrowRight" && index < length - 1) {
+			event.preventDefault();
+			this.focusInput(index + 1);
+		}
+	};
+	onPaste = (event) => {
+		if (this.isDisabled()) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const length = this.otpConfig()?.length || 6;
+		const alphanumeric = (event.clipboardData?.getData("text") || "").replace(/[^a-zA-Z0-9]/g, "").slice(0, length);
+		if (alphanumeric.length > 0) {
+			const newValues = Array(length).fill("");
+			alphanumeric.split("").forEach((char, index) => {
+				if (index < length) newValues[index] = char.toUpperCase();
+			});
+			this.otpValues.set(newValues);
+			this.updateValue();
+			const focusIndex = Math.min(alphanumeric.length, length - 1);
+			setTimeout(() => this.focusInput(focusIndex), 0);
+		}
+	};
+	focusInput(index) {
+		if (this.isDisabled()) return;
+		const inputs = this.otpInputs();
+		if (inputs[index]) inputs[index].nativeElement.focus();
+	}
+	updateValue() {
+		const otpValue = this.otpValues().join("");
+		this.setValue(otpValue);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OtpInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: OtpInputComponent,
+		isStandalone: true,
+		selector: "m-otp-input",
+		viewQueries: [{
+			propertyName: "otpInputs",
+			predicate: ["otpInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (otpConfig(); as otp) {
+      <m-label
+        [for]="otp.name"
+        [placeholder]="otp.label"
+        [params]="otp.params"
+        [required]="required()"
+        [disabled]="isDisabled()"
+      />
+      <div class="otp-container">
+        @for (item of otpArray(); track $index) {
+          <input
+            [id]="$index === 0 ? (otp.name ?? '') : ''"
+            #otpInput
+            type="text"
+            maxlength="1"
+            [class.error]="showErrors()"
+            [disabled]="isDisabled()"
+            [value]="otpValues()[$index] || ''"
+            (input)="onInput($event, $index)"
+            (keydown)="onKeyDown($event, $index)"
+            (paste)="onPaste($event)"
+          />
+        }
+      </div>
+      @if (showErrors()) {
+        @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:block;width:100%}.otp-container{display:flex;width:100%;justify-content:space-between;gap:var(--m-otp-input-gap, .375em )}.otp-container input{appearance:none;box-sizing:border-box;flex:0 0 auto;width:calc(var(--input-size, 1em) * 2.25);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);text-align:center;font-size:var(--input-size, 1em);font-weight:var(--m-otp-input-font-weight, 600);font-family:inherit;color:var(--m-otp-input-color, var(--m-text-input-color, var(--m-text)));background:var(--m-otp-input-background, var(--m-text-input-background, var(--m-background)));border-width:var(--m-otp-input-border-width, var(--m-input-border-width, 2px));border-style:solid;border-color:var(--m-otp-input-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-otp-input-radius, var(--m-input-radius, 4px));transition:var(--m-otp-input-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));text-transform:uppercase;box-shadow:var(--m-text-input-shadow, none)}.otp-container input:hover:not(:disabled):not(.error){border-color:var(--m-otp-input-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-otp-input-hover-background, var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background))))}.otp-container input:focus{outline:none;border-color:var(--m-otp-input-focus-border, var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent)));box-shadow:var(--m-text-input-shadow, none);background:var(--m-otp-input-focus-background, var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background))))}.otp-container input.error{border-color:var(--m-error);box-shadow:none}.otp-container input:disabled{background-color:var(--m-frame);cursor:not-allowed;color:var(--m-text-tertiary);border-color:var(--m-border);opacity:.6}\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: "ngmodule",
+				type: CommonModule
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OtpInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-otp-input",
+			template: `
+    @if (otpConfig(); as otp) {
+      <m-label
+        [for]="otp.name"
+        [placeholder]="otp.label"
+        [params]="otp.params"
+        [required]="required()"
+        [disabled]="isDisabled()"
+      />
+      <div class="otp-container">
+        @for (item of otpArray(); track $index) {
+          <input
+            [id]="$index === 0 ? (otp.name ?? '') : ''"
+            #otpInput
+            type="text"
+            maxlength="1"
+            [class.error]="showErrors()"
+            [disabled]="isDisabled()"
+            [value]="otpValues()[$index] || ''"
+            (input)="onInput($event, $index)"
+            (keydown)="onKeyDown($event, $index)"
+            (paste)="onPaste($event)"
+          />
+        }
+      </div>
+      @if (showErrors()) {
+        @for (error of errors(); track $index) {
+          <m-text-output
+            variant="footer"
+            color="error"
+            [label]="error.message"
+          />
+        }
+      }
+    }
+  `,
+			imports: [
+				LabelComponent,
+				TextOutputComponent,
+				CommonModule
+			],
+			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:block;width:100%}.otp-container{display:flex;width:100%;justify-content:space-between;gap:var(--m-otp-input-gap, .375em )}.otp-container input{appearance:none;box-sizing:border-box;flex:0 0 auto;width:calc(var(--input-size, 1em) * 2.25);height:calc(var(--input-size, 1em) * 2.25);min-height:calc(var(--input-size, 1em) * 2.25);text-align:center;font-size:var(--input-size, 1em);font-weight:var(--m-otp-input-font-weight, 600);font-family:inherit;color:var(--m-otp-input-color, var(--m-text-input-color, var(--m-text)));background:var(--m-otp-input-background, var(--m-text-input-background, var(--m-background)));border-width:var(--m-otp-input-border-width, var(--m-input-border-width, 2px));border-style:solid;border-color:var(--m-otp-input-border, var(--m-text-input-border, var(--m-input-color, var(--m-mm))));border-radius:var(--m-otp-input-radius, var(--m-input-radius, 4px));transition:var(--m-otp-input-transition, var(--m-text-input-transition, border-color .2s ease, box-shadow .2s ease));text-transform:uppercase;box-shadow:var(--m-text-input-shadow, none)}.otp-container input:hover:not(:disabled):not(.error){border-color:var(--m-otp-input-hover-border, var(--m-text-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12))));background:var(--m-otp-input-hover-background, var(--m-text-input-hover-background, var(--m-text-input-background, var(--m-background))))}.otp-container input:focus{outline:none;border-color:var(--m-otp-input-focus-border, var(--m-text-input-focus-border, color-mix(in srgb, var(--m-focus) 45%, transparent)));box-shadow:var(--m-text-input-shadow, none);background:var(--m-otp-input-focus-background, var(--m-text-input-focus-background, var(--m-text-input-background, var(--m-background))))}.otp-container input.error{border-color:var(--m-error);box-shadow:none}.otp-container input:disabled{background-color:var(--m-frame);cursor:not-allowed;color:var(--m-text-tertiary);border-color:var(--m-border);opacity:.6}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { otpInputs: [{
+		type: i0.ViewChildren,
+		args: ["otpInput", { isSignal: true }]
+	}] }
+});
+export { OtpInputComponent };
+
+//# sourceMappingURL=magmonium-one-otp-DO4oTeSK.mjs.map

package/fesm2022/magmonium-one-otp-DO4oTeSK.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-otp-DO4oTeSK.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/otp.ts"],"sourcesContent":["import {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  signal,\n  untracked,\n  viewChildren,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { TextOutputComponent } from '../../../text-output';\nimport { BaseTextInputComponent } from './base-text';\nimport { CommonModule } from '@angular/common';\nimport { OtpInput } from '../../model/input';\nimport { IS_DESIGN_MODE } from '../../../../config/tokens';\n\n@Component({\n  selector: 'm-otp-input',\n  template: `\n    @if (otpConfig(); as otp) {\n      <m-label\n        [for]=\"otp.name\"\n        [placeholder]=\"otp.label\"\n        [params]=\"otp.params\"\n        [required]=\"required()\"\n        [disabled]=\"isDisabled()\"\n      />\n      <div class=\"otp-container\">\n        @for (item of otpArray(); track $index) {\n          <input\n            [id]=\"$index === 0 ? (otp.name ?? '') : ''\"\n            #otpInput\n            type=\"text\"\n            maxlength=\"1\"\n            [class.error]=\"showErrors()\"\n            [disabled]=\"isDisabled()\"\n            [value]=\"otpValues()[$index] || ''\"\n            (input)=\"onInput($event, $index)\"\n            (keydown)=\"onKeyDown($event, $index)\"\n            (paste)=\"onPaste($event)\"\n          />\n        }\n      </div>\n      @if (showErrors()) {\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  styleUrl: './otp.sass',\n  imports: [LabelComponent, TextOutputComponent, CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OtpInputComponent extends BaseTextInputComponent<OtpInput> {\n  otpValues = signal<string[]>([]);\n  otpInputs = viewChildren<ElementRef<HTMLInputElement>>('otpInput');\n  protected readonly otpConfig = computed(() => this.config() as OtpInput);\n  otpArray = computed(() => {\n    const length = this.otpConfig()?.length || 6;\n    return Array(length).fill(0);\n  });\n\n  // Inert on the Canvas — other inputs stay idle because they never autofocus;\n  // OTP used to steal focus and look live while composing (DesignMode).\n  private readonly isDesignMode = !!inject(IS_DESIGN_MODE, { optional: true });\n  protected readonly isDisabled = computed(\n    () => this.isDesignMode || this.disabled()\n  );\n\n  // BaseText answers `focused` by focusing its `#inputElement`, and an OTP has\n  // none — it has a row of boxes. Without this the caret never lands on an OTP\n  // field, so the form that opens on one (login's verification step) reads as\n  // dead until the User clicks it.\n  private hasAutofocused = false;\n\n  constructor() {\n    super();\n    effect(() => {\n      const length = this.otpConfig()?.length || 6;\n      this.otpValues.set(Array(length).fill(''));\n    });\n\n    afterRenderEffect(() => {\n      const inputs = this.otpInputs();\n      if (!this.focused() || !inputs.length || this.hasAutofocused) return;\n      this.hasAutofocused = true;\n      untracked(() => this.focusInput(0));\n    });\n  }\n\n  onInput = (event: Event, index: number): void => {\n    if (this.isDisabled()) return;\n    const input = event.target as HTMLInputElement;\n    let value = input.value;\n\n    value = value.replace(/[^a-zA-Z0-9]/g, '');\n\n    if (value.length > 1) {\n      value = value.slice(-1);\n    }\n\n    input.value = value.toUpperCase();\n\n    const newValues = [...this.otpValues()];\n    newValues[index] = value.toUpperCase();\n    this.otpValues.set(newValues);\n\n    const length = this.otpConfig()?.length || 6;\n    if (value && index < length - 1) {\n      this.focusInput(index + 1);\n    }\n    this.updateValue();\n  };\n\n  onKeyDown = (event: KeyboardEvent, index: number): void => {\n    if (this.isDisabled()) return;\n    const input = event.target as HTMLInputElement;\n    const length = this.otpConfig()?.length || 6;\n\n    const isAlphaNumeric = /^[a-zA-Z0-9]$/.test(event.key);\n    const isControlKey = [\n      'Backspace',\n      'Delete',\n      'ArrowLeft',\n      'ArrowRight',\n      'Tab',\n    ].includes(event.key);\n\n    if (!isAlphaNumeric && !isControlKey) {\n      event.preventDefault();\n      return;\n    }\n\n    if (event.key === 'Backspace') {\n      if (!input.value && index > 0) {\n        this.focusInput(index - 1);\n      }\n    }\n    if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      this.focusInput(index - 1);\n    }\n    if (event.key === 'ArrowRight' && index < length - 1) {\n      event.preventDefault();\n      this.focusInput(index + 1);\n    }\n  };\n\n  onPaste = (event: ClipboardEvent): void => {\n    if (this.isDisabled()) return;\n    event.preventDefault();\n    event.stopPropagation();\n\n    const length = this.otpConfig()?.length || 6;\n    const pastedData = event.clipboardData?.getData('text') || '';\n\n    const alphanumeric = pastedData\n      .replace(/[^a-zA-Z0-9]/g, '')\n      .slice(0, length);\n\n    if (alphanumeric.length > 0) {\n      const newValues = Array(length).fill('');\n      alphanumeric.split('').forEach((char, index) => {\n        if (index < length) {\n          newValues[index] = char.toUpperCase();\n        }\n      });\n\n      this.otpValues.set(newValues);\n      this.updateValue();\n\n      const focusIndex = Math.min(alphanumeric.length, length - 1);\n      setTimeout(() => this.focusInput(focusIndex), 0);\n    }\n  };\n\n  private focusInput(index: number): void {\n    if (this.isDisabled()) return;\n    const inputs = this.otpInputs();\n    if (inputs[index]) {\n      inputs[index].nativeElement.focus();\n    }\n  }\n\n  private updateValue(): void {\n    const otpValue = this.otpValues().join('');\n    this.setValue(otpValue);\n  }\n}\n"],"mappings":"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"}

package/fesm2022/magmonium-one-password-D3oTo41c.mjs

@@ -0,0 +1,217 @@
+import { c as TranslatePipe } from "./magmonium-one-size-converter-BfT0Aw0g.mjs";
+import { t as LabelComponent } from "./magmonium-one-label-D2gjTbKX.mjs";
+import { t as ButtonComponent } from "./magmonium-one-button-Bwzaxxn3.mjs";
+import { t as TextOutputComponent } from "./magmonium-one-text-output-CfVeqYM7.mjs";
+import { t as BaseTextInputComponent } from "./magmonium-one-base-text-Zb0oLNRX.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, signal } from "@angular/core";
+var PasswordInputComponent = class PasswordInputComponent extends BaseTextInputComponent {
+	isPassword = signal(true, ...ngDevMode ? [{ debugName: "isPassword" }] : /* istanbul ignore next */ []);
+	type = computed(() => this.isPassword() ? "password" : "text", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	button = computed(() => !this.isPassword() ? "eye" : "eye_close", ...ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []);
+	toggleType() {
+		this.isPassword.update((now) => !now);
+	}
+	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: PasswordInputComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: PasswordInputComponent,
+		isStandalone: true,
+		selector: "m-password-input",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (config(); as text) {
+      <m-label
+        [for]="text.name"
+        [placeholder]="text.label"
+        [params]="text.params"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+      <div class="input-wrapper">
+        <input
+          [id]="text.name ?? ''"
+          [attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
+          [value]="value()"
+          #inputElement
+          [class.error]="showErrors()"
+          [disabled]="disabled()"
+          [placeholder]="(text.placeholder ?? '') | translate: text.params"
+          (input)="onInput($event)"
+          (focus)="isFocused.set(true)"
+          (blur)="isFocused.set(false); touched.set(true)"
+          [type]="type()"
+        />
+        <m-one-button
+          type="button"
+          [disabled]="disabled()"
+          [name]="button()"
+          [color]="iconColor()"
+          (clicked)="toggleType()"
+        />
+      </div>
+      @if (showErrors()) {
+        @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:block;width:100%}.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-password-input-padding-left, var(--m-label-required-space, .75em));background:var(--m-password-input-background, var(--m-background));border-color:var(--m-password-input-border, var(--m-input-color, var(--m-mm)))}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-password-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important}.input-wrapper input{appearance:none;font-size:1em}.input-wrapper .m-one-button{height:100%;display:flex;align-items:center;justify-content:center;--m-button-size: 1em !important}\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: ButtonComponent,
+				selector: "m-button,m-one-button",
+				inputs: [
+					"config",
+					"color",
+					"labelClass",
+					"fullWidth",
+					"nav",
+					"navParams",
+					"href",
+					"disabled",
+					"variant",
+					"name",
+					"baseUrl",
+					"one",
+					"remote",
+					"label",
+					"noTranslate",
+					"params",
+					"noNative",
+					"icon",
+					"isRightIcon",
+					"iconOnly",
+					"stacked",
+					"imgSrc",
+					"nonClickable",
+					"inverted",
+					"isSubmit",
+					"tabindex"
+				],
+				outputs: ["configChange", "clicked"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PasswordInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-password-input",
+			template: `
+    @if (config(); as text) {
+      <m-label
+        [for]="text.name"
+        [placeholder]="text.label"
+        [params]="text.params"
+        [required]="required()"
+        [disabled]="disabled()"
+      />
+      <div class="input-wrapper">
+        <input
+          [id]="text.name ?? ''"
+          [attr.data-testid]="text.testid ?? (text.name ? text.name + '-input' : null)"
+          [value]="value()"
+          #inputElement
+          [class.error]="showErrors()"
+          [disabled]="disabled()"
+          [placeholder]="(text.placeholder ?? '') | translate: text.params"
+          (input)="onInput($event)"
+          (focus)="isFocused.set(true)"
+          (blur)="isFocused.set(false); touched.set(true)"
+          [type]="type()"
+        />
+        <m-one-button
+          type="button"
+          [disabled]="disabled()"
+          [name]="button()"
+          [color]="iconColor()"
+          (clicked)="toggleType()"
+        />
+      </div>
+      @if (showErrors()) {
+        @for (error of errors(); track $index) {
+          <m-text-output
+            variant="footer"
+            color="error"
+            [label]="error.message"
+          />
+        }
+      }
+    }
+  `,
+			imports: [
+				LabelComponent,
+				TextOutputComponent,
+				ButtonComponent,
+				TranslatePipe
+			],
+			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:block;width:100%}.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-password-input-padding-left, var(--m-label-required-space, .75em));background:var(--m-password-input-background, var(--m-background));border-color:var(--m-password-input-border, var(--m-input-color, var(--m-mm)))}.input-wrapper:hover:not(:has(.error)){border-color:var(--m-password-input-hover-border, color-mix(in srgb, var(--m-input-color, var(--m-mm)) 45%, rgba(0, 0, 0, .12)))}.input-wrapper .m-icon{--m-icon-size: 1.1em !important}.input-wrapper input{appearance:none;font-size:1em}.input-wrapper .m-one-button{height:100%;display:flex;align-items:center;justify-content:center;--m-button-size: 1em !important}\n"]
+		}]
+	}]
+});
+export { PasswordInputComponent };
+
+//# sourceMappingURL=magmonium-one-password-D3oTo41c.mjs.map

package/fesm2022/magmonium-one-password-D3oTo41c.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-password-D3oTo41c.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/text/password.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  signal,\n} from '@angular/core';\nimport { LabelComponent } from '../label';\nimport { TextOutputComponent } from '../../../text-output';\nimport { BaseTextInputComponent } from './base-text';\nimport { ButtonComponent } from '../../../button/ui/button';\nimport { TranslatePipe } from '../../../../pipe';\n\n@Component({\n  selector: 'm-password-input',\n  template: `\n    @if (config(); as text) {\n      <m-label\n        [for]=\"text.name\"\n        [placeholder]=\"text.label\"\n        [params]=\"text.params\"\n        [required]=\"required()\"\n        [disabled]=\"disabled()\"\n      />\n      <div class=\"input-wrapper\">\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          [disabled]=\"disabled()\"\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]=\"type()\"\n        />\n        <m-one-button\n          type=\"button\"\n          [disabled]=\"disabled()\"\n          [name]=\"button()\"\n          [color]=\"iconColor()\"\n          (clicked)=\"toggleType()\"\n        />\n      </div>\n      @if (showErrors()) {\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, ButtonComponent, TranslatePipe],\n  styleUrl: './password.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PasswordInputComponent extends BaseTextInputComponent {\n  isPassword = signal<boolean>(true);\n  type = computed(() => (this.isPassword() ? 'password' : 'text'));\n  button = computed(() => (!this.isPassword() ? 'eye' : 'eye_close'));\n\n  protected toggleType() {\n    this.isPassword.update((now) => !now);\n  }\n\n  protected onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.setValue(target?.value ?? '');\n  }\n}\n"],"mappings":";;;;;;;AA4DA,IAAa,yBAAb,MAAa,+BAA+B,uBAAsB;CAChE,aAAa,OAAgB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,OAAO,eAAgB,KAAK,WAAU,IAAK,aAAa,QAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAChE,SAAS,eAAgB,CAAC,KAAK,WAAU,IAAK,QAAQ,aAAa,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEzD,aAAU;EAClB,KAAK,WAAW,QAAQ,QAAQ,CAAC,GAAG;CACtC;CAEU,QAAQ,OAAY;EAC5B,MAAM,SAAS,MAAM;EACrB,KAAK,SAAS,QAAQ,SAAS,EAAE;CACnC;CAZW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,UAAA;EAAA,UA9CvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyCT,UAAA;EAAA,QAAA,CAAA,s8HAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MACS;IAAc,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAmB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,gBAAA,SAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,gBAAA,SAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,MAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAIlE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAhDlC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,UAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCT,SACQ;IAAC;IAAgB;IAAqB;IAAiB;GAAa;GAAC,iBAE7D,wBAAwB;GAAM,QAAA,CAAA,s8HAAA;EAAA,CAAA"}