@solcre-org/core-ui 2.19.2 → 2.20.0

package/llm/README.md

@@ -0,0 +1,34 @@
+# Core UI Library — LLM Docs
+
+These docs are published with the npm package under `llm/`.
+
+## How to use (agents)
+1) Start with `llms.txt` (entry point).
+2) Use `screen-blueprints.md` for full page templates.
+3) Use `form-recipes.md` for ModalFieldConfig patterns.
+4) For each component, see `components/<component>.md` for API + demo snippets.
+
+## Prompt bundle script
+From the repo root you can generate a single prompt bundle for any external agent:
+
+```bash
+npm run llm:prompt -- --task "Build a users CRUD screen" --out /tmp/llm_prompt.md
+```
+
+To include only specific components:
+
+```bash
+npm run llm:prompt -- --components core-layout,core-generic-table,core-generic-modal
+```
+
+## Update LLM docs from demo
+Regenerate demo mappings and refresh component demo snippets:
+
+```bash
+npm run llm:update
+```
+
+## Key paths
+- Entry: `llms.txt`
+- Component catalog: `components.md`
+- Demo map: `demo-examples.md`

package/llm/components/active-filters.md

@@ -0,0 +1,25 @@
+# core-active-filters
+
+- Class: `ActiveFiltersComponent`
+- File: `projects/core-ui-library/src/lib/components/active-filters/active-filters.component.ts`
+
+## Inputs
+- `activeFilters`: `ActiveFilterItem[]`
+- `config`: `ActiveFiltersConfig`
+
+## Outputs
+- `onFilterRemove`: `ActiveFilterItem`
+- `onClearAll`: `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/ad-login-button.md

@@ -0,0 +1,57 @@
+# core-ad-login-button
+
+- Class: `AdLoginButtonComponent`
+- File: `projects/core-ui-library/src/lib/components/auth/ad-auth/components/ad-login-button/ad-login-button.component.ts`
+
+## Inputs
+- `config`: `AdLoginButtonConfig`
+- `disabled`: `boolean`
+
+## Outputs
+- `authEvent`: `AdAuthEvent`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/auth/auth.html`:25 — `<core-ad-login-button (authEvent)="handleAdAuthEvent($event)" />`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/auth/auth.html`:25-25
+
+```html
+  <core-ad-login-button (authEvent)="handleAdAuthEvent($event)" />
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/auth/auth.ts`
+
+Lines: 96-120
+
+```ts
+                duration: 5000,
+                inBottom: true,
+              });
+            }
+            this.loading.set(false);
+          }
+        },
+        error: (error: HttpErrorResponse) => {
+          const errorMessage: string = `errors.${
+            error.status === 401 ? 'invalidCredentials' : 'genericLogin'
+          }`;
+
+          this.alertService.show({
+            type: AlertType.ERROR,
+            message: errorMessage,
+            duration: 5000,
+            inBottom: true,
+          });
+          this.loading.set(false);
+        },
+      });
+    }
+  }
+
+  handleAdAuthEvent(event: AdAuthEvent): void {
+```

package/llm/components/alert-container.md

@@ -0,0 +1,26 @@
+# core-alert-container
+
+- Class: `AlertContainerComponent`
+- File: `projects/core-ui-library/src/lib/components/alert/alert-container.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- none
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/app.html`:3 — `<core-alert-container></core-alert-container>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/app.html`:3-3
+
+```html
+<core-alert-container></core-alert-container>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/app.ts` (no matching bindings found)

package/llm/components/alert.md

@@ -0,0 +1,46 @@
+# core-alert
+
+- Class: `AlertComponent`
+- File: `projects/core-ui-library/src/lib/components/alert/alert.component.ts`
+
+## Inputs
+- `alert`: `Alert` (required)
+
+## Outputs
+- none
+
+## Usage notes
+- Rendered by `core-alert-container`; you usually do not place `core-alert` directly.
+- Use `AlertService.show(...)` to display alerts.
+
+## Example
+```ts
+// Demo-derived pattern
+this.alertService.show({
+  type: AlertType.SUCCESS,
+  message: 'Operation successful',
+  duration: 3000,
+  inBottom: true
+});
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/alerts/alerts.ts`:30 — `this.alertService.show(config);`
+- `projects/core-ui-demo/src/app/admin/components/alerts/alerts.ts`:43 — `this.alertService.show({`
+- `projects/core-ui-demo/src/app/admin/components/alerts/alerts.ts`:66 — `this.alertService.show({`
+- `projects/core-ui-demo/src/app/admin/components/alerts/alerts.ts`:90 — `this.alertService.show({`
+- `projects/core-ui-demo/src/app/admin/components/icons/icons.ts`:93 — `this.alertService.show({`
+- `projects/core-ui-demo/src/app/admin/panel-example/panel-example.ts`:588 — `this.alertService.show({`
+- `projects/core-ui-demo/src/app/admin/panel-example/panel-example.ts`:603 — `this.alertService.show({`
+- `projects/core-ui-demo/src/app/admin/panel-example/panel-example.ts`:618 — `this.alertService.show({`
+- …and 9 more matches
+
+## 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/base-field.md

@@ -0,0 +1,39 @@
+# core-base-field
+
+- Class: `UnknownClass`
+- File: `projects/core-ui-library/src/lib/components/fields/types/base/base-field.component.ts`
+
+## Inputs
+- `field`: `ModalFieldConfig<T>` (required)
+- `value`: `any` (required)
+- `mode`: `ModalMode` (required)
+- `errors`: `string[]`
+- `rowData`: `T | null`
+- `formValue`: `any`
+
+## Outputs
+- `valueChange`: `any`
+- `onBlurEvent`: `keyof T`
+- `onEnterEvent`: `keyof T`
+
+## Usage notes
+- Abstract base for all field components; not used directly in templates.
+- `field` defines label, key, validators, and per-mode config.
+
+## Example
+```ts
+// Use BaseField inputs when wiring any concrete field component.
+```
+
+## 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/card.md

@@ -0,0 +1,23 @@
+# core-card
+
+- Class: `CardComponent`
+- File: `projects/core-ui-library/src/lib/components/card/card.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- none
+
+## 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/carousel.md

@@ -0,0 +1,68 @@
+# core-carousel
+
+- Class: `CarouselComponent`
+- File: `projects/core-ui-library/src/lib/components/carousel/carousel.component.ts`
+
+## Inputs
+- `images`: `CarouselImage[]`
+- `config`: `CarouselConfig`
+
+## Outputs
+- none
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:5 — `<core-carousel`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:8 — `</core-carousel>`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:19 — `<core-carousel`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:22 — `</core-carousel>`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:33 — `<core-carousel`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:36 — `</core-carousel>`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:47 — `<core-carousel`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:50 — `</core-carousel>`
+- …and 8 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/carousel/carousel.html`:5-8
+
+```html
+                <core-carousel 
+                    [images]="basicCarouselImages()"
+                    [config]="basicConfig()">
+                </core-carousel>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/carousel/carousel.ts`
+
+Lines: 16-40
+
+```ts
+    ComponentsGridRow,
+    CommonModule
+  ],
+  styleUrls: ['./carousel.css'],
+  templateUrl: './carousel.html'
+})
+export class Carousel {
+  @ViewChild('codeTemplate', { read: TemplateRef }) codeTemplate!: TemplateRef<any>;
+  
+  constructor(private dialogService: ConfirmationDialogService) {}
+
+  currentImplementation = signal<{
+    importStatement: string;
+    componentCode: string;
+    templateCode: string;
+    fullCode: string;
+  }>({
+    importStatement: '',
+    componentCode: '',
+    templateCode: '',
+    fullCode: ''
+  });
+
+  // Imágenes de ejemplo para los carousels
+  basicCarouselImages: Signal<CarouselImage[]> = signal([
+```

package/llm/components/checkbox-field.md

@@ -0,0 +1,61 @@
+# core-checkbox-field
+
+- Class: `CheckboxFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/checkbox-field/checkbox-field.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- none
+
+## Usage notes
+
+- Inherits inputs/outputs from `core-base-field`: `field`, `value`, `mode`, `errors`, `rowData`, `formValue` and emits `valueChange`, `onBlurEvent`, `onEnterEvent`.
+- Provide `field` using the matching config interface from `projects/core-ui-library/src/lib/interfaces/field-configs` and `FieldType`.
+- Use `mode` (`ModalMode`) to control readonly/validators and view behavior.
+
+## Config sketch
+
+
+```ts
+const termsField: CheckboxModalFieldConfig<User> = {
+  key: 'terms',
+  label: 'Terms',
+  type: FieldType.CHECKBOX,
+  checkboxConfig: {
+    options: [
+      { value: true, label: 'I accept the terms' },
+    ],
+    allowMultiple: false,
+  },
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-checkbox-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-checkbox-field>
+```
+
+## 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/color-picker-field.md

@@ -0,0 +1,55 @@
+# core-color-picker-field
+
+- Class: `ColorPickerFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/color-picker-field/color-picker-field.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- none
+
+## Usage notes
+
+- Inherits inputs/outputs from `core-base-field`: `field`, `value`, `mode`, `errors`, `rowData`, `formValue` and emits `valueChange`, `onBlurEvent`, `onEnterEvent`.
+- Provide `field` using the matching config interface from `projects/core-ui-library/src/lib/interfaces/field-configs` and `FieldType`.
+- Use `mode` (`ModalMode`) to control readonly/validators and view behavior.
+
+## Config sketch
+
+
+```ts
+const colorField: ModalFieldConfig<User> = {
+  key: 'favoriteColor',
+  label: 'Favorite color',
+  type: FieldType.COLOR,
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-color-picker-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-color-picker-field>
+```
+
+## 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/confirmation-dialog.md

@@ -0,0 +1,46 @@
+# core-confirmation-dialog
+
+- Class: `ConfirmationDialogComponent`
+- File: `projects/core-ui-library/src/lib/components/confirmation-dialog/confirmation-dialog.component.ts`
+
+## Inputs
+- `isOpen`: `boolean` (required)
+- `config`: `ConfirmationDialogConfig` (required)
+
+## Outputs
+- `confirm`: `string | boolean | undefined`
+- `cancel`: `void`
+
+## Usage notes
+- Usually controlled through `ConfirmationDialogService` from layouts or tables.
+
+## Example
+```html
+<core-confirmation-dialog
+  [isOpen]="confirmOpen"
+  [config]="confirmConfig"
+  (confirm)="onConfirm($event)"
+  (cancel)="onCancel()"
+></core-confirmation-dialog>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/alerts/alerts.ts`:133 — `this.dialog.openConfirm({`
+- `projects/core-ui-demo/src/app/admin/components/button/button.ts`:151 — `this.dialogService.openConfirm({`
+- `projects/core-ui-demo/src/app/admin/components/carousel/carousel.ts`:228 — `this.dialogService.openConfirm({`
+- `projects/core-ui-demo/src/app/admin/components/dialog/dialog.ts`:53 — `this.confirmService.openConfirm(config).subscribe(confirmed => {`
+- `projects/core-ui-demo/src/app/admin/components/dialog/dialog.ts`:91 — `this.confirmService.openConfirm(config).subscribe(result => {`
+- `projects/core-ui-demo/src/app/admin/components/dialog/dialog.ts`:142 — `this.confirmService.openConfirm(config).subscribe(result => {`
+- `projects/core-ui-demo/src/app/admin/components/dialog/dialog.ts`:187 — `this.confirmService.openConfirm(config).subscribe(result => {`
+- `projects/core-ui-demo/src/app/admin/components/dialog/dialog.ts`:233 — `this.confirmService.openConfirm(dialog).subscribe(confirmed => {`
+- …and 11 more matches
+
+## 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/data-list-item.md

@@ -0,0 +1,35 @@
+# core-data-list-item
+
+- Class: `DataListItemComponent`
+- File: `projects/core-ui-library/src/lib/components/data-list-item/data-list-item.component.ts`
+
+## Inputs
+- `key`: `string` (required)
+- `label`: `string` (required)
+- `value`: `any`
+- `formattedValue`: `string`
+- `templateContext`: `any`
+- `itemCssClasses`: `string`
+- `keyCssClasses`: `string`
+- `valueCssClasses`: `string`
+- `customCssClasses`: `{
+    item?: string;
+    key?: string;
+    value?: string;
+  }`
+
+## Outputs
+- none
+
+## 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/data-list.md

@@ -0,0 +1,27 @@
+# core-data-list
+
+- Class: `DataListComponent`
+- File: `projects/core-ui-library/src/lib/components/data-list/data-list.component.ts`
+
+## Inputs
+- `items`: `DataListItem[]`
+- `data`: `T | null`
+- `showEmptyMessage`: `boolean`
+- `emptyMessage`: `string`
+- `cssClasses`: `string`
+
+## Outputs
+- none
+
+## 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/date-field.md

@@ -0,0 +1,56 @@
+# core-date-field
+
+- Class: `DateFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/date-field/date-field.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- none
+
+## Usage notes
+
+- Inherits inputs/outputs from `core-base-field`: `field`, `value`, `mode`, `errors`, `rowData`, `formValue` and emits `valueChange`, `onBlurEvent`, `onEnterEvent`.
+- Provide `field` using the matching config interface from `projects/core-ui-library/src/lib/interfaces/field-configs` and `FieldType`.
+- Use `mode` (`ModalMode`) to control readonly/validators and view behavior.
+
+## Config sketch
+
+
+```ts
+const startDateField: DateModalFieldConfig<User> = {
+  key: 'startDate',
+  label: 'Start date',
+  type: FieldType.DATE,
+  dateConfig: { showCalendarIcon: true },
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-date-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-date-field>
+```
+
+## 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/daterange-field.md

@@ -0,0 +1,59 @@
+# core-daterange-field
+
+- Class: `DateRangeFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/daterange-field/daterange-field.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- none
+
+## Usage notes
+
+- Inherits inputs/outputs from `core-base-field`: `field`, `value`, `mode`, `errors`, `rowData`, `formValue` and emits `valueChange`, `onBlurEvent`, `onEnterEvent`.
+- Provide `field` using the matching config interface from `projects/core-ui-library/src/lib/interfaces/field-configs` and `FieldType`.
+- Use `mode` (`ModalMode`) to control readonly/validators and view behavior.
+
+## Config sketch
+
+
+```ts
+const rangeField: DateRangeFieldConfig<User> = {
+  key: 'period',
+  label: 'Period',
+  type: FieldType.DATERANGE,
+  dateRangeConfig: {
+    allowPastDates: true,
+    allowFutureDates: true,
+  },
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-daterange-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-daterange-field>
+```
+
+## 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`.
+