@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-radio-group.mjs

@@ -0,0 +1,202 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+let nextId = 0;
+var RadioGroup = class RadioGroup {
+	id = input(`gbt-radio-group-${++nextId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	selected = signal(null, ...ngDevMode ? [{ debugName: "selected" }] : /* 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.selected.set(value);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	isSelected(value) {
+		return this.selected() === value;
+	}
+	selectOption(value) {
+		this.selected.set(value);
+		this.onChange(value);
+		this.onTouched();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: RadioGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: RadioGroup,
+		isStandalone: true,
+		selector: "gbt-radio-group",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => RadioGroup),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<fieldset\n  class=\"gbt-radio-group\"\n  [attr.data-orientation]=\"orientation()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-invalid]=\"errorMessage() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n>\n  <legend class=\"gbt-radio-group__legend\">{{ label() }}{{ required() ? ' *' : '' }}</legend>\n  <div class=\"gbt-radio-group__options\">\n    @for (option of options(); track option.value; let i = $index) {\n      <label class=\"gbt-radio-group__option\">\n        <input\n          type=\"radio\"\n          [id]=\"id() + '-' + i\"\n          [name]=\"id()\"\n          [value]=\"option.value\"\n          [checked]=\"isSelected(option.value)\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"selectOption(option.value)\"\n        />\n        <span>{{ option.label }}</span>\n      </label>\n    }\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-radio-group__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</fieldset>\n",
+		styles: [".gbt-radio-group{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;border:none}.gbt-radio-group:disabled,.gbt-radio-group[disabled]{opacity:.5}.gbt-radio-group__legend{padding:0;font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-radio-group__options{display:flex;flex-direction:column;gap:.5rem}.gbt-radio-group[data-orientation=horizontal] .gbt-radio-group__options{flex-direction:row;flex-wrap:wrap;gap:1.25rem}.gbt-radio-group__option{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-radio-group__option:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-radio-group__option:has(input:disabled){cursor:not-allowed;opacity:.5}.gbt-radio-group__option input{width:1rem;height:1rem;accent-color:var(--primary)}.gbt-radio-group__error{margin:0;font-size:.75rem;color:var(--color-error-text)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: RadioGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-radio-group",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => RadioGroup),
+				multi: true
+			}],
+			template: "<fieldset\n  class=\"gbt-radio-group\"\n  [attr.data-orientation]=\"orientation()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-invalid]=\"errorMessage() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n>\n  <legend class=\"gbt-radio-group__legend\">{{ label() }}{{ required() ? ' *' : '' }}</legend>\n  <div class=\"gbt-radio-group__options\">\n    @for (option of options(); track option.value; let i = $index) {\n      <label class=\"gbt-radio-group__option\">\n        <input\n          type=\"radio\"\n          [id]=\"id() + '-' + i\"\n          [name]=\"id()\"\n          [value]=\"option.value\"\n          [checked]=\"isSelected(option.value)\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"selectOption(option.value)\"\n        />\n        <span>{{ option.label }}</span>\n      </label>\n    }\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-radio-group__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</fieldset>\n",
+			styles: [".gbt-radio-group{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;border:none}.gbt-radio-group:disabled,.gbt-radio-group[disabled]{opacity:.5}.gbt-radio-group__legend{padding:0;font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-radio-group__options{display:flex;flex-direction:column;gap:.5rem}.gbt-radio-group[data-orientation=horizontal] .gbt-radio-group__options{flex-direction:row;flex-wrap:wrap;gap:1.25rem}.gbt-radio-group__option{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-primary);cursor:pointer}.gbt-radio-group__option:before{content:\"\";position:absolute;inset:50% auto auto 50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}.gbt-radio-group__option:has(input:disabled){cursor:not-allowed;opacity:.5}.gbt-radio-group__option input{width:1rem;height:1rem;accent-color:var(--primary)}.gbt-radio-group__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: true
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}]
+	}
+});
+export { RadioGroup };
+
+//# sourceMappingURL=masmarino-gabarit-radio-group.mjs.map

package/fesm2022/masmarino-gabarit-radio-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-radio-group.mjs","names":[],"sources":["../../../projects/gabarit/radio-group/radio-group.ts","../../../projects/gabarit/radio-group/radio-group.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  input,\n  signal,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nexport interface RadioOption<T = string> {\n  value: T\n  label: string\n  disabled?: boolean\n}\n\nlet nextId = 0\n\n@Component({\n  selector: 'gbt-radio-group',\n  standalone: true,\n  imports: [],\n  templateUrl: './radio-group.html',\n  styleUrl: './radio-group.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => RadioGroup),\n      multi: true,\n    },\n  ],\n})\nexport class RadioGroup<T = string> implements ControlValueAccessor {\n  id = input<string>(`gbt-radio-group-${++nextId}`)\n  label = input.required<string>()\n  options = input.required<RadioOption<T>[]>()\n  orientation = input<'vertical' | 'horizontal'>('vertical')\n  disabled = input(false, { transform: booleanAttribute })\n  required = input(false, { transform: booleanAttribute })\n  errorMessage = input<string | null>(null)\n\n  protected readonly selected = signal<T | null>(null)\n\n  private readonly formDisabled = signal(false)\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled())\n\n  private onChange: (value: T) => void = () => {}\n  private onTouched: () => void = () => {}\n\n  writeValue(value: T | null): void {\n    this.selected.set(value)\n  }\n\n  registerOnChange(fn: (value: T) => 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 isSelected(value: T): boolean {\n    return this.selected() === value\n  }\n\n  protected selectOption(value: T): void {\n    this.selected.set(value)\n    this.onChange(value)\n    this.onTouched()\n  }\n}\n","<fieldset\n  class=\"gbt-radio-group\"\n  [attr.data-orientation]=\"orientation()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-invalid]=\"errorMessage() ? true : null\"\n  [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n>\n  <legend class=\"gbt-radio-group__legend\">{{ label() }}{{ required() ? ' *' : '' }}</legend>\n  <div class=\"gbt-radio-group__options\">\n    @for (option of options(); track option.value; let i = $index) {\n      <label class=\"gbt-radio-group__option\">\n        <input\n          type=\"radio\"\n          [id]=\"id() + '-' + i\"\n          [name]=\"id()\"\n          [value]=\"option.value\"\n          [checked]=\"isSelected(option.value)\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"selectOption(option.value)\"\n        />\n        <span>{{ option.label }}</span>\n      </label>\n    }\n  </div>\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-radio-group__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</fieldset>\n"],"mappings":"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"}

package/fesm2022/masmarino-gabarit-save-status.mjs

@@ -0,0 +1,142 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { Icon } from "@masmarino/gabarit/icon";
+var SaveStatus = class SaveStatus {
+	state = input("idle", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	savingLabel = input("Saving…", ...ngDevMode ? [{ debugName: "savingLabel" }] : /* istanbul ignore next */ []);
+	savedLabel = input("Saved", ...ngDevMode ? [{ debugName: "savedLabel" }] : /* istanbul ignore next */ []);
+	errorLabel = input("Not saved", ...ngDevMode ? [{ debugName: "errorLabel" }] : /* istanbul ignore next */ []);
+	message = input(null, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	text = computed(() => {
+		switch (this.state()) {
+			case "saving": return this.message() ?? this.savingLabel();
+			case "saved": return this.message() ?? this.savedLabel();
+			case "error": return this.message() ?? this.errorLabel();
+			default: return "";
+		}
+	}, ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SaveStatus,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SaveStatus,
+		isStandalone: true,
+		selector: "gbt-save-status",
+		inputs: {
+			state: {
+				classPropertyName: "state",
+				publicName: "state",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			savingLabel: {
+				classPropertyName: "savingLabel",
+				publicName: "savingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			savedLabel: {
+				classPropertyName: "savedLabel",
+				publicName: "savedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorLabel: {
+				classPropertyName: "errorLabel",
+				publicName: "errorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<span class=\"gbt-save-status\" role=\"status\" [attr.data-state]=\"state()\">\n  @switch (state()) {\n    @case ('saving') {\n      <span class=\"gbt-save-status__spinner\" aria-hidden=\"true\"></span>\n    }\n    @case ('saved') {\n      <gbt-icon name=\"check\" />\n    }\n    @case ('error') {\n      <gbt-icon name=\"alert-circle\" />\n    }\n  }\n  <span class=\"gbt-save-status__text\">{{ text() }}</span>\n</span>\n",
+		styles: [":host{display:inline-flex}.gbt-save-status{display:inline-flex;align-items:center;gap:.375rem;min-height:1.25rem;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-save-status[data-state=saved]{color:var(--color-success-text)}.gbt-save-status[data-state=error]{color:var(--color-error-text)}.gbt-save-status gbt-icon{flex:none;font-size:.75rem}.gbt-save-status__spinner{flex:none;box-sizing:border-box;width:.75rem;height:.75rem;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:gbt-save-status-spin .7s linear infinite}@keyframes gbt-save-status-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.gbt-save-status__spinner{animation:none;border-color:var(--primary)}}\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: SaveStatus,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-save-status",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span class=\"gbt-save-status\" role=\"status\" [attr.data-state]=\"state()\">\n  @switch (state()) {\n    @case ('saving') {\n      <span class=\"gbt-save-status__spinner\" aria-hidden=\"true\"></span>\n    }\n    @case ('saved') {\n      <gbt-icon name=\"check\" />\n    }\n    @case ('error') {\n      <gbt-icon name=\"alert-circle\" />\n    }\n  }\n  <span class=\"gbt-save-status__text\">{{ text() }}</span>\n</span>\n",
+			styles: [":host{display:inline-flex}.gbt-save-status{display:inline-flex;align-items:center;gap:.375rem;min-height:1.25rem;color:var(--text-secondary);font-size:.8125rem;line-height:1.25rem}.gbt-save-status[data-state=saved]{color:var(--color-success-text)}.gbt-save-status[data-state=error]{color:var(--color-error-text)}.gbt-save-status gbt-icon{flex:none;font-size:.75rem}.gbt-save-status__spinner{flex:none;box-sizing:border-box;width:.75rem;height:.75rem;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:gbt-save-status-spin .7s linear infinite}@keyframes gbt-save-status-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.gbt-save-status__spinner{animation:none;border-color:var(--primary)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		state: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "state",
+				required: false
+			}]
+		}],
+		savingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "savingLabel",
+				required: false
+			}]
+		}],
+		savedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "savedLabel",
+				required: false
+			}]
+		}],
+		errorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorLabel",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}]
+	}
+});
+export { SaveStatus };
+
+//# sourceMappingURL=masmarino-gabarit-save-status.mjs.map

package/fesm2022/masmarino-gabarit-save-status.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masmarino-gabarit-save-status.mjs","names":[],"sources":["../../../projects/gabarit/save-status/save-status.ts","../../../projects/gabarit/save-status/save-status.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'\nimport { Icon } from '@masmarino/gabarit/icon'\n\nexport type SaveStatusState = 'idle' | 'saving' | 'saved' | 'error'\n\n@Component({\n  selector: 'gbt-save-status',\n  standalone: true,\n  imports: [Icon],\n  templateUrl: './save-status.html',\n  styleUrl: './save-status.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SaveStatus {\n  state = input<SaveStatusState>('idle')\n  savingLabel = input('Saving…')\n  savedLabel = input('Saved')\n  errorLabel = input('Not saved')\n  message = input<string | null>(null)\n\n  protected readonly text = computed(() => {\n    switch (this.state()) {\n      case 'saving':\n        return this.message() ?? this.savingLabel()\n      case 'saved':\n        return this.message() ?? this.savedLabel()\n      case 'error':\n        return this.message() ?? this.errorLabel()\n      default:\n        return ''\n    }\n  })\n}\n","<span class=\"gbt-save-status\" role=\"status\" [attr.data-state]=\"state()\">\n  @switch (state()) {\n    @case ('saving') {\n      <span class=\"gbt-save-status__spinner\" aria-hidden=\"true\"></span>\n    }\n    @case ('saved') {\n      <gbt-icon name=\"check\" />\n    }\n    @case ('error') {\n      <gbt-icon name=\"alert-circle\" />\n    }\n  }\n  <span class=\"gbt-save-status__text\">{{ text() }}</span>\n</span>\n"],"mappings":";;;AAaA,IAAa,aAAb,MAAa,WAAU;CACrB,QAAQ,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,cAAc,MAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAC9B,aAAa,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,aAAa,MAAM,aAAY,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,UAAU,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,OAAO,eAAc;EACtC,QAAQ,KAAK,MAAK,GAAlB;GACE,KAAK,UACH,OAAO,KAAK,QAAO,KAAM,KAAK,YAAW;GAC3C,KAAK,SACH,OAAO,KAAK,QAAO,KAAM,KAAK,WAAU;GAC1C,KAAK,SACH,OAAO,KAAK,QAAO,KAAM,KAAK,WAAU;GAC1C,SACE,OAAO;EACX;CACF,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAlBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCbvB;EAcA,QAAA,CAAA,yvBAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDNY;GAAI,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKH,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EARtB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,IAAI;GAAC,iBAGE,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,yvBAAA;EAAA,CAAA"}