@akcelik/strct 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -93,11 +93,213 @@ interface StrctThresholds {
  * storage, VMs …). Object state — running / stopped / maintenance — is layered
  * on with the `badge` input rather than a separate icon per state.
  */
+declare const STRCT_ICON_DEFS: {
+    hexagon: string;
+    chevronRight: string;
+    chevronLeft: string;
+    chevronDoubleRight: string;
+    chevronDown: string;
+    compass: string;
+    close: string;
+    check: string;
+    menu: string;
+    dots: string;
+    ellipsis: string;
+    search: string;
+    calendar: string;
+    eye: string;
+    upload: string;
+    download: string;
+    droplet: string;
+    sortAsc: string;
+    sortDesc: string;
+    sortNone: string;
+    sun: string;
+    moon: string;
+    info: string;
+    warning: string;
+    critical: string;
+    success: string;
+    bell: string;
+    heart: string;
+    layers: string;
+    grid: string;
+    form: string;
+    chart: string;
+    bars: string;
+    sidebar: string;
+    palette: string;
+    gauge: string;
+    copy: string;
+    code: string;
+    book: string;
+    terminal: string;
+    folder: string;
+    template: string;
+    file: string;
+    clipboard: string;
+    tag: string;
+    plus: string;
+    minus: string;
+    pencil: string;
+    trash: string;
+    refresh: string;
+    filter: string;
+    settings: string;
+    user: string;
+    logout: string;
+    undo: string;
+    redo: string;
+    arrowUp: string;
+    arrowDown: string;
+    arrowLeft: string;
+    arrowRight: string;
+    externalLink: string;
+    datacenter: string;
+    rack: string;
+    cluster: string;
+    host: string;
+    vm: string;
+    switch: string;
+    storage: string;
+    network: string;
+    cpu: string;
+    memory: string;
+    disk: string;
+    port: string;
+    power: string;
+    nic: string;
+    hba: string;
+    ethernet: string;
+    resourcePool: string;
+    portGroup: string;
+    pod: string;
+    deployment: string;
+    service: string;
+    node: string;
+    ingress: string;
+    cloud: string;
+    container: string;
+    firewall: string;
+    shield: string;
+    certificate: string;
+    key: string;
+    metrics: string;
+    logs: string;
+    trace: string;
+    universalAccess: string;
+    wheelchair: string;
+    hearing: string;
+    lowVision: string;
+    braille: string;
+    signLanguage: string;
+    siren: string;
+    alarm: string;
+    megaphone: string;
+    flag: string;
+    shieldAlert: string;
+    shieldCheck: string;
+    running: string;
+    stopped: string;
+    paused: string;
+    maintenance: string;
+    sync: string;
+    snapshot: string;
+    lock: string;
+    clock: string;
+    history: string;
+    timer: string;
+    hourglass: string;
+    mail: string;
+    chat: string;
+    help: string;
+    home: string;
+    link: string;
+    globe: string;
+    star: string;
+    pin: string;
+    share: string;
+    archive: string;
+    zoomIn: string;
+    zoomOut: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    listView: string;
+    dragHandle: string;
+    chevronUp: string;
+    chevronDoubleLeft: string;
+    chevronDoubleUp: string;
+    chevronDoubleDown: string;
+    dns: string;
+    vpn: string;
+    api: string;
+    bolt: string;
+    queue: string;
+    users: string;
+    login: string;
+    unlock: string;
+    ban: string;
+    vendorVmware: string;
+    vendorCisco: string;
+    vendorHpe: string;
+    vendorDell: string;
+    vendorKaytus: string;
+    opticalDisc: string;
+    ssd: string;
+    usb: string;
+    sdCard: string;
+    tape: string;
+    gpu: string;
+    psu: string;
+    fan: string;
+    battery: string;
+    ups: string;
+    motherboard: string;
+    sensor: string;
+    thermometer: string;
+    sparkles: string;
+    brain: string;
+    robot: string;
+    neuralNetwork: string;
+    aiChip: string;
+    wand: string;
+    model: string;
+    router: string;
+    loadBalancer: string;
+    wifi: string;
+    bluetooth: string;
+    monitor: string;
+    keyboard: string;
+    printer: string;
+};
+declare const STRCT_ICON_DERIVED_DEFS: {
+    eyeOff: string;
+    bellOff: string;
+    wifiOff: string;
+    cloudOff: string;
+    linkOff: string;
+    unlink: string;
+    webhook: string;
+};
+/**
+ * Every built-in icon name, as a compile-time union — a mistyped name is a
+ * build error instead of a silently empty box:
+ *
+ *   const icon: StrctIconName = 'shieldCheck'; // ✓
+ *   const icon: StrctIconName = 'sheildCheck'; // ✗ compile error
+ */
+type StrctIconName = keyof typeof STRCT_ICON_DEFS | keyof typeof STRCT_ICON_DERIVED_DEFS;
+/**
+ * Icon name → glyph markup. Open (`Record<string, string>`) on purpose so
+ * `registerStrctIcon` can add app-specific names at runtime.
+ */
 declare const STRCT_ICONS: Record<string, string>;
+/** All built-in icon names — greppable, iterable (galleries, docs, tests). */
+declare const STRCT_ICON_NAMES: readonly StrctIconName[];
 /** Icon names grouped for galleries / documentation. */
 declare const STRCT_ICON_GROUPS: {
     label: string;
-    names: string[];
+    names: StrctIconName[];
 }[];
 /**
  * Full-SVG icons that keep their own viewBox and colors (no stroke wrapper).
@@ -123,15 +325,13 @@ declare function registerStrctIcon(name: string, content: string, options?: {
  * green disc ▶ running · amber disc ⏸ paused · grey disc ■ off.
  */
 type StrctIconBadge = 'none' | 'success' | 'warning' | 'critical' | 'running' | 'paused' | 'off' | 'info' | 'maintenance';
-/**
- * Inline stroke icon. `<strct-icon name="host" badge="success" />` renders the host
- * glyph with a green status dot (a "running host"). Unknown names render
- * nothing rather than throwing.
- */
 declare class StrctIcon {
     private readonly sanitizer;
-    /** Icon name from the STRCT_ICONS registry. */
-    readonly name: _angular_core.InputSignal<string>;
+    /**
+     * Icon name. Typed to autocomplete the built-in set while still accepting
+     * any string, since `registerStrctIcon` can add names at runtime.
+     */
+    readonly name: _angular_core.InputSignal<StrctIconName | (string & {})>;
     /** Icon size in pixels. */
     readonly size: _angular_core.InputSignal<number>;
     /** Stroke width for outline icons. */
@@ -988,18 +1188,38 @@ declare class StrctDrawer {
  *     <strct-dropdown-item>Rename</strct-dropdown-item>
  *     <strct-dropdown-item critical>Delete</strct-dropdown-item>
  *   </strct-dropdown>
+ *
+ * With `popover`, the panel holds *form controls* instead of menu items: an
+ * inner click no longer closes it (only outside click / Escape do), and the
+ * semantics switch from `role="menu"` to a labeled `role="dialog"` — a panel
+ * of selects is not a menu to a screen reader either:
+ *
+ *   <strct-dropdown popover popoverLabel="Filters">
+ *     <button strct-button strctDropdownTrigger>Filters</button>
+ *     <strct-field label="Severity">…</strct-field>
+ *   </strct-dropdown>
  */
 declare class StrctDropdown {
     private readonly host;
     /** Horizontal alignment of the menu. */
     readonly align: _angular_core.InputSignal<"end" | "start">;
+    /**
+     * Popover mode for panels holding form controls (filter/settings panels):
+     * inner clicks never close the panel — only outside click / Escape do —
+     * and it renders as a labeled `role="dialog"` instead of a menu.
+     */
+    readonly popover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name of the popover dialog (localizable). */
+    readonly popoverLabel: _angular_core.InputSignal<string>;
     readonly open: _angular_core.WritableSignal<boolean>;
     toggle(): void;
     close(): void;
+    /** Menu items close on activation; popover form controls never do. */
+    protected onInnerActivate(): void;
     protected onDocClick(event: MouseEvent): void;
     protected onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdown, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdown, "strct-dropdown", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownTrigger]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdown, "strct-dropdown", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "popover": { "alias": "popover"; "required": false; "isSignal": true; }; "popoverLabel": { "alias": "popoverLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownTrigger]", "*"], true, never>;
 }
 /** A selectable row inside a `<strct-dropdown>`. */
 declare class StrctDropdownItem {
@@ -1261,9 +1481,24 @@ declare class StrctCommandPalette {
     readonly emptyText: _angular_core.InputSignal<string>;
     /** Maximum rendered results. */
     readonly maxResults: _angular_core.InputSignal<number>;
+    /**
+     * Internal ranked filtering. Set `false` for a **server-backed** palette:
+     * items render in the order given (you already filtered them) and the query
+     * reaches you through the two-way `query` model. `maxResults` still caps
+     * rendering.
+     */
+    readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a "searching" row while server results are in flight. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Localizable text of the loading row. */
+    readonly loadingText: _angular_core.InputSignal<string>;
     /** Emitted when a command is chosen (Enter or click); the palette closes. */
     readonly picked: _angular_core.OutputEmitterRef<StrctCommandItem>;
-    protected readonly query: _angular_core.WritableSignal<string>;
+    /**
+     * The typed query (two-way). The palette still owns typing and keyboard
+     * behaviour; consumers observe it to serve results asynchronously.
+     */
+    readonly query: _angular_core.ModelSignal<string>;
     protected readonly activeIndex: _angular_core.WritableSignal<number>;
     protected readonly listId: string;
     private previousActive;
@@ -1279,7 +1514,7 @@ declare class StrctCommandPalette {
     protected pick(item: StrctCommandItem): void;
     protected close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCommandPalette, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCommandPalette, "strct-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCommandPalette, "strct-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; "query": "queryChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1395,6 +1630,12 @@ declare class StrctCode {
     readonly collapsed: _angular_core.ModelSignal<boolean>;
     /** Show a line-number gutter (numbers are never copied — `code` is). */
     readonly lineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Soft-wrap long unbroken text (PEM/CSR blocks, base64, long commands) so a
+     * dialog never scrolls horizontally. Wrapping breaks the gutter's visual
+     * alignment, so `wrap` takes precedence and hides `lineNumbers`.
+     */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Scroll the body past this height (px); null grows freely. */
     readonly maxHeight: _angular_core.InputSignal<number | null>;
     /** Localizable labels for the collapse toggle. */
@@ -1402,7 +1643,7 @@ declare class StrctCode {
     readonly expandLabel: _angular_core.InputSignal<string>;
     protected readonly lineNos: _angular_core.Signal<number[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCode, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCode, "strct-code", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCode, "strct-code", never, { "code": { "alias": "code"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "copyable": { "alias": "copyable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, never, true, never>;
 }
 
 /** One active filter chip in a {@link StrctFilterBar}. */
@@ -3324,5 +3565,5 @@ declare class StrctEmptyState {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctEmptyState, "strct-empty-state", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-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, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, 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, strctValidationIcon, strctValidationTone };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, 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, strctValidationIcon, strctValidationTone };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };