@tinya-code/gas-admin-ui 0.2.0-alpha.15 → 0.2.0-alpha.18

package/fesm2022/tinya-code-gas-admin-ui-select-CDwX9yNO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-select-CDwX9yNO.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/fields/select/select.ts"],"sourcesContent":["import { Component, computed, inject, input, resource, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\n\nimport type { SelectField, SelectOption } from '../../core/models/schema.model';\nimport { DataSourceService, dataSourceKey } from '../../core/services/data-source.service';\nimport { optionsFromRows } from '../../core/utils/source-options';\nimport { getSchema } from '../../core/registry/schema-catalog';\nimport { FieldAria } from '../field-aria';\nimport { childTree, type RootTree } from '../field-node';\nimport { esGrupoRadio } from './radio-mode';\n\n/**\n * Desplegable de un solo valor (base.md §5.1).\n *\n * Sus opciones se declaran de dos formas y **exactamente una** (XOR, D62):\n * `options` estáticas en el schema o `source` — una fuente declarada que\n * pide `DataSourceService` con la misma caché que usan las relaciones y los\n * widgets (F8 · R6.5). Mientras la vuelta no llega se anuncia; sin anuncio\n * un desplegable vacío se confundiría con «esto no tiene opciones».\n */\n@Component({\n  selector: 'app-field-select',\n  imports: [FieldAria, FormField],\n  template: `\n    @if (fallo()) {\n      <p class=\"mb-1 text-xs text-danger\" role=\"alert\">No se pudieron cargar las opciones.</p>\n    } @else if (cargando()) {\n      <p class=\"mb-1 text-xs text-neutral\" role=\"status\">Cargando opciones…</p>\n    }\n    @if (useRadio()) {\n      <!-- Guía de control: 2–4 opciones estáticas → radio buttons, no un\n           desplegable. Cada opción es un label implícito (texto y control\n           juntos) y el grupo se nombra con aria-label: el rótulo del host\n           se dibuja como texto porque un grupo no es un único control con\n           el que emparejar un for. formField va en CADA input: Signal\n           Forms soporta radio (checked = value === element.value) y setea\n           name/disabled del grupo por estado de campo. -->\n      <div\n        class=\"mt-1 flex flex-col gap-1\"\n        role=\"radiogroup\"\n        [attr.aria-label]=\"field().label\"\n        data-testid=\"select-radios\"\n      >\n        @if (!field().required) {\n          <label class=\"flex w-fit items-center gap-2 text-sm\">\n            <input\n              type=\"radio\"\n              class=\"accent-primary\"\n              [id]=\"state().name() + '-__vacio'\"\n              value=\"\"\n              [formField]=\"node()\"\n            />\n            <span class=\"text-neutral\">{{ field().placeholder ?? '— Seleccionar —' }}</span>\n          </label>\n        }\n        @for (option of options(); track option.value) {\n          <label class=\"flex w-fit items-center gap-2 text-sm\">\n            <input\n              type=\"radio\"\n              class=\"accent-primary\"\n              [id]=\"state().name() + '-' + option.value\"\n              [value]=\"option.value\"\n              [formField]=\"node()\"\n            />\n            <span>{{ option.label }}</span>\n          </label>\n        }\n      </div>\n    } @else {\n      @if (useSearch()) {\n        <!-- Guía §1: más de 7 opciones → dropdown con búsqueda. Se filtra el\n             select nativo en vez de construir un combobox: el teclado, el\n             anuncio de la opción activa y el valor elegido siguen siendo los\n             del navegador. -->\n        <input\n          type=\"search\"\n          class=\"mb-1 w-full rounded-lg border border-neutral/30 bg-surface px-2 py-1 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          placeholder=\"Buscar…\"\n          aria-label=\"Buscar entre las opciones\"\n          [attr.aria-controls]=\"state().name()\"\n          [value]=\"query()\"\n          (input)=\"onQuery($event)\"\n        />\n      }\n      <select class=\"field-input\" [id]=\"state().name()\" [formField]=\"node()\">\n        @if (!field().required) {\n          <option value=\"\">{{ field().placeholder ?? '— Seleccionar —' }}</option>\n        }\n        @for (option of visibleOptions(); track option.value) {\n          <option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">\n            {{ option.label }}\n          </option>\n        }\n      </select>\n      @if (noMatches()) {\n        <p class=\"mt-1 text-xs text-neutral\" role=\"status\">Sin resultados para «{{ query() }}».</p>\n      }\n    }\n  `,\n})\nexport class FieldSelect {\n  readonly field = input.required<SelectField>();\n  readonly tree = input.required<RootTree>();\n\n  private readonly ds = inject(DataSourceService);\n\n  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));\n  protected readonly state = computed(() => this.node()());\n\n  /** Texto escrito en el buscador (sólo se usa si supera el umbral). */\n  protected readonly query = signal('');\n\n  /**\n   * Registro del formulario, sólo para resolver `{campo}` en `source.params`.\n   * Sin parámetros declarados no se lee: el campo no depende del formulario.\n   */\n  private readonly registro = computed<Record<string, unknown> | undefined>(() => {\n    const source = this.field().source;\n    if (source === undefined || source.params === undefined) return undefined;\n    return this.tree()().value();\n  });\n\n  /** `undefined` sin fuente ⇒ `resource` queda idle y jamás llama al loader. */\n  private readonly claveFuente = computed(() => {\n    const source = this.field().source;\n    return source === undefined ? undefined : dataSourceKey(source, this.registro());\n  });\n\n  private readonly fuenteResource = resource({\n    params: () => this.claveFuente(),\n    loader: async () => {\n      const source = this.field().source;\n      if (source === undefined) return [];\n      return this.ds.rows(source, this.registro());\n    },\n  });\n\n  /**\n   * Opciones efectivas: las estáticas del schema o las filas de la fuente\n   * declarada, mapeadas con la misma regla que una relación (F8 · R6.5).\n   */\n  protected readonly options = computed<SelectOption[]>(() => {\n    const field = this.field();\n    if (field.source === undefined) return field.options ?? [];\n    // `value()` del resource TIRA en estado error (contract de Angular):\n    // se mira el estado antes de leerlo, o el propio render rompe en vez\n    // de pintar el aviso de fallo.\n    if (this.fuenteResource.status() === 'error') return [];\n    return optionsFromRows(this.fuenteResource.value() ?? [], {\n      source: field.source,\n      target: getSchema(field.source.resource),\n    });\n  });\n\n  /** Sólo aplica con `source`: una lista estática no tiene vuelta que esperar. */\n  protected readonly cargando = computed(\n    () => this.claveFuente() !== undefined && this.fuenteResource.status() === 'loading',\n  );\n\n  protected readonly fallo = computed(\n    () => this.claveFuente() !== undefined && this.fuenteResource.status() === 'error',\n  );\n\n  /** Umbral de la guía §1: 5–7 opciones dropdown simple, más de 7 con búsqueda. */\n  protected readonly useSearch = computed(() => this.options().length > 7);\n\n  /** Guía §1: 2–4 opciones estáticas → radio buttons (ver `radio-mode.ts`). */\n  protected readonly useRadio = computed(() => esGrupoRadio(this.field()));\n\n  protected onQuery(event: Event): void {\n    this.query.set((event.target as HTMLInputElement).value);\n  }\n\n  /**\n   * Opciones que coinciden con el término, SIN conservar la elegida: es la\n   * base del mensaje «Sin resultados».\n   */\n  protected readonly matches = computed<SelectOption[]>(() => {\n    const all = this.options();\n    const term = this.query().trim().toLowerCase();\n    if (term === '') {\n      return all;\n    }\n    return all.filter((option) => option.label.toLowerCase().includes(term));\n  });\n\n  /** El buscador está activo y no encontró nada nuevo (el elegido no cuenta). */\n  protected readonly noMatches = computed(\n    () => this.useSearch() && this.query().trim() !== '' && this.matches().length === 0,\n  );\n\n  /**\n   * Opciones que se dibujan. Con búsqueda activa se acotan por etiqueta, pero\n   * la opción elegida se conserva siempre aunque no coincida con el término:\n   * si desapareciera del DOM, el select dejaría de mostrar el valor actual\n   * (guía §1: «valor seleccionado siempre visible»).\n   */\n  protected readonly visibleOptions = computed<SelectOption[]>(() => {\n    const filtered = this.matches();\n    if (this.query().trim() === '') {\n      return filtered;\n    }\n    const selected = String(this.state().value() ?? '');\n    if (filtered.some((option) => option.value === selected)) {\n      return filtered;\n    }\n    const kept = this.options().find((option) => option.value === selected);\n    return kept === undefined ? filtered : [...filtered, kept];\n  });\n}\n"],"mappings":"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"}

package/fesm2022/tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs

@@ -0,0 +1,119 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+var Skeleton = class Skeleton {
+	lines = input(1, ...ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []);
+	height = input(16, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	width = input("100%", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	lineCount = computed(() => {
+		const lines = Math.floor(this.lines());
+		const count = Number.isFinite(lines) && lines > 0 ? lines : 1;
+		return Array.from({ length: count }, (_, index) => index);
+	}, ...ngDevMode ? [{ debugName: "lineCount" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Skeleton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Skeleton,
+		isStandalone: true,
+		selector: "app-skeleton",
+		inputs: {
+			lines: {
+				classPropertyName: "lines",
+				publicName: "lines",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "aria-hidden": "true" },
+			classAttribute: "block space-y-2"
+		},
+		ngImport: i0,
+		template: `
+    @for (line of lineCount(); track line) {
+      <div
+        class="animate-pulse rounded bg-neutral/15"
+        [style.height.px]="height()"
+        [style.width]="width()"
+      ></div>
+    }
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Skeleton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-skeleton",
+			host: {
+				class: "block space-y-2",
+				"aria-hidden": "true"
+			},
+			template: `
+    @for (line of lineCount(); track line) {
+      <div
+        class="animate-pulse rounded bg-neutral/15"
+        [style.height.px]="height()"
+        [style.width]="width()"
+      ></div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		lines: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lines",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}]
+	}
+});
+export { Skeleton as t };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-skeleton-DnWK0tcZ.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/shared/components/skeleton/skeleton.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/**\n * Bloque de carga decorativo: oculto para lectores (`aria-hidden`); la\n * región que lo contiene debe exponer `aria-busy=\"true\"`.\n */\n@Component({\n  selector: 'app-skeleton',\n  host: { class: 'block space-y-2', 'aria-hidden': 'true' },\n  template: `\n    @for (line of lineCount(); track line) {\n      <div\n        class=\"animate-pulse rounded bg-neutral/15\"\n        [style.height.px]=\"height()\"\n        [style.width]=\"width()\"\n      ></div>\n    }\n  `,\n})\nexport class Skeleton {\n  /** Cantidad de barras (mínimo 1). */\n  readonly lines = input(1);\n  readonly height = input(16);\n  readonly width = input('100%');\n\n  readonly lineCount = computed(() => {\n    const lines = Math.floor(this.lines());\n    const count = Number.isFinite(lines) && lines > 0 ? lines : 1;\n    return Array.from({ length: count }, (_, index) => index);\n  });\n}\n"],"mappings":";;AAmBA,IAAa,WAAb,MAAa,SAAQ;CAEV,QAAQ,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChB,SAAS,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,QAAQ,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAErB,YAAY,eAAc;EACjC,MAAM,QAAQ,KAAK,MAAM,KAAK,MAAK,CAAE;EACrC,MAAM,QAAQ,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;EAC5D,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAK,IAAK,GAAG,UAAU,KAAK;CAC1D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAVS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,eAAA,OAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAVT;;;;;;;;;EAQT,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAbpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IAAE,OAAO;IAAmB,eAAe;GAAM;GACvD,UAAU;;;;;;;;;EASX,CAAA"}

package/fesm2022/tinya-code-gas-admin-ui-slug-DU58cbiY.mjs

@@ -0,0 +1,158 @@
+import { n as FieldAria } from "./tinya-code-gas-admin-ui-field-aria-BD1Wiggc.mjs";
+import { t as childTree } from "./tinya-code-gas-admin-ui-field-node-CIK6KNN_.mjs";
+import * as i0 from "@angular/core";
+import { Component, computed, effect, input, signal } from "@angular/core";
+import { FormField } from "@angular/forms/signals";
+function slugify(value) {
+	return value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+var FieldSlug = class FieldSlug {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	tree = input.required(...ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []);
+	exists = input(false, ...ngDevMode ? [{ debugName: "exists" }] : /* istanbul ignore next */ []);
+	manual = signal(false, ...ngDevMode ? [{ debugName: "manual" }] : /* istanbul ignore next */ []);
+	node = computed(() => childTree(this.tree(), this.field().key), ...ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.node()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	locked = computed(() => this.field().lockAfterCreate !== false && this.exists(), ...ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []);
+	sourceValue = computed(() => childTree(this.tree(), this.field().from)().value(), ...ngDevMode ? [{ debugName: "sourceValue" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (this.locked() || this.manual()) return;
+			this.state().value.set(slugify(String(this.sourceValue() ?? "")));
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FieldSlug,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: FieldSlug,
+		isStandalone: true,
+		selector: "app-field-slug",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tree: {
+				classPropertyName: "tree",
+				publicName: "tree",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			exists: {
+				classPropertyName: "exists",
+				publicName: "exists",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (locked()) {
+      <input
+        type="text"
+        class="field-input"
+        [id]="state().name()"
+        [value]="state().value()"
+        readonly
+      />
+    } @else {
+      <input
+        type="text"
+        class="field-input"
+        [id]="state().name()"
+        [formField]="node()"
+        [placeholder]="field().placeholder ?? ''"
+        (input)="manual.set(true)"
+      />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: FieldAria,
+			selector: "input[id], select[id], textarea[id], output[id]"
+		}, {
+			kind: "directive",
+			type: FormField,
+			selector: "[formField]",
+			inputs: ["formField"],
+			exportAs: ["formField"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: FieldSlug,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-slug",
+			imports: [FieldAria, FormField],
+			template: `
+    @if (locked()) {
+      <input
+        type="text"
+        class="field-input"
+        [id]="state().name()"
+        [value]="state().value()"
+        readonly
+      />
+    } @else {
+      <input
+        type="text"
+        class="field-input"
+        [id]="state().name()"
+        [formField]="node()"
+        [placeholder]="field().placeholder ?? ''"
+        (input)="manual.set(true)"
+      />
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		tree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tree",
+				required: true
+			}]
+		}],
+		exists: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "exists",
+				required: false
+			}]
+		}]
+	}
+});
+export { FieldSlug };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-slug-DU58cbiY.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-slug-DU58cbiY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-slug-DU58cbiY.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/shared/utils/slugify.ts","../../../projects/gas-admin-ui/src/lib/fields/slug/slug.ts"],"sourcesContent":["/**\n * Normaliza texto a slug: minúsculas, sin acentos, separados por guiones.\n * Ej.: `Lomo Saltado Ñoño` → `lomo-saltado-nonio`.\n */\nexport function slugify(value: string): string {\n  return value\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    .toLowerCase()\n    .trim()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-+|-+$/g, '');\n}\n","import { Component, computed, effect, input, signal } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\n\nimport type { SlugField } from '../../core/models/schema.model';\nimport { slugify } from '../../shared/utils/slugify';\nimport { FieldAria } from '../field-aria';\nimport { childTree, type RootTree } from '../field-node';\n\n/**\n * Slug autogenerado desde otro campo (base.md §5.1). Se regenera mientras el\n * usuario no lo edite a mano; queda bloqueado tras crear el registro si\n * `lockAfterCreate` no es `false`. La rama bloqueada no usa `formField`\n * (atributo `readonly` estático y sin sincronización).\n */\n@Component({\n  selector: 'app-field-slug',\n  imports: [FieldAria, FormField],\n  template: `\n    @if (locked()) {\n      <input\n        type=\"text\"\n        class=\"field-input\"\n        [id]=\"state().name()\"\n        [value]=\"state().value()\"\n        readonly\n      />\n    } @else {\n      <input\n        type=\"text\"\n        class=\"field-input\"\n        [id]=\"state().name()\"\n        [formField]=\"node()\"\n        [placeholder]=\"field().placeholder ?? ''\"\n        (input)=\"manual.set(true)\"\n      />\n    }\n  `,\n})\nexport class FieldSlug {\n  readonly field = input.required<SlugField>();\n  readonly tree = input.required<RootTree>();\n  /** Si el registro ya existe (lo informa form-view, Fase 10). */\n  readonly exists = input(false);\n\n  /** Edición manual del usuario: corta la autogeneración. */\n  protected readonly manual = signal(false);\n\n  protected readonly node = computed(() => childTree<string>(this.tree(), this.field().key));\n  protected readonly state = computed(() => this.node()());\n\n  protected readonly locked = computed(\n    () => this.field().lockAfterCreate !== false && this.exists(),\n  );\n\n  private readonly sourceValue = computed(() =>\n    childTree<unknown>(this.tree(), this.field().from)().value(),\n  );\n\n  constructor() {\n    effect(() => {\n      if (this.locked() || this.manual()) {\n        return;\n      }\n      this.state().value.set(slugify(String(this.sourceValue() ?? '')));\n    });\n  }\n}\n"],"mappings":";;;;;AAIA,SAAgB,QAAQ,OAAa;CACnC,OAAO,MACJ,UAAU,KAAK,CAAC,CAChB,QAAQ,oBAAoB,EAAE,CAAC,CAC/B,YAAW,CAAE,CACb,KAAI,CAAE,CACN,QAAQ,eAAe,GAAG,CAAC,CAC3B,QAAQ,YAAY,EAAE;AAC3B;AC0BA,IAAa,YAAb,MAAa,UAAS;CACX,QAAQ,MAAM,SAAqB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,OAAO,MAAM,SAAoB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEjC,SAAS,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGX,SAAS,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,OAAO,eAAe,UAAkB,KAAK,KAAI,GAAI,KAAK,MAAK,CAAE,CAAC,GAAG,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACvE,QAAQ,eAAe,KAAK,KAAI,CAAE,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAErC,SAAS,eACpB,KAAK,MAAK,CAAE,CAAC,oBAAoB,SAAS,KAAK,OAAM,GAC5D,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEgB,cAAc,eAC7B,UAAmB,KAAK,KAAI,GAAI,KAAK,MAAK,CAAE,CAAC,IAAI,CAAC,CAAA,CAAE,CAAC,MAAK,GAC3D,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAED,cAAA;EACE,aAAY;GACV,IAAI,KAAK,OAAM,KAAM,KAAK,OAAM,GAC9B;GAEF,KAAK,MAAK,CAAE,CAAC,MAAM,IAAI,QAAQ,OAAO,KAAK,YAAW,KAAM,EAAE,CAAC,CAAC;EAClE,CAAC;CACH;CA3BW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UArBV;;;;;;;;;;;;;;;;;;;;EAmBT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MApBS;GAAS,UAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAS,UAAA;GAAA,QAAA,CAAA,WAAA;GAAA,UAAA,CAAA,WAAA;EAAA,CAAA;CAAA,CAAA;;AAsBnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAxBrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,SAAS,CAAC,WAAW,SAAS;GAC9B,UAAU;;;;;;;;;;;;;;;;;;;;EAoBX,CAAA"}

package/fesm2022/tinya-code-gas-admin-ui-source-options-B9R4mw8-.mjs

@@ -0,0 +1,26 @@
+function optionsFromRows(rows, { source, target, onlyActive, secondaryField }) {
+	const valueKey = source.valueField ?? target?.keyField ?? "id";
+	const labelKey = source.labelField ?? target?.titleField ?? valueKey;
+	const options = [];
+	for (const row of rows) {
+		if (onlyActive === true && row["active"] === false) continue;
+		const value = row[valueKey];
+		if (value === void 0 || value === null || value === "") continue;
+		const label = row[labelKey];
+		const primary = typeof label === "string" && label !== "" ? label : String(value);
+		options.push({
+			value: String(value),
+			label: withSecondary(primary, row, secondaryField)
+		});
+	}
+	return options;
+}
+function withSecondary(primary, row, key) {
+	if (key === void 0) return primary;
+	const secondary = row[key];
+	if (secondary === void 0 || secondary === null || secondary === "") return primary;
+	return `${primary} · ${String(secondary)}`;
+}
+export { optionsFromRows as t };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-source-options-B9R4mw8-.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-source-options-B9R4mw8-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-source-options-B9R4mw8-.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/core/utils/source-options.ts"],"sourcesContent":["import type { DataSource, ResourceSchema, SelectOption } from '../models/schema.model';\n\n/** Contexto de mapeo: la fuente declarada más las particularidades del campo. */\nexport interface RowsToOptions {\n  /** Fuente de la que salieron las filas (F8 · R6.5). */\n  source: DataSource;\n  /** Schema del recurso destino: aporta `keyField`/`titleField` por defecto. */\n  target: ResourceSchema | undefined;\n  /** Descarta filas con `active: false` (`relation.onlyActive`). */\n  onlyActive?: boolean;\n  /** Dato secundario junto a la etiqueta («Juan Pérez · DNI 123»). */\n  secondaryField?: string;\n}\n\n/**\n * Filas de una fuente declarada → opciones de desplegable (F8 · R6.5).\n *\n * Es el ÚNICO punto que traduce filas a `SelectOption`: antes esa regla\n * estaba escrita dos veces (en `relation` y cada consumidor montaba su\n * propia petición). Con `source` compartido, relaciones y desplegables con\n * datos remotos pasan por acá.\n *\n * Reglas, en orden:\n * - valor: `source.valueField` → `target.keyField` → `id`;\n * - etiqueta: `source.labelField` → `target.titleField` → el valor;\n * - fila sin valor (vacío o inexistente) no es opción: no hay qué seleccionar;\n * - `onlyActive` descarta las inactivas en el cliente — el back ya las excluye\n *   de su FK, pero una lista cacheada puede traer una fila vieja.\n */\nexport function optionsFromRows(\n  rows: readonly Record<string, unknown>[],\n  { source, target, onlyActive, secondaryField }: RowsToOptions,\n): SelectOption[] {\n  const valueKey = source.valueField ?? target?.keyField ?? 'id';\n  const labelKey = source.labelField ?? target?.titleField ?? valueKey;\n  const options: SelectOption[] = [];\n  for (const row of rows) {\n    if (onlyActive === true && row['active'] === false) continue;\n    const value = row[valueKey];\n    if (value === undefined || value === null || value === '') continue;\n    const label = row[labelKey];\n    const primary = typeof label === 'string' && label !== '' ? label : String(value);\n    options.push({ value: String(value), label: withSecondary(primary, row, secondaryField) });\n  }\n  return options;\n}\n\n/** Etiqueta con su dato secundario, o la etiqueta tal cual si no hay. */\nfunction withSecondary(primary: string, row: Record<string, unknown>, key?: string): string {\n  if (key === undefined) return primary;\n  const secondary = row[key];\n  if (secondary === undefined || secondary === null || secondary === '') return primary;\n  return `${primary} · ${String(secondary)}`;\n}\n"],"mappings":"AA6BA,SAAgB,gBACd,MACA,EAAE,QAAQ,QAAQ,YAAY,kBAA+B;CAE7D,MAAM,WAAW,OAAO,cAAc,QAAQ,YAAY;CAC1D,MAAM,WAAW,OAAO,cAAc,QAAQ,cAAc;CAC5D,MAAM,UAA0B,CAAA;CAChC,KAAK,MAAM,OAAO,MAAM;EACtB,IAAI,eAAe,QAAQ,IAAI,cAAc,OAAO;EACpD,MAAM,QAAQ,IAAI;EAClB,IAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,IAAI;EAC3D,MAAM,QAAQ,IAAI;EAClB,MAAM,UAAU,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ,OAAO,KAAK;EAChF,QAAQ,KAAK;GAAE,OAAO,OAAO,KAAK;GAAG,OAAO,cAAc,SAAS,KAAK,cAAc;EAAC,CAAE;CAC3F;CACA,OAAO;AACT;AAGA,SAAS,cAAc,SAAiB,KAA8B,KAAY;CAChF,IAAI,QAAQ,QAAW,OAAO;CAC9B,MAAM,YAAY,IAAI;CACtB,IAAI,cAAc,UAAa,cAAc,QAAQ,cAAc,IAAI,OAAO;CAC9E,OAAO,GAAG,QAAO,KAAM,OAAO,SAAS;AACzC"}

package/fesm2022/tinya-code-gas-admin-ui-status-progress-DmeG8htE.mjs

@@ -0,0 +1,205 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const COLOR_MAP = {
+	success: {
+		bar: "bg-emerald-500",
+		dot: "bg-emerald-500"
+	},
+	warning: {
+		bar: "bg-amber-500",
+		dot: "bg-amber-500"
+	},
+	danger: {
+		bar: "bg-rose-500",
+		dot: "bg-rose-500"
+	},
+	neutral: {
+		bar: "bg-neutral/40",
+		dot: "bg-neutral/40"
+	}
+};
+var StatusProgress = class StatusProgress {
+	widget = input.required(...ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []);
+	data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	totalCount = computed(() => {
+		const d = this.data() || {};
+		return this.widget().segments.reduce((acc, seg) => {
+			const val = Number(d[seg.key]);
+			return acc + (isNaN(val) ? 0 : Math.max(0, val));
+		}, 0);
+	}, ...ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []);
+	calculatedSegments = computed(() => {
+		const d = this.data() || {};
+		const total = this.totalCount();
+		return this.widget().segments.map((seg) => {
+			const raw = Number(d[seg.key]);
+			const value = isNaN(raw) ? 0 : Math.max(0, raw);
+			const percentage = total > 0 ? value / total * 100 : 0;
+			const colors = COLOR_MAP[seg.color] || COLOR_MAP["neutral"];
+			return {
+				key: seg.key,
+				label: seg.label,
+				value,
+				percentage,
+				barClass: colors.bar,
+				dotClass: colors.dot
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "calculatedSegments" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: StatusProgress,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: StatusProgress,
+		isStandalone: true,
+		selector: "app-status-progress",
+		inputs: {
+			widget: {
+				classPropertyName: "widget",
+				publicName: "widget",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <article class="flex h-full flex-col rounded-xl border border-neutral/20 bg-surface p-4">
+      <header class="mb-3 flex items-center justify-between">
+        <h2 class="text-sm font-semibold text-neutral-light">{{ widget().label }}</h2>
+        <span class="text-xs text-neutral" data-testid="total-count">
+          Total: {{ totalCount() }}
+        </span>
+      </header>
+
+      <!-- Barra segmentada -->
+      <div
+        class="flex h-3 w-full overflow-hidden rounded-full bg-neutral/10"
+        role="progressbar"
+        [attr.aria-valuenow]="totalCount()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="totalCount()"
+        [attr.aria-label]="widget().label"
+      >
+        @if (totalCount() === 0) {
+          <div class="h-full w-full bg-neutral/20"></div>
+        } @else {
+          @for (seg of calculatedSegments(); track seg.key) {
+            @if (seg.percentage > 0) {
+              <div
+                [class]="seg.barClass"
+                [style.width.%]="seg.percentage"
+                [title]="seg.label + ': ' + seg.value + ' (' + seg.percentage.toFixed(1) + '%)'"
+              ></div>
+            }
+          }
+        }
+      </div>
+
+      <!-- Leyenda -->
+      <div class="mt-3.5 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
+        @for (seg of calculatedSegments(); track seg.key) {
+          <div class="flex items-center gap-1.5 text-neutral-light">
+            <span class="h-2 w-2 rounded-full" [class]="seg.dotClass"></span>
+            <span class="font-medium">{{ seg.label }}:</span>
+            <span class="text-neutral">{{ seg.value }} ({{ seg.percentage.toFixed(0) }}%)</span>
+          </div>
+        }
+      </div>
+    </article>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: StatusProgress,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-status-progress",
+			template: `
+    <article class="flex h-full flex-col rounded-xl border border-neutral/20 bg-surface p-4">
+      <header class="mb-3 flex items-center justify-between">
+        <h2 class="text-sm font-semibold text-neutral-light">{{ widget().label }}</h2>
+        <span class="text-xs text-neutral" data-testid="total-count">
+          Total: {{ totalCount() }}
+        </span>
+      </header>
+
+      <!-- Barra segmentada -->
+      <div
+        class="flex h-3 w-full overflow-hidden rounded-full bg-neutral/10"
+        role="progressbar"
+        [attr.aria-valuenow]="totalCount()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="totalCount()"
+        [attr.aria-label]="widget().label"
+      >
+        @if (totalCount() === 0) {
+          <div class="h-full w-full bg-neutral/20"></div>
+        } @else {
+          @for (seg of calculatedSegments(); track seg.key) {
+            @if (seg.percentage > 0) {
+              <div
+                [class]="seg.barClass"
+                [style.width.%]="seg.percentage"
+                [title]="seg.label + ': ' + seg.value + ' (' + seg.percentage.toFixed(1) + '%)'"
+              ></div>
+            }
+          }
+        }
+      </div>
+
+      <!-- Leyenda -->
+      <div class="mt-3.5 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
+        @for (seg of calculatedSegments(); track seg.key) {
+          <div class="flex items-center gap-1.5 text-neutral-light">
+            <span class="h-2 w-2 rounded-full" [class]="seg.dotClass"></span>
+            <span class="font-medium">{{ seg.label }}:</span>
+            <span class="text-neutral">{{ seg.value }} ({{ seg.percentage.toFixed(0) }}%)</span>
+          </div>
+        }
+      </div>
+    </article>
+  `
+		}]
+	}],
+	propDecorators: {
+		widget: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "widget",
+				required: true
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}]
+	}
+});
+export { StatusProgress };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-status-progress-DmeG8htE.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-status-progress-DmeG8htE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-status-progress-DmeG8htE.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/widgets/status-progress/status-progress.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nimport type { StatusProgressWidget } from '../../core/models/schema.model';\n\ninterface SegmentDisplay {\n  key: string;\n  label: string;\n  value: number;\n  percentage: number;\n  barClass: string;\n  dotClass: string;\n}\n\nconst COLOR_MAP: Record<string, { bar: string; dot: string }> = {\n  success: { bar: 'bg-emerald-500', dot: 'bg-emerald-500' },\n  warning: { bar: 'bg-amber-500', dot: 'bg-amber-500' },\n  danger: { bar: 'bg-rose-500', dot: 'bg-rose-500' },\n  neutral: { bar: 'bg-neutral/40', dot: 'bg-neutral/40' },\n};\n\n/**\n * Barra de distribución porcentual de estados operativos.\n */\n@Component({\n  selector: 'app-status-progress',\n  template: `\n    <article class=\"flex h-full flex-col rounded-xl border border-neutral/20 bg-surface p-4\">\n      <header class=\"mb-3 flex items-center justify-between\">\n        <h2 class=\"text-sm font-semibold text-neutral-light\">{{ widget().label }}</h2>\n        <span class=\"text-xs text-neutral\" data-testid=\"total-count\">\n          Total: {{ totalCount() }}\n        </span>\n      </header>\n\n      <!-- Barra segmentada -->\n      <div\n        class=\"flex h-3 w-full overflow-hidden rounded-full bg-neutral/10\"\n        role=\"progressbar\"\n        [attr.aria-valuenow]=\"totalCount()\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"totalCount()\"\n        [attr.aria-label]=\"widget().label\"\n      >\n        @if (totalCount() === 0) {\n          <div class=\"h-full w-full bg-neutral/20\"></div>\n        } @else {\n          @for (seg of calculatedSegments(); track seg.key) {\n            @if (seg.percentage > 0) {\n              <div\n                [class]=\"seg.barClass\"\n                [style.width.%]=\"seg.percentage\"\n                [title]=\"seg.label + ': ' + seg.value + ' (' + seg.percentage.toFixed(1) + '%)'\"\n              ></div>\n            }\n          }\n        }\n      </div>\n\n      <!-- Leyenda -->\n      <div class=\"mt-3.5 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n        @for (seg of calculatedSegments(); track seg.key) {\n          <div class=\"flex items-center gap-1.5 text-neutral-light\">\n            <span class=\"h-2 w-2 rounded-full\" [class]=\"seg.dotClass\"></span>\n            <span class=\"font-medium\">{{ seg.label }}:</span>\n            <span class=\"text-neutral\">{{ seg.value }} ({{ seg.percentage.toFixed(0) }}%)</span>\n          </div>\n        }\n      </div>\n    </article>\n  `,\n})\nexport class StatusProgress {\n  readonly widget = input.required<StatusProgressWidget>();\n  readonly data = input<Record<string, unknown> | null>(null);\n\n  protected readonly totalCount = computed(() => {\n    const d = this.data() || {};\n    return this.widget().segments.reduce((acc, seg) => {\n      const val = Number(d[seg.key]);\n      return acc + (isNaN(val) ? 0 : Math.max(0, val));\n    }, 0);\n  });\n\n  protected readonly calculatedSegments = computed<SegmentDisplay[]>(() => {\n    const d = this.data() || {};\n    const total = this.totalCount();\n\n    return this.widget().segments.map((seg) => {\n      const raw = Number(d[seg.key]);\n      const value = isNaN(raw) ? 0 : Math.max(0, raw);\n      const percentage = total > 0 ? (value / total) * 100 : 0;\n      const colors = COLOR_MAP[seg.color] || COLOR_MAP['neutral'];\n\n      return {\n        key: seg.key,\n        label: seg.label,\n        value,\n        percentage,\n        barClass: colors.bar,\n        dotClass: colors.dot,\n      };\n    });\n  });\n}\n"],"mappings":";;AAaA,MAAM,YAA0D;CAC9D,SAAS;EAAE,KAAK;EAAkB,KAAK;CAAgB;CACvD,SAAS;EAAE,KAAK;EAAgB,KAAK;CAAc;CACnD,QAAQ;EAAE,KAAK;EAAe,KAAK;CAAa;CAChD,SAAS;EAAE,KAAK;EAAiB,KAAK;CAAe;AACtD;AAqDD,IAAa,iBAAb,MAAa,eAAc;CAChB,SAAS,MAAM,SAAgC,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAC/C,OAAO,MAAsC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAExC,aAAa,eAAc;EAC5C,MAAM,IAAI,KAAK,KAAI,KAAM,CAAA;EACzB,OAAO,KAAK,OAAM,CAAE,CAAC,SAAS,QAAQ,KAAK,QAAO;GAChD,MAAM,MAAM,OAAO,EAAE,IAAI,IAAI;GAC7B,OAAO,OAAO,MAAM,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,GAAG;EAChD,GAAG,CAAC;CACN,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,qBAAqB,eAAgC;EACtE,MAAM,IAAI,KAAK,KAAI,KAAM,CAAA;EACzB,MAAM,QAAQ,KAAK,WAAU;EAE7B,OAAO,KAAK,OAAM,CAAE,CAAC,SAAS,KAAK,QAAO;GACxC,MAAM,MAAM,OAAO,EAAE,IAAI,IAAI;GAC7B,MAAM,QAAQ,MAAM,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,GAAG;GAC9C,MAAM,aAAa,QAAQ,IAAK,QAAQ,QAAS,MAAM;GACvD,MAAM,SAAS,UAAU,IAAI,UAAU,UAAU;GAEjD,OAAO;IACL,KAAK,IAAI;IACT,OAAO,IAAI;IACX;IACA;IACA,UAAU,OAAO;IACjB,UAAU,OAAO;GAClB;EACH,CAAC;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CA/BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAc,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UA9Cf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CT,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAhD1B,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CX,CAAA"}