@tinya-code/gas-admin-ui 0.0.0-stage → 0.1.0-alpha.2

package/fesm2022/tinya-code-gas-admin-ui-bar-chart-G7sEMSBY.mjs

@@ -0,0 +1,140 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+var BarChart = class BarChart {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	data = input([], ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	unit = input("", ...ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []);
+	max = computed(() => Math.max(0, ...this.data().map((row) => row.value)), ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	height(value) {
+		if (value === 0) return 0;
+		const max = this.max();
+		if (max === 0) return 0;
+		return Math.max(2, value / max * 100);
+	}
+	summary = computed(() => {
+		const rows = this.data();
+		if (rows.length === 0) return "Sin datos.";
+		const top = rows.reduce((best, row) => row.value > best.value ? row : best, rows[0]);
+		const unit = this.unit();
+		return `${rows.length} categorías. Mayor: ${top.label} con ${top.value}${unit}. Menor: ${rows.reduce((low, row) => row.value < low.value ? row : low, rows[0]).label}.`;
+	}, ...ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: BarChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: BarChart,
+		isStandalone: true,
+		selector: "app-bar-chart",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			unit: {
+				classPropertyName: "unit",
+				publicName: "unit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+      <p class="mb-3 text-sm text-neutral">{{ label() }}</p>
+
+      @if (data().length === 0) {
+        <p class="text-sm text-neutral/60" data-testid="empty">Sin datos.</p>
+      } @else {
+        <div role="img" [attr.aria-label]="summary()" class="flex h-32 items-end gap-2">
+          @for (row of data(); track row.label) {
+            <div class="flex min-w-0 flex-1 flex-col items-center justify-end gap-1">
+              <span class="text-xs tabular-nums text-neutral"> {{ row.value }}{{ unit() }} </span>
+              <div class="w-full rounded-t bg-primary" [style.height.%]="height(row.value)"></div>
+              <span class="w-full truncate text-center text-xs text-neutral">{{ row.label }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: BarChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-bar-chart",
+			template: `
+    <div class="rounded-lg border border-neutral/20 bg-surface p-4">
+      <p class="mb-3 text-sm text-neutral">{{ label() }}</p>
+
+      @if (data().length === 0) {
+        <p class="text-sm text-neutral/60" data-testid="empty">Sin datos.</p>
+      } @else {
+        <div role="img" [attr.aria-label]="summary()" class="flex h-32 items-end gap-2">
+          @for (row of data(); track row.label) {
+            <div class="flex min-w-0 flex-1 flex-col items-center justify-end gap-1">
+              <span class="text-xs tabular-nums text-neutral"> {{ row.value }}{{ unit() }} </span>
+              <div class="w-full rounded-t bg-primary" [style.height.%]="height(row.value)"></div>
+              <span class="w-full truncate text-center text-xs text-neutral">{{ row.label }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		unit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unit",
+				required: false
+			}]
+		}]
+	}
+});
+export { BarChart };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-bar-chart-G7sEMSBY.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-bar-chart-G7sEMSBY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-bar-chart-G7sEMSBY.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/widgets/bar-chart/bar-chart.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nexport interface BarDatum {\n  label: string;\n  value: number;\n}\n\n/**\n * Barras por categoría, sin librería: se dibujan con CSS y un `@for` de\n * Angular (~1 K gz frente a los 61,4 K de Chart.js — viabilidad B2.1).\n *\n * Accesibilidad (plan 3.2): la grilla es `role=\"img\"` con un `aria-label`\n * que resume los datos, de modo que un lector de pantalla no recorra cada\n * barra suelta sino que escuche «8 categorías. Mayor: …».\n */\n@Component({\n  selector: 'app-bar-chart',\n  template: `\n    <div class=\"rounded-lg border border-neutral/20 bg-surface p-4\">\n      <p class=\"mb-3 text-sm text-neutral\">{{ label() }}</p>\n\n      @if (data().length === 0) {\n        <p class=\"text-sm text-neutral/60\" data-testid=\"empty\">Sin datos.</p>\n      } @else {\n        <div role=\"img\" [attr.aria-label]=\"summary()\" class=\"flex h-32 items-end gap-2\">\n          @for (row of data(); track row.label) {\n            <div class=\"flex min-w-0 flex-1 flex-col items-center justify-end gap-1\">\n              <span class=\"text-xs tabular-nums text-neutral\"> {{ row.value }}{{ unit() }} </span>\n              <div class=\"w-full rounded-t bg-primary\" [style.height.%]=\"height(row.value)\"></div>\n              <span class=\"w-full truncate text-center text-xs text-neutral\">{{ row.label }}</span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  `,\n})\nexport class BarChart {\n  /** Título del gráfico. */\n  readonly label = input.required<string>();\n  /** Series a dibujar; vacío ⇒ estado «Sin datos». */\n  readonly data = input<BarDatum[]>([]);\n  /** Sufijo de las cifras del eje («unidades», «S/»). */\n  readonly unit = input('');\n\n  private readonly max = computed(() => Math.max(0, ...this.data().map((row) => row.value)));\n\n  /**\n   * Altura relativa de una barra. `max = 0` ⇒ 0 % (nada de división por\n   * cero); un valor de 0 se queda en 0, y los demás bajan a un 2 % mínimo\n   * para que la barra siga siendo visible.\n   */\n  protected height(value: number): number {\n    if (value === 0) {\n      return 0;\n    }\n    const max = this.max();\n    if (max === 0) {\n      return 0;\n    }\n    return Math.max(2, (value / max) * 100);\n  }\n\n  protected readonly summary = computed(() => {\n    const rows = this.data();\n    if (rows.length === 0) {\n      return 'Sin datos.';\n    }\n    const top = rows.reduce((best, row) => (row.value > best.value ? row : best), rows[0]);\n    const unit = this.unit();\n    return (\n      `${rows.length} categorías. Mayor: ${top.label} con ${top.value}${unit}. ` +\n      `Menor: ${rows.reduce((low, row) => (row.value < low.value ? row : low), rows[0]).label}.`\n    );\n  });\n}\n"],"mappings":";;AAqCA,IAAa,WAAb,MAAa,SAAQ;CAEV,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,OAAO,MAAkB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAE5B,OAAO,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAER,MAAM,eAAe,KAAK,IAAI,GAAG,GAAG,KAAK,KAAI,CAAE,CAAC,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAOhF,OAAO,OAAa;EAC5B,IAAI,UAAU,GACZ,OAAO;EAET,MAAM,MAAM,KAAK,IAAG;EACpB,IAAI,QAAQ,GACV,OAAO;EAET,OAAO,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG;CACxC;CAEmB,UAAU,eAAc;EACzC,MAAM,OAAO,KAAK,KAAI;EACtB,IAAI,KAAK,WAAW,GAClB,OAAO;EAET,MAAM,MAAM,KAAK,QAAQ,MAAM,QAAS,IAAI,QAAQ,KAAK,QAAQ,MAAM,MAAO,KAAK,EAAE;EACrF,MAAM,OAAO,KAAK,KAAI;EACtB,OACE,GAAG,KAAK,OAAM,sBAAuB,IAAI,MAAK,OAAQ,IAAI,QAAQ,KAAI,WAC5D,KAAK,QAAQ,KAAK,QAAS,IAAI,QAAQ,IAAI,QAAQ,MAAM,KAAM,KAAK,EAAE,CAAC,CAAC,MAAK;CAE3F,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CArCS,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,MAAA;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,UApBT;;;;;;;;;;;;;;;;;;;EAkBT,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAtBpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;;;;;;;;;;;;;;;;;;;EAmBX,CAAA"}

package/fesm2022/tinya-code-gas-admin-ui-boolean-B2ASKL0E.mjs

@@ -0,0 +1,113 @@
+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, input } from "@angular/core";
+import { FormField } from "@angular/forms/signals";
+var FieldBoolean = class FieldBoolean {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	tree = input.required(...ngDevMode ? [{ debugName: "tree" }] : /* 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 */ []);
+	currentLabel = computed(() => {
+		const on = this.state().value() === true;
+		const field = this.field();
+		if (on) return field.trueLabel ?? "Sí";
+		return field.falseLabel ?? "No";
+	}, ...ngDevMode ? [{ debugName: "currentLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: FieldBoolean,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: FieldBoolean,
+		isStandalone: true,
+		selector: "app-field-boolean",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			tree: {
+				classPropertyName: "tree",
+				publicName: "tree",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    <label class="inline-flex cursor-pointer items-center gap-2">
+      <input type="checkbox" class="peer sr-only" [id]="state().name()" [formField]="node()" />
+      <span
+        class="relative h-5 w-9 shrink-0 rounded-full bg-neutral/30 transition-colors peer-checked:bg-primary after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-4"
+      ></span>
+      <span class="text-sm">{{ currentLabel() }}</span>
+    </label>
+  `,
+		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: FieldBoolean,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-boolean",
+			imports: [FieldAria, FormField],
+			template: `
+    <label class="inline-flex cursor-pointer items-center gap-2">
+      <input type="checkbox" class="peer sr-only" [id]="state().name()" [formField]="node()" />
+      <span
+        class="relative h-5 w-9 shrink-0 rounded-full bg-neutral/30 transition-colors peer-checked:bg-primary after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-4"
+      ></span>
+      <span class="text-sm">{{ currentLabel() }}</span>
+    </label>
+  `
+		}]
+	}],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		tree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tree",
+				required: true
+			}]
+		}]
+	}
+});
+export { FieldBoolean };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-boolean-B2ASKL0E.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-boolean-B2ASKL0E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-boolean-B2ASKL0E.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/fields/boolean/boolean.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\nimport { FormField } from '@angular/forms/signals';\n\nimport type { BooleanField } from '../../core/models/schema.model';\nimport { FieldAria } from '../field-aria';\nimport { childTree, type RootTree } from '../field-node';\n\n/**\n * Interruptor booleano (base.md §5.1) con `trueLabel`/`falseLabel`.\n * Checkbox nativo + `formField` (se estiliza como switch con `peer-checked`).\n */\n@Component({\n  selector: 'app-field-boolean',\n  imports: [FieldAria, FormField],\n  template: `\n    <label class=\"inline-flex cursor-pointer items-center gap-2\">\n      <input type=\"checkbox\" class=\"peer sr-only\" [id]=\"state().name()\" [formField]=\"node()\" />\n      <span\n        class=\"relative h-5 w-9 shrink-0 rounded-full bg-neutral/30 transition-colors peer-checked:bg-primary after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-4\"\n      ></span>\n      <span class=\"text-sm\">{{ currentLabel() }}</span>\n    </label>\n  `,\n})\nexport class FieldBoolean {\n  readonly field = input.required<BooleanField>();\n  readonly tree = input.required<RootTree>();\n\n  protected readonly node = computed(() => childTree<boolean>(this.tree(), this.field().key));\n  protected readonly state = computed(() => this.node()());\n\n  protected readonly currentLabel = computed(() => {\n    const on = this.state().value() === true;\n    const field = this.field();\n    if (on) {\n      return field.trueLabel ?? 'Sí';\n    }\n    return field.falseLabel ?? 'No';\n  });\n}\n"],"mappings":";;;;;AAwBA,IAAa,eAAb,MAAa,aAAY;CACd,QAAQ,MAAM,SAAwB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACtC,OAAO,MAAM,SAAoB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEvB,OAAO,eAAe,UAAmB,KAAK,KAAI,GAAI,KAAK,MAAK,CAAE,CAAC,GAAG,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACxE,QAAQ,eAAe,KAAK,KAAI,CAAE,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAErC,eAAe,eAAc;EAC9C,MAAM,KAAK,KAAK,MAAK,CAAE,CAAC,MAAK,MAAO;EACpC,MAAM,QAAQ,KAAK,MAAK;EACxB,IAAI,IACF,OAAO,MAAM,aAAa;EAE5B,OAAO,MAAM,cAAc;CAC7B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAdS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,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;EAAA;EAAA,UAAA;EAAA,UAVb;;;;;;;;;EAQT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MATS;GAAS,UAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAS,UAAA;GAAA,QAAA,CAAA,WAAA;GAAA,UAAA,CAAA,WAAA;EAAA,CAAA;CAAA,CAAA;;AAWnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAbxB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,SAAS,CAAC,WAAW,SAAS;GAC9B,UAAU;;;;;;;;;EASX,CAAA"}

package/fesm2022/tinya-code-gas-admin-ui-button-BQjNW8KB.mjs

@@ -0,0 +1,163 @@
+import * as i0 from "@angular/core";
+import { Component, computed, input } from "@angular/core";
+const BASE = "inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
+const VARIANTS = {
+	primary: "bg-primary text-surface hover:bg-primary/90",
+	outline: "border border-neutral/40 bg-surface text-neutral hover:bg-neutral/10",
+	danger: "bg-danger text-surface hover:bg-danger/90",
+	ghost: "text-neutral hover:bg-neutral/10"
+};
+const SIZES = {
+	md: "px-4 py-2 text-sm min-h-11 lg:min-h-0",
+	sm: "px-2 py-1 text-xs min-h-11 lg:min-h-0",
+	icon: "p-1 min-h-11 min-w-11 lg:min-h-0 lg:min-w-0"
+};
+var Button = class Button {
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	type = input("button", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${BASE} ${VARIANTS[this.variant()]} ${SIZES[this.size()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Button,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Button,
+		isStandalone: true,
+		selector: "button[app-button]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"type": "type()",
+			"disabled": "disabled() || loading()",
+			"attr.aria-busy": "loading() || null"
+		} },
+		ngImport: i0,
+		template: `
+    @if (loading()) {
+      <span
+        class="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+        aria-hidden="true"
+      ></span>
+    }
+    <ng-content />
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Button,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[app-button]",
+			host: {
+				"[class]": "classes()",
+				"[type]": "type()",
+				"[disabled]": "disabled() || loading()",
+				"[attr.aria-busy]": "loading() || null"
+			},
+			template: `
+    @if (loading()) {
+      <span
+        class="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+        aria-hidden="true"
+      ></span>
+    }
+    <ng-content />
+  `
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}]
+	}
+});
+export { Button as t };
+
+//# sourceMappingURL=tinya-code-gas-admin-ui-button-BQjNW8KB.mjs.map

package/fesm2022/tinya-code-gas-admin-ui-button-BQjNW8KB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tinya-code-gas-admin-ui-button-BQjNW8KB.mjs","names":[],"sources":["../../../projects/gas-admin-ui/src/lib/shared/components/button/button.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'danger' | 'ghost';\nexport type ButtonSize = 'md' | 'sm' | 'icon';\n\nconst BASE =\n  'inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50';\n\nconst VARIANTS: Record<ButtonVariant, string> = {\n  primary: 'bg-primary text-surface hover:bg-primary/90',\n  outline: 'border border-neutral/40 bg-surface text-neutral hover:bg-neutral/10',\n  danger: 'bg-danger text-surface hover:bg-danger/90',\n  ghost: 'text-neutral hover:bg-neutral/10',\n};\n\n/**\n * Tamaño: el padding y el tip-size viven AQUÍ, no en `BASE`. Dos botones\n * con la misma propiedad (px-4 vs px-2) los resolvería el orden del CSS\n * generado, no el código — el motivo por el que los chips del textarea\n * acabaron con `!important`.\n *\n * Mobile-first: todas arrancan en `min-h-11` (44 px, objetivo táctil de la\n * guía mobile §8.2) y en `lg` relajan al tamaño de escritorio, así el mismo\n * componente cumple la guía táctil sin engordar la UI de escritorio.\n *  - `md`   → botón de texto (Guardar, Cancelar…)\n *  - `sm`   → chips y acciones compactas (texto `xs`)\n *  - `icon` → sólo glifo, cuadrado (toolbars de filas, arrastre)\n */\nconst SIZES: Record<ButtonSize, string> = {\n  md: 'px-4 py-2 text-sm min-h-11 lg:min-h-0',\n  sm: 'px-2 py-1 text-xs min-h-11 lg:min-h-0',\n  icon: 'p-1 min-h-11 min-w-11 lg:min-h-0 lg:min-w-0',\n};\n\n/**\n * Botón nativo (selector por atributo, patrón Material `button[mat-button]`):\n * conserva semántica y estilos de `<button>` y las clases del consumidor.\n */\n@Component({\n  selector: 'button[app-button]',\n  host: {\n    '[class]': 'classes()',\n    '[type]': 'type()',\n    '[disabled]': 'disabled() || loading()',\n    '[attr.aria-busy]': 'loading() || null',\n  },\n  template: `\n    @if (loading()) {\n      <span\n        class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n    <ng-content />\n  `,\n})\nexport class Button {\n  readonly variant = input<ButtonVariant>('primary');\n  readonly size = input<ButtonSize>('md');\n  readonly type = input<'button' | 'submit'>('button');\n  readonly disabled = input(false);\n  readonly loading = input(false);\n\n  readonly classes = computed(() => `${BASE} ${VARIANTS[this.variant()]} ${SIZES[this.size()]}`);\n}\n"],"mappings":";;AAKA,MAAM,OACJ;AAEF,MAAM,WAA0C;CAC9C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,OAAO;AACR;AAeD,MAAM,QAAoC;CACxC,IAAI;CACJ,IAAI;CACJ,MAAM;AACP;AAwBD,IAAa,SAAb,MAAa,OAAM;CACR,UAAU,MAAqB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACzC,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC9B,OAAO,MAA2B,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC3C,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACvB,UAAU,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,UAAU,eAAe,GAAG,KAAI,GAAI,SAAS,KAAK,QAAO,GAAG,GAAI,MAAM,KAAK,KAAI,MAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAPnF,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;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,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,QAAA;GAAA,YAAA;GAAA,kBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UAVP;;;;;;;;;EAQT,UAAA;CAAA,CAAA;;AAEU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAlBlB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM;IACJ,WAAW;IACX,UAAU;IACV,cAAc;IACd,oBAAoB;GACrB;GACD,UAAU;;;;;;;;;EASX,CAAA"}