@nucleus-suite-pe/core 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nucleus-suite-pe/core",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Capa compartida de la suite Nucleus: sesión única, permisos, tema y marco de aplicación para Angular.",
   "keywords": [
     "angular",
@@ -27,7 +27,8 @@
     "@angular/router": "^21.2.0",
     "@angular/forms": "^21.2.0",
     "primeicons": "^8.0.0",
-    "chart.js": "^4.4.0"
+    "chart.js": "^4.4.0",
+    "@angular/cdk": "^21.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/tokens.css

@@ -16,6 +16,10 @@
   --ns-frame-glow: #8c7ff0;
   --ns-frame-on-glow: #101014;
 
+  --ns-success: #5bd98a;
+  --ns-danger: #f87171;
+  --ns-warning: #e0a33a;
+
   --ns-shadow-1: 0 1px 2px rgb(0 0 0 / 28%);
   --ns-shadow-2: 0 10px 34px rgb(0 0 0 / 45%);
   --ns-accent-wash: #1d1a2b;
@@ -461,3 +465,84 @@ nucleus-metric .value,
 nucleus-chart {
   font-variant-numeric: tabular-nums;
 }
+
+:root .p-tag {
+  --ns-status: color-mix(in srgb, var(--ac-text) 58%, transparent);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 3px 11px 3px 9px;
+  border: 1px solid color-mix(in srgb, var(--ns-status) 38%, transparent);
+  border-radius: var(--ac-radius-pill);
+  background: color-mix(in srgb, var(--ns-status) 13%, transparent);
+  color: var(--ns-status);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+:root .p-tag::before {
+  width: 6px;
+  height: 6px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--ns-status);
+  content: '';
+}
+
+:root .p-tag-success {
+  --ns-status: var(--ns-success);
+}
+
+:root .p-tag-danger {
+  --ns-status: var(--ns-danger);
+}
+
+:root .p-tag-warn {
+  --ns-status: var(--ns-warning);
+}
+
+:root .p-tag-info {
+  --ns-status: var(--ac-accent);
+}
+
+.cdk-drag-preview {
+  border: 1px solid var(--ac-accent);
+  border-radius: 12px;
+  background: var(--ac-surface);
+  box-shadow: var(--ns-shadow-2);
+  opacity: 0.96;
+}
+
+.cdk-drag-preview .grip {
+  color: var(--ac-accent);
+}
+
+:root .card-actions .p-button-text.p-button-secondary,
+:root .actions .p-button-text.p-button-secondary {
+  color: var(--ac-text-muted);
+}
+
+:root .card-actions .p-button-text.p-button-secondary:not(:disabled):hover,
+:root .actions .p-button-text.p-button-secondary:not(:disabled):hover {
+  background: color-mix(in srgb, var(--ac-text) 10%, transparent);
+  color: var(--ac-text);
+}
+
+:root .card-actions .p-button-text.p-button-danger,
+:root .actions .p-button-text.p-button-danger {
+  color: var(--ns-danger);
+}
+
+:root .card-actions .p-button-text.p-button-danger:not(:disabled):hover,
+:root .actions .p-button-text.p-button-danger:not(:disabled):hover {
+  background: color-mix(in srgb, var(--ns-danger) 14%, transparent);
+  color: var(--ns-danger);
+}
+
+:root .card-actions .p-button:disabled,
+:root .actions .p-button:disabled {
+  opacity: 0.38;
+}

package/types/nucleus-suite-pe-core.d.ts

@@ -6,6 +6,7 @@ import * as _nucleus_suite_pe_core from '@nucleus-suite-pe/core';
 import * as _primeuix_themes from '@primeuix/themes';
 import * as _primeuix_themes_types_base from '@primeuix/themes/types/base';
 import { Popover } from 'primeng/popover';
+import { CdkDrag, CdkDragDrop } from '@angular/cdk/drag-drop';
 import { MenuItem } from 'primeng/api';
 
 interface NucleusConfig {
@@ -308,6 +309,10 @@ interface CommonCopy {
     readonly noColor: string;
     readonly searchIcon: string;
     readonly noMatches: string;
+    readonly reorderHandle: string;
+    readonly noResults: string;
+    readonly viewGrid: string;
+    readonly viewRows: string;
     readonly sessionExpired: string;
     readonly errorNetwork: string;
     readonly errorTimeout: string;
@@ -498,8 +503,8 @@ declare function mixHex(foreground: string, background: string, ratio: number):
 declare function meetsContrast(foreground: string, background: string, required: number): boolean;
 declare function contrastIssue(scope: string, pair: string, foreground: string, background: string, required: number): ContrastIssue | null;
 
-type FrameId = 'nucleus' | 'ember' | 'forest' | 'plum' | 'midnight' | 'slate' | 'ocean' | 'sand' | 'ink' | 'graphite' | 'paper' | 'mist';
-type CanvasId = 'light' | 'dim' | 'dark';
+type FrameId = 'nucleus' | 'ember' | 'forest' | 'plum' | 'midnight' | 'slate' | 'ocean' | 'sand' | 'ink' | 'graphite' | 'paper' | 'mist' | 'studio';
+type CanvasId = 'light' | 'soft' | 'dim' | 'dark';
 type CanvasPreference = CanvasId | 'system';
 type AccentId = 'violet' | 'blue' | 'cyan' | 'green' | 'lime' | 'amber' | 'orange' | 'rose' | 'red';
 type AccentPreference = AccentId | 'auto';
@@ -837,8 +842,23 @@ declare class NucleusForm {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NucleusForm, "nucleus-form", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, [{ directive: typeof NucleusEnterAdvance; inputs: {}; outputs: {}; }]>;
 }
 
+interface NucleusLinkTarget {
+    readonly route: readonly unknown[];
+    readonly queryParams?: Record<string, unknown>;
+}
+declare class NucleusLink {
+    readonly route: _angular_core.InputSignal<readonly unknown[] | null>;
+    readonly queryParams: _angular_core.InputSignal<Record<string, unknown> | null>;
+    readonly href: _angular_core.InputSignal<string | null>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly muted: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NucleusLink, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NucleusLink, "nucleus-link", never, { "route": { "alias": "route"; "required": false; "isSignal": true; }; "queryParams": { "alias": "queryParams"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "muted": { "alias": "muted"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 type ListAlign = 'left' | 'center' | 'right';
 type ListColumnKind = 'text' | 'switch';
+type ListColumnRole = 'identity' | 'status' | 'attribute' | 'hidden';
 interface ListTag {
     readonly label: string;
     readonly severity?: 'success' | 'info' | 'warn' | 'danger' | 'secondary';
@@ -847,6 +867,7 @@ interface ListColumn<T = Record<string, unknown>> {
     readonly key: string;
     readonly header: string;
     readonly kind?: ListColumnKind;
+    readonly role?: ListColumnRole;
     readonly align?: ListAlign;
     readonly strong?: boolean;
     readonly width?: string;
@@ -855,6 +876,7 @@ interface ListColumn<T = Record<string, unknown>> {
     readonly checked?: (row: T) => boolean;
     readonly disabled?: (row: T) => boolean;
     readonly hint?: (row: T) => string;
+    readonly link?: (row: T) => NucleusLinkTarget | null;
 }
 interface ListAction<T = Record<string, unknown>> {
     readonly id: string;
@@ -892,9 +914,48 @@ declare class NucleusList<T extends object = Record<string, unknown>> {
     readonly rowClass: _angular_core.InputSignal<(row: T) => string>;
     readonly pageSize: _angular_core.InputSignal<number>;
     readonly pageSizes: _angular_core.InputSignal<number[]>;
+    readonly cards: _angular_core.InputSignal<boolean>;
+    readonly reorderable: _angular_core.InputSignal<boolean>;
+    readonly searchable: _angular_core.InputSignal<boolean>;
+    readonly reorderGroup: _angular_core.InputSignal<((row: T) => string | null) | null>;
     readonly action: _angular_core.OutputEmitterRef<ListActionEvent<T>>;
+    readonly reorder: _angular_core.OutputEmitterRef<T[]>;
+    readonly dragStart: _angular_core.OutputEmitterRef<T>;
     readonly toggle: _angular_core.OutputEmitterRef<ListToggleEvent<T>>;
     private readonly cells;
+    private readonly language;
+    private readonly viewport;
+    protected readonly copy: _angular_core.Signal<_nucleus_suite_pe_core.CommonCopy>;
+    protected readonly term: _angular_core.WritableSignal<string>;
+    private readonly chosenView;
+    protected readonly canChooseView: _angular_core.Signal<boolean>;
+    protected readonly view: _angular_core.Signal<"grid" | "rows">;
+    protected chooseView(value: 'grid' | 'rows'): void;
+    protected readonly filtered: _angular_core.Signal<T[]>;
+    protected readonly dragLocked: _angular_core.Signal<boolean>;
+    protected readonly showNoResults: _angular_core.Signal<boolean>;
+    protected onSearch(event: Event): void;
+    private readonly firstRow;
+    private readonly rowsOverride;
+    protected readonly compact: _angular_core.Signal<boolean>;
+    protected readonly rowsPerPage: _angular_core.Signal<number>;
+    protected readonly identityColumn: _angular_core.Signal<ListColumn<T> | null>;
+    protected readonly statusColumn: _angular_core.Signal<ListColumn<T> | null>;
+    protected readonly attributeColumns: _angular_core.Signal<readonly ListColumn<T>[]>;
+    protected readonly pagedRows: _angular_core.Signal<T[]>;
+    private readonly resetPage;
+    protected readonly page: _angular_core.Signal<number>;
+    protected readonly sortAllowed: (index: number, drag: CdkDrag<T>) => boolean;
+    protected onRowReorder(event: {
+        dragIndex?: number;
+        dropIndex?: number;
+    }): void;
+    protected onCardDrop(event: CdkDragDrop<unknown>): void;
+    private applyMove;
+    protected onPage(event: {
+        first?: number;
+        rows?: number;
+    }): void;
     protected readonly paginate: _angular_core.Signal<boolean>;
     protected readonly tableStyle: _angular_core.Signal<{
         'min-width': string;
@@ -905,6 +966,7 @@ declare class NucleusList<T extends object = Record<string, unknown>> {
     protected skeletonWidth(column: ListColumn<T>): string;
     protected cellTemplate(key: string): TemplateRef<unknown> | null;
     protected text(column: ListColumn<T>, row: T): string;
+    protected linkOf(column: ListColumn<T>, row: T): NucleusLinkTarget | null;
     protected tagOf(column: ListColumn<T>, row: T): ListTag | null;
     protected visibleActions(row: T): readonly ListAction<T>[];
     protected isActionLocked(entry: ListAction<T>, row: T): boolean;
@@ -914,7 +976,7 @@ declare class NucleusList<T extends object = Record<string, unknown>> {
     protected hintOf(column: ListColumn<T>, row: T): string;
     protected flip(column: ListColumn<T>, row: T): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NucleusList<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NucleusList<any>, "nucleus-list", never, { "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; }, { "action": "action"; "toggle": "toggle"; }, ["cells"], ["[nucleusListTitle]", "[nucleusListActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NucleusList<any>, "nucleus-list", never, { "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "empty": { "alias": "empty"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; "cards": { "alias": "cards"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "reorderGroup": { "alias": "reorderGroup"; "required": false; "isSignal": true; }; }, { "action": "action"; "reorder": "reorder"; "dragStart": "dragStart"; "toggle": "toggle"; }, ["cells"], ["[nucleusListTitle]", "[nucleusListActions]"], true, never>;
 }
 
 interface TreeRow {
@@ -979,6 +1041,16 @@ declare class NucleusAppearance {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NucleusAppearance, "nucleus-appearance", never, {}, {}, never, never, true, never>;
 }
 
+declare const NUCLEUS_NARROW_QUERY = "(max-width: 720px)";
+declare class NucleusViewport {
+    private readonly query;
+    private readonly _narrow;
+    readonly narrow: _angular_core.Signal<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NucleusViewport, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NucleusViewport>;
+}
+
 interface MenuTile {
     readonly label: string;
     readonly icon: string | null;
@@ -1214,5 +1286,5 @@ declare class NucleusShell {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NucleusShell, "nucleus-shell", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "activeNavId": { "alias": "activeNavId"; "required": false; "isSignal": true; }; "selectedMenuId": { "alias": "selectedMenuId"; "required": false; "isSignal": true; }; }, { "navSelect": "navSelect"; "menuSelect": "menuSelect"; }, never, ["[nucleusTop]", "*"], true, never>;
 }
 
-export { ACCENTS, CANVASES, COMMON_COPY, CONTROL_CONTRAST, DEFAULT_APPEARANCE, DENSITIES, EMPTY_GEO_VALUE, FIELD_TARGETS, FRAMES, GEO_COPY, LEGACY_THEMES, NO_PERMISSIONS, NUCLEUS_ACCENTS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_HOME, NUCLEUS_ICONS, NUCLEUS_ICON_CATALOG, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_SKIP_AUTH, NucleusAppearance, NucleusAuth, NucleusCache, NucleusCard, NucleusCell, NucleusColorPicker, NucleusEnterAdvance, NucleusFeedback, NucleusForm, NucleusGeo, NucleusGeoSelect, NucleusIconPicker, NucleusLanguage, NucleusList, NucleusLordicon, NucleusMark, NucleusMenu, NucleusMetric, NucleusMetrics, NucleusPage, NucleusPageActions, NucleusPreset, NucleusRecentApps, NucleusSessionAuth, NucleusShell, NucleusShortcut, NucleusShortcuts, NucleusStarfield, NucleusTabs, SHELL_COPY, SessionService, TEXT_CONTRAST, THEME_COPY, ThemeService, UserSyncService, accentById, accentLabelOf, accentOn, ariaKeysOf, auditAppearance, canvasById, clock, comboOf, commonCopyOf, consumeNucleusLogout, contrastIssue, contrastRatio, day, densityById, endOfDayUtc, fieldsIn, findMenuByRoute, flagOf, foldText, frameById, geoCopyOf, hasChildren, hasModifier, iconClassOf, iconNameOf, integer, isAccentPreference, isApplePlatform, isBeforeToday, isCanvasPreference, isDarkCanvas, isDensityId, isFieldSearchable, isFrameId, isHomeRoute, isNucleusConfigured, isOnOrBeforeToday, isReachable, isToday, isTypingTarget, isUnderRoute, isoDay, levelLabel, loadLordicon, loadNucleusConfig, matchMenuByRoute, matchesRow, meetsContrast, menuGlyph, menuTile, minutesAsClock, mixHex, money, moveTo, normalizeHomeRoute, normalizeKeys, nucleusAccessGuard, nucleusAuthInterceptor, nucleusErrorMessage, nucleusLang, nucleusLogoutUrl, nucleusParseDate, ownsUrl, percent, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusHome, provideNucleusTheme, qty, readableOn, relativeLuminance, resolveAccent, resolveFieldSize, routePath, searchIcons, selectableRows, shiftDay, shortcutHint, signedMoney, stamp, startOfDayUtc, themeCopyOf, toNumber, toggleCollapsed, visibleTreeRows };
-export type { Accent, AccentId, AccentOption, AccentPreference, AccessScope, AppSummary, AppUser, Appearance, AuthSyncRequest, Canvas, CanvasEffects, CanvasId, CanvasPreference, CanvasTokens, CardSize, CommonCopy, CommonCopySet, CompanyOption, CompanyRelation, CompanySummary, ConfirmRequest, ContrastIssue, Crumb, Density, DensityId, FieldKind, FieldOption, FieldSize, FieldSpan, FormField, FormValue, Frame, FrameId, FrameTokens, GeoCopy, GeoCopySet, GeoCountry, GeoDivision, GeoLevel, GeoPlace, GeoValue, GlobalAccess, LauncherApp, ListAction, ListActionEvent, ListAlign, ListColumn, ListColumnKind, ListTag, ListToggleEvent, MeResponse, MenuNode, MenuPermissions, MenuRow, MenuSection, MenuTile, MetricTone, NucleusConfig, NucleusIdentity, NucleusLang, SessionTicket, ShellCopy, ShellNavItem, ShortcutBinding, Site, SiteAccess, Subscription, TabItem, ThemeCopy, TreeRow, UserProfile };
+export { ACCENTS, CANVASES, COMMON_COPY, CONTROL_CONTRAST, DEFAULT_APPEARANCE, DENSITIES, EMPTY_GEO_VALUE, FIELD_TARGETS, FRAMES, GEO_COPY, LEGACY_THEMES, NO_PERMISSIONS, NUCLEUS_ACCENTS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_HOME, NUCLEUS_ICONS, NUCLEUS_ICON_CATALOG, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_NARROW_QUERY, NUCLEUS_SKIP_AUTH, NucleusAppearance, NucleusAuth, NucleusCache, NucleusCard, NucleusCell, NucleusColorPicker, NucleusEnterAdvance, NucleusFeedback, NucleusForm, NucleusGeo, NucleusGeoSelect, NucleusIconPicker, NucleusLanguage, NucleusLink, NucleusList, NucleusLordicon, NucleusMark, NucleusMenu, NucleusMetric, NucleusMetrics, NucleusPage, NucleusPageActions, NucleusPreset, NucleusRecentApps, NucleusSessionAuth, NucleusShell, NucleusShortcut, NucleusShortcuts, NucleusStarfield, NucleusTabs, NucleusViewport, SHELL_COPY, SessionService, TEXT_CONTRAST, THEME_COPY, ThemeService, UserSyncService, accentById, accentLabelOf, accentOn, ariaKeysOf, auditAppearance, canvasById, clock, comboOf, commonCopyOf, consumeNucleusLogout, contrastIssue, contrastRatio, day, densityById, endOfDayUtc, fieldsIn, findMenuByRoute, flagOf, foldText, frameById, geoCopyOf, hasChildren, hasModifier, iconClassOf, iconNameOf, integer, isAccentPreference, isApplePlatform, isBeforeToday, isCanvasPreference, isDarkCanvas, isDensityId, isFieldSearchable, isFrameId, isHomeRoute, isNucleusConfigured, isOnOrBeforeToday, isReachable, isToday, isTypingTarget, isUnderRoute, isoDay, levelLabel, loadLordicon, loadNucleusConfig, matchMenuByRoute, matchesRow, meetsContrast, menuGlyph, menuTile, minutesAsClock, mixHex, money, moveTo, normalizeHomeRoute, normalizeKeys, nucleusAccessGuard, nucleusAuthInterceptor, nucleusErrorMessage, nucleusLang, nucleusLogoutUrl, nucleusParseDate, ownsUrl, percent, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusHome, provideNucleusTheme, qty, readableOn, relativeLuminance, resolveAccent, resolveFieldSize, routePath, searchIcons, selectableRows, shiftDay, shortcutHint, signedMoney, stamp, startOfDayUtc, themeCopyOf, toNumber, toggleCollapsed, visibleTreeRows };
+export type { Accent, AccentId, AccentOption, AccentPreference, AccessScope, AppSummary, AppUser, Appearance, AuthSyncRequest, Canvas, CanvasEffects, CanvasId, CanvasPreference, CanvasTokens, CardSize, CommonCopy, CommonCopySet, CompanyOption, CompanyRelation, CompanySummary, ConfirmRequest, ContrastIssue, Crumb, Density, DensityId, FieldKind, FieldOption, FieldSize, FieldSpan, FormField, FormValue, Frame, FrameId, FrameTokens, GeoCopy, GeoCopySet, GeoCountry, GeoDivision, GeoLevel, GeoPlace, GeoValue, GlobalAccess, LauncherApp, ListAction, ListActionEvent, ListAlign, ListColumn, ListColumnKind, ListColumnRole, ListTag, ListToggleEvent, MeResponse, MenuNode, MenuPermissions, MenuRow, MenuSection, MenuTile, MetricTone, NucleusConfig, NucleusIdentity, NucleusLang, NucleusLinkTarget, SessionTicket, ShellCopy, ShellNavItem, ShortcutBinding, Site, SiteAccess, Subscription, TabItem, ThemeCopy, TreeRow, UserProfile };