Click Me"
}
},
{
"id": "calendar",
"name": "AfCalendar",
"className": "AfCalendarComponent",
"selector": "af-calendar",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendar } from '@argfit-ui/adaptive';",
"title": "Data/Calendar",
"category": "Data",
"status": "documented",
"description": "Calendario adaptativo de ArgFit UI.
\nRecibe las ocurrencias visibles y emite intenciones tipadas: no hace HTTP, no\npersiste, no expande series y no convierte zonas horarias. La aplicación es\nla fuente de verdad; el componente decide cómo se ve, no qué pasa.
\nLa vista y la fecha ancla son estado de trabajo: arrancan del input y se\nmueven con la toolbar, pero cada movimiento se anuncia con viewChange,\nanchorDateChange y visibleRangeChange para que el consumidor recargue su\nventana de datos.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"mostrar sesiones planificadas sobre una grilla temporal",
"alternar entre día, semana, mes y agenda sobre el mismo conjunto de datos"
],
"avoidWhen": [
"elegir una única fecha civil: usar AfDatePicker",
"expandir reglas de recurrencia o persistir cambios: eso es de la aplicación"
],
"related": [
"AfDatePicker",
"AfTimePicker",
"AfTimeline",
"AfDataTable"
],
"tokens": [
"--af-calendar-surface",
"--af-calendar-grid-line",
"--af-calendar-today-bg",
"--af-calendar-now",
"--af-calendar-slot-height-comfortable",
"--af-calendar-time-axis-width",
"--af-event-training-accent",
"--af-event-match-accent"
],
"api": {
"inputs": [
{
"name": "allowMutation",
"type": "AfCalendarAllowMutation | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Regla síncrona del producto aplicada antes de cualquier preview o output.
\n",
"deprecated": false
},
{
"name": "anchorDate",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "YYYY-MM-DD. Sin valor, hoy en la zona del dispositivo.
\n",
"deprecated": false
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"defaultValue": "'Calendario'",
"description": "",
"deprecated": false
},
{
"name": "autoScroll",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "createButton",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfCalendarDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "editable",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Habilita mover y redimensionar. La creación se habilita con selectable.
\n",
"deprecated": false
},
{
"name": "empty",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "error",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "eventTypes",
"type": "readonly AfCalendarEventTypeDefinition[] | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "firstDay",
"type": "AfCalendarWeekday",
"required": false,
"defaultValue": "1",
"description": "",
"deprecated": false
},
{
"name": "height",
"type": "string",
"required": false,
"defaultValue": "'640px'",
"description": "",
"deprecated": false
},
{
"name": "hiddenDays",
"type": "readonly AfCalendarWeekday[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "maxDurationMinutes",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "maxTime",
"type": "string",
"required": false,
"defaultValue": "'22:00'",
"description": "",
"deprecated": false
},
{
"name": "minDurationMinutes",
"type": "number",
"required": false,
"defaultValue": "15",
"description": "",
"deprecated": false
},
{
"name": "minTime",
"type": "string",
"required": false,
"defaultValue": "'07:00'",
"description": "",
"deprecated": false
},
{
"name": "moveEnabled",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Permisos independientes; editable continúa siendo el interruptor maestro.
\n",
"deprecated": false
},
{
"name": "mutationTimeoutMs",
"type": "unknown",
"required": false,
"defaultValue": "8_000",
"description": "",
"deprecated": false
},
{
"name": "nowIndicator",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "offline",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "overlays",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "Hospeda el detalle y el editor en un modal propio.
\nCon false el calendario solo emite eventActivate y createPressed, y\nla aplicación decide dónde y cómo presentarlos — en un drawer, en una ruta\ncompleta o en su propio diálogo.
\n",
"deprecated": false
},
{
"name": "partial",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "resizeEndEnabled",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "resizeStartEnabled",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "resources",
"type": "readonly AfCalendarResource[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "selectable",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Habilita dibujar un rango sobre una franja vacía para crear.
\n",
"deprecated": false
},
{
"name": "showToolbar",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "timedAllDayConversion",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "timeZone",
"type": "string",
"required": true,
"defaultValue": null,
"description": "Zona IANA de la organización. Obligatoria: inferirla del navegador es la\nforma más rápida de mostrarle a un cuerpo técnico un entrenamiento a la\nhora equivocada.
\n",
"deprecated": false
},
{
"name": "view",
"type": "AfCalendarView",
"required": false,
"defaultValue": "'week'",
"description": "",
"deprecated": false
},
{
"name": "views",
"type": "readonly AfCalendarView[]",
"required": false,
"defaultValue": "['day', 'week', 'month', 'agenda']",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "anchorDateChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "createPressed",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventActivate",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventDelete",
"type": "AfCalendarEventDeleteIntent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventMoveRequest",
"type": "AfCalendarMutationRequest",
"required": false,
"defaultValue": null,
"description": "Emitida en pointerup, nunca en pointerdown.
\n",
"deprecated": false
},
{
"name": "eventResizeRequest",
"type": "AfCalendarMutationRequest",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventSave",
"type": "AfCalendarEventSaveIntent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "interactionCancel",
"type": "AfCalendarInteractionCancel",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "mutationUndoRequest",
"type": "AfCalendarMutationUndoRequest",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "rangeCreateRequest",
"type": "AfCalendarMutationRequest",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "recurrenceScopeRequest",
"type": "AfCalendarRecurrenceScopeRequest",
"required": false,
"defaultValue": null,
"description": "El alcance de una serie lo decide la aplicación, no el componente.
\n",
"deprecated": false
},
{
"name": "resourceAssignRequest",
"type": "AfCalendarMutationRequest",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "retry",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "viewChange",
"type": "AfCalendarView",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "visibleRangeChange",
"type": "AfCalendarVisibleRange",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendar--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendar--default"
},
{
"id": "data-calendar--day",
"name": "Day",
"url": "/storybook/?path=/story/data-calendar--day"
},
{
"id": "data-calendar--three-day",
"name": "ThreeDay",
"url": "/storybook/?path=/story/data-calendar--three-day"
},
{
"id": "data-calendar--work-week",
"name": "WorkWeek",
"url": "/storybook/?path=/story/data-calendar--work-week"
},
{
"id": "data-calendar--month",
"name": "Month",
"url": "/storybook/?path=/story/data-calendar--month"
},
{
"id": "data-calendar--agenda",
"name": "Agenda",
"url": "/storybook/?path=/story/data-calendar--agenda"
},
{
"id": "data-calendar--densities",
"name": "Densities",
"url": "/storybook/?path=/story/data-calendar--densities"
},
{
"id": "data-calendar--event-states",
"name": "EventStates",
"url": "/storybook/?path=/story/data-calendar--event-states"
},
{
"id": "data-calendar--loading",
"name": "Loading",
"url": "/storybook/?path=/story/data-calendar--loading"
},
{
"id": "data-calendar--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-calendar--empty"
},
{
"id": "data-calendar--error-state",
"name": "ErrorState",
"url": "/storybook/?path=/story/data-calendar--error-state"
},
{
"id": "data-calendar--offline",
"name": "Offline",
"url": "/storybook/?path=/story/data-calendar--offline"
},
{
"id": "data-calendar--custom-templates",
"name": "CustomTemplates",
"url": "/storybook/?path=/story/data-calendar--custom-templates"
},
{
"id": "data-calendar--editable",
"name": "Editable",
"url": "/storybook/?path=/story/data-calendar--editable"
},
{
"id": "data-calendar--resources",
"name": "Resources",
"url": "/storybook/?path=/story/data-calendar--resources"
},
{
"id": "data-calendar--event-detail",
"name": "EventDetail",
"url": "/storybook/?path=/story/data-calendar--event-detail"
},
{
"id": "data-calendar--event-editor",
"name": "EventEditor",
"url": "/storybook/?path=/story/data-calendar--event-editor"
},
{
"id": "data-calendar--create-from-toolbar",
"name": "CreateFromToolbar",
"url": "/storybook/?path=/story/data-calendar--create-from-toolbar"
},
{
"id": "data-calendar--keyboard-move",
"name": "KeyboardMove",
"url": "/storybook/?path=/story/data-calendar--keyboard-move"
},
{
"id": "data-calendar--keyboard-move-cancelled",
"name": "KeyboardMoveCancelled",
"url": "/storybook/?path=/story/data-calendar--keyboard-move-cancelled"
},
{
"id": "data-calendar--recurrence-scope",
"name": "RecurrenceScope",
"url": "/storybook/?path=/story/data-calendar--recurrence-scope"
},
{
"id": "data-calendar--keyboard-navigation",
"name": "KeyboardNavigation",
"url": "/storybook/?path=/story/data-calendar--keyboard-navigation"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendar--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendar } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-day-timeline",
"name": "AfCalendarDayTimeline",
"className": "AfCalendarDayTimelineComponent",
"selector": "af-calendar-day-timeline",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarDayTimeline } from '@argfit-ui/adaptive';",
"title": "Data/CalendarDayTimeline",
"category": "Data",
"status": "documented",
"description": "Franja horizontal con las actividades del día.
\nÚtil como barra de contexto sobre un dashboard: de un vistazo se ve dónde se\nacumula la carga y en qué punto del día está el equipo.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"dar contexto del día como barra sobre un dashboard",
"mostrar dónde se acumula la carga sin ocupar una grilla completa"
],
"avoidWhen": [
"trabajar sobre la agenda o mover actividades: usar AfCalendar",
"mostrar hitos sin duración: usar AfTimeline"
],
"related": [
"AfCalendar",
"AfTimeline",
"AfCalendarWeekLoad"
],
"tokens": [
"--af-card-bg",
"--af-surface-2",
"--af-calendar-now",
"--af-calendar-grid-line"
],
"api": {
"inputs": [
{
"name": "date",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "heading",
"type": "string",
"required": false,
"defaultValue": "'Línea de tiempo'",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "maxTime",
"type": "string",
"required": false,
"defaultValue": "'21:00'",
"description": "",
"deprecated": false
},
{
"name": "minTime",
"type": "string",
"required": false,
"defaultValue": "'07:00'",
"description": "",
"deprecated": false
},
{
"name": "now",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Instante de referencia YYYY-MM-DDTHH:mm. Sin valor, el reloj del dispositivo.
\n",
"deprecated": false
},
{
"name": "nowIndicator",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "eventActivate",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendardaytimeline--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendardaytimeline--default"
},
{
"id": "data-calendardaytimeline--without-now",
"name": "WithoutNow",
"url": "/storybook/?path=/story/data-calendardaytimeline--without-now"
},
{
"id": "data-calendardaytimeline--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-calendardaytimeline--empty"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendardaytimeline--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarDayTimeline } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-event-detail",
"name": "AfCalendarEventDetail",
"className": "AfCalendarEventDetailComponent",
"selector": "af-calendar-event-detail",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarEventDetail } from '@argfit-ui/adaptive';",
"title": "Data/CalendarEventDetail",
"category": "Data",
"status": "documented",
"description": "Detalle de una ocurrencia del calendario.
\nMuestra lo común a todo evento — tipo, fecha, hora, lugar, serie, estado — y\ndebajo los campos propios de su tipo, resueltos desde el esquema del registro.\nNingún campo está codificado acá: agregar un tipo de evento no toca este\ncomponente.
\nEs una superficie plana, no un overlay . La aplicación (o el propio\nAfCalendar) lo hospeda en un popover, un drawer o una ruta completa; así el\nmismo detalle sirve en los tres lugares sin duplicarse.
\nNo lleva renderers separados: entre escritorio y móvil solo cambian densidad\ny ancho de los campos, y eso se resuelve con isMobile() y CSS. Es el mismo\ncriterio de AfField, AfIconField y AfInputGroup, y el que el flujo de\ntrabajo llama «decisión explícita de renderer compartido».
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"mostrar una ocurrencia del calendario con los campos propios de su tipo",
"hospedar el detalle en un popover, un drawer o una ruta completa"
],
"avoidWhen": [
"editar el evento: para eso está AfCalendarEventEditor",
"mostrar un registro que no proviene de un calendario"
],
"related": [
"AfCalendar",
"AfCalendarEventEditor",
"AfDialog"
],
"tokens": [
"--af-bg-elevated",
"--af-border",
"--af-event-training-accent",
"--af-surface-1"
],
"api": {
"inputs": [
{
"name": "canDelete",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "canDuplicate",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "canEdit",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "event",
"type": "AfCalendarEvent",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventTypes",
"type": "readonly AfCalendarEventTypeDefinition[] | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Pisa el registro inyectado cuando una pantalla usa un subconjunto.
\n",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "showClose",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "closed",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "deleteRequest",
"type": "AfCalendarEventDeleteIntent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "duplicateRequest",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "editRequest",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendareventdetail--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendareventdetail--default"
},
{
"id": "data-calendareventdetail--recurring",
"name": "Recurring",
"url": "/storybook/?path=/story/data-calendareventdetail--recurring"
},
{
"id": "data-calendareventdetail--conflict",
"name": "Conflict",
"url": "/storybook/?path=/story/data-calendareventdetail--conflict"
},
{
"id": "data-calendareventdetail--readonly",
"name": "Readonly",
"url": "/storybook/?path=/story/data-calendareventdetail--readonly"
},
{
"id": "data-calendareventdetail--other-type",
"name": "OtherType",
"url": "/storybook/?path=/story/data-calendareventdetail--other-type"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendareventdetail--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarEventDetail } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-event-editor",
"name": "AfCalendarEventEditor",
"className": "AfCalendarEventEditorComponent",
"selector": "af-calendar-event-editor",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarEventEditor } from '@argfit-ui/adaptive';",
"title": "Data/CalendarEventEditor",
"category": "Data",
"status": "documented",
"description": "Editor genérico de eventos de calendario.
\nUn único editor sirve a cualquier tipo: al elegir el tipo, el formulario se\nrecompone con sus campos, su duración por defecto y su color. Lo que hace\ngenérico al componente es que no conoce ningún dominio — recibe el esquema y\nlo renderiza.
\nNo valida reglas de negocio. Emite el evento propuesto y el consumidor\ndecide: solapamientos, permisos, capacidad y disponibilidad son del producto.
\nIgual que el detalle, es una superficie plana sin renderers separados: entre\nplataformas cambian densidad y ancho de campo, no la estructura.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"crear o editar una actividad de calendario de cualquier tipo registrado",
"ofrecer un formulario que se recompone según el esquema del tipo elegido"
],
"avoidWhen": [
"validar reglas de negocio: el editor propone y la aplicación decide",
"editar entidades que no son ocurrencias de calendario"
],
"related": [
"AfCalendar",
"AfCalendarEventDetail",
"AfDatePicker"
],
"tokens": [
"--af-bg-elevated",
"--af-input-bg",
"--af-input-border",
"--af-primary"
],
"api": {
"inputs": [
{
"name": "allowDelete",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "busy",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "draft",
"type": "AfCalendarEventDraft | null",
"required": false,
"defaultValue": "null",
"description": "Borrador inicial. null arranca un evento nuevo con los valores por defecto.
\n",
"deprecated": false
},
{
"name": "error",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "eventId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "eventTypes",
"type": "readonly AfCalendarEventTypeDefinition[] | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "mode",
"type": "\"create\" | \"edit\"",
"required": false,
"defaultValue": "'create'",
"description": "",
"deprecated": false
},
{
"name": "occurrenceId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "recurrenceScopes",
"type": "readonly AfCalendarRecurrenceScope[]",
"required": false,
"defaultValue": "[]",
"description": "Alcances ofrecidos al guardar una ocurrencia de serie. Vacío: no es serie.
\n",
"deprecated": false
},
{
"name": "resources",
"type": "readonly AfCalendarResource[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "seriesId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "sourceVersion",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "timeZone",
"type": "string",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "cancelled",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "deleteRequest",
"type": "AfCalendarEventDeleteIntent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "draftChange",
"type": "AfCalendarEventDraft",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "save",
"type": "AfCalendarEventSaveIntent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendareventeditor--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendareventeditor--default"
},
{
"id": "data-calendareventeditor--edit",
"name": "Edit",
"url": "/storybook/?path=/story/data-calendareventeditor--edit"
},
{
"id": "data-calendareventeditor--recurring-scopes",
"name": "RecurringScopes",
"url": "/storybook/?path=/story/data-calendareventeditor--recurring-scopes"
},
{
"id": "data-calendareventeditor--busy",
"name": "Busy",
"url": "/storybook/?path=/story/data-calendareventeditor--busy"
},
{
"id": "data-calendareventeditor--error-state",
"name": "ErrorState",
"url": "/storybook/?path=/story/data-calendareventeditor--error-state"
},
{
"id": "data-calendareventeditor--generic-registry",
"name": "GenericRegistry",
"url": "/storybook/?path=/story/data-calendareventeditor--generic-registry"
},
{
"id": "data-calendareventeditor--type-driven-form",
"name": "TypeDrivenForm",
"url": "/storybook/?path=/story/data-calendareventeditor--type-driven-form"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendareventeditor--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarEventEditor } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-mini-month",
"name": "AfCalendarMiniMonth",
"className": "AfCalendarMiniMonthComponent",
"selector": "af-calendar-mini-month",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarMiniMonth } from '@argfit-ui/adaptive';",
"title": "Data/CalendarMiniMonth",
"category": "Data",
"status": "documented",
"description": "Mini calendario de mes con marcas de actividad y agenda del día elegido.
\nPensado para la columna lateral de un dashboard. No duplica la fuente de\nverdad del calendario principal: emite la fecha y quien lo usa sincroniza.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"navegar el mes desde la columna lateral de un dashboard",
"dar una vista de mes en pantallas donde la grilla completa no entra"
],
"avoidWhen": [
"elegir una fecha en un formulario: usar AfDatePicker",
"trabajar sobre la agenda: usar AfCalendar"
],
"related": [
"AfCalendar",
"AfDatePicker",
"AfCalendarStripAgenda"
],
"tokens": [
"--af-card-bg",
"--af-primary",
"--af-primary-soft",
"--af-accent"
],
"api": {
"inputs": [
{
"name": "anchorDate",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "firstDay",
"type": "AfCalendarWeekday",
"required": false,
"defaultValue": "1",
"description": "",
"deprecated": false
},
{
"name": "heading",
"type": "string",
"required": false,
"defaultValue": "'Planificación'",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "now",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Instante de referencia YYYY-MM-DDTHH:mm. Sin valor, el reloj del dispositivo.
\n",
"deprecated": false
},
{
"name": "rangeEnd",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "rangeStart",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Rango resaltado, normalmente la ventana visible del calendario principal.
\n",
"deprecated": false
},
{
"name": "selectedDate",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "showAgenda",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "dateSelect",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventActivate",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "monthChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendarminimonth--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendarminimonth--default"
},
{
"id": "data-calendarminimonth--without-agenda",
"name": "WithoutAgenda",
"url": "/storybook/?path=/story/data-calendarminimonth--without-agenda"
},
{
"id": "data-calendarminimonth--month-navigation",
"name": "MonthNavigation",
"url": "/storybook/?path=/story/data-calendarminimonth--month-navigation"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendarminimonth--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarMiniMonth } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-next-session",
"name": "AfCalendarNextSession",
"className": "AfCalendarNextSessionComponent",
"selector": "af-calendar-next-session",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarNextSession } from '@argfit-ui/adaptive';",
"title": "Data/CalendarNextSession",
"category": "Data",
"status": "documented",
"description": "Card destacada con lo que sigue.
\nPensada para la home móvil: qué actividad viene, cuándo y en cuánto tiempo.\nUna actividad ya empezada sigue siendo «la próxima» hasta que termina — es\njusto el momento en que el usuario más la está mirando.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"destacar la próxima actividad en la home de una app",
"dar una acción primaria sobre lo que viene"
],
"avoidWhen": [
"listar varias actividades: usar AfCalendarUpcoming",
"mostrar una métrica sin componente temporal: usar AfMetricCard"
],
"related": [
"AfCalendar",
"AfCalendarUpcoming",
"AfMetricCard"
],
"tokens": [
"--af-border-strong",
"--af-primary",
"--af-event-match-accent",
"--af-event-match-bg"
],
"api": {
"inputs": [
{
"name": "actionLabel",
"type": "string",
"required": false,
"defaultValue": "'Ver detalle'",
"description": "",
"deprecated": false
},
{
"name": "emptyTitle",
"type": "string",
"required": false,
"defaultValue": "'Sin próxima sesión'",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "heading",
"type": "string",
"required": false,
"defaultValue": "'Próxima sesión'",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "now",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Instante de referencia YYYY-MM-DDTHH:mm. Sin valor, el reloj del dispositivo.
\n",
"deprecated": false
},
{
"name": "secondaryActionLabel",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "timeZone",
"type": "string",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "eventActivate",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "secondaryActionPressed",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendarnextsession--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendarnextsession--default"
},
{
"id": "data-calendarnextsession--countdown",
"name": "Countdown",
"url": "/storybook/?path=/story/data-calendarnextsession--countdown"
},
{
"id": "data-calendarnextsession--loading",
"name": "Loading",
"url": "/storybook/?path=/story/data-calendarnextsession--loading"
},
{
"id": "data-calendarnextsession--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-calendarnextsession--empty"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendarnextsession--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarNextSession } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-strip-agenda",
"name": "AfCalendarStripAgenda",
"className": "AfCalendarStripAgendaComponent",
"selector": "af-calendar-strip-agenda",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarStripAgenda } from '@argfit-ui/adaptive';",
"title": "Data/CalendarStripAgenda",
"category": "Data",
"status": "documented",
"description": "Strip semanal de días con la agenda del día elegido.
\nEs el patrón de calendario que funciona en una tarjeta angosta: siete\nobjetivos de toque para navegar y una lista debajo, sin la grilla temporal\nque a 360 px no se puede leer.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"navegar la semana y ver el día en una tarjeta angosta",
"dar agenda en una home móvil sin la grilla temporal completa"
],
"avoidWhen": [
"necesitar arrastre o resize: usar AfCalendar",
"mostrar un mes: usar AfCalendarMiniMonth"
],
"related": [
"AfCalendar",
"AfCalendarMiniMonth",
"AfCalendarUpcoming"
],
"tokens": [
"--af-card-bg",
"--af-primary",
"--af-surface-2",
"--af-calendar-grid-line"
],
"api": {
"inputs": [
{
"name": "createButton",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "firstDay",
"type": "AfCalendarWeekday",
"required": false,
"defaultValue": "1",
"description": "",
"deprecated": false
},
{
"name": "heading",
"type": "string",
"required": false,
"defaultValue": "'Agenda'",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "now",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Instante de referencia YYYY-MM-DDTHH:mm. Sin valor, el reloj del dispositivo.
\n",
"deprecated": false
},
{
"name": "selectedDate",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "timeZone",
"type": "string",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "createPressed",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "dateSelect",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "eventActivate",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "todayPressed",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendarstripagenda--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendarstripagenda--default"
},
{
"id": "data-calendarstripagenda--with-create",
"name": "WithCreate",
"url": "/storybook/?path=/story/data-calendarstripagenda--with-create"
},
{
"id": "data-calendarstripagenda--empty-day",
"name": "EmptyDay",
"url": "/storybook/?path=/story/data-calendarstripagenda--empty-day"
},
{
"id": "data-calendarstripagenda--day-navigation",
"name": "DayNavigation",
"url": "/storybook/?path=/story/data-calendarstripagenda--day-navigation"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendarstripagenda--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarStripAgenda } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-upcoming",
"name": "AfCalendarUpcoming",
"className": "AfCalendarUpcomingComponent",
"selector": "af-calendar-upcoming",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarUpcoming } from '@argfit-ui/adaptive';",
"title": "Data/CalendarUpcoming",
"category": "Data",
"status": "documented",
"description": "Lista compacta de las próximas actividades.
\nWidget de solo lectura para dashboards: no carga el motor de interacción del\ncalendario completo, que en una tarjeta de 360 px sería puro peso muerto.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"listar las próximas actividades en un dashboard",
"dar contexto de agenda sin cargar el calendario completo"
],
"avoidWhen": [
"navegar o editar la agenda: para eso está AfCalendar",
"mostrar una lista que no proviene de un calendario: usar AfDataView"
],
"related": [
"AfCalendar",
"AfCalendarNextSession",
"AfCalendarStripAgenda"
],
"tokens": [
"--af-card-bg",
"--af-card-border",
"--af-calendar-grid-line",
"--af-event-training-accent"
],
"api": {
"inputs": [
{
"name": "emptyTitle",
"type": "string",
"required": false,
"defaultValue": "'Sin actividades próximas'",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "heading",
"type": "string",
"required": false,
"defaultValue": "'Próximas actividades'",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "limit",
"type": "number",
"required": false,
"defaultValue": "5",
"description": "",
"deprecated": false
},
{
"name": "linkLabel",
"type": "string",
"required": false,
"defaultValue": "'Ver calendario'",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "now",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Instante de referencia YYYY-MM-DDTHH:mm.
\nSin valor usa el reloj del dispositivo. Se expone para poder congelarlo en\ntests y en capturas: «lo que sigue» cambia con la hora, y una historia que\ncambia sola no es comparable.
\n",
"deprecated": false
},
{
"name": "showLink",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "timeZone",
"type": "string",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "eventActivate",
"type": "AfCalendarEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "linkPressed",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendarupcoming--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendarupcoming--default"
},
{
"id": "data-calendarupcoming--loading",
"name": "Loading",
"url": "/storybook/?path=/story/data-calendarupcoming--loading"
},
{
"id": "data-calendarupcoming--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-calendarupcoming--empty"
},
{
"id": "data-calendarupcoming--activation",
"name": "Activation",
"url": "/storybook/?path=/story/data-calendarupcoming--activation"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendarupcoming--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarUpcoming } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "calendar-week-load",
"name": "AfCalendarWeekLoad",
"className": "AfCalendarWeekLoadComponent",
"selector": "af-calendar-week-load",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCalendarWeekLoad } from '@argfit-ui/adaptive';",
"title": "Data/CalendarWeekLoad",
"category": "Data",
"status": "documented",
"description": "Minutos planificados por día de la semana.
\nLos picos se destacan por color e intensidad, pero el valor numérico\nacompaña cada barra: un gráfico donde la única lectura es la altura relativa\nno sirve para planificar una semana de trabajo.
\n",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"comparar la carga planificada de los días de una semana",
"detectar picos de trabajo antes de sumar actividades"
],
"avoidWhen": [
"graficar una serie que no son minutos por día: usar AfChart",
"mostrar una sola métrica: usar AfMetricCard"
],
"related": [
"AfCalendar",
"AfChart",
"AfCalendarDayTimeline"
],
"tokens": [
"--af-card-bg",
"--af-primary-hover",
"--af-primary-active",
"--af-accent"
],
"api": {
"inputs": [
{
"name": "anchorDate",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "events",
"type": "readonly AfCalendarEvent[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "firstDay",
"type": "AfCalendarWeekday",
"required": false,
"defaultValue": "1",
"description": "",
"deprecated": false
},
{
"name": "goalMinutes",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Minutos objetivo por semana. Con valor, se dibuja la línea de referencia.
\n",
"deprecated": false
},
{
"name": "heading",
"type": "string",
"required": false,
"defaultValue": "'Carga semanal'",
"description": "",
"deprecated": false
},
{
"name": "labels",
"type": "AfCalendarLabels",
"required": false,
"defaultValue": "AF_CALENDAR_DEFAULT_LABELS",
"description": "",
"deprecated": false
},
{
"name": "now",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Instante de referencia YYYY-MM-DDTHH:mm. Sin valor, el reloj del dispositivo.
\n",
"deprecated": false
}
],
"outputs": [
{
"name": "daySelect",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-calendarweekload--default",
"name": "Default",
"url": "/storybook/?path=/story/data-calendarweekload--default"
},
{
"id": "data-calendarweekload--with-goal",
"name": "WithGoal",
"url": "/storybook/?path=/story/data-calendarweekload--with-goal"
},
{
"id": "data-calendarweekload--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-calendarweekload--empty"
},
{
"id": "data-calendarweekload--day-selection",
"name": "DaySelection",
"url": "/storybook/?path=/story/data-calendarweekload--day-selection"
}
],
"docsUrl": "/storybook/?path=/docs/data-calendarweekload--docs",
"example": {
"story": "Default",
"typescript": "import { AfCalendarWeekLoad } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "card",
"name": "AfCard",
"className": "AfCardComponent",
"selector": "af-card",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCard } from '@argfit-ui/adaptive';",
"title": "Components/Surfaces/Card",
"category": "Surfaces",
"status": "documented",
"description": "Token-driven surface for grouping related content and actions.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"grouping related content and actions",
"creating a reusable semantic surface"
],
"avoidWhen": [
"page-level layout without a meaningful group",
"data tables"
],
"related": [
"AfMetricCard",
"AfAuthShell"
],
"tokens": [
"--af-card-bg",
"--af-card-border",
"--af-card-shadow"
],
"api": {
"inputs": [
{
"name": "density",
"type": "AfCardDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "interactive",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "selected",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "tone",
"type": "AfCardTone",
"required": false,
"defaultValue": "'neutral'",
"description": "",
"deprecated": false
},
{
"name": "variant",
"type": "AfCardVariant",
"required": false,
"defaultValue": "'surface'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "pressed",
"type": "Event",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-surfaces-card--default",
"name": "Default",
"url": "/storybook/?path=/story/components-surfaces-card--default"
},
{
"id": "components-surfaces-card--elevated",
"name": "Elevated",
"url": "/storybook/?path=/story/components-surfaces-card--elevated"
},
{
"id": "components-surfaces-card--outlined",
"name": "Outlined",
"url": "/storybook/?path=/story/components-surfaces-card--outlined"
},
{
"id": "components-surfaces-card--interactive",
"name": "Interactive",
"url": "/storybook/?path=/story/components-surfaces-card--interactive"
}
],
"docsUrl": "/storybook/?path=/docs/components-surfaces-card--docs",
"example": {
"story": "Default",
"typescript": "import { AfCard } from '@argfit-ui/adaptive';",
"template": "\n Card Title \n This is the content of the card projected via ng-content.
\n "
}
},
{
"id": "chart",
"name": "AfChart",
"className": "AfChartComponent",
"selector": "af-chart",
"package": "@argfit-ui/adaptive/chart",
"importStatement": "import { AfChart } from '@argfit-ui/adaptive/chart';",
"title": "Data/Chart",
"category": "Data",
"status": "documented",
"description": "Visualización adaptativa con series vendor-neutral, leyenda y tabla accesible. Cubre series cartesianas, distribuciones, matrices y perfiles multivariable con los tokens `--af-chart-*`.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para comparar tendencias o distribuciones de datos cuantitativos.",
"Para relacionar magnitudes con unidades distintas en un mismo eje temporal."
],
"avoidWhen": [
"Para un único valor destacado; usa AfMetricCard.",
"Para el encabezado, el menú y la exportación de un gráfico; usa AfChartCard."
],
"related": [
"AfChartCard",
"AfAnalyticsCard",
"AfMetricCard"
],
"tokens": [
"--af-chart-primary",
"--af-chart-accent",
"--af-chart-scale-3",
"--af-chart-tooltip-text",
"--af-bg-surface"
],
"api": {
"inputs": [
{
"name": "annotations",
"type": "readonly AfChartAnnotation[]",
"required": false,
"defaultValue": "[]",
"description": "Marcadores sobre coordenadas concretas: el umbral estimado, el récord, la ruptura.
\nEs distinto de thresholds: un umbral es un criterio fijo; una anotación señala un\nvalor observado que el lector debería llevarse aunque no interrogue el gráfico.
\n",
"deprecated": false
},
{
"name": "ariaLabel",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "bands",
"type": "readonly AfChartBand[]",
"required": false,
"defaultValue": "[]",
"description": "Bandas de dispersión asociadas a una serie: ±1 DE, intervalo de confianza o rango\nmínimo–máximo.
\nSe declaran aparte de series porque no son mediciones independientes sino la\nincertidumbre de otra, y no deben contarse como series en la leyenda ni en la tabla.
\n",
"deprecated": false
},
{
"name": "categories",
"type": "readonly string[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "dataTable",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Publica la serie como tabla accesible junto al gráfico.
\n§20 exige resumen textual en todo gráfico. Un lienzo no es navegable por teclado ni\nlegible por tecnología asistiva: esta tabla contiene los mismos datos, no un resumen.
\n",
"deprecated": false
},
{
"name": "dataTableHeaders",
"type": "AfChartTableHeaders",
"required": false,
"defaultValue": null,
"description": "Encabezados de las columnas en la disposición por puntos.
\nSin ellos se usan los nombres de los ejes, que describen la escala y no siempre la\nmagnitud que el lector busca en una tabla.
\n",
"deprecated": false
},
{
"name": "dataTableLabel",
"type": "string",
"required": false,
"defaultValue": "'Datos del gráfico'",
"description": "",
"deprecated": false
},
{
"name": "dataTableLayout",
"type": "AfChartTableLayout",
"required": false,
"defaultValue": "'auto'",
"description": "Disposición de la tabla accesible.
\nPor defecto se decide por la forma de los datos. Una dispersión de burbujas lleva\ntres magnitudes por observación: en filas por serie, dos de ellas no tendrían dónde\naparecer.
\n",
"deprecated": false
},
{
"name": "dataTableSeriesHeader",
"type": "string",
"required": false,
"defaultValue": "'Serie'",
"description": "",
"deprecated": false
},
{
"name": "dateRange",
"type": "AfChartDateRange | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Rango de la cuadrícula del tipo calendar.
\nSe declara aparte de los datos para que las celdas sin registro existan igualmente:\nel hueco —un descanso, una baja— es parte de lo que el calendario muestra.
\n",
"deprecated": false
},
{
"name": "density",
"type": "AfChartDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "description",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "emptyMessage",
"type": "string",
"required": false,
"defaultValue": "'Sin datos disponibles'",
"description": "",
"deprecated": false
},
{
"name": "graph",
"type": "AfChartGraph | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Nodos y vínculos de los tipos sankey y network.
\n",
"deprecated": false
},
{
"name": "height",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "indicators",
"type": "readonly AfChartIndicator[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "interactive",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "legend",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "regions",
"type": "readonly AfChartRegion[]",
"required": false,
"defaultValue": "[]",
"description": "Franjas de referencia sombreadas, p. ej. la zona óptima de un ratio.
\n",
"deprecated": false
},
{
"name": "renderErrorMessage",
"type": "string",
"required": false,
"defaultValue": "'No se pudo cargar el gráfico.'",
"description": "Mensaje accesible cuando el runtime diferido no puede descargarse.
\n",
"deprecated": false
},
{
"name": "retryLabel",
"type": "string",
"required": false,
"defaultValue": "'Reintentar'",
"description": "Etiqueta de la acción que vuelve a solicitar el runtime tras un fallo.
\n",
"deprecated": false
},
{
"name": "secondaryAxis",
"type": "AfChartAxis | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Eje derecho con su propia escala, para las series con axis: 'secondary'.
\n",
"deprecated": false
},
{
"name": "series",
"type": "readonly AfChartSeries[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "showGrid",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "showPoints",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Superpone las observaciones crudas sobre las cajas de un boxplot.
\n",
"deprecated": false
},
{
"name": "spans",
"type": "readonly AfChartSpan[]",
"required": false,
"defaultValue": "[]",
"description": "Bloques con inicio y fin del tipo gantt.
\nSe expresan en la unidad del eje —semana de temporada— y no en fechas: la\nperiodización se planifica contra el calendario de competición, que cambia cada año.
\n",
"deprecated": false
},
{
"name": "thresholds",
"type": "readonly AfChartThreshold[]",
"required": false,
"defaultValue": "[]",
"description": "Líneas de umbral de decisión o de corte clínico.
\n",
"deprecated": false
},
{
"name": "title",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "tone",
"type": "AfChartTone",
"required": false,
"defaultValue": "'default'",
"description": "",
"deprecated": false
},
{
"name": "toolbox",
"type": "readonly AfChartToolboxFeature[]",
"required": false,
"defaultValue": "[]",
"description": "Herramientas de exploración sobre el lienzo (zoom por área, tabla de datos, PNG).
\nVacío por defecto: un gráfico embebido en una tarjeta de resumen no debería\nofrecer controles que compiten con la lectura.
\n",
"deprecated": false
},
{
"name": "tree",
"type": "readonly AfChartTreeNode[]",
"required": false,
"defaultValue": "[]",
"description": "Jerarquía de proporciones del tipo treemap.
\n",
"deprecated": false
},
{
"name": "type",
"type": "AfChartType",
"required": false,
"defaultValue": "'line'",
"description": "",
"deprecated": false
},
{
"name": "webglMessage",
"type": "string",
"required": false,
"defaultValue": "'Este gráfico necesita el paquete opcional echarts-gl.'",
"description": "Aviso cuando un tipo volumétrico no encuentra echarts-gl.
\nEl paquete es una dependencia opcional: sin él el lienzo queda vacío, y un gráfico\nvacío se lee como «no hay datos» en lugar de «falta instalar algo».
\n",
"deprecated": false
},
{
"name": "xAxis",
"type": "AfChartAxis | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "yAxis",
"type": "AfChartAxis | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "pointSelect",
"type": "AfChartPointEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-chart--default",
"name": "Default",
"url": "/storybook/?path=/story/data-chart--default"
},
{
"id": "data-chart--loading",
"name": "Loading",
"url": "/storybook/?path=/story/data-chart--loading"
},
{
"id": "data-chart--runtime-load-error",
"name": "RuntimeLoadError",
"url": "/storybook/?path=/story/data-chart--runtime-load-error"
},
{
"id": "data-chart--combo-ejes-duales",
"name": "ComboEjesDuales",
"url": "/storybook/?path=/story/data-chart--combo-ejes-duales"
},
{
"id": "data-chart--banda-de-dispersion",
"name": "BandaDeDispersion",
"url": "/storybook/?path=/story/data-chart--banda-de-dispersion"
},
{
"id": "data-chart--dispersion-con-ajuste",
"name": "DispersionConAjuste",
"url": "/storybook/?path=/story/data-chart--dispersion-con-ajuste"
},
{
"id": "data-chart--escala-logaritmica",
"name": "EscalaLogaritmica",
"url": "/storybook/?path=/story/data-chart--escala-logaritmica"
},
{
"id": "data-chart--area-apilada",
"name": "AreaApilada",
"url": "/storybook/?path=/story/data-chart--area-apilada"
},
{
"id": "data-chart--polar-apilado",
"name": "PolarApilado",
"url": "/storybook/?path=/story/data-chart--polar-apilado"
},
{
"id": "data-chart--matriz-de-correlacion",
"name": "MatrizDeCorrelacion",
"url": "/storybook/?path=/story/data-chart--matriz-de-correlacion"
},
{
"id": "data-chart--boxplot-con-puntos",
"name": "BoxplotConPuntos",
"url": "/storybook/?path=/story/data-chart--boxplot-con-puntos"
},
{
"id": "data-chart--heatmap",
"name": "Heatmap",
"url": "/storybook/?path=/story/data-chart--heatmap"
},
{
"id": "data-chart--barras-horizontales",
"name": "BarrasHorizontales",
"url": "/storybook/?path=/story/data-chart--barras-horizontales"
},
{
"id": "data-chart--splits-de-sprint",
"name": "SplitsDeSprint",
"url": "/storybook/?path=/story/data-chart--splits-de-sprint"
},
{
"id": "data-chart--radar",
"name": "Radar",
"url": "/storybook/?path=/story/data-chart--radar"
},
{
"id": "data-chart--coordenadas-paralelas",
"name": "CoordenadasParalelas",
"url": "/storybook/?path=/story/data-chart--coordenadas-paralelas"
},
{
"id": "data-chart--gauge",
"name": "Gauge",
"url": "/storybook/?path=/story/data-chart--gauge"
},
{
"id": "data-chart--con-toolbox",
"name": "ConToolbox",
"url": "/storybook/?path=/story/data-chart--con-toolbox"
},
{
"id": "data-chart--test-de-lactato",
"name": "TestDeLactato",
"url": "/storybook/?path=/story/data-chart--test-de-lactato"
},
{
"id": "data-chart--test-de-rampa",
"name": "TestDeRampa",
"url": "/storybook/?path=/story/data-chart--test-de-rampa"
},
{
"id": "data-chart--curva-fuerza-tiempo",
"name": "CurvaFuerzaTiempo",
"url": "/storybook/?path=/story/data-chart--curva-fuerza-tiempo"
},
{
"id": "data-chart--sprints-repetidos",
"name": "SprintsRepetidos",
"url": "/storybook/?path=/story/data-chart--sprints-repetidos"
},
{
"id": "data-chart--bland-altman",
"name": "BlandAltman",
"url": "/storybook/?path=/story/data-chart--bland-altman"
},
{
"id": "data-chart--curva-roc",
"name": "CurvaRoc",
"url": "/storybook/?path=/story/data-chart--curva-roc"
},
{
"id": "data-chart--burbujas",
"name": "Burbujas",
"url": "/storybook/?path=/story/data-chart--burbujas"
},
{
"id": "data-chart--rango-de-peso",
"name": "RangoDePeso",
"url": "/storybook/?path=/story/data-chart--rango-de-peso"
},
{
"id": "data-chart--calendario-de-carga",
"name": "CalendarioDeCarga",
"url": "/storybook/?path=/story/data-chart--calendario-de-carga"
},
{
"id": "data-chart--flujo-del-plantel",
"name": "FlujoDelPlantel",
"url": "/storybook/?path=/story/data-chart--flujo-del-plantel"
},
{
"id": "data-chart--carga-por-grupo-muscular",
"name": "CargaPorGrupoMuscular",
"url": "/storybook/?path=/story/data-chart--carga-por-grupo-muscular"
},
{
"id": "data-chart--red-de-pases",
"name": "RedDePases",
"url": "/storybook/?path=/story/data-chart--red-de-pases"
},
{
"id": "data-chart--proyeccion-de-carga",
"name": "ProyeccionDeCarga",
"url": "/storybook/?path=/story/data-chart--proyeccion-de-carga"
},
{
"id": "data-chart--histograma",
"name": "Histograma",
"url": "/storybook/?path=/story/data-chart--histograma"
},
{
"id": "data-chart--cumplimiento-de-objetivos",
"name": "CumplimientoDeObjetivos",
"url": "/storybook/?path=/story/data-chart--cumplimiento-de-objetivos"
},
{
"id": "data-chart--cascada",
"name": "Cascada",
"url": "/storybook/?path=/story/data-chart--cascada"
},
{
"id": "data-chart--desvio-individual",
"name": "DesvioIndividual",
"url": "/storybook/?path=/story/data-chart--desvio-individual"
},
{
"id": "data-chart--dumbbell",
"name": "Dumbbell",
"url": "/storybook/?path=/story/data-chart--dumbbell"
},
{
"id": "data-chart--pequenos-multiplos",
"name": "PequenosMultiplos",
"url": "/storybook/?path=/story/data-chart--pequenos-multiplos"
},
{
"id": "data-chart--dispersion-con-marginales",
"name": "DispersionConMarginales",
"url": "/storybook/?path=/story/data-chart--dispersion-con-marginales"
},
{
"id": "data-chart--periodizacion",
"name": "Periodizacion",
"url": "/storybook/?path=/story/data-chart--periodizacion"
},
{
"id": "data-chart--pareto",
"name": "Pareto",
"url": "/storybook/?path=/story/data-chart--pareto"
},
{
"id": "data-chart--barras-cien-por-ciento",
"name": "BarrasCienPorCiento",
"url": "/storybook/?path=/story/data-chart--barras-cien-por-ciento"
},
{
"id": "data-chart--nube-volumetrica",
"name": "NubeVolumetrica",
"url": "/storybook/?path=/story/data-chart--nube-volumetrica"
},
{
"id": "data-chart--superficie-de-respuesta",
"name": "SuperficieDeRespuesta",
"url": "/storybook/?path=/story/data-chart--superficie-de-respuesta"
},
{
"id": "data-chart--barras-volumetricas",
"name": "BarrasVolumetricas",
"url": "/storybook/?path=/story/data-chart--barras-volumetricas"
},
{
"id": "data-chart--trayectoria-volumetrica",
"name": "TrayectoriaVolumetrica",
"url": "/storybook/?path=/story/data-chart--trayectoria-volumetrica"
},
{
"id": "data-chart--sunburst",
"name": "Sunburst",
"url": "/storybook/?path=/story/data-chart--sunburst"
},
{
"id": "data-chart--theme-river",
"name": "ThemeRiver",
"url": "/storybook/?path=/story/data-chart--theme-river"
},
{
"id": "data-chart--diagrama-de-cuerdas",
"name": "DiagramaDeCuerdas",
"url": "/storybook/?path=/story/data-chart--diagrama-de-cuerdas"
},
{
"id": "data-chart--embudo",
"name": "Embudo",
"url": "/storybook/?path=/story/data-chart--embudo"
},
{
"id": "data-chart--ridgeline",
"name": "Ridgeline",
"url": "/storybook/?path=/story/data-chart--ridgeline"
},
{
"id": "data-chart--beeswarm",
"name": "Beeswarm",
"url": "/storybook/?path=/story/data-chart--beeswarm"
},
{
"id": "data-chart--pictograma",
"name": "Pictograma",
"url": "/storybook/?path=/story/data-chart--pictograma"
},
{
"id": "data-chart--rosa-de-nightingale",
"name": "RosaDeNightingale",
"url": "/storybook/?path=/story/data-chart--rosa-de-nightingale"
}
],
"docsUrl": "/storybook/?path=/docs/data-chart--docs",
"example": {
"story": "Default",
"typescript": "import { AfChart } from '@argfit-ui/adaptive/chart';",
"template": "` proyectado: encabezado, nota, menú de opciones, exportación a PNG y CSV, restablecer la vista y pantalla completa.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para presentar un gráfico con título, nota metodológica y acciones sobre el lienzo.",
"Para exportar el gráfico o su serie sin reescribir la descarga en cada tablero."
],
"avoidWhen": [
"Para un gráfico incrustado sin encabezado ni acciones; usa AfChart directamente.",
"Para una tarjeta de contenido genérico; usa AfCard."
],
"related": [
"AfChart",
"AfCard",
"AfAnalyticsCard"
],
"tokens": [
"--af-card-bg",
"--af-card-border",
"--af-border-focus",
"--af-bg-elevated"
],
"api": {
"inputs": [
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "exportName",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Nombre base de los archivos exportados, sin extensión.
\n",
"deprecated": false
},
{
"name": "heading",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inlineActions",
"type": "readonly AfChartCardAction[]",
"required": false,
"defaultValue": "[]",
"description": "Acciones que se muestran como botones en el encabezado en vez de dentro del menú.
\nSe reserva para lo que se usa en cada lectura —conmutar la tabla, exportar la\nimagen—: esconderlo tras el menú añade un clic de descubrimiento a un gesto\nfrecuente. Lo que aparece aquí se retira del menú para no ofrecerlo dos veces.
\n",
"deprecated": false
},
{
"name": "labels",
"type": "Partial",
"required": false,
"defaultValue": null,
"description": "Sobrescribe los textos visibles; útil para traducir la card.
\n",
"deprecated": false
},
{
"name": "menu",
"type": "readonly AfChartCardAction[]",
"required": false,
"defaultValue": "DEFAULT_MENU",
"description": "Acciones ofrecidas en el menú, en orden. Lista vacía oculta el menú.
\n",
"deprecated": false
},
{
"name": "note",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Nota metodológica: qué se está midiendo y cómo se lee.
\nUn gráfico sin unidades ni criterio de lectura se interpreta mal con confianza, que\nes peor que no interpretarlo.
\n",
"deprecated": false
},
{
"name": "tableVisible",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Visibilidad de la tabla accesible del gráfico.
\nEs bidireccional porque la tabla la dibuja el <af-chart> proyectado: la card no\npuede escribir en los inputs de un componente que no le pertenece, así que el\nconsumidor enlaza este estado con [dataTable].
\n",
"deprecated": false
},
{
"name": "tag",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Etiqueta breve del tipo de visualización, p. ej. «Combo · barras + línea».
\n",
"deprecated": false
}
],
"outputs": [
{
"name": "action",
"type": "AfChartCardActionEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "fullscreenChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "popOut",
"type": "void",
"required": false,
"defaultValue": null,
"description": "Intención de abrir el gráfico en una ventana o vista propia.
\n",
"deprecated": false
},
{
"name": "tableVisible",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Visibilidad de la tabla accesible del gráfico.
\nEs bidireccional porque la tabla la dibuja el <af-chart> proyectado: la card no\npuede escribir en los inputs de un componente que no le pertenece, así que el\nconsumidor enlaza este estado con [dataTable].
\n",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-chart-card--default",
"name": "Default",
"url": "/storybook/?path=/story/data-chart-card--default"
},
{
"id": "data-chart-card--menu-de-opciones",
"name": "MenuDeOpciones",
"url": "/storybook/?path=/story/data-chart-card--menu-de-opciones"
},
{
"id": "data-chart-card--tabla-de-datos",
"name": "TablaDeDatos",
"url": "/storybook/?path=/story/data-chart-card--tabla-de-datos"
},
{
"id": "data-chart-card--sin-menu",
"name": "SinMenu",
"url": "/storybook/?path=/story/data-chart-card--sin-menu"
},
{
"id": "data-chart-card--banda-de-dispersion",
"name": "BandaDeDispersion",
"url": "/storybook/?path=/story/data-chart-card--banda-de-dispersion"
},
{
"id": "data-chart-card--tabla-por-observacion",
"name": "TablaPorObservacion",
"url": "/storybook/?path=/story/data-chart-card--tabla-por-observacion"
}
],
"docsUrl": "/storybook/?path=/docs/data-chart-card--docs",
"example": {
"story": "Default",
"typescript": "import { AfChartCard } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "chat-composer",
"name": "AfChatComposer",
"className": "AfChatComposerComponent",
"selector": "af-chat-composer",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfChatComposer } from '@argfit-ui/adaptive';",
"title": "Components/Communication/Chat Composer",
"category": "Communication",
"status": "documented",
"description": "Compositor genérico. El consumidor procesa y persiste el mensaje enviado.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Redactar y enviar mensajes en una conversación"
],
"avoidWhen": [
"Editar contenido enriquecido"
],
"related": [
"AfTextarea",
"AfButton"
],
"tokens": [
"--af-input-bg",
"--af-border-focus"
],
"api": {
"inputs": [
{
"name": "busy",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string",
"required": false,
"defaultValue": "'Tu mensaje'",
"description": "",
"deprecated": false
},
{
"name": "maxLength",
"type": "number",
"required": false,
"defaultValue": "4000",
"description": "",
"deprecated": false
},
{
"name": "placeholder",
"type": "string",
"required": false,
"defaultValue": "'Escribe una pregunta'",
"description": "",
"deprecated": false
},
{
"name": "rows",
"type": "number",
"required": false,
"defaultValue": "3",
"description": "",
"deprecated": false
},
{
"name": "submitLabel",
"type": "string",
"required": false,
"defaultValue": "'Enviar'",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "string",
"required": false,
"defaultValue": "''",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "submitted",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "valueChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-communication-chat-composer--default",
"name": "Default",
"url": "/storybook/?path=/story/components-communication-chat-composer--default"
},
{
"id": "components-communication-chat-composer--disabled",
"name": "Disabled",
"url": "/storybook/?path=/story/components-communication-chat-composer--disabled"
},
{
"id": "components-communication-chat-composer--busy",
"name": "Busy",
"url": "/storybook/?path=/story/components-communication-chat-composer--busy"
}
],
"docsUrl": "/storybook/?path=/docs/components-communication-chat-composer--docs",
"example": {
"story": "Default",
"typescript": "import { AfChatComposer } from '@argfit-ui/adaptive';",
"template": "La cobertura del intervalo incluye 12 sesiones. "
}
},
{
"id": "checkbox",
"name": "AfCheckbox",
"className": "AfCheckboxComponent",
"selector": "af-checkbox",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCheckbox } from '@argfit-ui/adaptive';",
"title": "Components/Forms/Checkbox",
"category": "Forms",
"status": "documented",
"description": "Control booleano accesible para aceptar, activar o seleccionar una opción independiente.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Cuando una opción puede activarse o desactivarse de forma independiente."
],
"avoidWhen": [
"Cuando las opciones sean mutuamente excluyentes; usa AfRadioGroup."
],
"related": [
"AfRadioGroup",
"AfToggle"
],
"tokens": [
"--af-input-border",
"--af-border-focus"
],
"api": {
"inputs": [
{
"name": "checked",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "error",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "hint",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inputId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfControlSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "state",
"type": "AfValidationState",
"required": false,
"defaultValue": "'default'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "checkedChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "focusChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-forms-checkbox--default",
"name": "Default",
"url": "/storybook/?path=/story/components-forms-checkbox--default"
},
{
"id": "components-forms-checkbox--disabled",
"name": "Disabled",
"url": "/storybook/?path=/story/components-forms-checkbox--disabled"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-checkbox--docs",
"example": {
"story": "Default",
"typescript": "import { AfCheckbox } from '@argfit-ui/adaptive';",
"template": "Porteros "
}
},
{
"id": "command-palette",
"name": "AfCommandPalette",
"className": "AfCommandPaletteComponent",
"selector": "af-command-palette",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfCommandPalette } from '@argfit-ui/adaptive';",
"title": "Components/Overlays/CommandPalette",
"category": "Overlays",
"status": "documented",
"description": "Sistema global de comandos configurable mediante JSON, con ranking fuzzy, modos, contexto, providers y quick inputs.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para registrar navegación, acciones y búsquedas globales con una experiencia tipo VS Code.",
"Para ofrecer comandos estáticos y proveedores dinámicos desde una configuración JSON."
],
"avoidWhen": [
"Para ejecutar routing, permisos, fetching o exportaciones dentro de la librería.",
"Para una lista siempre visible; usa AfListbox."
],
"related": [
"AfDialog",
"AfPageShell",
"AfListbox"
],
"tokens": [
"--af-input-bg",
"--af-border-focus",
"--af-bg-elevated",
"--af-shadow-xl"
],
"api": {
"inputs": [],
"outputs": [
{
"name": "commandExecution",
"type": "AfCommandExecutionEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-overlays-commandpalette--default",
"name": "Default",
"url": "/storybook/?path=/story/components-overlays-commandpalette--default"
},
{
"id": "components-overlays-commandpalette--open-with-modes",
"name": "OpenWithModes",
"url": "/storybook/?path=/story/components-overlays-commandpalette--open-with-modes"
},
{
"id": "components-overlays-commandpalette--shortcut-and-mode-prefix",
"name": "ShortcutAndModePrefix",
"url": "/storybook/?path=/story/components-overlays-commandpalette--shortcut-and-mode-prefix"
},
{
"id": "components-overlays-commandpalette--fuzzy-ranking",
"name": "FuzzyRanking",
"url": "/storybook/?path=/story/components-overlays-commandpalette--fuzzy-ranking"
},
{
"id": "components-overlays-commandpalette--context-and-unavailable",
"name": "ContextAndUnavailable",
"url": "/storybook/?path=/story/components-overlays-commandpalette--context-and-unavailable"
},
{
"id": "components-overlays-commandpalette--dynamic-provider",
"name": "DynamicProvider",
"url": "/storybook/?path=/story/components-overlays-commandpalette--dynamic-provider"
},
{
"id": "components-overlays-commandpalette--entity-collection-players",
"name": "EntityCollectionPlayers",
"url": "/storybook/?path=/story/components-overlays-commandpalette--entity-collection-players"
},
{
"id": "components-overlays-commandpalette--entity-activator",
"name": "EntityActivator",
"url": "/storybook/?path=/story/components-overlays-commandpalette--entity-activator"
},
{
"id": "components-overlays-commandpalette--entity-actions",
"name": "EntityActions",
"url": "/storybook/?path=/story/components-overlays-commandpalette--entity-actions"
},
{
"id": "components-overlays-commandpalette--entity-action-context-and-back",
"name": "EntityActionContextAndBack",
"url": "/storybook/?path=/story/components-overlays-commandpalette--entity-action-context-and-back"
},
{
"id": "components-overlays-commandpalette--entity-fallback",
"name": "EntityFallback",
"url": "/storybook/?path=/story/components-overlays-commandpalette--entity-fallback"
},
{
"id": "components-overlays-commandpalette--entity-empty",
"name": "EntityEmpty",
"url": "/storybook/?path=/story/components-overlays-commandpalette--entity-empty"
},
{
"id": "components-overlays-commandpalette--multiple-entity-collections",
"name": "MultipleEntityCollections",
"url": "/storybook/?path=/story/components-overlays-commandpalette--multiple-entity-collections"
},
{
"id": "components-overlays-commandpalette--custom-entity",
"name": "CustomEntity",
"url": "/storybook/?path=/story/components-overlays-commandpalette--custom-entity"
},
{
"id": "components-overlays-commandpalette--recent-commands",
"name": "RecentCommands",
"url": "/storybook/?path=/story/components-overlays-commandpalette--recent-commands"
},
{
"id": "components-overlays-commandpalette--provider-error",
"name": "ProviderError",
"url": "/storybook/?path=/story/components-overlays-commandpalette--provider-error"
},
{
"id": "components-overlays-commandpalette--nested-commands",
"name": "NestedCommands",
"url": "/storybook/?path=/story/components-overlays-commandpalette--nested-commands"
},
{
"id": "components-overlays-commandpalette--export-parameters",
"name": "ExportParameters",
"url": "/storybook/?path=/story/components-overlays-commandpalette--export-parameters"
},
{
"id": "components-overlays-commandpalette--parameter-back-with-escape",
"name": "ParameterBackWithEscape",
"url": "/storybook/?path=/story/components-overlays-commandpalette--parameter-back-with-escape"
},
{
"id": "components-overlays-commandpalette--custom-command",
"name": "CustomCommand",
"url": "/storybook/?path=/story/components-overlays-commandpalette--custom-command"
},
{
"id": "components-overlays-commandpalette--keyboard-execution",
"name": "KeyboardExecution",
"url": "/storybook/?path=/story/components-overlays-commandpalette--keyboard-execution"
}
],
"docsUrl": "/storybook/?path=/docs/components-overlays-commandpalette--docs",
"example": {
"story": "Default",
"typescript": "import { AfCommandPalette } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "data-table",
"name": "AfDataTable",
"className": "AfDataTableComponent",
"selector": "af-data-table",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfDataTable } from '@argfit-ui/adaptive';",
"title": "Data/DataTable",
"category": "Data",
"status": "documented",
"description": "Tabla adaptativa para comparar registros: tabla densa en desktop y lista jerarquizada en mobile, con una sola API pública.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"comparar registros con las mismas columnas",
"ordenar, paginar, seleccionar o expandir filas en desktop y mobile"
],
"avoidWhen": [
"mostrar un resumen pequeño de clave y valor",
"representar contenido libre que funciona mejor como colección de tarjetas",
"delegar fetching o reglas de negocio a la capa de UI"
],
"related": [
"AfDataView",
"AfPaginator",
"AfEmptyState",
"AfBadge"
],
"tokens": [
"--af-bg-surface",
"--af-bg-elevated",
"--af-border",
"--af-text-main",
"--af-text-muted",
"--af-primary"
],
"api": {
"inputs": [
{
"name": "ariaLabel",
"type": "string",
"required": false,
"defaultValue": "'Tabla de datos'",
"description": "",
"deprecated": false
},
{
"name": "columns",
"type": "readonly AfDataTableColumn[]",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfDataTableDensity",
"required": false,
"defaultValue": "'normal'",
"description": "",
"deprecated": false
},
{
"name": "emptyDescription",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "emptyTitle",
"type": "string",
"required": false,
"defaultValue": "'Sin datos'",
"description": "",
"deprecated": false
},
{
"name": "error",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "expandedRowIds",
"type": "readonly string[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "pagination",
"type": "AfDataTablePagination | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "rowIdKey",
"type": "string",
"required": false,
"defaultValue": "'id'",
"description": "",
"deprecated": false
},
{
"name": "rows",
"type": "readonly unknown[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "selectedRowIds",
"type": "readonly string[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "selectionMode",
"type": "AfDataTableSelectionMode",
"required": false,
"defaultValue": "'none'",
"description": "",
"deprecated": false
},
{
"name": "sort",
"type": "AfDataTableSort | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "pageChange",
"type": "AfDataTablePageChange",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "rowExpandedChange",
"type": "readonly string[]",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "rowPressed",
"type": "unknown",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "selectionChange",
"type": "readonly string[]",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "sortChange",
"type": "AfDataTableSort",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-datatable--default",
"name": "Default",
"url": "/storybook/?path=/story/data-datatable--default"
},
{
"id": "data-datatable--sorting-and-pagination",
"name": "SortingAndPagination",
"url": "/storybook/?path=/story/data-datatable--sorting-and-pagination"
},
{
"id": "data-datatable--custom-content",
"name": "CustomContent",
"url": "/storybook/?path=/story/data-datatable--custom-content"
},
{
"id": "data-datatable--loading",
"name": "Loading",
"url": "/storybook/?path=/story/data-datatable--loading"
},
{
"id": "data-datatable--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-datatable--empty"
},
{
"id": "data-datatable--custom-empty",
"name": "CustomEmpty",
"url": "/storybook/?path=/story/data-datatable--custom-empty"
},
{
"id": "data-datatable--error",
"name": "Error",
"url": "/storybook/?path=/story/data-datatable--error"
}
],
"docsUrl": "/storybook/?path=/docs/data-datatable--docs",
"example": {
"story": "Default",
"typescript": "import { AfDataTable } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "data-view",
"name": "AfDataView",
"className": "AfDataViewComponent",
"selector": "af-data-view",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfDataView } from '@argfit-ui/adaptive';",
"title": "Data/DataView",
"category": "Data",
"status": "documented",
"description": "Colección adaptativa que alterna entre grid y lista manteniendo estados comunes.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para mostrar entidades enriquecidas en tarjetas o filas."
],
"avoidWhen": [
"Para datos tabulares con columnas comparables; usa AfDataTable."
],
"related": [
"AfDataTable",
"AfCard"
],
"tokens": [
"--af-bg-surface",
"--af-border"
],
"api": {
"inputs": [
{
"name": "ariaLabel",
"type": "string",
"required": false,
"defaultValue": "'Vista de datos'",
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfDataViewDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "emptyDescription",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "emptyTitle",
"type": "string",
"required": false,
"defaultValue": "'Sin resultados'",
"description": "",
"deprecated": false
},
{
"name": "error",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "items",
"type": "readonly AfDataViewItem[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "layout",
"type": "AfDataViewLayout",
"required": false,
"defaultValue": "'grid'",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "itemPressed",
"type": "AfDataViewItem",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-dataview--default",
"name": "Default",
"url": "/storybook/?path=/story/data-dataview--default"
},
{
"id": "data-dataview--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-dataview--empty"
}
],
"docsUrl": "/storybook/?path=/docs/data-dataview--docs",
"example": {
"story": "Default",
"typescript": "import { AfDataView } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "dialog",
"name": "AfDialog",
"className": "AfDialogComponent",
"selector": "af-dialog",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfDialog } from '@argfit-ui/adaptive';",
"title": "Components/Overlays/Dialog",
"category": "Overlays",
"status": "documented",
"description": "Accessible modal dialog with desktop and mobile presentations.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"focused confirmation or editing flow",
"accessible modal content"
],
"avoidWhen": [
"persistent page content",
"non-blocking contextual feedback"
],
"related": [
"AfButton",
"AfInlineMessage"
],
"tokens": [
"--af-bg-elevated",
"--af-shadow-lg",
"--af-radius-xl"
],
"api": {
"inputs": [
{
"name": "ariaDescribedBy",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "ariaLabel",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "closeLabel",
"type": "string",
"required": false,
"defaultValue": "'Cerrar'",
"description": "",
"deprecated": false
},
{
"name": "closeOnBackdrop",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "closeOnEscape",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "description",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "dismissible",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "mobilePresentation",
"type": "AfDialogMobilePresentation",
"required": false,
"defaultValue": "'sheet'",
"description": "",
"deprecated": false
},
{
"name": "open",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfDialogSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "title",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "tone",
"type": "AfDialogTone",
"required": false,
"defaultValue": "'neutral'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "backdropPress",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "closed",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "escapePress",
"type": "KeyboardEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "openChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "opened",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-overlays-dialog--default",
"name": "Default",
"url": "/storybook/?path=/story/components-overlays-dialog--default"
},
{
"id": "components-overlays-dialog--danger",
"name": "Danger",
"url": "/storybook/?path=/story/components-overlays-dialog--danger"
}
],
"docsUrl": "/storybook/?path=/docs/components-overlays-dialog--docs",
"example": {
"story": "Default",
"typescript": "import { AfDialog } from '@argfit-ui/adaptive';",
"template": "\n La sesión contiene cambios sin publicar.
\n \n "
}
},
{
"id": "divider",
"name": "AfDivider",
"className": "AfDividerComponent",
"selector": "af-divider",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfDivider } from '@argfit-ui/adaptive';",
"title": "Components/Surfaces/Divider",
"category": "Surfaces",
"status": "documented",
"description": "Separador semántico horizontal o vertical con etiqueta opcional.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para separar grupos relacionados dentro de una misma superficie."
],
"avoidWhen": [
"Para crear espacio visual sin significado; usa tokens de spacing."
],
"related": [
"AfPanel",
"AfCard"
],
"tokens": [
"--af-border",
"--af-text-muted"
],
"api": {
"inputs": [
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "orientation",
"type": "AfDividerOrientation",
"required": false,
"defaultValue": "'horizontal'",
"description": "",
"deprecated": false
},
{
"name": "tone",
"type": "AfDividerTone",
"required": false,
"defaultValue": "'subtle'",
"description": "",
"deprecated": false
}
],
"outputs": []
},
"stories": [
{
"id": "components-surfaces-divider--default",
"name": "Default",
"url": "/storybook/?path=/story/components-surfaces-divider--default"
},
{
"id": "components-surfaces-divider--strong",
"name": "Strong",
"url": "/storybook/?path=/story/components-surfaces-divider--strong"
}
],
"docsUrl": "/storybook/?path=/docs/components-surfaces-divider--docs",
"example": {
"story": "Default",
"typescript": "import { AfDivider } from '@argfit-ui/adaptive';",
"template": "Contenido de filtros proyectado por la aplicación.
Los controles relacionados se proyectan dentro del fieldset.
Misma sintaxis que el atributo nativo: extensiones, MIME exactos o comodines.
\n",
"deprecated": false
},
{
"name": "buttonLabel",
"type": "string",
"required": false,
"defaultValue": "'Elegir archivos'",
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfFileUploadDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "dropLabel",
"type": "string",
"required": false,
"defaultValue": "'o arrastra los archivos aquí'",
"description": "",
"deprecated": false
},
{
"name": "errorText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "files",
"type": "readonly File[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "helperText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inputId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "maxFiles",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "maxSizeBytes",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "multiple",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "progress",
"type": "readonly AfFileUploadProgress[]",
"required": false,
"defaultValue": "[]",
"description": "Estado de subida que reporta la aplicación, por nombre de archivo.
\n",
"deprecated": false
},
{
"name": "removeLabel",
"type": "string",
"required": false,
"defaultValue": "'Quitar archivo'",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfFileUploadSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "fileRemoved",
"type": "File",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "filesChange",
"type": "AfFileUploadChange",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "experimental-fileupload--default",
"name": "Default",
"url": "/storybook/?path=/story/experimental-fileupload--default"
}
],
"docsUrl": "/storybook/?path=/docs/experimental-fileupload--docs",
"example": {
"story": "Default",
"typescript": "import { AfFileUpload } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "icon-field",
"name": "AfIconField",
"className": "AfIconFieldComponent",
"selector": "af-icon-field",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfIconField } from '@argfit-ui/adaptive';",
"title": "Components/Forms/IconField",
"category": "Forms",
"status": "documented",
"description": "Campo compuesto con slots explícitos para prefijo, control y sufijo.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para controles que necesitan iconografía contextual dentro de su borde."
],
"avoidWhen": [
"Para texto auxiliar fuera del control; usa helperText en AfField."
],
"related": [
"AfInput",
"AfInputGroup"
],
"tokens": [
"--af-input-border",
"--af-border-focus"
],
"api": {
"inputs": [
{
"name": "density",
"type": "AfFieldDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "errorText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "helperText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inputId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "labelMode",
"type": "AfFieldLabelMode",
"required": false,
"defaultValue": "'stacked'",
"description": "",
"deprecated": false
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "state",
"type": "AfFieldState",
"required": false,
"defaultValue": "'default'",
"description": "",
"deprecated": false
}
],
"outputs": []
},
"stories": [
{
"id": "components-forms-iconfield--default",
"name": "Default",
"url": "/storybook/?path=/story/components-forms-iconfield--default"
},
{
"id": "components-forms-iconfield--with-error",
"name": "WithError",
"url": "/storybook/?path=/story/components-forms-iconfield--with-error"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-iconfield--docs",
"example": {
"story": "Default",
"typescript": "import { AfIconField } from '@argfit-ui/adaptive';",
"template": "⌕ ⌘K "
}
},
{
"id": "input-count",
"name": "AfInputCount",
"className": "AfInputCountComponent",
"selector": "af-input-count",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfInputCount } from '@argfit-ui/adaptive';",
"title": "Components/Forms/InputCount",
"category": "Forms",
"status": "documented",
"description": "Entrada numérica con acciones incrementales y límites explícitos.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para cantidades que se ajustan frecuentemente en pasos conocidos."
],
"avoidWhen": [
"Para métricas continuas o rangos; usa AfSlider."
],
"related": [
"AfInput",
"AfSlider"
],
"tokens": [
"--af-input-border",
"--af-border-focus"
],
"api": {
"inputs": [
{
"name": "allowManualInput",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfInputCountDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "errorText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "helperText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inputId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "max",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "min",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "precision",
"type": "number",
"required": false,
"defaultValue": "0",
"description": "",
"deprecated": false
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfInputCountSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "step",
"type": "number",
"required": false,
"defaultValue": "1",
"description": "",
"deprecated": false
},
{
"name": "unit",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "number",
"required": false,
"defaultValue": "0",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "decrement",
"type": "number",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "focusChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "increment",
"type": "number",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "valueChange",
"type": "number",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-forms-inputcount--default",
"name": "Default",
"url": "/storybook/?path=/story/components-forms-inputcount--default"
},
{
"id": "components-forms-inputcount--with-error",
"name": "WithError",
"url": "/storybook/?path=/story/components-forms-inputcount--with-error"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-inputcount--docs",
"example": {
"story": "Default",
"typescript": "import { AfInputCount } from '@argfit-ui/adaptive';",
"template": "€ EUR La tarjeta reclama la altura de su contenedor en lugar de su altura intrínseca.\nEl renderer interno ya rellena siempre el host; fill cubre el caso en que es el\npropio host el que no recibe altura (flex sin stretch, padre con altura fija).
\n",
"deprecated": false
},
{
"name": "helper",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "icon",
"type": "AfIconName | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "interactive",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string",
"required": true,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "period",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "provenance",
"type": "AfMetricProvenance | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "provenanceLabel",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "sample",
"type": "AfMetricSample | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Numerador y denominador tras un agregado: 1/1 y 240/240 no valen lo mismo.
\n",
"deprecated": false
},
{
"name": "size",
"type": "AfMetricCardSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "state",
"type": "AfMetricCardState",
"required": false,
"defaultValue": "'ready'",
"description": "Ciclo de vida del valor. empty es una afirmación sobre el dato, no un estilo:\nuna métrica sin muestra debe decirlo, nunca renderizar 0, porque un cero es en sí\nmismo una medición válida.
\n",
"deprecated": false
},
{
"name": "tone",
"type": "AfMetricCardTone",
"required": false,
"defaultValue": "'primary'",
"description": "",
"deprecated": false
},
{
"name": "trendDirection",
"type": "AfMetricTrendDirection | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "trendLabel",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "trendValue",
"type": "string | number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "unit",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "string | number",
"required": false,
"defaultValue": "''",
"description": "",
"deprecated": false
},
{
"name": "variant",
"type": "AfMetricCardVariant",
"required": false,
"defaultValue": "'surface'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "pressed",
"type": "MouseEvent | KeyboardEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-metriccard--default",
"name": "Default",
"url": "/storybook/?path=/story/data-metriccard--default"
},
{
"id": "data-metriccard--empty",
"name": "Empty",
"url": "/storybook/?path=/story/data-metriccard--empty"
},
{
"id": "data-metriccard--error",
"name": "Error",
"url": "/storybook/?path=/story/data-metriccard--error"
},
{
"id": "data-metriccard--fills-container",
"name": "FillsContainer",
"url": "/storybook/?path=/story/data-metriccard--fills-container"
},
{
"id": "data-metriccard--fill-fixed-height-container",
"name": "FillFixedHeightContainer",
"url": "/storybook/?path=/story/data-metriccard--fill-fixed-height-container"
}
],
"docsUrl": "/storybook/?path=/docs/data-metriccard--docs",
"example": {
"story": "Default",
"typescript": "import { AfMetricCard } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "multi-select",
"name": "AfMultiSelect",
"className": "AfMultiSelectComponent",
"selector": "af-multi-select",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfMultiSelect } from '@argfit-ui/adaptive';",
"title": "Components/Forms/MultiSelect",
"category": "Forms",
"status": "documented",
"description": "Selector compacto de múltiples opciones con búsqueda y límite opcional.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para elegir varias entidades de un conjunto mediano o grande."
],
"avoidWhen": [
"Para una única opción; usa AfSelect."
],
"related": [
"AfSelect",
"AfChip"
],
"tokens": [
"--af-bg-elevated",
"--af-border",
"--af-primary"
],
"api": {
"inputs": [
{
"name": "clearable",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfSelectionDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "errorText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "helperText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inputId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "maxSelected",
"type": "number | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "optionLabel",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "options",
"type": "readonly unknown[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "optionValue",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "placeholder",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "searchable",
"type": "boolean",
"required": false,
"defaultValue": "true",
"description": "",
"deprecated": false
},
{
"name": "selectionLimitText",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "readonly unknown[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "clear",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "openedChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "searchChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "valueChange",
"type": "readonly unknown[]",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-forms-multiselect--default",
"name": "Default",
"url": "/storybook/?path=/story/components-forms-multiselect--default"
},
{
"id": "components-forms-multiselect--selection-limit",
"name": "SelectionLimit",
"url": "/storybook/?path=/story/components-forms-multiselect--selection-limit"
},
{
"id": "components-forms-multiselect--form-field",
"name": "FormField",
"url": "/storybook/?path=/story/components-forms-multiselect--form-field"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-multiselect--docs",
"example": {
"story": "Default",
"typescript": "import { AfMultiSelect } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "order-list",
"name": "AfOrderList",
"className": "AfOrderListComponent",
"selector": "af-order-list",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfOrderList } from '@argfit-ui/adaptive';",
"title": "Data/OrderList",
"category": "Data",
"status": "documented",
"description": "Lista seleccionable con acciones de reordenamiento accesibles.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para establecer una prioridad o secuencia manual en una colección."
],
"avoidWhen": [
"Para flujo entre varios estados; usa AfKanban."
],
"related": [
"AfPickList",
"AfKanban"
],
"tokens": [
"--af-bg-surface",
"--af-border"
],
"api": {
"inputs": [
{
"name": "ariaLabel",
"type": "string",
"required": false,
"defaultValue": "'Lista ordenable'",
"description": "",
"deprecated": false
},
{
"name": "density",
"type": "AfOrderListDensity",
"required": false,
"defaultValue": "'comfortable'",
"description": "",
"deprecated": false
},
{
"name": "disabled",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "emptyDescription",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "emptyTitle",
"type": "string",
"required": false,
"defaultValue": "'Sin items'",
"description": "",
"deprecated": false
},
{
"name": "error",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "items",
"type": "readonly AfOrderListItem[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "selectedIds",
"type": "AfOrderListSelectedIds",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "selectionMode",
"type": "AfOrderListSelectionMode",
"required": false,
"defaultValue": "'single'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "reorderChange",
"type": "AfOrderListReorderChange",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "selectionChange",
"type": "AfOrderListSelectedIds",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "data-orderlist--default",
"name": "Default",
"url": "/storybook/?path=/story/data-orderlist--default"
},
{
"id": "data-orderlist--loading",
"name": "Loading",
"url": "/storybook/?path=/story/data-orderlist--loading"
}
],
"docsUrl": "/storybook/?path=/docs/data-orderlist--docs",
"example": {
"story": "Default",
"typescript": "import { AfOrderList } from '@argfit-ui/adaptive';",
"template": "ArgFit Jugadores Contenido principal de la pantalla.
Clasificación, rendimiento y disponibilidad.
Abrir acciones Ver perfil Editar dorsal
Observación 01 · Buen rendimiento en presión alta.
Observación 02 · Mejorar temporización defensiva.
Observación 03 · Trabajo específico completado.
Observación 04 · Disponible para convocatoria.
Observación 05 · Seguimiento semanal pendiente.
Indica si el origen todavía tiene páginas disponibles.
\n",
"deprecated": false
},
{
"name": "hint",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inputId",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "label",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "loading",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "loadingMore",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "options",
"type": "readonly AfFormOption[]",
"required": false,
"defaultValue": "[]",
"description": "",
"deprecated": false
},
{
"name": "placeholder",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "scrollLoad",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Habilita la solicitud de la siguiente página al acercarse al final de la lista.
\n",
"deprecated": false
},
{
"name": "scrollThreshold",
"type": "number",
"required": false,
"defaultValue": "50",
"description": "",
"deprecated": false
},
{
"name": "searchable",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "Filtra las opciones dentro del propio selector.
\n§19 «Reglas de formularios» lo exige para listas largas. Cada renderer lo resuelve\ncomo su plataforma permite: uno filtra dentro del propio panel desplegable; el otro,\nque no puede filtrar dentro de su control nativo, cambia a un disparador con hoja de\nbúsqueda. El contrato que ve la aplicación es el mismo en ambos.
\n",
"deprecated": false
},
{
"name": "searchEmptyText",
"type": "string",
"required": false,
"defaultValue": "'Sin resultados'",
"description": "",
"deprecated": false
},
{
"name": "searchMode",
"type": "AfSelectSearchMode",
"required": false,
"defaultValue": "'client'",
"description": "",
"deprecated": false
},
{
"name": "searchPlaceholder",
"type": "string",
"required": false,
"defaultValue": "'Buscar…'",
"description": "",
"deprecated": false
},
{
"name": "selectedOption",
"type": "AfFormOption | null",
"required": false,
"defaultValue": "null",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfControlSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "state",
"type": "AfValidationState",
"required": false,
"defaultValue": "'default'",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "string",
"required": false,
"defaultValue": "''",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "clearSearch",
"type": "void",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "focusChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "loadMore",
"type": "AfSelectLoadMoreEvent",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "searchChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "valueChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-forms-select--primary",
"name": "Primary",
"url": "/storybook/?path=/story/components-forms-select--primary"
},
{
"id": "components-forms-select--searchable",
"name": "Searchable",
"url": "/storybook/?path=/story/components-forms-select--searchable"
},
{
"id": "components-forms-select--loading-more",
"name": "LoadingMore",
"url": "/storybook/?path=/story/components-forms-select--loading-more"
},
{
"id": "components-forms-select--infinite-scroll",
"name": "InfiniteScroll",
"url": "/storybook/?path=/story/components-forms-select--infinite-scroll"
},
{
"id": "components-forms-select--disabled",
"name": "Disabled",
"url": "/storybook/?path=/story/components-forms-select--disabled"
},
{
"id": "components-forms-select--with-error",
"name": "WithError",
"url": "/storybook/?path=/story/components-forms-select--with-error"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-select--docs",
"example": {
"story": "Primary",
"typescript": "import { AfSelect } from '@argfit-ui/adaptive';",
"template": ""
}
},
{
"id": "skeleton",
"name": "AfSkeleton",
"className": "AfSkeletonComponent",
"selector": "af-skeleton",
"package": "@argfit-ui/adaptive",
"importStatement": "import { AfSkeleton } from '@argfit-ui/adaptive';",
"title": "Feedback/Skeleton",
"category": "Feedback",
"status": "documented",
"description": "Placeholder no interactivo para anticipar la estructura durante una carga.",
"platforms": [
"desktop",
"mobile"
],
"useWhen": [
"Para preservar el layout mientras llega contenido conocido."
],
"avoidWhen": [
"Para comunicar progreso cuantificable; usa AfProgress."
],
"related": [
"AfProgress",
"AfCard"
],
"tokens": [
"--af-surface-2",
"--af-radius-md"
],
"api": {
"inputs": [
{
"name": "animation",
"type": "AfSkeletonAnimation",
"required": false,
"defaultValue": "'pulse'",
"description": "",
"deprecated": false
},
{
"name": "ariaLabel",
"type": "string",
"required": false,
"defaultValue": "'Cargando'",
"description": "",
"deprecated": false
},
{
"name": "height",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "inline",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "lines",
"type": "number",
"required": false,
"defaultValue": "3",
"description": "Solo aplica a text. La última línea se acorta para que se lea como prosa.
\n",
"deprecated": false
},
{
"name": "radius",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "shape",
"type": "AfSkeletonShape",
"required": false,
"defaultValue": "'text'",
"description": "",
"deprecated": false
},
{
"name": "width",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
}
],
"outputs": []
},
"stories": [
{
"id": "feedback-skeleton--default",
"name": "Default",
"url": "/storybook/?path=/story/feedback-skeleton--default"
},
{
"id": "feedback-skeleton--avatar",
"name": "Avatar",
"url": "/storybook/?path=/story/feedback-skeleton--avatar"
}
],
"docsUrl": "/storybook/?path=/docs/feedback-skeleton--docs",
"example": {
"story": "Default",
"typescript": "import { AfSkeleton } from '@argfit-ui/adaptive';",
"template": "Paradas etiquetadas bajo la barra. Convierten un número en un juicio interpretable.
\n",
"deprecated": false
},
{
"name": "max",
"type": "number",
"required": false,
"defaultValue": "100",
"description": "",
"deprecated": false
},
{
"name": "min",
"type": "number",
"required": false,
"defaultValue": "0",
"description": "",
"deprecated": false
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfSliderSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "step",
"type": "number",
"required": false,
"defaultValue": "1",
"description": "",
"deprecated": false
},
{
"name": "ticks",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "tone",
"type": "AfSliderTone",
"required": false,
"defaultValue": "'primary'",
"description": "",
"deprecated": false
},
{
"name": "unit",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "number",
"required": false,
"defaultValue": "0",
"description": "",
"deprecated": false
},
{
"name": "valueDisplay",
"type": "AfSliderValueDisplay",
"required": false,
"defaultValue": "'inline'",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "focusChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "valueChange",
"type": "number",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-forms-slider--default",
"name": "Default",
"url": "/storybook/?path=/story/components-forms-slider--default"
},
{
"id": "components-forms-slider--disabled",
"name": "Disabled",
"url": "/storybook/?path=/story/components-forms-slider--disabled"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-slider--docs",
"example": {
"story": "Default",
"typescript": "import { AfSlider } from '@argfit-ui/adaptive';",
"template": "Ficha Detalle seleccionado
Límite superior como HH:mm.
\n",
"deprecated": false
},
{
"name": "min",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "Límite inferior como HH:mm.
\n",
"deprecated": false
},
{
"name": "minuteStep",
"type": "AfTimePickerMinuteStep",
"required": false,
"defaultValue": "5",
"description": "",
"deprecated": false
},
{
"name": "name",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "placeholder",
"type": "string | undefined",
"required": false,
"defaultValue": "undefined",
"description": "",
"deprecated": false
},
{
"name": "readonly",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "required",
"type": "boolean",
"required": false,
"defaultValue": "false",
"description": "",
"deprecated": false
},
{
"name": "size",
"type": "AfTimePickerSize",
"required": false,
"defaultValue": "'md'",
"description": "",
"deprecated": false
},
{
"name": "value",
"type": "string",
"required": false,
"defaultValue": "''",
"description": "",
"deprecated": false
}
],
"outputs": [
{
"name": "focusChange",
"type": "boolean",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
},
{
"name": "valueChange",
"type": "string",
"required": false,
"defaultValue": null,
"description": "",
"deprecated": false
}
]
},
"stories": [
{
"id": "components-forms-timepicker--default",
"name": "Default",
"url": "/storybook/?path=/story/components-forms-timepicker--default"
},
{
"id": "components-forms-timepicker--with-error",
"name": "WithError",
"url": "/storybook/?path=/story/components-forms-timepicker--with-error"
}
],
"docsUrl": "/storybook/?path=/docs/components-forms-timepicker--docs",
"example": {
"story": "Default",
"typescript": "import { AfTimePicker } from '@argfit-ui/adaptive';",
"template": "Acción activada dentro de un aviso.
\nEl viewport vive una sola vez en la raíz de la aplicación, así que es el punto natural\nde despacho: el consumidor discrimina por event.action.id. El servicio de toasts no\nguarda manejadores a propósito —almacenar funciones de componente en un singleton de\ncore filtraría estado de UI a la capa de datos y dificultaría su liberación.
\n",
"deprecated": false
}
]
},
"stories": [
{
"id": "feedback-toastviewport--default",
"name": "Default",
"url": "/storybook/?path=/story/feedback-toastviewport--default"
},
{
"id": "feedback-toastviewport--bottom-center",
"name": "BottomCenter",
"url": "/storybook/?path=/story/feedback-toastviewport--bottom-center"
}
],
"docsUrl": "/storybook/?path=/docs/feedback-toastviewport--docs",
"example": {
"story": "Default",
"typescript": "import { AfToastViewport } from '@argfit-ui/adaptive';",
"template": "Plantilla 24 jugadores Filtrar Añadir
+ \n Regla de terminado \n\n Un componente no está terminado cuando compila. Está terminado cuando su API adaptativa,\n historias, documentación, accesibilidad y matriz desktop/mobile × dark/light son verificables\n desde Storybook.\n
\n\n\n
\n
\n
\n
\n
\n
\n\n
\n Principios \n Crear \n Documentar \n Validar \n Desplegar \n Checklist IA \n
\n\n
\n\n## Principios y responsabilidades\n\nArgFit Football y las demás aplicaciones consumidoras deben componer interfaces con\n`@argfit-ui/adaptive`; no deben reconstruir controles, colores o layouts reutilizables con\nHTML y CSS propios. ArgFit UI resuelve presentación e interacción genérica. La aplicación\nconserva navegación, permisos, datos, OAuth, temporizadores y estados de negocio.\n\n\n Capa Responsabilidad No debe contener \n coreTipos, tokens, tema y servicios compartidos. PrimeNG, Ionic o renderers. primitivesPiezas estructurales y accesibles sin vendor. Componentes adaptativos o wrappers de vendor. chart-runtimeMotor ECharts compartido y cargado bajo demanda por los renderers. Componentes Angular públicos, PrimeNG, Ionic o lógica de producto. desktopRenderer productivo y denso; PrimeNG es interno. API pública acoplada a PrimeNG. mobileRenderer táctil, safe areas e Ionic interno. API pública acoplada a Ionic. adaptiveContrato público y selección de renderer. Lógica de producto o duplicación visual. StorybookContrato ejecutable, estados, API y guía de uso. Demos ficticias sin valor documental. \n
\n\n### Antes de escribir código\n\n1. Busca si el concepto ya existe y puede extenderse sin romper su API.\n2. Define el concepto semántico: `AfDatePicker`, no `AfPrimeCalendar`.\n3. Escribe primero el contrato público: inputs, outputs, slots y estados.\n4. Decide qué pertenece a UI y qué debe permanecer en la aplicación consumidora.\n5. Diseña los cuatro resultados: desktop/dark, desktop/light, mobile/dark y mobile/light.\n\n \n\n
\n\n## Crear el componente\n\n### Estructura esperada\n\n```text\nprojects/\n argfit-ui-core/src/lib/types/.types.ts\n argfit-ui-desktop/src/lib/components//\n af--desktop.component.{ts,html,scss,spec.ts}\n argfit-ui-mobile/src/lib/components//\n af--mobile.component.{ts,html,scss,spec.ts}\n argfit-ui-adaptive/src/lib/components//\n af-.component.{ts,html,scss,spec.ts}\n af-.stories.ts\n af-.docs.mdx # cuando necesita guía editorial propia\n```\n\nNo todos los componentes necesitan archivos HTML o SCSS separados, pero las responsabilidades\nde las capas no cambian.\n\n### Orden de implementación\n\n1. **Contrato:** añade tipos vendor-neutral en `core` y expórtalos desde su `public-api.ts`.\n2. **Renderers:** implementa desktop y mobile con la misma semántica, estados y accesibilidad.\n3. **Fachada adaptativa:** usa `AfPlatformService`, delega el render y reexpone una sola API.\n4. **Exports:** exporta renderers en sus paquetes y el componente público en `adaptive/public-api.ts`.\n5. **Pruebas unitarias:** cubre inputs, outputs, slots, teclado, ARIA y cambio de plataforma.\n6. **Tokens:** usa `--af-*`; ningún color, radio o espaciado de producto debe quedar hardcoded.\n\n### Esqueleto de la fachada adaptativa\n\n```ts\n@Component({\n selector: 'af-example',\n imports: [AfExampleDesktopComponent, AfExampleMobileComponent],\n templateUrl: './af-example.component.html',\n styleUrl: './af-example.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AfExampleComponent {\n private readonly platform = inject(AfPlatformService);\n\n readonly value = input(null);\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly valueChange = output();\n protected readonly isMobile = this.platform.isMobile;\n}\n```\n\nLa fachada transforma sólo lo necesario para mantener un contrato estable. No consulta APIs,\nno navega y no conoce reglas de ArgFit Football.\n\n \n\n
\n\n## Documentar en Storybook\n\nLa historia vive junto al componente adaptativo. Todo nuevo componente debe tener una página\nDocs: usa `tags: ['autodocs']` para el caso simple o un archivo `.docs.mdx` para componentes\ncon decisiones de uso, composición, theming o ejemplos extensos.\n\n### Historia mínima aceptable\n\n```ts\nimport type { Meta, StoryObj } from '@storybook/angular-vite';\nimport { expect, fn, userEvent } from 'storybook/test';\nimport { AfExampleComponent } from './af-example.component';\n\nconst meta: Meta = {\n title: 'Components/Forms/Example',\n component: AfExampleComponent,\n tags: ['autodocs'],\n parameters: {\n argfit: {\n category: 'Forms',\n importName: 'AfExample',\n useWhen: ['Describe the user intent this component solves.'],\n avoidWhen: ['Describe the closest misuse or product responsibility.'],\n platforms: ['desktop', 'mobile'],\n tokens: ['--af-input-bg', '--af-border-focus'],\n related: ['AfInput'],\n },\n docs: { description: { component: 'Qué resuelve y cuándo usarlo.' } },\n },\n argTypes: {\n disabled: { control: 'boolean' },\n size: { control: 'select', options: ['sm', 'md', 'lg'] },\n },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n args: { disabled: false, valueChange: fn() },\n play: async ({ args, canvas }) => {\n await userEvent.click(canvas.getByRole('button'));\n await expect(args.valueChange).toHaveBeenCalledOnce();\n },\n};\n```\n\n### Contenido obligatorio\n\n\n
Canónica Una historia `Default` o equivalente que explique el uso normal.
\n
Estados Loading, empty, error, disabled, readonly y variantes relevantes.
\n
Controles argTypes tipados para la API que una persona debe explorar.
\n
Interacción play para teclado, selección, eventos y flujos importantes.
\n
API Descripción, imports públicos y límites de responsabilidad.
\n
Theming Tokens públicos relevantes; nunca una lista de colores privados.
\n
MCP parameters.argfit completo para búsqueda, recomendaciones y ejemplos verificables.
\n
\n\n
\n\n## Probar y validar\n\nDurante el desarrollo ejecuta Storybook directamente desde source; no hace falta precompilar\nlas librerías:\n\n```bash\npnpm storybook\n```\n\nAntes de abrir o actualizar un PR:\n\n```bash\npnpm guard:architecture\npnpm guard:storybook\npnpm build-storybook\npnpm test-storybook\npnpm test-storybook:a11y\npnpm test-storybook:visual\npnpm guard:mcp-catalog\npnpm mcp:test\n```\n\n`guard:storybook` impide introducir un componente adaptativo sin historia y también rechaza\nhistorias sin `autodocs` ni MDX. Las excepciones históricas viven en una allowlist explícita;\nno se añaden componentes nuevos a esa lista.\n\n`guard:mcp-catalog` comprueba que el catálogo derivado coincide con Storybook, Compodoc,\nexports y tokens. No edites `tools/mcp/argfit-catalog.json` manualmente: actualiza la historia\no el contrato público y ejecuta `pnpm generate:mcp-catalog`.\n\n### Matriz de aceptación\n\n\n Matriz Qué revisar \n Desktop / Dark Densidad, teclado, overlays, contraste y foco. Desktop / Light Tokens, bordes, elevación y ausencia de colores hardcoded. Mobile / Dark Touch targets, scroll, safe areas y renderer correcto. Mobile / Light Legibilidad, estados nativos y layout estrecho. \n
\n\nEl trabajo falla si hay canvas vacío, error de consola, request fallido, token requerido ausente,\nviolación axe seria/crítica o diferencia visual no revisada.\n\n \n\n
\n\n## Desplegar cambios\n\n### Preview de documentación\n\n1. Sube una rama y abre un PR.\n2. El job **Storybook quality gate** ejecuta coverage, build, smoke, axe y capturas de la matriz.\n3. Revisa el artifact `storybook` de GitHub Actions cuando haya una diferencia visual.\n4. Vercel usa `pnpm build:portal`; el catálogo estático se publica bajo `/storybook/` y la\n integración de Vercel genera la preview del PR.\n5. Prueba navegación directa a una página Docs y a una Story antes de aprobar.\n\n```bash\npnpm build:portal\n```\n\nLa documentación de componentes se edita sólo en Storybook aunque el portal Angular histórico\nsiga disponible en `/`. No copies el mismo contenido a ambos sitios.\n\n### Publicación de paquetes npm\n\nPublicar Storybook y publicar `@argfit-ui/*` son procesos distintos. Un cambio de componente\npuede desplegar su preview sin publicar una versión npm. Para una release estable, actualiza\nversiones y changelog, ejecuta el gate completo y usa el workflow protegido:\n\n```bash\npnpm release:production:check\n```\n\nDespués se crea el tag estable correspondiente y `.github/workflows/publish-production.yml`\npublica los cinco paquetes con `latest`. No ejecutes `npm publish` manualmente desde una rama.\n\n \n\n
\n\n## Protocolo para agentes de IA\n\nUn agente debe seguir este orden y reportar evidencia concreta:\n\n1. Leer esta guía, `docs/architecture.md` y los archivos del componente más cercano por función.\n2. Inspeccionar cambios sin confirmar y preservar trabajo ajeno.\n3. Diseñar la API pública antes de elegir PrimeNG, Ionic o markup interno.\n4. Implementar las capas mínimas necesarias sin mover lógica de negocio a la librería.\n5. Añadir exports, specs, historia, Docs y estados en el mismo cambio.\n6. Verificar visualmente la misma instancia de Storybook en las cuatro matrices.\n7. Ejecutar guards y pruebas proporcionales; no declarar éxito sólo porque TypeScript compila.\n8. Consultar `get_component` y ejecutar `validate_usage` mediante el MCP cuando esté disponible.\n9. Entregar archivos cambiados, comandos ejecutados y cualquier deuda restante.\n\n### Prohibido\n\n- Crear un componente público sin historia o sin Docs.\n- Crear una historia sin el bloque tipado parameters.argfit.\n- Añadir la nueva carpeta a la allowlist de Storybook.\n- Documentar el componente en `projects/argfit-ui-docs`.\n- Exponer tipos de PrimeNG/Ionic en la API adaptativa.\n- Introducir colores, spacing o tipografía de producto fuera de los tokens `--af-*`.\n- Incorporar OAuth, routing, permisos, fetching o máquinas de estado de una aplicación.\n- Abrir otro servidor de Storybook si el puerto `6006` ya está en uso.\n\n### Definición de terminado\n\n\n
01 · API Vendor-neutral, estable y exportada.
\n
02 · Renderers Desktop y mobile correctos, o decisión explícita de renderer compartido.
\n
03 · Unit tests Contrato, accesibilidad, eventos y proyección cubiertos.
\n
04 · Stories Historia canónica, estados y controles tipados.
\n
05 · Docs autodocs o MDX con import, uso, API y theming.
\n
06 · Matriz Desktop/mobile × dark/light revisado.
\n
07 · Gates Guard, build, smoke, axe y visual sin fallos.
\n
08 · Preview Navegación directa bajo /storybook/.
\n
\n