@akcelik/strct 0.5.30 → 0.6.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 +124 -38
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +52 -15
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akcelik/strct",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.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
|
@@ -483,30 +483,51 @@ declare class StrctMenuPanel {
|
|
|
483
483
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMenuPanel, never>;
|
|
484
484
|
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>;
|
|
485
485
|
}
|
|
486
|
+
/** Options for {@link StrctMenuService.open}. */
|
|
487
|
+
interface StrctMenuOpenOptions {
|
|
488
|
+
/** Viewport x of the menu's top-left (clamped/flipped to stay on screen). */
|
|
489
|
+
x: number;
|
|
490
|
+
/** Viewport y of the menu's top-left. */
|
|
491
|
+
y: number;
|
|
492
|
+
items: StrctMenuItem[];
|
|
493
|
+
/** Payload passed to each item's `action`. */
|
|
494
|
+
data?: unknown;
|
|
495
|
+
/** Called with the chosen item (after its `action` runs). */
|
|
496
|
+
onSelect?: (item: StrctMenuItem) => void;
|
|
497
|
+
}
|
|
486
498
|
/**
|
|
487
|
-
*
|
|
488
|
-
*
|
|
489
|
-
*
|
|
490
|
-
* (menuSelect)="onPick($event)">…</div>
|
|
499
|
+
* Imperatively opens the data-driven menu panel, portaled into `<body>`. Shared
|
|
500
|
+
* by the `[strctContextMenu]` directive (right-click) and any click trigger such
|
|
501
|
+
* as the datagrid row-action button. Only one menu is open at a time.
|
|
491
502
|
*/
|
|
492
|
-
declare class
|
|
503
|
+
declare class StrctMenuService {
|
|
493
504
|
private readonly appRef;
|
|
494
505
|
private readonly envInjector;
|
|
495
506
|
private readonly zone;
|
|
496
507
|
private readonly doc;
|
|
508
|
+
private ref;
|
|
509
|
+
open(opts: StrctMenuOpenOptions): void;
|
|
510
|
+
private readonly onClose;
|
|
511
|
+
private readonly onOutside;
|
|
512
|
+
close(): void;
|
|
513
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMenuService, never>;
|
|
514
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<StrctMenuService>;
|
|
515
|
+
}
|
|
516
|
+
/**
|
|
517
|
+
* Right-click (context) menu driven by a data array. Attach to any trigger; the
|
|
518
|
+
* menu portals into `<body>` and runs each item's `action` on selection.
|
|
519
|
+
* <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
|
|
520
|
+
* (menuSelect)="onPick($event)">…</div>
|
|
521
|
+
*/
|
|
522
|
+
declare class StrctContextMenuTrigger {
|
|
523
|
+
private readonly menu;
|
|
497
524
|
/** Menu items to display. */
|
|
498
525
|
readonly items: _angular_core.InputSignal<StrctMenuItem[]>;
|
|
499
526
|
/** Arbitrary payload passed to item actions. */
|
|
500
527
|
readonly data: _angular_core.InputSignal<unknown>;
|
|
501
528
|
/** Emitted when a menu item is selected. */
|
|
502
529
|
readonly menuSelect: _angular_core.OutputEmitterRef<StrctMenuItem>;
|
|
503
|
-
private ref;
|
|
504
|
-
private readonly onClose;
|
|
505
530
|
protected onContextMenu(event: MouseEvent): void;
|
|
506
|
-
private openAt;
|
|
507
|
-
private readonly onOutside;
|
|
508
|
-
private closeMenu;
|
|
509
|
-
ngOnDestroy(): void;
|
|
510
531
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctContextMenuTrigger, never>;
|
|
511
532
|
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>;
|
|
512
533
|
}
|
|
@@ -654,7 +675,7 @@ declare class StrctModal {
|
|
|
654
675
|
declare class StrctDropdown {
|
|
655
676
|
private readonly host;
|
|
656
677
|
/** Horizontal alignment of the menu. */
|
|
657
|
-
readonly align: _angular_core.InputSignal<"
|
|
678
|
+
readonly align: _angular_core.InputSignal<"end" | "start">;
|
|
658
679
|
readonly open: _angular_core.WritableSignal<boolean>;
|
|
659
680
|
toggle(): void;
|
|
660
681
|
close(): void;
|
|
@@ -1495,10 +1516,22 @@ declare class StrctDatagrid {
|
|
|
1495
1516
|
* that replace the row objects. Defaults to object identity.
|
|
1496
1517
|
*/
|
|
1497
1518
|
readonly rowId: _angular_core.InputSignal<StrctRowId | null>;
|
|
1519
|
+
/**
|
|
1520
|
+
* Per-row action menu resolver. When set, each row gets a trailing actions
|
|
1521
|
+
* column with a vertical-dots (kebab) button that opens this row's menu.
|
|
1522
|
+
* [rowActions]="(row) => [{ label: 'Open', action: () => open(row) }, …]"
|
|
1523
|
+
*/
|
|
1524
|
+
readonly rowActions: _angular_core.InputSignal<((row: StrctRow) => StrctMenuItem[]) | null>;
|
|
1498
1525
|
/** Emitted when the selection changes. */
|
|
1499
1526
|
readonly selectionChange: _angular_core.OutputEmitterRef<StrctRow[]>;
|
|
1500
1527
|
/** Emitted when the refresh button is clicked. */
|
|
1501
1528
|
readonly syncChange: _angular_core.OutputEmitterRef<void>;
|
|
1529
|
+
/** Emitted when a row's action-menu item is chosen. */
|
|
1530
|
+
readonly rowAction: _angular_core.OutputEmitterRef<{
|
|
1531
|
+
row: StrctRow;
|
|
1532
|
+
item: StrctMenuItem;
|
|
1533
|
+
}>;
|
|
1534
|
+
private readonly menu;
|
|
1502
1535
|
protected readonly detailDef: _angular_core.Signal<StrctRowDetailDef | undefined>;
|
|
1503
1536
|
protected readonly actionBarDef: _angular_core.Signal<StrctDatagridActionBar | undefined>;
|
|
1504
1537
|
private readonly cellDefs;
|
|
@@ -1524,6 +1557,8 @@ declare class StrctDatagrid {
|
|
|
1524
1557
|
protected readonly canExpand: _angular_core.Signal<boolean>;
|
|
1525
1558
|
protected readonly canDetail: _angular_core.Signal<boolean>;
|
|
1526
1559
|
protected readonly paneOpen: _angular_core.Signal<boolean>;
|
|
1560
|
+
/** Whether to render the trailing row-actions (kebab) column. */
|
|
1561
|
+
protected readonly canActions: _angular_core.Signal<boolean>;
|
|
1527
1562
|
/** Only the first column is shown while the detail pane is open. */
|
|
1528
1563
|
protected readonly visibleColumns: _angular_core.Signal<StrctDatagridColumn[]>;
|
|
1529
1564
|
protected readonly sorted: _angular_core.Signal<StrctRow[]>;
|
|
@@ -1540,6 +1575,8 @@ declare class StrctDatagrid {
|
|
|
1540
1575
|
* so row cells remain selectable for copy). */
|
|
1541
1576
|
openDetail(row: StrctRow): void;
|
|
1542
1577
|
closePane(): void;
|
|
1578
|
+
/** Open the row-action menu next to the clicked kebab button. */
|
|
1579
|
+
protected openRowMenu(row: StrctRow, event: MouseEvent): void;
|
|
1543
1580
|
sortBy(key: string): void;
|
|
1544
1581
|
protected sortIcon(key: string): string;
|
|
1545
1582
|
protected ariaSort(key: string): 'ascending' | 'descending' | 'none';
|
|
@@ -1556,7 +1593,7 @@ declare class StrctDatagrid {
|
|
|
1556
1593
|
private commitSelection;
|
|
1557
1594
|
private compare;
|
|
1558
1595
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDatagrid, never>;
|
|
1559
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "syncChange": "syncChange"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
|
|
1596
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
|
|
1560
1597
|
}
|
|
1561
1598
|
|
|
1562
1599
|
/** Timeline node state colors. */
|
|
@@ -1823,5 +1860,5 @@ declare class StrctToastOutlet {
|
|
|
1823
1860
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctToastOutlet, "strct-toast-outlet", never, {}, {}, never, never, true, never>;
|
|
1824
1861
|
}
|
|
1825
1862
|
|
|
1826
|
-
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, StrctShellService, 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 };
|
|
1827
|
-
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 };
|
|
1863
|
+
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, StrctMenuService, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctShellService, 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 };
|
|
1864
|
+
export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartStatus, StrctChartType, StrctColumn, StrctDatagridColumn, StrctDonutSegment, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuOpenOptions, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRow, StrctRowId, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctTagStatus, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn };
|