@solcre-org/core-ui 2.19.2 → 2.20.1

package/llm/components/generic-gallery.md

@@ -0,0 +1,75 @@
+# core-generic-gallery
+
+- Class: `GenericGalleryComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-gallery/generic-gallery.component.ts`
+
+## Inputs
+- `images`: `GalleryImage[]` (required)
+- `config`: `GalleryConfig`
+
+## Outputs
+- `imageClick`: `{ image: GalleryImage; index: number }`
+- `modalOpen`: `{ images: GalleryImage[]; index: number }`
+- `modalClose`: `void`
+- `imageChange`: `{ image: GalleryImage; index: number }`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery-test.component.ts`:20 — `<core-generic-gallery`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery-test.component.ts`:32 — `</core-generic-gallery>`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:12 — `<core-generic-gallery`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:19 — `</core-generic-gallery>`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:31 — `<core-generic-gallery`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:35 — `</core-generic-gallery>`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:47 — `<core-generic-gallery`
+- `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:51 — `</core-generic-gallery>`
+- …and 6 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/gallery/gallery.html`:12-19
+
+```html
+      <core-generic-gallery
+        [images]="sampleImages()"
+        [config]="basicConfig"
+        (imageClick)="onImageClick($event)"
+        (modalOpen)="onModalOpen($event)"
+        (modalClose)="onModalClose()"
+        (imageChange)="onImageChange($event)">
+      </core-generic-gallery>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/gallery/gallery.ts`
+
+Lines: 158-182
+
+```ts
+
+  onModalOpen(event: { images: GalleryImage[]; index: number }): void {
+    this.galleryModalService.openModal(event.images, event.index);
+  }
+
+  onModalClose(): void {
+    console.log('Modal closed');
+  }
+
+  onImageChange(event: { image: GalleryImage; index: number }): void {
+  }
+
+  // Dynamic configuration methods
+  updateLayoutType(type: GalleryLayoutType): void {
+    this.basicConfig = { ...this.basicConfig, layoutType: type };
+  }
+
+  updateAnimationType(type: GalleryAnimationType): void {
+    this.basicConfig = { ...this.basicConfig, animationType: type };
+  }
+
+  toggleFeature(feature: keyof GalleryConfig): void {
+    this.basicConfig = { 
+      ...this.basicConfig, 
+      [feature]: !this.basicConfig[feature]
+```

package/llm/components/generic-modal.md

@@ -0,0 +1,95 @@
+# core-generic-modal
+
+- Class: `GenericModalComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-modal/generic-modal.component.ts`
+
+## Inputs
+- `isOpen`: `boolean` (required)
+- `mode`: `ModalMode` (required)
+- `data`: `T | null`
+- `title`: `string` (required)
+- `isMultiple`: `boolean`
+- `errors`: `string[]`
+- `customHasChanges`: `boolean`
+- `stepValidationEnabled`: `boolean`
+- `allowFreeNavigation`: `boolean`
+- `autoMarkCompleted`: `boolean`
+
+## Outputs
+- `save`: `T`
+- `close`: `void`
+- `modalData`: `T`
+
+## Usage notes
+- Designed for create/edit flows with `ModalMode` and `ModalFieldConfig`/`ModalTabConfig` inputs.
+- Use with `generic-table` or standalone forms.
+
+## Example
+```html
+<core-generic-modal
+  [isOpen]="isOpen"
+  [mode]="mode"
+  [title]="title"
+  [data]="formData"
+  (save)="save($event)"
+  (close)="close()"
+></core-generic-modal>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:5 — `<core-generic-modal`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:9 — `(close)="closeBasicModal()"></core-generic-modal>`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:17 — `<core-generic-modal`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:24 — `(close)="closeBasicModalWithFields()"></core-generic-modal>`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:32 — `<core-generic-modal`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:39 — `(close)="closeBasicModalWithModeSelector()"></core-generic-modal>`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:51 — `<core-generic-modal`
+- `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:56 — `(close)="closeMediumModalWithCustomTemplate()"></core-generic-modal>`
+- …and 38 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/modals/modals.html`:5-9
+
+```html
+    <core-generic-modal
+      [isOpen]="isOpenBasicModal()"
+      [title]="'Modal básico'"
+      [mode]="ModalMode.VIEW"
+      (close)="closeBasicModal()"></core-generic-modal>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/modals/modals.ts`
+
+Lines: 976-1000
+
+```ts
+  [data]="factory({ name: 'John Doe' })"
+  (close)="close()">
+</core-generic-modal>
+      `
+    },
+    {
+      title: 'Modal con selector de modo',
+      key: 'mode-selector',
+      extraImports: ['ModalFieldConfig', 'FieldType'],
+      componentCode: `
+export class MyComponent {
+  isOpen = signal(false);
+  modalMode = signal<ModalMode>(ModalMode.CREATE);
+  ModalMode = ModalMode;
+
+  fields = computed<ModalFieldConfig<any>[]>(() => [
+    {
+      key: 'mode',
+      label: 'Mode',
+      type: FieldType.SELECT,
+      options: [
+        { value: ModalMode.VIEW, label: 'View' },
+        { value: ModalMode.EDIT, label: 'Edit' },
+        { value: ModalMode.CREATE, label: 'Create' },
+        { value: ModalMode.FILTER, label: 'Filter' }
+```

package/llm/components/generic-pagination.md

@@ -0,0 +1,29 @@
+# core-generic-pagination
+
+- Class: `GenericPaginationComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-pagination/generic-pagination.component.ts`
+
+## Inputs
+- `tableId`: `string`
+- `isServerSide`: `boolean`
+- `showPagination`: `boolean`
+- `showPageSizeSelector`: `boolean`
+
+## Outputs
+- none
+
+## Usage notes
+- Typically used inside `core-generic-table` with `PaginationService`.
+
+## 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/generic-rating.md

@@ -0,0 +1,26 @@
+# core-generic-rating
+
+- Class: `GenericRatingComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-rating/generic-rating.component.ts`
+
+## Inputs
+- `config`: `RatingConfig` (required)
+
+## Outputs
+- `ratingChange`: `RatingSubmitEvent`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/rating/rating.html`:3 — `<core-generic-rating`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/rating/rating.html`:3-3
+
+```html
+      <core-generic-rating
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/rating/rating.ts` (no matching bindings found)

package/llm/components/generic-scheduler.md

@@ -0,0 +1,92 @@
+# core-generic-scheduler
+
+- Class: `GenericSchedulerComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-scheduler/generic-scheduler.component.ts`
+
+## Inputs
+- `selectedDate`: `Date`
+- `columns`: `SchedulerColumn[]`
+- `events`: `CalendarEvent[]`
+- `showTimeColumn`: `boolean`
+- `showHeader`: `boolean`
+- `timeColumnLabel`: `string`
+- `emptySlotLabel`: `string`
+- `disabledSlotLabel`: `string`
+- `todayLabel`: `string`
+- `locale`: `string`
+- `weekLabel`: `string`
+- `dayLabel`: `string`
+- `monthLabel`: `string`
+- `disabledDates`: `string[]`
+
+## Outputs
+- `slotClick`: `SlotClickEvent`
+- `eventClick`: `EventClickEvent`
+- `eventHover`: `EventHoverEvent`
+- `eventLeave`: `void`
+- `todayClick`: `void`
+- `previousDay`: `Date`
+- `nextDay`: `Date`
+- `previousWeek`: `Date`
+- `nextWeek`: `Date`
+- `previousMonth`: `Date`
+- `nextMonth`: `Date`
+- `viewModeChange`: `SchedulerViewMode`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/calendar/calendar-demo.component.html`:106 — `<core-generic-scheduler`
+- `projects/core-ui-demo/src/app/admin/components/calendar/calendar-demo.component.html`:115 — `></core-generic-scheduler>`
+- `projects/core-ui-demo/src/app/admin/components/calendar/calendar-demo.component.html`:145 — `<core-generic-scheduler`
+- `projects/core-ui-demo/src/app/admin/components/calendar/calendar-demo.component.html`:162 — `</core-generic-scheduler>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/calendar/calendar-demo.component.html`:106-115
+
+```html
+        <core-generic-scheduler
+          [selectedDate]="selectedDate()"
+          [events]="monthlyLicenseEvents()"
+          [config]="monthlySchedulerConfig"
+          [showHeader]="false"
+          [showTimeColumn]="false"
+          [disabledDates]="holidayDates"
+          (eventClick)="onEventClick($event)"
+          (slotClick)="onSlotClick($event)"
+        ></core-generic-scheduler>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/calendar/calendar-demo.component.ts`
+
+Lines: 374-398
+
+```ts
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate()
+    ));
+    this.selectedDate.set(todayUTC);
+  }
+
+  onPreviousDay(date: Date): void {
+    this.selectedDate.set(date);
+  }
+
+  onNextDay(date: Date): void {
+    this.selectedDate.set(date);
+  }
+
+  onPreviousMonth(): void {
+    const current = this.selectedDate();
+    const newDate = new Date(current.getFullYear(), current.getMonth() - 1, 1);
+    this.selectedDate.set(newDate);
+  }
+
+  onNextMonth(): void {
+    const current = this.selectedDate();
+    const newDate = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+    this.selectedDate.set(newDate);
+```

package/llm/components/generic-sidebar.md

@@ -0,0 +1,80 @@
+# core-generic-sidebar
+
+- Class: `GenericSidebarComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-sidebar/generic-sidebar.component.ts`
+
+## Inputs
+- `config`: `SidebarComponentConfig | null`
+- `position`: `SidebarPosition`
+
+## Outputs
+- `itemClicked`: `SidebarItem`
+- `subItemClicked`: `SidebarSubItem`
+
+## Usage notes
+- Sidebar content and behavior is driven by `SidebarComponentConfig`.
+- Use `SidebarTemplateRegistryService` for custom templates.
+
+## Example
+```html
+<core-generic-sidebar
+  [config]="leftSidebarConfig"
+  [position]="SidebarPosition.LEFT"
+  (itemClicked)="onSidebarItem($event)"
+></core-generic-sidebar>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/sidebar/sidebar.html`:27 — `<core-generic-sidebar`
+- `projects/core-ui-demo/src/app/admin/components/sidebar/sidebar.html`:33 — `</core-generic-sidebar>`
+- `projects/core-ui-demo/src/app/admin/components/sidebar/sidebar.ts`:609 — `let template = '<core-generic-sidebar\n  [config]="sidebarConfig"';`
+- `projects/core-ui-demo/src/app/admin/components/sidebar/sidebar.ts`:619 — `template += '\n  (itemClicked)="onItemClick($event)"\n  (subItemClicked)="onSubItemClick($event)">\n</core-generic-sidebar>';`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/sidebar/sidebar.html`:27-33
+
+```html
+            <core-generic-sidebar
+              [config]="useCase.config"
+              [position]="useCase.position || SidebarPosition.LEFT"
+              [customTemplate]="useCase.customTemplate || null"
+              (itemClicked)="onItemClick($event)"
+              (subItemClicked)="onSubItemClick($event)">
+            </core-generic-sidebar>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/sidebar/sidebar.ts`
+
+Lines: 595-619
+
+```ts
+      result = `// Nota: Para usar template personalizado, asignar después del ViewChild
+  @ViewChild('customSidebarTemplate', { static: true }) customTemplate!: TemplateRef<any>;
+  
+  ${result}
+  
+  ngAfterViewInit(): void {
+    this.sidebarConfig.customTemplate = this.customTemplate;
+  }`;
+    }
+
+    return result;
+  }
+
+  private generateTemplateCode(useCase: SidebarUseCaseDoc): string {
+    let template = '<core-generic-sidebar\n  [config]="sidebarConfig"';
+    
+    if (useCase.position) {
+      template += `\n  [position]="SidebarPosition.${useCase.position}"`;
+    }
+
+    if (useCase.customTemplate) {
+      template += '\n  [customTemplate]="customTemplate"';
+    }
+
+    template += '\n  (itemClicked)="onItemClick($event)"\n  (subItemClicked)="onSubItemClick($event)">\n</core-generic-sidebar>';
+```

package/llm/components/generic-skeleton.md

@@ -0,0 +1,80 @@
+# core-generic-skeleton
+
+- Class: `GenericSkeletonComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-skeleton/generic-skeleton.component.ts`
+
+## Inputs
+- `config`: `SkeletonConfig`
+- `items`: `SkeletonItemConfig[]`
+- `type`: `SkeletonType`
+- `size`: `SkeletonSize`
+- `width`: `string`
+- `height`: `string`
+- `animated`: `boolean`
+- `animation`: `SkeletonAnimation`
+- `lines`: `number`
+- `customClass`: `string`
+- `ariaLabel`: `string`
+
+## Outputs
+- none
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:5 — `<core-generic-skeleton`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:11 — `</core-generic-skeleton>`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:19 — `<core-generic-skeleton`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:24 — `</core-generic-skeleton>`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:32 — `<core-generic-skeleton`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:38 — `</core-generic-skeleton>`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:46 — `<core-generic-skeleton`
+- `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:49 — `</core-generic-skeleton>`
+- …and 8 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.html`:5-11
+
+```html
+                <core-generic-skeleton 
+                    [type]="config.type"
+                    [width]="config.width ?? undefined"
+                    [height]="config.height ?? undefined"
+                    [lines]="config.lines ?? 1"
+                    [ariaLabel]="config.ariaLabel ?? 'Loading content'">
+                </core-generic-skeleton>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/skeleton/skeleton.ts`
+
+Lines: 102-126
+
+```ts
+
+  // Presets del servicio
+  presetConfigs = signal<{ name: string; config: SkeletonConfig }[]>([]);
+
+  constructor(
+    private dialogService: ConfirmationDialogService,
+    private skeletonService: SkeletonService
+  ) {
+    // Inicializar presets
+    this.initializePresets();
+  }
+
+  private initializePresets(): void {
+    const presets = [
+      { name: 'Formulario', config: this.skeletonService.getPresetConfig('form') },
+      { name: 'Tarjeta de Usuario', config: this.skeletonService.getPresetConfig('userCard') },
+      { name: 'Lista de Artículos', config: this.skeletonService.getPresetConfig('articleList') },
+      { name: 'Galería de Imágenes', config: this.skeletonService.getPresetConfig('imageGallery') },
+    ];
+    
+    this.presetConfigs.set(presets);
+  }
+
+  showImplementationCode(config: SkeletonItemConfig | SkeletonConfig, isPreset: boolean = false): void {
+    const implementation = this.generateImplementationCode(config, isPreset);
+```

package/llm/components/generic-steps.md

@@ -0,0 +1,99 @@
+# core-generic-steps
+
+- Class: `GenericStepsComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-steps/generic-steps.component.ts`
+
+## Inputs
+- `config`: `StepsConfig` (required)
+- `useService`: `boolean`
+- `instanceId`: `string`
+
+## Outputs
+- `stepClick`: `StepClickEvent`
+- `stepChange`: `{ step: StepItemConfig; index: number }`
+- `serviceStepChange`: `StepChangeEvent`
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:4 — `<core-generic-steps [config]="basicConfig()" (stepChange)="onBasicStepChange($event)">`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:35 — `</core-generic-steps>`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:41 — `<core-generic-steps [config]="iconConfig()" (stepChange)="onIconStepChange($event)">`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:84 — `</core-generic-steps>`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:90 — `<core-generic-steps [config]="verticalConfig()" (stepChange)="onVerticalStepChange($event)">`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:134 — `</core-generic-steps>`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:140 — `<core-generic-steps [config]="smallConfig()" (stepChange)="onSmallStepChange($event)">`
+- `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:153 — `</core-generic-steps>`
+- …and 14 more matches
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/steps/steps.html`:4-35
+
+```html
+            <core-generic-steps [config]="basicConfig()" (stepChange)="onBasicStepChange($event)">
+                <!-- Content for Step 1 -->
+                <div *ngIf="basicActiveStep()?.id === 'step1'">
+                    <h3>Step 1: Basic Information</h3>
+                    <p>This is the content for the first step. Here you can add forms, information, or any content needed for this step.</p>
+                    <div class="step-content-example">
+                        <label>Name: <input type="text" placeholder="Enter your name"></label>
+                        <label>Email: <input type="email" placeholder="Enter your email"></label>
+                    </div>
+                </div>
+                
+                <!-- Content for Step 2 -->
+                <div *ngIf="basicActiveStep()?.id === 'step2'">
+                    <h3>Step 2: Configuration</h3>
+                    <p>This is the content for the second step. You can configure settings or preferences here.</p>
+                    <div class="step-content-example">
+                        <label><input type="checkbox"> Enable notifications</label>
+                        <label><input type="checkbox"> Enable dark mode</label>
+                        <label><input type="checkbox"> Enable auto-save</label>
+                    </div>
+                </div>
+                
+                <!-- Content for Step 3 -->
+                <div *ngIf="basicActiveStep()?.id === 'step3'">
+                    <h3>Step 3: Finish</h3>
+                    <p>This is the content for the final step. You can show a summary or completion message.</p>
+                    <div class="step-content-example">
+                        <p>✅ All steps completed successfully!</p>
+                        <button class="btn btn--primary">Complete Setup</button>
+                    </div>
+                </div>
+            </core-generic-steps>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/steps/steps.ts`
+
+Lines: 35-59
+
+```ts
+    templateCode: string;
+    fullCode: string;
+  }>({
+    importStatement: '',
+    componentCode: '',
+    templateCode: '',
+    fullCode: ''
+  });
+
+  // Track active step for content projection
+  activeStep = signal<StepItemConfig | null>(null);
+  
+  // Separate active steps for each configuration
+  basicActiveStep = signal<StepItemConfig | null>(null);
+  iconActiveStep = signal<StepItemConfig | null>(null);
+  verticalActiveStep = signal<StepItemConfig | null>(null);
+  smallActiveStep = signal<StepItemConfig | null>(null);
+  largeActiveStep = signal<StepItemConfig | null>(null);
+  customColorsActiveStep = signal<StepItemConfig | null>(null);
+  disabledActiveStep = signal<StepItemConfig | null>(null);
+  textActiveStep = signal<StepItemConfig | null>(null);
+  translatedActiveStep = signal<StepItemConfig | null>(null);
+
+  // Basic horizontal steps
+  basicConfig: Signal<StepsConfig> = signal({
+```