@solcre-org/core-ui 2.19.2 → 2.20.0

package/llm/components/layout.md

@@ -0,0 +1,92 @@
+# core-layout
+
+- Class: `LayoutComponent`
+- File: `projects/core-ui-library/src/lib/components/layout/layout.ts`
+
+## Inputs
+- `navItems`: `NavItem[]`
+- `bottomNavItems`: `BottomNavItem[]`
+- `collapsedLogo`: `string`
+- `expandedLogo`: `string`
+- `logoImagesConfig`: `LogoImagesConfig | null`
+- `navConfig`: `NavConfig`
+- `mobileHeaderConfig`: `MobileHeaderConfig | null`
+
+## Outputs
+- `onLogout`: `void`
+- `onMobileRefresh`: `void`
+- `onMobileFilter`: `void`
+
+## Usage notes
+- Use as the main app shell; it renders header, navigation, sidebars, and common modals.
+- Left/right sidebars are controlled via `LayoutStateService` and `LayoutService`.
+- Mobile behavior uses `MobileResolutionService`; mobile header is toggled via `mobileHeaderConfig`.
+
+## Example
+```html
+<core-layout
+  [navItems]="navItems"
+  [navConfig]="navConfig"
+  [logoImagesConfig]="logoImagesConfig"
+  [mobileHeaderConfig]="mobileHeaderConfig"
+  (onLogout)="handleLogout()"
+  (onMobileRefresh)="reloadData()"
+>
+  <!-- page content goes here -->
+</core-layout>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/layout/dashboard/dashboard.component.html`:1 — `<core-layout`
+- `projects/core-ui-demo/src/app/layout/dashboard/dashboard.component.html`:9 — `</core-layout>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/layout/dashboard/dashboard.component.html`:1-9
+
+```html
+<core-layout
+  [navItems]="navItems"
+  [navConfig]="navConfig"
+  [logoImagesConfig]="logoConfig"
+  [mobileHeaderConfig]="mobileHeaderConfig"
+  (onLogout)="onLogout()"
+>
+  <router-outlet></router-outlet>
+</core-layout>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/layout/dashboard/dashboard.component.ts`
+
+Lines: 68-92
+
+```ts
+  ];
+
+  logoConfig: LogoImagesConfig = {
+    collapsedSettings: {
+      image: '/favicon.ico',
+      width: 40,
+      height: 40,
+      alt: 'Solcre'
+    },
+    expandedSettings: {
+      image: '/assets/images/logo.svg',
+      width: 103,
+      height: 40,
+      alt: 'WTC - Logo iso'
+    }
+  };
+
+  mobileHeaderConfig: MobileHeaderConfig = {
+    title: 'Core UI Demo',
+    refreshButtonLabel: 'Actualizar',
+    filterButtonLabel: 'Filtrar',
+    lightSubnav: true
+  };
+
+  navConfig: NavConfig = {
+```

package/llm/components/loader.md

@@ -0,0 +1,35 @@
+# core-loader
+
+- Class: `LoaderComponent`
+- File: `projects/core-ui-library/src/lib/components/loader/loader.component.ts`
+
+## Inputs
+- `imageUrl`: `string | null`
+- `requestId`: `string`
+
+## Outputs
+- none
+
+## Usage notes
+- Typically controlled via `LoaderService` to show/hide spinners per request ID.
+
+## Example
+```html
+<core-loader [requestId]="'users.list'"></core-loader>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/app.html`:5 — `<core-loader></core-loader>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/app.html`:5-5
+
+```html
+<core-loader></core-loader>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/app.ts` (no matching bindings found)

package/llm/components/main-nav.md

@@ -0,0 +1,56 @@
+# core-main-nav
+
+- Class: `MainNavComponent`
+- File: `projects/core-ui-library/src/lib/components/main-nav/main-nav.component.ts`
+
+## Inputs
+- `navConfig`: `NavConfig`
+- `appVersion`: `any`
+- `navItems`: `NavItem[]`
+- `bottomNavItems`: `BottomNavItem[]`
+- `isProduction`: `boolean`
+- `logoImagesConfig`: `LogoImagesConfig | null`
+- `collapsedLogo`: `string`
+- `expandedLogo`: `string`
+
+## Outputs
+- `onLogout`: `void`
+- `onNavItemAction`: `NavItem`
+
+## Usage notes
+- Handles permissions via `PermissionWrapperService` and `NavItem.requiredPermission`.
+- Supports mobile bottom nav and toggle behavior (adds/removes CSS classes).
+- Emits `onLogout` if `navConfig.customLogout` is set; otherwise logs out via `AuthService`.
+
+## Example
+```html
+<core-main-nav
+  [navItems]="navItems"
+  [bottomNavItems]="bottomNavItems"
+  [navConfig]="navConfig"
+  [logoImagesConfig]="logoImagesConfig"
+  (onLogout)="handleLogout()"
+  (onNavItemAction)="handleNavAction($event)"
+></core-main-nav>
+```
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.html`:155 — `<h2>6.6. 🎯 Selector de Elemento Personalizado (core-main-nav)</h2>`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.html`:158 — `<strong>🔧 Selección Directa:</strong> También puedes usar el nombre del elemento personalizado <code>&lt;core-main-nav&gt;</code>`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.html`:164 — `<small>Agregan padding, borde y sombra al elemento &lt;core-main-nav&gt;</small>`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.html`:184 — `customClassService.addClass('core-main-nav', 'extra-padding');`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.html`:185 — `customClassService.addClass('core-main-nav', ['nav-border', 'nav-shadow']);`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.html`:186 — `customClassService.removeClass('core-main-nav', 'extra-padding');</code></pre>`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.ts`:127 — `// Example 6.6: Using custom element selector (core-main-nav)`
+- `projects/core-ui-demo/src/app/admin/components/custom-class-service/custom-class-service.component.ts`:129 — `// Agregar padding directamente al elemento core-main-nav`
+- …and 4 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/manual-refresh.md

@@ -0,0 +1,25 @@
+# core-manual-refresh
+
+- Class: `CoreManualRefreshComponent`
+- File: `projects/core-ui-library/src/lib/components/manual-refresh/manual-refresh.component.ts`
+
+## Inputs
+- `config`: `ManualRefreshConfig`
+- `refreshId`: `string | undefined`
+
+## Outputs
+- `onRefresh`: `string`
+- `timestampUpdated`: `string`
+
+## 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/mobile-header.md

@@ -0,0 +1,25 @@
+# core-mobile-header
+
+- Class: `MobileHeaderComponent`
+- File: `projects/core-ui-library/src/lib/components/mobile-header/mobile-header.component.ts`
+
+## Inputs
+- `config`: `MobileHeaderConfig` (required)
+
+## Outputs
+- `menuClick`: `void`
+- `refreshClick`: `void`
+- `filterClick`: `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/multi-entry-field.md

@@ -0,0 +1,67 @@
+# core-multi-entry-field
+
+- Class: `MultiEntryFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/multi-entry-field/multi-entry-field.component.ts`
+
+## Inputs
+- `field`: `ExtendedModalFieldConfig<T>` (required)
+- `value`: `any`
+- `mode`: `ModalMode` (required)
+- `errors`: `string[]`
+- `rowData`: `T | null`
+- `formValue`: `any`
+
+## Outputs
+- `valueChange`: `any`
+- `onBlurEvent`: `keyof T`
+- `onEnterEvent`: `keyof T`
+- `hasErrors`: `boolean`
+
+## Usage notes
+- Uses a similar input contract to `core-base-field`, but does not extend it.
+- Configure behavior via `multiEntryConfig` (min/max entries, output format, labels).
+- Emits `hasErrors` to indicate per-entry validation errors.
+
+## Config sketch
+
+
+```ts
+const tagsField: ExtendedModalFieldConfig<User> = {
+  key: 'tags',
+  label: 'Tags',
+  type: FieldType.TEXT,
+  multiEntryConfig: {
+    allowMultipleEntries: true,
+    maxEntries: 10,
+    outputFormat: MultiEntryOutputFormat.COMMA_SEPARATED,
+  },
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-multi-entry-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-multi-entry-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/nav[core-generic-tabs].md

@@ -0,0 +1,28 @@
+# nav[core-generic-tabs]
+
+- Class: `GenericTabsComponent`
+- File: `projects/core-ui-library/src/lib/components/generic-tabs/generic-tabs.component.ts`
+
+## Inputs
+- `config`: `GenericTabConfig`
+- `activeTabId`: `string | null`
+
+## Outputs
+- `tabClick`: `GenericTabClickEvent`
+- `tabChange`: `GenericTab`
+
+## Usage notes
+- Provide `config` with tab list and optional per-tab templates.
+
+## Example
+```html
+<nav core-generic-tabs
+  [config]="tabsConfig"
+  [activeTabId]="activeTabId"
+  (tabChange)="onTabChange($event)"
+></nav>
+```
+
+## Demo usage
+
+- No demo usage found in `core-ui-demo`.

package/llm/components/number-field.md

@@ -0,0 +1,56 @@
+# core-number-field
+
+- Class: `NumberFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/number-field/number-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 ageField: NumberModalFieldConfig<User> = {
+  key: 'age',
+  label: 'Age',
+  type: FieldType.NUMBER,
+  numberConfig: { chars: 3 },
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-number-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-number-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/password-field.md

@@ -0,0 +1,56 @@
+# core-password-field
+
+- Class: `PasswordFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/password-field/password-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 passwordField: ModalFieldConfig<User> = {
+  key: 'password',
+  label: 'Password',
+  type: FieldType.PASSWORD,
+  readonly: false,
+  validators: [Validators.required],
+};
+```
+
+## Example
+
+
+```html
+<core-password-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-password-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/phone-field.md

@@ -0,0 +1,60 @@
+# core-phone-field
+
+- Class: `PhoneFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/phone-field/phone-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 phoneField: PhoneModalFieldConfig<User> = {
+  key: 'phone',
+  label: 'Phone',
+  type: FieldType.PHONE,
+  phoneConfig: {
+    defaultCountry: CountryCode.UY,
+    showFlags: true,
+    showPhoneCode: true,
+  },
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-phone-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-phone-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/progress-bar.md

@@ -0,0 +1,49 @@
+# core-progress-bar
+
+- Class: `ProgressBarComponent`
+- File: `projects/core-ui-library/src/lib/components/progress-bar/progress-bar.component.ts`
+
+## Inputs
+- `progress`: `number`
+- `size`: `ProgressBarSize`
+
+## Outputs
+- none
+
+## Demo usage
+
+- `projects/core-ui-demo/src/app/admin/components/progressbar/progressbar.html`:3 — `<core-progress-bar [progress]="10" [size]="progressBarSizes.SMALL"/>`
+- `projects/core-ui-demo/src/app/admin/components/progressbar/progressbar.html`:6 — `<core-progress-bar [progress]="50" />`
+- `projects/core-ui-demo/src/app/admin/components/progressbar/progressbar.html`:9 — `<core-progress-bar [progress]="5" [size]="progressBarSizes.LARGE"/>`
+
+## Demo snippet (HTML)
+
+Source: `projects/core-ui-demo/src/app/admin/components/progressbar/progressbar.html`:3-3
+
+```html
+    <core-progress-bar [progress]="10" [size]="progressBarSizes.SMALL"/>
+```
+
+## Demo snippet (TS)
+
+Source: `projects/core-ui-demo/src/app/admin/components/progressbar/progressbar.ts`
+
+Lines: 1-16
+
+```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 { CardComponent, ProgressBarComponent, ProgressBarSize } from '@solcre-org/core-ui';
+
+@Component({
+  selector: 'app-progressbar',
+  imports: [
+    ProgressBarComponent,
+  ],
+  templateUrl: './progressbar.html',
+})
+export class Progressbar {
+  progressBarSizes = ProgressBarSize
+}
+```

package/llm/components/select-field.md

@@ -0,0 +1,61 @@
+# core-select-field
+
+- Class: `SelectFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/select-field/select-field.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- `selectionChange`: `{ selectedItem: any; newFormValue: any }`
+
+## 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 statusField: SelectFieldConfig<User> = {
+  key: 'status',
+  label: 'Status',
+  type: FieldType.SELECT,
+  options: [
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' },
+  ],
+  searchable: true,
+  clearable: true,
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-select-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-select-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/server-select-field.md

@@ -0,0 +1,59 @@
+# core-server-select-field
+
+- Class: `ServerSelectFieldComponent`
+- File: `projects/core-ui-library/src/lib/components/fields/types/server-select-field/server-select-field.component.ts`
+
+## Inputs
+- none
+
+## Outputs
+- `selectionChange`: `{ selectedItem: any; newFormValue: any }`
+
+## 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 companyField: SelectServerSideConfig<User> = {
+  key: 'companyId',
+  label: 'Company',
+  type: FieldType.SERVER_SELECT,
+  endpoint: '/api/companies',
+  bindValue: 'id',
+  bindLabel: 'name',
+  searchParam: 'q',
+  readonly: false,
+};
+```
+
+## Example
+
+
+```html
+<core-server-select-field
+  [field]="fieldConfig"
+  [value]="formData[fieldConfig.key]"
+  [mode]="mode"
+  [errors]="errors[fieldConfig.key] || []"
+  [formValue]="formData"
+  (valueChange)="onFieldChange(fieldConfig.key, $event)"
+></core-server-select-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`.
+