@solcre-org/core-ui 2.19.2 → 2.20.0

package/llm/components/generic-switch.md

@@ -0,0 +1,140 @@
+# core-generic-switch
+
+- Class: `GenericSwitchComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-switch/generic-switch.component.ts`
+
+## Inputs
+- `selectedValue`: `T`
+- `ariaLabel`: `string`
+
+## Outputs
+- `valueChange`: `T`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/switch/switch-example.component.html`:15 — `<core-generic-switch`
+- `projects/core-ui-demo/src/app/admin/components/switch/switch-example.component.html`:33 — `<core-generic-switch`
+- `projects/core-ui-demo/src/app/admin/components/switch/switch-example.component.html`:52 — `<core-generic-switch`
+- `projects/core-ui-demo/src/app/admin/components/switch/switch-example.component.html`:86 — `<pre><code>&lt;core-generic-switch`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/switch/switch-example.component.html`:15-95
+
+```html
+        <core-generic-switch
+          [options]="viewOptions"
+          [selectedValue]="viewMode()"
+          [ariaLabel]="'View mode selector'"
+          (valueChange)="onViewChange($event)" />
+      </div>
+
+      <div class="example-result">
+        <p><strong>Modo seleccionado:</strong> {{ viewMode() }}</p>
+      </div>
+    </section>
+
+    <!-- Example 2: Three options -->
+    <section class="example-section">
+      <h2 class="c-title c-title--h3">Ejemplo 2: Switch con tres opciones</h2>
+      <p class="c-text">Switch con múltiples opciones para cambiar entre diferentes modos de visualización.</p>
+      
+      <div class="example-demo">
+        <core-generic-switch
+          [options]="displayOptions"
+          [selectedValue]="displayMode()"
+          [ariaLabel]="'Display mode selector'"
+          (valueChange)="onDisplayChange($event)" />
+      </div>
+
+      <div class="example-result">
+        <p><strong>Modo de visualización:</strong> {{ displayMode() }}</p>
+      </div>
+    </section>
+
+
+    <!-- Example 3: Switch with disabled option -->
+    <section class="example-section">
+      <h2 class="c-title c-title--h3">Ejemplo 3: Switch con opción deshabilitada</h2>
+      <p class="c-text">Switch donde una de las opciones está deshabilitada.</p>
+      
+      <div class="example-demo">
+        <core-generic-switch
+          [options]="sortOptions"
+          [selectedValue]="sortMode()"
+          [ariaLabel]="'Sort mode selector'"
+          (valueChange)="onSortChange($event)" />
+      </div>
+
+      <div class="example-result">
+        <p><strong>Ordenamiento seleccionado:</strong> {{ sortMode() }}</p>
+        <p class="c-text c-text--small">Nota: La opción "por tamaño" está deshabilitada.</p>
+      </div>
+    </section>
+
+    <!-- Usage Documentation -->
+    <section class="example-section">
+      <h2 class="c-title c-title--h3">Uso</h2>
+      
+      <div class="code-example">
+        <h4>TypeScript:</h4>
+        <pre><code>import &#123; Component, signal &#125; from '&#64;angular/core';
+import &#123; GenericSwitchComponent, SwitchOption &#125; from '&#64;solcre-org/core-ui';
+
+viewMode = signal&lt;'list' | 'calendar'&gt;('list');
+
+viewOptions: SwitchOption&lt;'list' | 'calendar'&gt;[] = [
+  &#123; value: 'list', icon: 'icon-list', tooltip: 'Vista de lista' &#125;,
+  &#123; value: 'calendar', icon: 'icon-calendar', tooltip: 'Vista de calendario' &#125;
+];
+
+onViewChange(value: 'list' | 'calendar'): void &#123;
+  this.viewMode.set(value);
+&#125;</code></pre>
+
+        <h4>HTML:</h4>
+        <pre><code>&lt;core-generic-switch
+  [options]="viewOptions"
+  [selectedValue]="viewMode()"
+  (valueChange)="onViewChange($event)" /&gt;</code></pre>
+      </div>
+
+      <div class="api-docs">
+        <h4>API:</h4>
+        <ul>
+          <li><strong>&#64;Input() options:</strong> Array de SwitchOption (requerido)</li>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/switch/switch-example.component.ts`
+
+Lines: 85-109
+
+```ts
+    { 
+      value: 'size', 
+      icon: 'icon-list', 
+      tooltip: 'Ordenar por tamaño',
+      disabled: true // This option is disabled
+    }
+  ];
+
+  onViewChange(value: 'list' | 'calendar'): void {
+    this.viewMode.set(value);
+    console.log('View mode changed to:', value);
+  }
+
+  onDisplayChange(value: 'calendar' | 'list' | 'start'): void {
+    this.displayMode.set(value);
+    console.log('Display mode changed to:', value);
+  }
+
+  onFilterChange(value: 'all' | 'active' | 'archived'): void {
+    this.filterMode.set(value);
+    console.log('Filter mode changed to:', value);
+  }
+
+  onSortChange(value: 'search' | 'star' | 'size'): void {
+    this.sortMode.set(value);
+```

package/llm/components/generic-table.md

@@ -0,0 +1,157 @@
+# core-generic-table
+
+- Class: `GenericTableComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-table/generic-table.component.ts`
+
+## Inputs
+- `columns`: `ColumnConfig<T>[]` (required)
+- `modalFields`: `ModalFieldConfig<T>[]`
+- `modalTabs`: `ModalTabConfig<T>[]`
+- `actions`: `TableActionConfig<T>[]` (required)
+- `customActions`: `CustomAction<T>[]`
+- `globalActions`: `GlobalAction<T>[]`
+- `pageSizeOptions`: `number[] | undefined`
+- `showFilter`: `boolean`
+- `showSelection`: `boolean`
+- `showActions`: `boolean`
+- `showCreateButton`: `boolean`
+- `filterButtonConfig`: `Partial<ButtonConfig> | undefined`
+- `createButtonConfig`: `Partial<ButtonConfig> | undefined`
+- `createButtonText`: `string | undefined`
+- `dataInput`: `T[]`
+- `customFilters`: `FilterConfig<T>[]`
+- `enablePagination`: `boolean`
+- `modelFactory`: `((data: any) => T) | undefined`
+- `endpoint`: `string | undefined`
+- `customParams`: `Record<string, any> | undefined`
+- `customArrayKey`: `string | undefined`
+- `listTitle`: `string | undefined`
+- `listSubTitle`: `string | undefined`
+- `moreData`: `MoreDataConfig<any>[]`
+- `inModal`: `boolean`
+- `expansionConfig`: `ExpansionConfig<T> | undefined`
+- `fileUploadConfig`: `FileUploadConfig | undefined`
+- `rowStyleConfigs`: `RowStyleConfig<T>[]`
+- `columnDisabledConfigs`: `ColumnDisabledConfig<T>[]`
+- `rowVisibilityConfigs`: `RowVisibilityConfig<T>[]`
+- `headerOrder`: `HeaderOrderConfig | undefined`
+- `showActiveFilters`: `boolean`
+- `activeFiltersConfig`: `ActiveFiltersConfig`
+- `sortConfig`: `TableSortConfig | undefined`
+- `showManualRefresh`: `boolean`
+- `manualRefreshConfig`: `Partial<ManualRefreshConfig> | undefined`
+- `refreshButtonConfig`: `Partial<ButtonConfig> | undefined`
+- `fixedActionsConfig`: `TableFixedActionsConfig<T> | undefined`
+- `deletedFilterKey`: `string`
+- `scrollTable`: `boolean`
+- `customEdit`: `(item: T) => void`
+- `customDelete`: `(item: T) => void`
+- `customView`: `(item: T) => void`
+- `customSave`: `(item: T, mode: ModalMode) => void`
+- `useCustomSave`: `boolean`
+- `onApiError`: `(error: any, defaultMessage: string, operation: string) => string`
+- `inlineEditConfig`: `InlineEditConfig<T> | undefined`
+
+## Outputs
+- `actionTriggered`: `{ action: TableAction; row?: T }`
+- `selectionChanged`: `T[]`
+- `dataCreated`: `T`
+- `dataUpdated`: `T`
+- `dataDeleted`: `T[]`
+- `dataFetched`: `T[]`
+- `onMoreDataLoaded`: `Map<string, any[]>`
+- `globalActionTriggered`: `{ action: GlobalAction<T>; selectedRows: T[] }`
+- `modalData`: `T`
+- `beforeSave`: `{ data: T; mode: ModalMode }`
+- `onFilterChange`: `Map<string, any>`
+- `onClearFilters`: `void`
+- `activeFilterRemoved`: `ActiveFilterItem`
+- `activeFiltersCleared`: `void`
+- `dataRefreshed`: `void`
+- `inlineEditSave`: `{ row: T; column: string; value: any; allChanges: Map<string, any> }`
+- `inlineEditModeChanged`: `boolean`
+- `inlineEditValidationError`: `{ rowId: number; column: string; errors: string[] }`
+
+## Usage notes
+- Use `columns` + `actions` as the minimal required config.
+- Data source can be `dataInput` (local) or `endpoint` + `modelFactory` (remote).
+- Supports filters, inline edit, row styling/visibility, expandable rows, and fixed actions.
+
+## Example
+```html
+<core-generic-table
+  [columns]="columns"
+  [actions]="actions"
+  [dataInput]="rows"
+  [showFilter]="true"
+  [enablePagination]="true"
+  (actionTriggered)="onAction($event)"
+  (dataCreated)="onCreated($event)"
+  (dataUpdated)="onUpdated($event)"
+></core-generic-table>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.ts`:1083 — `<core-generic-table [columns]="columns" [actions]="[]"></core-generic-table>`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:12 — `<core-generic-table`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:23 — `</core-generic-table>`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:30 — `<core-generic-table`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:41 — `</core-generic-table>`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:48 — `<core-generic-table`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:55 — `</core-generic-table>`
+- `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:62 — `<core-generic-table`
+- …and 41 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/tables/tables.html`:12-23
+
+```html
+      <core-generic-table
+        [columns]="basicColumns"
+        [actions]="basicActions"
+        [dataInput]="sampleData()"
+        [modalFields]="modalFields()"
+        [modelFactory]="documentationModelFactory"
+        [enablePagination]="false"
+        [showFilter]="true"
+        (dataCreated)="onDataCreated($event)"
+        (dataUpdated)="onDataUpdated($event)"
+        (dataDeleted)="onDataDeleted($event)">
+      </core-generic-table>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/tables/tables.ts`
+
+Lines: 1295-1319
+
+```ts
+    console.log('Selección cambiada:', selectedRows);
+  }
+
+  onDataCreated(data: DocumentationModel): void {
+    console.log('Datos creados:', data);
+    const currentData = this.sampleData();
+    data.id = Date.now().toString();
+    this.sampleData.set([...currentData, data]);
+  }
+
+  onDataUpdated(data: DocumentationModel): void {
+    console.log('Datos actualizados:', data);
+    const currentData = this.sampleData();
+    const index = currentData.findIndex(item => item.id === data.id);
+    if (index !== -1) {
+      currentData[index] = data;
+      this.sampleData.set([...currentData]);
+    }
+  }
+
+  onDataDeleted(deletedRows: DocumentationModel[]): void {
+    console.log('Datos eliminados:', deletedRows);
+    const currentData = this.sampleData();
+    const idsToDelete = deletedRows.map(row => row.id);
+    this.sampleData.set(currentData.filter(item => !idsToDelete.includes(item.id)));
+```

package/llm/components/generic-timeline.md

@@ -0,0 +1,70 @@
+# core-generic-timeline
+
+- Class: `GenericTimelineComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-timeline/generic-timeline.component.ts`
+
+## Inputs
+- `items`: `TimelineItem[]`
+- `dateFormat`: `string`
+- `showDate`: `boolean`
+- `showStatus`: `boolean`
+- `enableActions`: `boolean`
+- `customClass`: `string`
+- `emptyMessage`: `string`
+- `sortAscending`: `boolean`
+- `filterStatuses`: `string[]`
+- `type`: `TimelineType`
+
+## Outputs
+- `itemClicked`: `TimelineItem`
+- `actionClicked`: `{ item: TimelineItem, action: string }`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/timeline/timeline.html`:3 — `<core-generic-timeline class="u-push-t--xl"`
+- `projects/core-ui-demo/src/app/admin/components/timeline/timeline.html`:6 — `</core-generic-timeline>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/timeline/timeline.html`:3-6
+
+```html
+      <core-generic-timeline class="u-push-t--xl" 
+            [items]="mockTimelineItems()"
+            [config]="timelineConfig()">
+      </core-generic-timeline>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/timeline/timeline.ts`
+
+Lines: 1-25
+
+```ts
+import { Component, computed } from '@angular/core';
+import { ComponentsGrid } from '../../../shared/components/components-grid/components-grid';
+import { ComponentsGridRow } from '../../../shared/components/components-grid-row/components-grid-row';
+import {
+  GenericButtonComponent,
+  GenericTimelineComponent,
+  TimelineConfig,
+  TimelineItem,
+} from '@solcre-org/core-ui';
+
+@Component({
+  selector: 'app-timeline',
+  imports: [
+    ComponentsGrid,
+    ComponentsGridRow,
+    GenericTimelineComponent,
+  ],
+  templateUrl: './timeline.html',
+})
+export class Timeline {
+  mockTimelineItems = computed<TimelineItem[]>(() => [
+    {
+      id: 1,
+      text: 'Matías Fuster creó la solicitud',
+      date: new Date('2024-04-30T10:54:00'),
+```

package/llm/components/header.md

@@ -0,0 +1,39 @@
+# core-header
+
+- Class: `HeaderComponent`
+- File: `projects/core-ui-library/src/lib/components/header/header.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- `filterRequested`: `void`
+- `createRequested`: `void`
+- `globalActionTriggered`: `GlobalAction<any>`
+
+## Usage notes
+- Reads header configuration from `HeaderService` (title, buttons, actions).
+- Emits filter/create/global actions; `core-layout` listens and dispatches window events.
+- Theme toggle is local to the header (adds/removes `dark-mode` on `body`).
+
+## Example
+```html
+<core-header
+  (filterRequested)="openFilters()"
+  (createRequested)="openCreateModal()"
+  (globalActionTriggered)="handleGlobalAction($event)"
+></core-header>
+```
+
+## Demo usage
+
+- No demo usage found in `core-ui-demo`.
+
+## Demo snippet (HTML)
+
+- No demo snippet found in `core-ui-demo`.
+
+## Demo snippet (TS)
+
+- No demo snippet found in `core-ui-demo`.
+

package/llm/components/image-modal.md

@@ -0,0 +1,23 @@
+# core-image-modal
+
+- Class: `ImageModalComponent`
+- File: `projects/core-ui-library/src/lib/components/image-modal/image-modal.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- `modalClosed`: `void`
+
+## Demo usage
+
+- No demo usage found in `core-ui-demo`.
+
+## Demo snippet (HTML)
+
+- No demo snippet found in `core-ui-demo`.
+
+## Demo snippet (TS)
+
+- No demo snippet found in `core-ui-demo`.
+

package/llm/components/image-preview.md

@@ -0,0 +1,79 @@
+# core-image-preview
+
+- Class: `ImagePreviewComponent`
+- File: `projects/core-ui-library/src/lib/components/image-preview/image-preview.component.ts`
+
+## Inputs
+- `src`: `string` (required)
+- `alt`: `string`
+- `title`: `string`
+- `width`: `string`
+- `height`: `string`
+- `objectFit`: `'cover' | 'contain' | 'fill' | 'scale-down' | 'none'`
+- `borderRadius`: `string`
+- `cursor`: `string`
+- `loading`: `'lazy' | 'eager'`
+- `isRelative`: `boolean`
+- `showSkeleton`: `boolean`
+- `skeletonAnimation`: `SkeletonAnimation`
+
+## Outputs
+- none
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:7 — `<core-image-preview`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:11 — `</core-image-preview>`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:27 — `<core-image-preview`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:32 — `</core-image-preview>`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:39 — `<core-image-preview`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:44 — `</core-image-preview>`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:51 — `<core-image-preview`
+- `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:56 — `</core-image-preview>`
+- …and 10 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.html`:7-11
+
+```html
+                        <core-image-preview
+                            [src]="image.src"
+                            [alt]="image.alt"
+                            [title]="image.title">
+                        </core-image-preview>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/image-preview/image-preview.ts`
+
+Lines: 78-102
+
+```ts
+      alt: '${imageData.alt}',
+      title: '${imageData.title}',
+      description: '${imageData.description || ''}'
+    });
+  }
+}`;
+
+    const templateCode = `<!-- Uso básico -->
+<core-image-preview
+  [src]="imageData.src"
+  [alt]="imageData.alt"
+  [title]="imageData.title"
+  width="300px"
+  height="200px">
+</core-image-preview>
+
+<!-- Con estilos personalizados -->
+<core-image-preview
+  [src]="imageData.src"
+  [alt]="imageData.alt"
+  [objectFit]="'cover'"
+  [borderRadius]="'8px'"
+  width="100%"
+  height="250px">
+</core-image-preview>
+```

package/llm/components/index.md

@@ -0,0 +1,66 @@
+# Components (generated)
+
+Auto-generated from @Component files.
+
+- `core-active-filters` -> `projects/core-ui-library/src/llm/components/active-filters.md`
+- `core-ad-login-button` -> `projects/core-ui-library/src/llm/components/ad-login-button.md`
+- `core-alert-container` -> `projects/core-ui-library/src/llm/components/alert-container.md`
+- `core-alert` -> `projects/core-ui-library/src/llm/components/alert.md`
+- `core-base-field` -> `projects/core-ui-library/src/llm/components/base-field.md`
+- `core-card` -> `projects/core-ui-library/src/llm/components/card.md`
+- `core-carousel` -> `projects/core-ui-library/src/llm/components/carousel.md`
+- `core-checkbox-field` -> `projects/core-ui-library/src/llm/components/checkbox-field.md`
+- `core-color-picker-field` -> `projects/core-ui-library/src/llm/components/color-picker-field.md`
+- `core-confirmation-dialog` -> `projects/core-ui-library/src/llm/components/confirmation-dialog.md`
+- `core-data-list-item` -> `projects/core-ui-library/src/llm/components/data-list-item.md`
+- `core-data-list` -> `projects/core-ui-library/src/llm/components/data-list.md`
+- `core-date-field` -> `projects/core-ui-library/src/llm/components/date-field.md`
+- `core-daterange-field` -> `projects/core-ui-library/src/llm/components/daterange-field.md`
+- `core-datetime-field` -> `projects/core-ui-library/src/llm/components/datetime-field.md`
+- `core-document-field` -> `projects/core-ui-library/src/llm/components/document-field.md`
+- `core-dropdown` -> `projects/core-ui-library/src/llm/components/dropdown.md`
+- `core-field-errors` -> `projects/core-ui-library/src/llm/components/field-errors.md`
+- `core-file-field` -> `projects/core-ui-library/src/llm/components/file-field.md`
+- `core-file-preview` -> `projects/core-ui-library/src/llm/components/file-preview.md`
+- `core-filter-modal` -> `projects/core-ui-library/src/llm/components/filter-modal.md`
+- `core-fixed-actions-mobile-modal` -> `projects/core-ui-library/src/llm/components/fixed-actions-mobile-modal.md`
+- `core-gallery-modal` -> `projects/core-ui-library/src/llm/components/gallery-modal.md`
+- `core-generic-button` -> `projects/core-ui-library/src/llm/components/generic-button.md`
+- `core-generic-calendar` -> `projects/core-ui-library/src/llm/components/generic-calendar.md`
+- `core-generic-chat` -> `projects/core-ui-library/src/llm/components/generic-chat.md`
+- `core-generic-documentation` -> `projects/core-ui-library/src/llm/components/generic-documentation.md`
+- `core-generic-fixed-actions` -> `projects/core-ui-library/src/llm/components/generic-fixed-actions.md`
+- `core-generic-gallery` -> `projects/core-ui-library/src/llm/components/generic-gallery.md`
+- `core-generic-modal` -> `projects/core-ui-library/src/llm/components/generic-modal.md`
+- `core-generic-pagination` -> `projects/core-ui-library/src/llm/components/generic-pagination.md`
+- `core-generic-rating` -> `projects/core-ui-library/src/llm/components/generic-rating.md`
+- `core-generic-scheduler` -> `projects/core-ui-library/src/llm/components/generic-scheduler.md`
+- `core-generic-sidebar` -> `projects/core-ui-library/src/llm/components/generic-sidebar.md`
+- `core-generic-skeleton` -> `projects/core-ui-library/src/llm/components/generic-skeleton.md`
+- `core-generic-steps` -> `projects/core-ui-library/src/llm/components/generic-steps.md`
+- `core-generic-switch` -> `projects/core-ui-library/src/llm/components/generic-switch.md`
+- `core-generic-table` -> `projects/core-ui-library/src/llm/components/generic-table.md`
+- `core-generic-timeline` -> `projects/core-ui-library/src/llm/components/generic-timeline.md`
+- `core-header` -> `projects/core-ui-library/src/llm/components/header.md`
+- `core-image-modal` -> `projects/core-ui-library/src/llm/components/image-modal.md`
+- `core-image-preview` -> `projects/core-ui-library/src/llm/components/image-preview.md`
+- `core-layout-auth` -> `projects/core-ui-library/src/llm/components/layout-auth.md`
+- `core-layout` -> `projects/core-ui-library/src/llm/components/layout.md`
+- `core-loader` -> `projects/core-ui-library/src/llm/components/loader.md`
+- `core-main-nav` -> `projects/core-ui-library/src/llm/components/main-nav.md`
+- `core-manual-refresh` -> `projects/core-ui-library/src/llm/components/manual-refresh.md`
+- `core-mobile-header` -> `projects/core-ui-library/src/llm/components/mobile-header.md`
+- `core-multi-entry-field` -> `projects/core-ui-library/src/llm/components/multi-entry-field.md`
+- `nav[core-generic-tabs]` -> `projects/core-ui-library/src/llm/components/nav[core-generic-tabs].md`
+- `core-number-field` -> `projects/core-ui-library/src/llm/components/number-field.md`
+- `core-password-field` -> `projects/core-ui-library/src/llm/components/password-field.md`
+- `core-phone-field` -> `projects/core-ui-library/src/llm/components/phone-field.md`
+- `core-progress-bar` -> `projects/core-ui-library/src/llm/components/progress-bar.md`
+- `core-select-field` -> `projects/core-ui-library/src/llm/components/select-field.md`
+- `core-server-select-field` -> `projects/core-ui-library/src/llm/components/server-select-field.md`
+- `core-sidebar-custom-modal` -> `projects/core-ui-library/src/llm/components/sidebar-custom-modal.md`
+- `core-smart-field` -> `projects/core-ui-library/src/llm/components/smart-field.md`
+- `core-switch-field` -> `projects/core-ui-library/src/llm/components/switch-field.md`
+- `core-text-area-field` -> `projects/core-ui-library/src/llm/components/text-area-field.md`
+- `core-text-field` -> `projects/core-ui-library/src/llm/components/text-field.md`
+- `core-time-field` -> `projects/core-ui-library/src/llm/components/time-field.md`

package/llm/components/layout-auth.md

@@ -0,0 +1,82 @@
+# core-layout-auth
+
+- Class: `LayoutAuth`
+- File: `projects/core-ui-library/src/lib/components/layout-auth/layout-auth.ts`
+
+## Inputs
+- `config`: `LayoutAuthConfig` (required)
+
+## Outputs
+- none
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/auth/auth.html`:1 — `<core-layout-auth [config]="{}">`
+- `projects/core-ui-demo/src/app/auth/auth.html`:26 — `</core-layout-auth>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/auth/auth.html`:1-26
+
+```html
+<core-layout-auth [config]="{}">
+  @for (field of authFields; track field.key) {
+  <ng-container
+    coreDynamicField
+    [mode]="ModalMode.EDIT"
+    [field]="field"
+    [value]="model[field.key]"
+    (valueChange)="onFieldValueChange(field.key.toString(), $event)"
+  />
+  }
+
+  <button
+    type="submit"
+    class="c-login__submit c-btn"
+    [class.is-loading]="loading()"
+    (click)="onFormSubmit()"
+  >
+    {{ 'login.btnLogin' | translate }}
+  </button>
+
+  <div class="auth-divider">
+    <span>o continúa con</span>
+  </div>
+
+  <core-ad-login-button (authEvent)="handleAdAuthEvent($event)" />
+</core-layout-auth>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/auth/auth.ts`
+
+Lines: 54-78
+
+```ts
+      prefixIcon: 'icon-locked',
+      validators: [Validators.required],
+      readonly: false
+    }
+  ];
+  model: AuthLogin = {}
+
+  ngOnInit(): void {
+    this.renderer.addClass(this.document.documentElement, 's-auth-page');
+  }
+
+  ngOnDestroy(): void {
+    this.renderer.removeClass(this.document.documentElement, 's-auth-page');
+  }
+
+  onFieldValueChange(fieldKey: string, value: string): void {
+    this.model[fieldKey] = value;
+  }
+
+  onFormSubmit(): void {
+    if (this.model.username && this.model.password) {
+      let username = this.model.username;
+      let password = this.model.password;
+
+      this.loading.set(true);
+```