tailjng 0.1.6 → 0.1.7

package/src/lib/components/select/select-dropdown/dropdown-select.types.ts

@@ -0,0 +1,43 @@
+/** Static options list or API-backed searchable select. */
+export type DropdownSelectType = 'dropdown' | 'searchable';
+
+/** Sort order for searchable API requests. */
+export type DropdownSortOrder = 'ASC' | 'DESC';
+
+/** Normalized option shown in the panel list. */
+export type DropdownOption<TOriginal = unknown> = {
+  value: unknown;
+  text: string;
+  original?: TOriginal;
+};
+
+/** Placeholder map for `{param}` segments in {@link JDropdownSelectComponent.endpoint}. */
+export type DropdownSelectDynamicParams = Record<string, unknown>;
+
+/** Default filters sent as `filter[key]` query params (searchable mode). */
+export type DropdownSelectDefaultFilters = { [key: string]: any };
+
+export type DropdownPanelPosition = {
+  /** Viewport `top` in pixels after positioning. */
+  top: number;
+  /** Viewport `left` in pixels after positioning. */
+  left: number;
+  /** Final panel width in pixels. */
+  width: number;
+};
+
+/** Tunables for {@link positionDropdownPanel}. */
+export type DropdownPanelPositionConfig = {
+  /** Minimum distance from viewport edges. */
+  viewportPadding: number;
+  /** Gap between trigger and panel. */
+  dropdownGap: number;
+  /** Stacking order (`position: fixed`). */
+  dropdownZIndex: number;
+  /** Minimum panel width when trigger is narrower. */
+  minPanelWidth: number;
+  /** Minimum scrollable list height when constrained. */
+  minOptionsHeight: number;
+  /** CSS selector for the scrollable options container. */
+  optionsListSelector: string;
+};

package/src/lib/components/select/select-dropdown/dropdown-select.util.ts

@@ -0,0 +1,179 @@
+import type {
+  DropdownOption,
+  DropdownPanelPosition,
+  DropdownPanelPositionConfig,
+} from './dropdown-select.types';
+
+/** Default viewport positioning values for {@link JDropdownSelectComponent}. */
+export const DROPDOWN_PANEL_DEFAULTS: DropdownPanelPositionConfig = {
+  viewportPadding: 8,
+  dropdownGap: 4,
+  dropdownZIndex: 1100,
+  minPanelWidth: 250,
+  minOptionsHeight: 80,
+  optionsListSelector: '.jdropdown-options-list',
+};
+
+/** Reads a nested property using dot notation (`a.b.c`). */
+export function getNestedValue(obj: unknown, path: string): unknown {
+  let value: unknown = obj;
+
+  for (const part of path.split('.')) {
+    if (value == null || typeof value !== 'object') {
+      return '';
+    }
+
+    value = (value as Record<string, unknown>)[part];
+  }
+
+  return value ?? '';
+}
+
+/** Builds the display label for one option object. */
+export function resolveOptionLabel(
+  option: Record<string, unknown>,
+  optionLabel: string | string[],
+  labelSeparator: string,
+): string {
+  if (Array.isArray(optionLabel)) {
+    return optionLabel
+      .map((key) => String(getNestedValue(option, key)))
+      .filter(Boolean)
+      .join(labelSeparator);
+  }
+
+  return String(getNestedValue(option, optionLabel));
+}
+
+/** Maps primitive arrays (`['a', 'b']`) to panel options. */
+export function mapPrimitiveOptions(options: unknown[]): DropdownOption[] {
+  return options.map((option) => ({
+    value: option,
+    text: String(option),
+  }));
+}
+
+/** Maps object arrays to panel options using `optionLabel` / `optionValue`. */
+export function mapObjectOptions(
+  options: Record<string, unknown>[],
+  optionLabel: string | string[],
+  optionValue: string,
+  labelSeparator: string,
+): DropdownOption[] {
+  return options.map((option) => ({
+    value: option[optionValue],
+    text: resolveOptionLabel(option, optionLabel, labelSeparator),
+    original: option,
+  }));
+}
+
+/** Local text filter for static dropdown mode. */
+export function filterOptionsBySearch(
+  options: DropdownOption[],
+  searchTerm: string,
+): DropdownOption[] {
+  if (!searchTerm.trim()) {
+    return [...options];
+  }
+
+  const normalized = searchTerm.toLowerCase();
+  return options.filter((option) => option.text.toLowerCase().includes(normalized));
+}
+
+/** Replaces `{param}` placeholders in a CRUD endpoint template. */
+export function rebuildEndpointUrl(
+  rawEndpoint: string,
+  dynamicParams: Record<string, unknown>,
+): string {
+  return rawEndpoint.replace(/\{([^}]+)\}/g, (_, key: string) =>
+    String(dynamicParams?.[key] ?? ''),
+  );
+}
+
+/** Clears dynamic max-height applied while positioning the panel. */
+export function resetDropdownPanelStyles(
+  panel: HTMLElement,
+  optionsListSelector = DROPDOWN_PANEL_DEFAULTS.optionsListSelector,
+): void {
+  const optionsList = panel.querySelector(optionsListSelector) as HTMLElement | null;
+  if (optionsList) {
+    optionsList.style.maxHeight = '';
+  }
+}
+
+/**
+ * Positions the floating panel with `position: fixed`, flipping above/below
+ * the trigger and clamping within the viewport.
+ */
+export function positionDropdownPanel(
+  panel: HTMLElement,
+  buttonRect: DOMRect,
+  config: DropdownPanelPositionConfig = DROPDOWN_PANEL_DEFAULTS,
+): DropdownPanelPosition {
+  resetDropdownPanelStyles(panel, config.optionsListSelector);
+
+  const width = Math.max(buttonRect.width, config.minPanelWidth);
+
+  panel.style.position = 'fixed';
+  panel.style.zIndex = String(config.dropdownZIndex);
+  panel.style.margin = '0';
+  panel.style.width = `${width}px`;
+  panel.style.minWidth = `${config.minPanelWidth}px`;
+
+  const viewportWidth = document.documentElement.clientWidth;
+  const viewportHeight = window.innerHeight;
+  const panelHeight = panel.offsetHeight;
+  const spaceBelow = viewportHeight - buttonRect.bottom - config.viewportPadding;
+  const spaceAbove = buttonRect.top - config.viewportPadding;
+
+  let top = buttonRect.bottom + config.dropdownGap;
+
+  if (panelHeight > spaceBelow && panelHeight <= spaceAbove) {
+    top = buttonRect.top - panelHeight - config.dropdownGap;
+  } else if (panelHeight > spaceBelow && panelHeight > spaceAbove) {
+    const optionsList = panel.querySelector(config.optionsListSelector) as HTMLElement | null;
+    const chromeHeight = optionsList ? panelHeight - optionsList.offsetHeight : panelHeight;
+
+    if (spaceBelow >= spaceAbove) {
+      top = buttonRect.bottom + config.dropdownGap;
+      if (optionsList) {
+        optionsList.style.maxHeight = `${Math.max(
+          config.minOptionsHeight,
+          spaceBelow - config.dropdownGap - chromeHeight,
+        )}px`;
+      }
+    } else {
+      const constrainedOptionsHeight = Math.max(
+        config.minOptionsHeight,
+        spaceAbove - config.dropdownGap - chromeHeight,
+      );
+
+      if (optionsList) {
+        optionsList.style.maxHeight = `${constrainedOptionsHeight}px`;
+      }
+
+      const adjustedPanelHeight = chromeHeight + (optionsList?.offsetHeight ?? constrainedOptionsHeight);
+      top = buttonRect.top - adjustedPanelHeight - config.dropdownGap;
+    }
+  }
+
+  const finalPanelHeight = panel.offsetHeight;
+  top = Math.max(
+    config.viewportPadding,
+    Math.min(top, viewportHeight - finalPanelHeight - config.viewportPadding),
+  );
+
+  let left = buttonRect.left;
+  const panelWidth = panel.offsetWidth;
+
+  if (left + panelWidth > viewportWidth - config.viewportPadding) {
+    left = viewportWidth - panelWidth - config.viewportPadding;
+  }
+
+  left = Math.max(config.viewportPadding, left);
+
+  panel.style.top = `${top}px`;
+  panel.style.left = `${left}px`;
+
+  return { top, left, width: panelWidth };
+}

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.css

@@ -2,3 +2,9 @@
   display: block;
   width: 100%;
 }
+
+/* Floating panel — coordinates set in TS via positionDropdownPanel */
+.jdropdown-panel {
+  position: fixed;
+  z-index: 1100;
+}

package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.html

@@ -1,5 +1,6 @@
+<!-- Trigger -->
 <div class="relative w-full">
-  <div class="w-auto" #selectButton>
+  <div #selectButton class="w-auto">
     <button
       type="button"
       [disabled]="isDisabled || isLoading"
@@ -7,91 +8,179 @@
       class="flex w-full h-[40px] max-[400px]:h-[35px] text-[12px] items-center justify-between px-3 py-2 text-sm bg-background dark:bg-dark-background border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary select-none"
       [ngClass]="{ 'opacity-50 cursor-not-allowed pointer-events-none': isDisabled || isLoading }"
     >
-      <span class="truncate text-black dark:text-white" [ngClass]="{ 'opacity-70 text-muted-foreground dark:text-dark-muted-foreground': selectedValues.length === 0 }">
+      <span
+        class="truncate text-black dark:text-white"
+        [ngClass]="{
+          'opacity-70 text-muted-foreground dark:text-dark-muted-foreground':
+            selectedValues.length === 0,
+        }"
+      >
         {{ displayLabel }}
       </span>
 
       <div class="flex items-center">
         @if (showClear && selectedValues.length > 0) {
-          <button type="button" (click)="clearSelection($event)"
-            class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer">
-            <lucide-icon [name]="iconsService.icons.close" size="14"></lucide-icon>
+          <button
+            type="button"
+            (click)="clearSelection($event)"
+            class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+          >
+            <JIcon
+              [icon]="Icons.X"
+              [size]="14"
+              iconClass="text-gray-400"
+              [ariaHidden]="true"
+            />
           </button>
         }
         @if (!isLoading) {
-          <lucide-icon [name]="iconsService.icons.chevronDown" size="16" class="transition duration-300 ease-in-out text-gray-400" [ngClass]="{ 'rotate-180': isDropdownOpen }"></lucide-icon>
+          <JIcon
+            [icon]="Icons.ChevronDown"
+            [size]="16"
+            iconClass="transition duration-300 ease-in-out text-gray-400"
+            [ngClasses]="{ 'rotate-180': isDropdownOpen }"
+            [ariaHidden]="true"
+          />
         } @else {
-          <lucide-icon [name]="iconsService.icons.loading" size="16" class="text-gray-400 animate-spin"></lucide-icon>
+          <JIcon
+            [icon]="Icons.Loader2"
+            [size]="16"
+            iconClass="text-gray-400 animate-spin"
+            [ariaHidden]="true"
+          />
         }
       </div>
     </button>
   </div>
 </div>
 
+<!-- Floating panel (position: fixed — see dropdown-select.util) -->
 @if (isDropdownOpen) {
-  <div @modalTransition
-       class="absolute z-[100] min-w-[250px] mt-1 bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
-       [style.width.px]="dropdownWidth"
-       [style.top.px]="dropdownTop"
-       [style.left.px]="dropdownLeft">
+  <div
+    #dropdownPanel
+    @modalTransition
+    class="jdropdown-panel min-w-[250px] bg-background dark:bg-dark-background rounded-lg shadow-lg border border-border border-dark-border"
+    [style.width.px]="dropdownWidth"
+  >
     <div class="pt-1 pl-3 pr-3 pb-3">
-      <div class="text-[10px] font-medium text-gray-500 dark:text-gray-500 mb-1">{{ title }}</div>
+      <div class="text-[10px] font-medium text-gray-500 dark:text-gray-500 mb-1">
+        {{ title }}
+      </div>
 
-      <!-- Search (local o remota según 'type') -->
+      <!-- Search (local or remote depending on `type`) -->
       @if (isSearch) {
         <div class="mb-2 relative">
-          <input type="text"
-                 [(ngModel)]="searchTerm"
-                 (input)="onSearchInput()"
-                 placeholder="Buscar..."
-                 class="input bg-dark-foreground dark:bg-foreground text-black dark:text-white w-full px-3 py-2 text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary" />
+          <input
+            type="text"
+            [(ngModel)]="searchTerm"
+            (input)="onSearchInput()"
+            placeholder="Buscar..."
+            class="input bg-dark-foreground dark:bg-foreground text-black dark:text-white w-full px-3 py-2 text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] border border-border dark:border-dark-border rounded focus:outline-none focus:ring-2 focus:ring-primary"
+          />
           <div class="absolute flex right-3 top-1/2 transform -translate-y-1/2">
             @if (searchTerm) {
-              <button type="button" (click)="searchTerm=''; onSearchInput()"
-                      class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer">
-                <lucide-icon [name]="iconsService.icons.close" size="16"></lucide-icon>
+              <button
+                type="button"
+                (click)="clearSearchTerm()"
+                class="pr-1 mr-1 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+              >
+                <JIcon
+                  [icon]="Icons.X"
+                  [size]="16"
+                  iconClass="text-gray-400"
+                  [ariaHidden]="true"
+                />
               </button>
             }
-            <lucide-icon [name]="iconsService.icons.search" size="16" class="text-gray-400"></lucide-icon>
+            <JIcon
+              [icon]="Icons.Search"
+              [size]="16"
+              iconClass="text-gray-400"
+              [ariaHidden]="true"
+            />
           </div>
         </div>
       }
 
-      <div class="max-h-60 max-[400px]:max-h-36 overflow-auto flex flex-col gap-1 scroll-element">
+      <!-- Option list -->
+      <div
+        class="jdropdown-options-list max-h-60 max-[400px]:max-h-36 overflow-auto flex flex-col gap-1 scroll-element"
+      >
         @if (isLoading) {
-          <div class="flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4">
-            <lucide-icon [name]="iconsService.icons.loading" size="20" class="animate-spin"></lucide-icon>
+          <div
+            class="flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4"
+          >
+            <JIcon
+              [icon]="Icons.Loader2"
+              [size]="20"
+              iconClass="animate-spin"
+              [ariaHidden]="true"
+            />
             Cargando...
           </div>
         } @else {
-
-          <!-- Select All -->
           @if (filteredProcessedOptions.length > 0 && enableSelectAll) {
-            <div onKeyPress (click)="toggleSelectAll()"
-                 class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent/50 hover:dark:bg-dark-accent/40"
-                 [ngClass]="{'bg-accent! dark:bg-dark-accent/80!': isAllSelected()}">
+            <div
+              onKeyPress
+              (click)="toggleSelectAll()"
+              class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent/50 hover:dark:bg-dark-accent/40"
+              [ngClass]="{ 'bg-accent! dark:bg-dark-accent/80!': isAllSelected() }"
+            >
               <input type="checkbox" class="hidden" [checked]="isAllSelected()" />
               @if (isAllSelected()) {
-                <lucide-icon [name]="iconsService.icons.check" size="15" class="transition text-black dark:text-white" />
+                <JIcon
+                  [icon]="Icons.Check"
+                  [size]="15"
+                  iconClass="transition text-black dark:text-white"
+                  [ariaHidden]="true"
+                />
               } @else {
-                <lucide-icon [name]="iconsService.icons.squareDashedMousePointer" size="15" class="transition text-black dark:text-white opacity-40" />
+                <JIcon
+                  [icon]="Icons.SquareDashedMousePointer"
+                  [size]="15"
+                  iconClass="transition text-black dark:text-white opacity-40"
+                  [ariaHidden]="true"
+                />
               }
-              <label class="text-black dark:text-white text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] font-medium w-full">{{ labelSelectAll }}</label>
+              <label
+                class="text-black dark:text-white text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] font-medium w-full"
+                >{{ labelSelectAll }}</label
+              >
             </div>
           }
 
-          <!-- Opciones (filtradas) -->
           @for (option of filteredProcessedOptions; track option.value) {
-            <div onKeyPress (click)="toggleOption(option)"
-                 class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent/50 hover:dark:bg-dark-accent/40"
-                 [ngClass]="{'bg-accent! dark:bg-dark-accent/80!' : selectedValues.includes(option.value)}">
-              <input type="checkbox" class="hidden" [checked]="selectedValues.includes(option.value)" />
+            <div
+              onKeyPress
+              (click)="toggleOption(option)"
+              class="flex gap-5 items-center border border-accent dark:border-dark-accent/50 px-4 py-2 cursor-pointer group rounded-md transition-all hover:bg-accent/50 hover:dark:bg-dark-accent/40"
+              [ngClass]="{
+                'bg-accent! dark:bg-dark-accent/80!': selectedValues.includes(option.value),
+              }"
+            >
+              <input
+                type="checkbox"
+                class="hidden"
+                [checked]="selectedValues.includes(option.value)"
+              />
               @if (selectedValues.includes(option.value)) {
-                <lucide-icon [name]="iconsService.icons.check" size="15" class="transition text-black dark:text-white" />
+                <JIcon
+                  [icon]="Icons.Check"
+                  [size]="15"
+                  iconClass="transition text-black dark:text-white"
+                  [ariaHidden]="true"
+                />
               } @else {
-                <lucide-icon [name]="iconsService.icons.squareDashedMousePointer" size="15" class="transition text-black dark:text-white opacity-40" />
+                <JIcon
+                  [icon]="Icons.SquareDashedMousePointer"
+                  [size]="15"
+                  iconClass="transition text-black dark:text-white opacity-40"
+                  [ariaHidden]="true"
+                />
               }
-              <label class="text-black dark:text-white text-sm font-medium w-full">{{ option.text }}</label>
+              <label class="text-black dark:text-white text-sm font-medium w-full">{{
+                option.text
+              }}</label>
             </div>
           }
           @if (filteredProcessedOptions.length === 0) {