tailjng 0.1.6 → 0.1.7

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

@@ -0,0 +1,22 @@
+import type {
+  DropdownOption,
+  DropdownSelectDefaultFilters,
+  DropdownSelectDynamicParams,
+  DropdownSelectType,
+  DropdownSortOrder,
+} from '../select-dropdown/dropdown-select.types';
+
+/** Static options or API-backed searchable multi-select. */
+export type MultiDropdownSelectType = DropdownSelectType;
+
+/** Sort order for searchable API requests. */
+export type MultiDropdownSortOrder = DropdownSortOrder;
+
+/** Normalized option shown in the multi-select panel. */
+export type MultiDropdownOption<TOriginal = unknown> = DropdownOption<TOriginal>;
+
+/** Placeholder map for `{param}` segments in {@link JMultiDropdownSelectComponent.endpoint}. */
+export type MultiDropdownSelectDynamicParams = DropdownSelectDynamicParams;
+
+/** Default filters sent as `filter[key]` query params (searchable mode). */
+export type MultiDropdownSelectDefaultFilters = DropdownSelectDefaultFilters;

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

@@ -0,0 +1,20 @@
+export {
+  DROPDOWN_PANEL_DEFAULTS,
+  filterOptionsBySearch,
+  getNestedValue,
+  mapObjectOptions,
+  mapPrimitiveOptions,
+  positionDropdownPanel,
+  rebuildEndpointUrl,
+  resetDropdownPanelStyles,
+  resolveOptionLabel,
+} from '../select-dropdown/dropdown-select.util';
+
+/** Coerces numeric strings to numbers so checkbox matching stays stable. */
+export function normalizeMultiDropdownValue(value: unknown): unknown {
+  if (typeof value === 'string' && value.trim() !== '' && !Number.isNaN(Number(value))) {
+    return Number(value);
+  }
+
+  return value;
+}

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

@@ -0,0 +1,10 @@
+:host {
+  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-table/multi-table-select.component.html

@@ -1,73 +1,89 @@
+<!-- Trigger -->
 <div class="relative w-full h-full">
-    <div #selectButton class="min-w-[40px] max-[400px]:min-w-[30px]" >
-        <JButton
-            (clicked)="toggleColumnSelector()"
-            classes="secondary"
-            [icon]="btnIcon"
-            [disabled]="isDisabled"
-            [ngClasses]="getButtonNgClass()"
-        >
-            {{btnText}}
-        </JButton>
-    </div>
+  <div #selectButton class="min-w-[40px] max-[400px]:min-w-[30px]">
+    <JButton
+      (clicked)="toggleColumnSelector()"
+      classes="secondary"
+      [icon]="btnIcon"
+      [disabled]="isDisabled"
+      [ngClasses]="getButtonNgClass()"
+    >
+      {{ btnText }}
+    </JButton>
+  </div>
 </div>
 
-<!-- Dropdown positioned outside the flow -->
+<!-- Floating panel (position: fixed — see dropdown-select.util) -->
 @if (isColumnSelectorOpen) {
-    <div @modalTransition
-        class="absolute z-[100] min-w-[250px] max-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"
-        [ngClass]="getButtonNgClass()"
-    >
-        <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
+    #dropdownPanel
+    @modalTransition
+    class="jdropdown-panel min-w-[250px] max-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="max-h-60 max-[400px]:max-h-48 overflow-auto flex flex-col gap-1 scroll-element">
-                @for (column of columns; track column.key) {
-                    <div onKeyDown
-                        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!' : column.visible}"
-                        (click)="toggleColumnVisibility(column)"
-                    >
-                        <input type="checkbox" [id]="'col-' + column.key" [(ngModel)]="column.visible" class="hidden" >
+      <div
+        class="jdropdown-options-list max-h-60 max-[400px]:max-h-48 overflow-auto flex flex-col gap-1 scroll-element"
+      >
+        @for (column of columns; track column.key) {
+          <div
+            onKeyDown
+            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!': column.visible }"
+            (click)="toggleColumnVisibility(column)"
+          >
+            <input
+              type="checkbox"
+              [id]="'col-' + column.key"
+              [(ngModel)]="column.visible"
+              class="hidden"
+            />
 
-                        @if (column.visible) {
-                            <lucide-icon [name]="iconsService.icons.check" size="15" class="transition text-black dark:text-white" />
-                        } @else {
-                            <lucide-icon [name]="iconsService.icons.squareDashedMousePointer" size="15" class="transition text-black dark:text-white opacity-40" />
-                        }
+            @if (column.visible) {
+              <JIcon
+                [icon]="Icons.Check"
+                [size]="15"
+                iconClass="transition text-black dark:text-white"
+                [ariaHidden]="true"
+              />
+            } @else {
+              <JIcon
+                [icon]="Icons.SquareDashedMousePointer"
+                [size]="15"
+                iconClass="transition text-black dark:text-white opacity-40"
+                [ariaHidden]="true"
+              />
+            }
 
-                        <label [for]="'col-' + column.key"
-                            class="text-black dark:text-white text-sm max-[400px]:text-[12px] font-medium w-full cursor-pointer">
-                            {{ column.label }}
-                        </label>
-                    </div>
-                }
+            <label
+              [for]="'col-' + column.key"
+              class="text-black dark:text-white text-sm max-[400px]:text-[12px] font-medium w-full cursor-pointer"
+            >
+              {{ column.label }}
+            </label>
+          </div>
+        }
 
-                @if (columns.length === 0) {
-                    <div class="px-3 py-2 text-sm text-gray-500">No hay columnas disponibles</div>
-                }
-            </div>
+        @if (columns.length === 0) {
+          <div class="px-3 py-2 text-sm text-gray-500">No hay columnas disponibles</div>
+        }
+      </div>
 
-            @if (showActions) {
-                <div class="mt-3 pt-2 border-t border-border dark:border-dark-border flex gap-2 justify-center">
-                    <JButton onKeyPress
-                        (click)="selectAllColumns()"
-                        classes="primary text-[10px]"
-                    >
-                        Mostrar todo
-                    </JButton>
+      @if (showActions) {
+        <div class="mt-3 pt-2 border-t border-border dark:border-dark-border flex gap-2 justify-center">
+          <JButton onKeyPress (click)="selectAllColumns()" classes="primary text-[10px]">
+            Mostrar todo
+          </JButton>
 
-                    <JButton onKeyPress
-                        (click)="deselectAllColumns()"
-                        classes="secondary text-[10px]"
-                    >
-                        Ocultar todo
-                    </JButton>
-                </div>
-            }
+          <JButton onKeyPress (click)="deselectAllColumns()" classes="secondary text-[10px]">
+            Ocultar todo
+          </JButton>
         </div>
+      }
     </div>
+  </div>
 }