tailjng 0.1.13 → 0.1.14

package/cli/component-manager.js

@@ -1,6 +1,6 @@
 // component-manager.js
 
-const { copyComponentFiles } = require("./file-operations");
+const { copyComponentFiles, resetInstalledSharedFolders } = require("./file-operations");
 const { installDependencies } = require("./dependency-manager");
 const { COLORS } = require("./settings/colors");
 const { collectDependencyTree } = require("./settings/lib-utils");
@@ -50,6 +50,7 @@ function logInstallPlan(componentName, componentList) {
 
 async function addComponent(componentName, componentList) {
   resetOverwritePolicy();
+  resetInstalledSharedFolders();
   installedComponentsGlobal.clear();
 
   const componentData = componentList[componentName];
@@ -96,6 +97,7 @@ async function addComponent(componentName, componentList) {
 
 async function installAllComponents(componentList) {
   resetOverwritePolicy();
+  resetInstalledSharedFolders();
   installedComponentsGlobal.clear();
 
   const allNames = Object.keys(componentList);

package/cli/file-operations.js

@@ -5,14 +5,29 @@ const path = require("path")
 const { COLORS } = require("./settings/colors")
 const { generateHeaderComment } = require("./settings/header-generator")
 const { askOverwrite } = require("./settings/prompt-utils")
-const { buildTargetPath, parseComponentPath } = require("./settings/path-utils")
+const { getPackageRoot } = require("./settings/lib-utils")
+const {
+    buildTargetPath,
+    buildSharedFolderTargetPath,
+    getSharedFolderInfo,
+    parseComponentPath,
+} = require("./settings/path-utils")
+
+/** Avoid copying the same group `shared/` folder twice per install session. */
+const installedSharedFolders = new Set()
 
 const TEXT_EXTENSIONS = new Set([".ts", ".js", ".html", ".css", ".scss", ".json", ".md"])
+const LIB_PACKAGE_IMPORT_RE =
+    /from\s+['"](?:\.\.\/)+(?:interfaces|services|config)\/[^'"]+['"]/g
 
 function shouldAddHeader(fileName) {
     return TEXT_EXTENSIONS.has(path.extname(fileName).toLowerCase())
 }
 
+function patchConsumerImports(content) {
+    return content.replace(LIB_PACKAGE_IMPORT_RE, "from 'tailjng'")
+}
+
 function copyFileWithHeader(srcFile, destFile) {
     fs.mkdirSync(path.dirname(destFile), { recursive: true })
 
@@ -22,6 +37,9 @@ function copyFileWithHeader(srcFile, destFile) {
     }
 
     let content = fs.readFileSync(srcFile, "utf8")
+    if (path.extname(srcFile).toLowerCase() === ".ts") {
+        content = patchConsumerImports(content)
+    }
     const headerComment = generateHeaderComment(path.basename(srcFile))
     content = headerComment + "\n\n" + content
     fs.writeFileSync(destFile, content)
@@ -49,7 +67,11 @@ function copyDirectoryRecursive(srcDir, destDir, projectRoot) {
     }
 }
 
-async function copyComponentFiles(componentName, componentPath, isDependency = false) {
+function resetInstalledSharedFolders() {
+    installedSharedFolders.clear()
+}
+
+function findTailjngPackageRoot() {
     let currentDir = process.cwd()
     while (!fs.existsSync(path.join(currentDir, "node_modules"))) {
         currentDir = path.dirname(currentDir)
@@ -59,7 +81,74 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
         }
     }
 
-    const nodeModulesPath = path.join(currentDir, "node_modules", "tailjng", componentPath)
+    return getPackageRoot(path.join(currentDir, "node_modules", "tailjng", "cli"))
+}
+
+async function copySharedFolderIfNeeded(componentPath, isDependency = false, options = {}) {
+    const { forceSync = false } = options
+    const sharedInfo = getSharedFolderInfo(componentPath)
+    if (!sharedInfo) {
+        return true
+    }
+
+    if (installedSharedFolders.has(sharedInfo.groupKey)) {
+        return true
+    }
+
+    const packageRoot = findTailjngPackageRoot()
+    const sharedSrc = path.join(packageRoot, ...sharedInfo.sourceRelative.split("/"))
+    if (!fs.existsSync(sharedSrc)) {
+        console.error(
+            `${COLORS.red}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.red}ERROR: Shared utilities ${COLORS.bright}"${sharedInfo.groupKey}/shared"${COLORS.reset} ${COLORS.red}not found in package.${COLORS.reset}`,
+        )
+        console.error(`${COLORS.dim}   Expected: ${sharedSrc}${COLORS.reset}`)
+        return false
+    }
+
+    const projectRoot = process.cwd()
+    const sharedDest = buildSharedFolderTargetPath(projectRoot, componentPath)
+    if (!sharedDest) {
+        return true
+    }
+
+    const sharedLabel = `${sharedInfo.groupKey}/shared`
+    const relativeTargetPath = path.relative(projectRoot, sharedDest)
+    const sharedMissing = !fs.existsSync(sharedDest)
+
+    if (!forceSync && !sharedMissing) {
+        const shouldOverwrite = await askOverwrite(sharedLabel, relativeTargetPath, isDependency)
+        if (!shouldOverwrite) {
+            console.log(
+                `${COLORS.dim}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.dim}Skipping ${COLORS.bright}"${sharedLabel}"${COLORS.reset} ${COLORS.dim}- keeping existing version.${COLORS.reset}`,
+            )
+            return true
+        }
+
+        console.log(
+            `${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Removing existing ${COLORS.bright}"${sharedLabel}"${COLORS.reset} ${COLORS.yellow}to overwrite...${COLORS.reset}`,
+        )
+        fs.rmSync(sharedDest, { recursive: true, force: true })
+    } else if (!sharedMissing) {
+        console.log(
+            `${COLORS.yellow}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.yellow}Updating shared utilities ${COLORS.bright}"${sharedLabel}"${COLORS.reset} ${COLORS.yellow}with the installed component...${COLORS.reset}`,
+        )
+        fs.rmSync(sharedDest, { recursive: true, force: true })
+    }
+
+    console.log(
+        `${COLORS.blue}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.blue}Copying shared utilities ${COLORS.bright}"${sharedLabel}"${COLORS.reset} → ${relativeTargetPath}${COLORS.reset}`,
+    )
+
+    fs.mkdirSync(sharedDest, { recursive: true })
+    copyDirectoryRecursive(sharedSrc, sharedDest, projectRoot)
+    installedSharedFolders.add(sharedInfo.groupKey)
+
+    return true
+}
+
+async function copyComponentFiles(componentName, componentPath, isDependency = false) {
+    const packageRoot = findTailjngPackageRoot()
+    const nodeModulesPath = path.join(packageRoot, ...componentPath.split("/"))
     const projectRoot = process.cwd()
     const targetPath = buildTargetPath(projectRoot, componentName, componentPath)
     const pathInfo = parseComponentPath(componentPath)
@@ -77,6 +166,7 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
 
         if (!shouldOverwrite) {
             console.log(`${COLORS.dim}${COLORS.bright}[tailjng CLI]${COLORS.reset} ${COLORS.dim}Skipping ${COLORS.bright}"${componentName}"${COLORS.reset} ${COLORS.dim}- keeping existing version.${COLORS.reset}`)
+            await copySharedFolderIfNeeded(componentPath, isDependency, { forceSync: false })
             return false
         }
 
@@ -99,8 +189,9 @@ async function copyComponentFiles(componentName, componentPath, isDependency = f
 
     fs.mkdirSync(targetPath, { recursive: true })
     copyDirectoryRecursive(nodeModulesPath, targetPath, projectRoot)
+    await copySharedFolderIfNeeded(componentPath, isDependency, { forceSync: true })
 
     return true
 }
 
-module.exports = { copyComponentFiles }
+module.exports = { copyComponentFiles, resetInstalledSharedFolders }

package/cli/settings/path-utils.js

@@ -58,9 +58,44 @@ function isComponentInstalled(projectRoot, componentName, componentPath) {
     return fs.existsSync(buildTargetPath(projectRoot, componentName, componentPath))
 }
 
+/**
+ * When a registry path is nested (e.g. toggle-radio/toggle-radio), returns sibling `shared/` info.
+ * Used by the CLI to copy group-level utilities alongside the component folder.
+ */
+function getSharedFolderInfo(componentPath) {
+    if (!componentPath.startsWith(COMPONENTS_SOURCE_PREFIX)) {
+        return null
+    }
+
+    const relativePath = componentPath.slice(COMPONENTS_SOURCE_PREFIX.length)
+    const pathParts = relativePath.split("/")
+    if (pathParts.length < 2) {
+        return null
+    }
+
+    const groupKey = pathParts.slice(0, -1).join("/")
+
+    return {
+        groupKey,
+        sourceRelative: `${COMPONENTS_SOURCE_PREFIX}${groupKey}/shared`,
+        targetRelative: `${groupKey}/shared`,
+    }
+}
+
+function buildSharedFolderTargetPath(projectRoot, componentPath) {
+    const sharedInfo = getSharedFolderInfo(componentPath)
+    if (!sharedInfo) {
+        return null
+    }
+
+    return path.join(getComponentsBasePath(projectRoot), sharedInfo.targetRelative)
+}
+
 module.exports = {
     parseComponentPath,
     buildTargetPath,
+    buildSharedFolderTargetPath,
+    getSharedFolderInfo,
     isComponentInstalled,
     isConfigPath,
     CONFIG_SOURCE_PREFIX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/src/lib/components/filter/filter-complete/complete-filter.component.html

@@ -139,68 +139,64 @@
       <div class="flex flex-col gap-2">
         @for (filter of filtersSelect; track $index) {
           @if (filter.isVisible ?? true) {
-            @switch (filter.type) {
-              @case ("dropdown") {
-                <div class="relative">
-                  <JDropdownSelect
-                    [type]="'dropdown'"
-                    [(ngModel)]="filter.selected"
-                    (selectionChange)="
-                      filter.onSelected ? filter.onSelected($event) : null
-                    "
-                    [optionLabel]="filter.optionLabel ?? ''"
-                    [optionValue]="filter.optionValue ?? ''"
-                    [labelSeparator]="filter.labelSeparator ?? ''"
-                    [optionLabelTemplate]="filter.optionLabelTemplate ?? ''"
-                    [optionLabelFn]="filter.optionLabelFn"
-                    [placeholder]="filter.placeholder ?? ''"
-                    [showClear]="filter.showClear ?? false"
-                    [options]="filter.options"
-                    [sort]="filter.sort ?? 'ASC'"
-                    [showAllOption]="filter.showAllOption ?? false"
-                    [isFilterSelect]="true"
-                  />
-                </div>
-              }
-              @case ("searchable") {
-                <div class="relative">
-                  <JDropdownSelect
-                    [type]="'searchable'"
-                    [(ngModel)]="filter.selected"
-                    (selectionChange)="filter.onSelected?.($event)"
-                    [endpoint]="filter.endpoint"
-                    [optionLabel]="filter.optionLabel"
-                    [optionValue]="filter.optionValue"
-                    [labelSeparator]="filter.labelSeparator ?? ''"
-                    [optionLabelTemplate]="filter.optionLabelTemplate ?? ''"
-                    [optionLabelFn]="filter.optionLabelFn"
-                    [responseKey]="filter.responseKey ?? ''"
-                    [dataPath]="filter.dataPath ?? ''"
-                    [placeholder]="filter.placeholder ?? ''"
-                    [showClear]="filter.showClear ?? false"
-                    [loadOnInit]="filter.loadOnInit ?? false"
-                    [isSearch]="filter.isSearch ?? true"
-                    [searchFields]="filter.searchFields || []"
-                    [defaultFilters]="filter.defaultFilters || {}"
-                    [sort]="filter.sort ?? 'ASC'"
-                    [showAllOption]="filter.showAllOption ?? false"
-                    [isFilterSelect]="true"
-                  />
-                </div>
-              }
-              @case ("multi-table") {
-                <div class="relative">
-                  <JMultiTableSelect
-                    [(ngModel)]="filter.selected"
-                    (selectionChange)="
-                      filter.onSelected ? filter.onSelected($event) : null
-                    "
-                    [columns]="filter.columns"
-                    [btnText]="filter.btnText ?? ''"
-                    [isFilterSelect]="true"
-                  />
-                </div>
-              }
+            @if (isDropdownFilter(filter)) {
+              <div class="relative">
+                <JDropdownSelect
+                  [type]="'dropdown'"
+                  [(ngModel)]="filter.selected"
+                  (selectionChange)="
+                    filter.onSelected ? filter.onSelected($event) : null
+                  "
+                  [optionLabel]="filter.optionLabel ?? ''"
+                  [optionValue]="filter.optionValue ?? ''"
+                  [labelSeparator]="filter.labelSeparator ?? ''"
+                  [optionLabelTemplate]="filter.optionLabelTemplate ?? ''"
+                  [optionLabelFn]="filter.optionLabelFn"
+                  [placeholder]="filter.placeholder ?? ''"
+                  [showClear]="filter.showClear ?? false"
+                  [options]="filter.options"
+                  [sort]="filter.sort ?? 'ASC'"
+                  [showAllOption]="filter.showAllOption ?? false"
+                  [isFilterSelect]="true"
+                />
+              </div>
+            } @else if (isSearchableFilter(filter)) {
+              <div class="relative">
+                <JDropdownSelect
+                  [type]="'searchable'"
+                  [(ngModel)]="filter.selected"
+                  (selectionChange)="filter.onSelected?.($event)"
+                  [endpoint]="filter.endpoint"
+                  [optionLabel]="filter.optionLabel"
+                  [optionValue]="filter.optionValue"
+                  [labelSeparator]="filter.labelSeparator ?? ''"
+                  [optionLabelTemplate]="filter.optionLabelTemplate ?? ''"
+                  [optionLabelFn]="filter.optionLabelFn"
+                  [responseKey]="filter.responseKey ?? ''"
+                  [dataPath]="filter.dataPath ?? ''"
+                  [placeholder]="filter.placeholder ?? ''"
+                  [showClear]="filter.showClear ?? false"
+                  [loadOnInit]="filter.loadOnInit ?? false"
+                  [isSearch]="filter.isSearch ?? true"
+                  [searchFields]="filter.searchFields || []"
+                  [defaultFilters]="filter.defaultFilters || {}"
+                  [sort]="filter.sort ?? 'ASC'"
+                  [showAllOption]="filter.showAllOption ?? false"
+                  [isFilterSelect]="true"
+                />
+              </div>
+            } @else if (isMultiTableFilter(filter)) {
+              <div class="relative">
+                <JMultiTableSelect
+                  [(ngModel)]="filter.selected"
+                  (selectionChange)="
+                    filter.onSelected ? filter.onSelected($event) : null
+                  "
+                  [columns]="filter.columns"
+                  [btnText]="filter.btnText ?? ''"
+                  [isFilterSelect]="true"
+                />
+              </div>
             }
           }
         }

package/src/lib/components/filter/filter-complete/complete-filter.component.ts

@@ -3,20 +3,27 @@ import { NgClass } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Subject, Subscription, debounceTime, filter, forkJoin } from 'rxjs';
 import { TableColumn, FilterButton, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
-import type { FilterSelect } from '../../../interfaces/crud/filter.interface';
+import type {
+  CompleteFilterAdditionalButtonLoading,
+  CompleteFilterDropdownSelect,
+  CompleteFilterMultiTableSelect,
+  CompleteFilterSearchableSelect,
+  CompleteFilterSelect,
+} from './complete-filter.types';
 import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
 import { JMultiTableSelectComponent } from '../../select/select-multi-table/multi-table-select.component';
 import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
 import { JDialogComponent } from '../../dialog/dialog.component';
 import { JButtonComponent } from '../../button/button.component';
-import type { CompleteFilterAdditionalButtonLoading } from './complete-filter.types';
 import { hasActiveFilters } from './complete-filter.util';
 import { Icons } from '../../.config/icons/icons.lucide';
 import { JIconComponent } from '../../icon/icon.component';
 
 export type {
   CompleteFilterAdditionalButtonLoading,
-  CompleteFilterClearReason} from './complete-filter.types';
+  CompleteFilterClearReason,
+  CompleteFilterSelect,
+} from './complete-filter.types';
 export { hasActiveFilters } from './complete-filter.util';
 
 /**
@@ -111,7 +118,19 @@ export class JCompleteFilterComponent implements OnInit, OnDestroy {
   @Input() filtersButton: FilterButton[] = [];
 
   // Filtros de tabla
-  @Input() filtersSelect: FilterSelect[] = [];
+  @Input() filtersSelect: CompleteFilterSelect[] = [];
+
+  isDropdownFilter(filter: CompleteFilterSelect): filter is CompleteFilterDropdownSelect {
+    return filter.type === 'dropdown';
+  }
+
+  isSearchableFilter(filter: CompleteFilterSelect): filter is CompleteFilterSearchableSelect {
+    return filter.type === 'searchable';
+  }
+
+  isMultiTableFilter(filter: CompleteFilterSelect): filter is CompleteFilterMultiTableSelect {
+    return filter.type === 'multi-table';
+  }
 
   get visibleColumns(): TableColumn<any>[] {
     return this.columns.filter(col => !col.hidden);

package/src/lib/components/filter/filter-complete/complete-filter.types.ts

@@ -1,4 +1,71 @@
-import type { LoadingState } from 'tailjng';
+import type { LoadingState, TableColumn } from 'tailjng';
+
+/**
+ * Filter-select shapes for JFilter templates.
+ * Prefixed with `CompleteFilter*` to avoid clashing with `tailjng` exports during strict template narrowing.
+ */
+export interface CompleteFilterDropdownSelect {
+  type: 'dropdown';
+  selected: unknown;
+  initSelected?: unknown;
+  onSelected?: (value: unknown) => void;
+  optionLabel?: string | string[];
+  optionValue?: string;
+  labelSeparator?: string;
+  optionLabelTemplate?: string;
+  optionLabelFn?: (option: Record<string, unknown>) => string;
+  placeholder?: string;
+  showClear?: boolean;
+  options: unknown[];
+  deep?: string;
+  sort?: 'ASC' | 'DESC';
+  isVisible?: ((data?: unknown) => boolean) | boolean;
+  showAllOption?: boolean;
+}
+
+export interface CompleteFilterSearchableSelect {
+  type: 'searchable';
+  selected: unknown;
+  initSelected?: unknown;
+  onSelected?: (value: unknown) => void;
+  endpoint: string;
+  isSearch?: boolean;
+  optionLabel: string | string[];
+  optionValue: string;
+  labelSeparator?: string;
+  optionLabelTemplate?: string;
+  optionLabelFn?: (option: Record<string, unknown>) => string;
+  responseKey?: string;
+  dataPath?: string;
+  placeholder?: string;
+  showClear?: boolean;
+  loadOnInit?: boolean;
+  searchFields?: string[];
+  defaultFilters?: Record<string, unknown>;
+  deep?: string;
+  sort?: 'ASC' | 'DESC';
+  isVisible?: ((data?: unknown) => boolean) | boolean;
+  showAllOption?: boolean;
+}
+
+export interface CompleteFilterMultiTableSelect {
+  type: 'multi-table';
+  selected: unknown;
+  initSelected?: unknown;
+  onSelected?: (value: unknown) => void;
+  columns: TableColumn<unknown>[];
+  btnText?: string;
+  placeholder?: string;
+  deep?: string;
+  sort?: 'ASC' | 'DESC';
+  isVisible?: ((data?: unknown) => boolean) | boolean;
+  showAllOption?: boolean;
+}
+
+export type CompleteFilterSelect =
+  | CompleteFilterDropdownSelect
+  | CompleteFilterSearchableSelect
+  | CompleteFilterMultiTableSelect;
 
 /** Event payload from `(clearFilters)` — typically `'clear'`. */
 export type CompleteFilterClearReason = string;

package/src/lib/components/filter/filter-complete/complete-filter.util.ts

@@ -1,16 +1,16 @@
-import type { FilterSelect } from '../../../interfaces/crud/filter.interface';
-
-/** Whether search text or any filter select differs from its initial value. */
-export function hasActiveFilters(
-  searchQuery: string,
-  filtersSelect: FilterSelect[],
-): boolean {
-  const hasActiveSearch = searchQuery?.trim().length > 0;
-  const hasSelectedFilters = filtersSelect.some((filter) => {
-    const actual = filter.selected;
-    const initial = filter.initSelected ?? null;
-    return JSON.stringify(actual) !== JSON.stringify(initial);
-  });
-
-  return hasActiveSearch || hasSelectedFilters;
-}
+import type { CompleteFilterSelect } from './complete-filter.types';
+
+/** Whether search text or any filter select differs from its initial value. */
+export function hasActiveFilters(
+  searchQuery: string,
+  filtersSelect: CompleteFilterSelect[],
+): boolean {
+  const hasActiveSearch = searchQuery?.trim().length > 0;
+  const hasSelectedFilters = filtersSelect.some((filter) => {
+    const actual = filter.selected;
+    const initial = filter.initSelected ?? null;
+    return JSON.stringify(actual) !== JSON.stringify(initial);
+  });
+
+  return hasActiveSearch || hasSelectedFilters;
+}