@akcelik/strct 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/akcelik-strct.mjs +475 -430
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +98 -79
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
|
|
5
5
|
"author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
package/types/akcelik-strct.d.ts
CHANGED
|
@@ -366,6 +366,83 @@ declare class StrctTabs {
|
|
|
366
366
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTabs, "strct-tabs", never, {}, {}, ["tabs"], ["*"], true, never>;
|
|
367
367
|
}
|
|
368
368
|
|
|
369
|
+
/** A single entry in a data-driven menu. */
|
|
370
|
+
interface StrctMenuItem {
|
|
371
|
+
/** Entry text. Optional — omit it for a `divider`, where a label is meaningless. */
|
|
372
|
+
label?: string;
|
|
373
|
+
icon?: string;
|
|
374
|
+
/** Destructive styling. */
|
|
375
|
+
danger?: boolean;
|
|
376
|
+
disabled?: boolean;
|
|
377
|
+
/** Render a separator instead of an entry (label is ignored). */
|
|
378
|
+
divider?: boolean;
|
|
379
|
+
/** Nested submenu. */
|
|
380
|
+
children?: StrctMenuItem[];
|
|
381
|
+
/** Invoked on selection, with the trigger's `strctContextMenuData`. */
|
|
382
|
+
action?: (data?: unknown) => void;
|
|
383
|
+
/** Arbitrary payload. */
|
|
384
|
+
data?: unknown;
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* Floating menu panel — portaled into `<body>` (so it escapes overflow /
|
|
388
|
+
* transform clipping), positioned by its real measured size, with full keyboard
|
|
389
|
+
* navigation and recursive submenus. Usually created by `[strctContextMenu]`,
|
|
390
|
+
* but can be embedded directly with `submenu`.
|
|
391
|
+
*/
|
|
392
|
+
declare class StrctMenuPanel {
|
|
393
|
+
private readonly host;
|
|
394
|
+
readonly items: _angular_core.InputSignal<StrctMenuItem[]>;
|
|
395
|
+
readonly data: _angular_core.InputSignal<unknown>;
|
|
396
|
+
readonly x: _angular_core.InputSignal<number>;
|
|
397
|
+
readonly y: _angular_core.InputSignal<number>;
|
|
398
|
+
readonly submenu: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
399
|
+
readonly select: _angular_core.OutputEmitterRef<StrctMenuItem>;
|
|
400
|
+
readonly close: _angular_core.OutputEmitterRef<void>;
|
|
401
|
+
/** ArrowLeft inside a submenu — asks the parent to close it. */
|
|
402
|
+
readonly back: _angular_core.OutputEmitterRef<void>;
|
|
403
|
+
protected readonly posX: _angular_core.WritableSignal<number>;
|
|
404
|
+
protected readonly posY: _angular_core.WritableSignal<number>;
|
|
405
|
+
protected readonly flipLeft: _angular_core.WritableSignal<boolean>;
|
|
406
|
+
protected readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
407
|
+
protected readonly openSubIndex: _angular_core.WritableSignal<number | null>;
|
|
408
|
+
private readonly navIndices;
|
|
409
|
+
constructor();
|
|
410
|
+
private clampToViewport;
|
|
411
|
+
protected focusItem(i: number): void;
|
|
412
|
+
private move;
|
|
413
|
+
protected onHover(i: number): void;
|
|
414
|
+
protected onLeave(i: number): void;
|
|
415
|
+
protected onItemClick(item: StrctMenuItem, i: number, event: Event): void;
|
|
416
|
+
protected closeSub(): void;
|
|
417
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
418
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMenuPanel, never>;
|
|
419
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMenuPanel, "strct-menu-panel", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": false; "isSignal": true; }; "y": { "alias": "y"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "select": "select"; "close": "close"; "back": "back"; }, never, never, true, never>;
|
|
420
|
+
}
|
|
421
|
+
/**
|
|
422
|
+
* Right-click (context) menu driven by a data array. Attach to any trigger; the
|
|
423
|
+
* menu portals into `<body>` and runs each item's `action` on selection.
|
|
424
|
+
* <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
|
|
425
|
+
* (menuSelect)="onPick($event)">…</div>
|
|
426
|
+
*/
|
|
427
|
+
declare class StrctContextMenuTrigger implements OnDestroy {
|
|
428
|
+
private readonly appRef;
|
|
429
|
+
private readonly envInjector;
|
|
430
|
+
private readonly zone;
|
|
431
|
+
private readonly doc;
|
|
432
|
+
readonly items: _angular_core.InputSignal<StrctMenuItem[]>;
|
|
433
|
+
readonly data: _angular_core.InputSignal<unknown>;
|
|
434
|
+
readonly menuSelect: _angular_core.OutputEmitterRef<StrctMenuItem>;
|
|
435
|
+
private ref;
|
|
436
|
+
private readonly onClose;
|
|
437
|
+
protected onContextMenu(event: MouseEvent): void;
|
|
438
|
+
private openAt;
|
|
439
|
+
private readonly onOutside;
|
|
440
|
+
private closeMenu;
|
|
441
|
+
ngOnDestroy(): void;
|
|
442
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctContextMenuTrigger, never>;
|
|
443
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctContextMenuTrigger, "[strctContextMenu]", never, { "items": { "alias": "strctContextMenu"; "required": true; "isSignal": true; }; "data": { "alias": "strctContextMenuData"; "required": false; "isSignal": true; }; }, { "menuSelect": "menuSelect"; }, never, never, true, never>;
|
|
444
|
+
}
|
|
445
|
+
|
|
369
446
|
/** A node in the data-driven tree (`<strct-tree [nodes]="...">`). */
|
|
370
447
|
interface StrctTreeNodeData {
|
|
371
448
|
label: string;
|
|
@@ -381,6 +458,13 @@ interface StrctTreeNodeData {
|
|
|
381
458
|
/** Arbitrary payload returned with (nodeActivated). */
|
|
382
459
|
data?: unknown;
|
|
383
460
|
}
|
|
461
|
+
/** Per-node menu resolver for the data-driven tree — returns the items for one node. */
|
|
462
|
+
type StrctTreeNodeMenuFn = (node: StrctTreeNodeData) => StrctMenuItem[];
|
|
463
|
+
/** Payload of (nodeMenuSelect). */
|
|
464
|
+
interface StrctTreeMenuEvent {
|
|
465
|
+
node: StrctTreeNodeData;
|
|
466
|
+
item: StrctMenuItem;
|
|
467
|
+
}
|
|
384
468
|
/**
|
|
385
469
|
* Tree node. Two modes:
|
|
386
470
|
* - **Content:** nest `<strct-tree-node>` children manually.
|
|
@@ -399,10 +483,16 @@ declare class StrctTreeNode {
|
|
|
399
483
|
readonly badge: _angular_core.InputSignal<StrctIconBadge>;
|
|
400
484
|
readonly active: _angular_core.InputSignal<boolean>;
|
|
401
485
|
readonly expanded: _angular_core.ModelSignal<boolean>;
|
|
486
|
+
/** Per-node menu resolver (data mode); bubbles down the recursion. */
|
|
487
|
+
readonly nodeMenu: _angular_core.InputSignal<StrctTreeNodeMenuFn | null>;
|
|
402
488
|
/** Content-mode click. */
|
|
403
489
|
readonly activated: _angular_core.OutputEmitterRef<void>;
|
|
404
490
|
/** Data-mode click — carries the activated node (bubbles to the tree). */
|
|
405
491
|
readonly nodeActivated: _angular_core.OutputEmitterRef<StrctTreeNodeData>;
|
|
492
|
+
/** Data-mode right-click menu selection (bubbles to the tree). */
|
|
493
|
+
readonly nodeMenuSelect: _angular_core.OutputEmitterRef<StrctTreeMenuEvent>;
|
|
494
|
+
/** Right-click menu items for this node ([] when no resolver / not data mode). */
|
|
495
|
+
protected readonly menuItems: _angular_core.Signal<StrctMenuItem[]>;
|
|
406
496
|
private readonly childNodes;
|
|
407
497
|
/** Data-mode expansion (seeded from node.expanded on first toggle). */
|
|
408
498
|
private readonly dataExpanded;
|
|
@@ -414,8 +504,9 @@ declare class StrctTreeNode {
|
|
|
414
504
|
protected readonly isOpen: _angular_core.Signal<boolean>;
|
|
415
505
|
toggle(): void;
|
|
416
506
|
protected onActivate(): void;
|
|
507
|
+
protected onMenuSelect(item: StrctMenuItem): void;
|
|
417
508
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctTreeNode, never>;
|
|
418
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTreeNode, "strct-tree-node", never, { "node": { "alias": "node"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "activated": "activated"; "nodeActivated": "nodeActivated"; }, ["childNodes"], ["[strctTreeTrailing]", "*"], true, never>;
|
|
509
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTreeNode, "strct-tree-node", never, { "node": { "alias": "node"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "activated": "activated"; "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; }, ["childNodes"], ["[strctTreeTrailing]", "*"], true, never>;
|
|
419
510
|
}
|
|
420
511
|
/**
|
|
421
512
|
* Root container for a tree. Either project `<strct-tree-node>` children, or
|
|
@@ -425,10 +516,14 @@ declare class StrctTreeNode {
|
|
|
425
516
|
declare class StrctTree {
|
|
426
517
|
/** Data-driven node list; when set, projected content is ignored. */
|
|
427
518
|
readonly nodes: _angular_core.InputSignal<StrctTreeNodeData[] | null>;
|
|
519
|
+
/** Per-node right-click menu resolver. */
|
|
520
|
+
readonly nodeMenu: _angular_core.InputSignal<StrctTreeNodeMenuFn | null>;
|
|
428
521
|
/** Emitted when any data-driven node is clicked. */
|
|
429
522
|
readonly nodeActivated: _angular_core.OutputEmitterRef<StrctTreeNodeData>;
|
|
523
|
+
/** Emitted when a data-driven node's right-click menu item is chosen. */
|
|
524
|
+
readonly nodeMenuSelect: _angular_core.OutputEmitterRef<StrctTreeMenuEvent>;
|
|
430
525
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctTree, never>;
|
|
431
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; }, never, ["*"], true, never>;
|
|
526
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; }, never, ["*"], true, never>;
|
|
432
527
|
}
|
|
433
528
|
|
|
434
529
|
type StrctModalSize = 'sm' | 'md' | 'lg';
|
|
@@ -551,82 +646,6 @@ declare class StrctSubmenu {
|
|
|
551
646
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSubmenu, "strct-submenu", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["[strctSubmenuLabel]", "*"], true, never>;
|
|
552
647
|
}
|
|
553
648
|
|
|
554
|
-
/** A single entry in a data-driven menu. */
|
|
555
|
-
interface StrctMenuItem {
|
|
556
|
-
label: string;
|
|
557
|
-
icon?: string;
|
|
558
|
-
/** Destructive styling. */
|
|
559
|
-
danger?: boolean;
|
|
560
|
-
disabled?: boolean;
|
|
561
|
-
/** Render a separator instead of an entry (label is ignored). */
|
|
562
|
-
divider?: boolean;
|
|
563
|
-
/** Nested submenu. */
|
|
564
|
-
children?: StrctMenuItem[];
|
|
565
|
-
/** Invoked on selection, with the trigger's `strctContextMenuData`. */
|
|
566
|
-
action?: (data?: unknown) => void;
|
|
567
|
-
/** Arbitrary payload. */
|
|
568
|
-
data?: unknown;
|
|
569
|
-
}
|
|
570
|
-
/**
|
|
571
|
-
* Floating menu panel — portaled into `<body>` (so it escapes overflow /
|
|
572
|
-
* transform clipping), positioned by its real measured size, with full keyboard
|
|
573
|
-
* navigation and recursive submenus. Usually created by `[strctContextMenu]`,
|
|
574
|
-
* but can be embedded directly with `submenu`.
|
|
575
|
-
*/
|
|
576
|
-
declare class StrctMenuPanel {
|
|
577
|
-
private readonly host;
|
|
578
|
-
readonly items: _angular_core.InputSignal<StrctMenuItem[]>;
|
|
579
|
-
readonly data: _angular_core.InputSignal<unknown>;
|
|
580
|
-
readonly x: _angular_core.InputSignal<number>;
|
|
581
|
-
readonly y: _angular_core.InputSignal<number>;
|
|
582
|
-
readonly submenu: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
583
|
-
readonly select: _angular_core.OutputEmitterRef<StrctMenuItem>;
|
|
584
|
-
readonly close: _angular_core.OutputEmitterRef<void>;
|
|
585
|
-
/** ArrowLeft inside a submenu — asks the parent to close it. */
|
|
586
|
-
readonly back: _angular_core.OutputEmitterRef<void>;
|
|
587
|
-
protected readonly posX: _angular_core.WritableSignal<number>;
|
|
588
|
-
protected readonly posY: _angular_core.WritableSignal<number>;
|
|
589
|
-
protected readonly flipLeft: _angular_core.WritableSignal<boolean>;
|
|
590
|
-
protected readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
591
|
-
protected readonly openSubIndex: _angular_core.WritableSignal<number | null>;
|
|
592
|
-
private readonly navIndices;
|
|
593
|
-
constructor();
|
|
594
|
-
private clampToViewport;
|
|
595
|
-
protected focusItem(i: number): void;
|
|
596
|
-
private move;
|
|
597
|
-
protected onHover(i: number): void;
|
|
598
|
-
protected onLeave(i: number): void;
|
|
599
|
-
protected onItemClick(item: StrctMenuItem, i: number, event: Event): void;
|
|
600
|
-
protected closeSub(): void;
|
|
601
|
-
protected onKeydown(event: KeyboardEvent): void;
|
|
602
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMenuPanel, never>;
|
|
603
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMenuPanel, "strct-menu-panel", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": false; "isSignal": true; }; "y": { "alias": "y"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "select": "select"; "close": "close"; "back": "back"; }, never, never, true, never>;
|
|
604
|
-
}
|
|
605
|
-
/**
|
|
606
|
-
* Right-click (context) menu driven by a data array. Attach to any trigger; the
|
|
607
|
-
* menu portals into `<body>` and runs each item's `action` on selection.
|
|
608
|
-
* <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
|
|
609
|
-
* (menuSelect)="onPick($event)">…</div>
|
|
610
|
-
*/
|
|
611
|
-
declare class StrctContextMenuTrigger implements OnDestroy {
|
|
612
|
-
private readonly appRef;
|
|
613
|
-
private readonly envInjector;
|
|
614
|
-
private readonly zone;
|
|
615
|
-
private readonly doc;
|
|
616
|
-
readonly items: _angular_core.InputSignal<StrctMenuItem[]>;
|
|
617
|
-
readonly data: _angular_core.InputSignal<unknown>;
|
|
618
|
-
readonly menuSelect: _angular_core.OutputEmitterRef<StrctMenuItem>;
|
|
619
|
-
private ref;
|
|
620
|
-
private readonly onClose;
|
|
621
|
-
protected onContextMenu(event: MouseEvent): void;
|
|
622
|
-
private openAt;
|
|
623
|
-
private readonly onOutside;
|
|
624
|
-
private closeMenu;
|
|
625
|
-
ngOnDestroy(): void;
|
|
626
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctContextMenuTrigger, never>;
|
|
627
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctContextMenuTrigger, "[strctContextMenu]", never, { "items": { "alias": "strctContextMenu"; "required": true; "isSignal": true; }; "data": { "alias": "strctContextMenuData"; "required": false; "isSignal": true; }; }, { "menuSelect": "menuSelect"; }, never, never, true, never>;
|
|
628
|
-
}
|
|
629
|
-
|
|
630
649
|
/** A single wizard step. `label` names it in the step header. */
|
|
631
650
|
declare class StrctStep {
|
|
632
651
|
readonly label: _angular_core.InputSignal<string>;
|
|
@@ -1583,4 +1602,4 @@ declare class StrctToastOutlet {
|
|
|
1583
1602
|
}
|
|
1584
1603
|
|
|
1585
1604
|
export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
|
|
1586
|
-
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartStatus, StrctChartType, StrctColumn, StrctDatagridColumn, StrctDonutSegment, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRow, StrctRowId, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctTagStatus, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeNodeData };
|
|
1605
|
+
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartStatus, StrctChartType, StrctColumn, StrctDatagridColumn, StrctDonutSegment, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRow, StrctRowId, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctTagStatus, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn };
|