@akcelik/strct 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "1.3.0",
+  "version": "1.5.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

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy, TemplateRef } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
-import * as _akcelik_strct from '@akcelik/strct';
 import { ControlValueAccessor } from '@angular/forms';
+import * as _akcelik_strct from '@akcelik/strct';
 
 /** Available color palettes. */
 type StrctPalette = 'arctic' | 'ember' | 'sage';
@@ -319,6 +319,37 @@ declare class StrctLogin {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctLogin, "strct-login", never, { "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "split": { "alias": "split"; "required": false; "isSignal": true; }; }, {}, never, ["[strctLoginAside]", "[strctLoginMain]", "*"], true, never>;
 }
 
+/** Marks the breadcrumb row projected above the title. */
+declare class StrctPageHeaderCrumbs {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctPageHeaderCrumbs, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctPageHeaderCrumbs, "[strctPageHeaderCrumbs]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the action buttons aligned to the end of the title row. */
+declare class StrctPageHeaderActions {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctPageHeaderActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctPageHeaderActions, "[strctPageHeaderActions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Page header — the top of every console object page: an optional breadcrumb
+ * row, a title + subtitle, and actions aligned to the end. Default content
+ * projects below the title row (status badges, meta strips).
+ *
+ *   <strct-page-header title="hv-02" subtitle="Hypervisor · cluster-01">
+ *     <strct-breadcrumb strctPageHeaderCrumbs>…</strct-breadcrumb>
+ *     <button strct-button strctPageHeaderActions variant="primary">Migrate</button>
+ *   </strct-page-header>
+ */
+declare class StrctPageHeader {
+    /** Page title (an h1). */
+    readonly title: _angular_core.InputSignal<string>;
+    /** One-line description under the title. */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Draw a hairline divider under the header. */
+    readonly divider: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctPageHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctPageHeader, "strct-page-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; }, {}, never, ["[strctPageHeaderCrumbs]", "[strctPageHeaderActions]", "*"], true, never>;
+}
+
 /** Button visual variants. */
 type StrctButtonVariant = 'primary' | 'critical' | 'outline' | 'flat' | 'neutral';
 /** Button size variants. */
@@ -1260,6 +1291,159 @@ declare class StrctKbd {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctKbd, "strct-kbd", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Compact search pill — the pattern from the docs header: a leading search
+ * icon, a label / input and an optional keyboard-hint chip. Two modes:
+ *
+ *  - **input** (default): a real search field. Two-way `value` (also
+ *    CVA-compatible), `(search)` emits on Enter, Escape / the × clears.
+ *
+ *      <strct-searchbox [(value)]="q" (search)="run($event)" />
+ *
+ *  - **`trigger`**: a button that only announces activation — the classic
+ *    "fake search that opens the command palette" header pattern:
+ *
+ *      <strct-searchbox trigger hint="⌘K" (activated)="palette.open.set(true)" />
+ */
+declare class StrctSearchbox implements ControlValueAccessor {
+    private readonly host;
+    /** Placeholder text (and the trigger mode's label). */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Keyboard-hint chip (e.g. "⌘K"); hidden while typing. */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Render as an activation button instead of a real input (palette opener). */
+    readonly trigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show the × clear button when there is a value. */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label; falls back to `placeholder`. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Accessible label of the clear button (localizable). */
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    /** Current text (two-way; also drives the CVA value). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Enter pressed in input mode — run the search with the current text. */
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    /** Trigger mode clicked (open your command palette / search surface). */
+    readonly activated: _angular_core.OutputEmitterRef<void>;
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
+    readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    protected onTouched: () => void;
+    protected onInput(event: Event): void;
+    /** Clear the text (Escape / the × button). */
+    clear(): void;
+    /** Focus the input programmatically (e.g. from a global shortcut). */
+    focus(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctSearchbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSearchbox, "strct-searchbox", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; "activated": "activated"; }, never, never, true, never>;
+}
+
+/**
+ * Click-to-copy chip with built-in feedback: an icon (or icon + label) button
+ * that writes `text` to the clipboard and flips to a ✓ "Copied" state for a
+ * moment. The console workhorse for UUIDs, IPs, serials and snippets:
+ *
+ *   <strct-copy text="172.16.75.100" />
+ *   <strct-copy [text]="host.id" label="Copy ID" />
+ */
+declare class StrctCopy {
+    private readonly destroyRef;
+    /** The text written to the clipboard. */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Optional visible label next to the icon (icon-only by default). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Accessible label; falls back to `copyLabel`. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Localizable strings. */
+    readonly copyLabel: _angular_core.InputSignal<string>;
+    readonly copiedLabel: _angular_core.InputSignal<string>;
+    /** Emitted after a successful copy, with the copied text. */
+    readonly copied: _angular_core.OutputEmitterRef<string>;
+    protected readonly done: _angular_core.WritableSignal<boolean>;
+    private timer;
+    constructor();
+    /** Write `text` to the clipboard and show the ✓ feedback. */
+    copy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCopy, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCopy, "strct-copy", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "copyLabel": { "alias": "copyLabel"; "required": false; "isSignal": true; }; "copiedLabel": { "alias": "copiedLabel"; "required": false; "isSignal": true; }; }, { "copied": "copied"; }, never, never, true, never>;
+}
+
+/**
+ * Copyable mono code / rendered-config block — the component form of the
+ * `<details><pre>` pattern consoles keep hand-rolling. A header row carries an
+ * optional title, a language tag, a copy button and (when `collapsible`) a
+ * chevron; the body is a scrollable, keyboard-focusable `<pre>`.
+ *
+ *   <strct-code [code]="yaml" language="yaml" title="cloud-init" collapsible />
+ */
+declare class StrctCode {
+    /** The code / rendered config text (copied verbatim). */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Header title (e.g. a filename). */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Small uppercase language tag (yaml, json, bash …). */
+    readonly language: _angular_core.InputSignal<string>;
+    /** Show the copy button. */
+    readonly copyable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapse to just the header (the `<details><pre>` pattern, done right). */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapsed state (two-way; only meaningful with `collapsible`). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Show a line-number gutter (numbers are never copied — `code` is). */
+    readonly lineNumbers: _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. */
+    readonly collapseLabel: _angular_core.InputSignal<string>;
+    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>;
+}
+
+/** One active filter chip in a {@link StrctFilterBar}. */
+interface StrctFilterChip {
+    /** Stable identity, returned with (removed). */
+    id: string;
+    /** Chip text, e.g. "state: running". */
+    label: string;
+    /** Arbitrary payload carried back with (removed). */
+    data?: unknown;
+}
+/**
+ * The standard strip above a data grid: a search field, the active filter
+ * chips (each removable), a result count and a clear-all action. The bar owns
+ * no filtering logic — it renders state and announces intent:
+ *
+ *   <strct-filter-bar [(query)]="q" [filters]="chips" [count]="rows.length"
+ *                     (removed)="drop($event)" (cleared)="reset()" />
+ */
+declare class StrctFilterBar {
+    /** Search text (two-way; forwards to the embedded searchbox). */
+    readonly query: _angular_core.ModelSignal<string>;
+    /** Active filter chips. */
+    readonly filters: _angular_core.InputSignal<StrctFilterChip[]>;
+    /** Result count shown at the end; null hides it. */
+    readonly count: _angular_core.InputSignal<number | null>;
+    /** Localizable strings. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly countLabel: _angular_core.InputSignal<string>;
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    readonly removeLabel: _angular_core.InputSignal<string>;
+    /** Enter pressed in the search field. */
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    /** A chip's × was clicked. */
+    readonly removed: _angular_core.OutputEmitterRef<StrctFilterChip>;
+    /** "Clear filters" was clicked. */
+    readonly cleared: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctFilterBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctFilterBar, "strct-filter-bar", never, { "query": { "alias": "query"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "countLabel": { "alias": "countLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "query": "queryChange"; "search": "search"; "removed": "removed"; "cleared": "cleared"; }, never, ["*"], true, never>;
+}
+
 /** Lifecycle of an async (or deferred) validation check. */
 type StrctValidationStatus = 'idle' | 'checking' | 'ok' | 'warning' | 'error';
 /**
@@ -3140,5 +3324,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, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, 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, 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_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 };