shirkasoft-ui-components 1.1.2 → 1.1.3

package/types/shirkasoft-ui-components.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, OnDestroy, Type, ViewContainerRef, ComponentRef, AfterViewInit, TemplateRef } from '@angular/core';
+import { ElementRef, OnDestroy, Type, ViewContainerRef, ComponentRef, AfterViewInit, TemplateRef, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormGroup, FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
 
 declare class TextFieldComponent implements ControlValueAccessor {
     private cdr;
@@ -456,6 +457,30 @@ declare class FileUploadComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "shk-file-upload", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "fileRecommendation": { "alias": "fileRecommendation"; "required": false; "isSignal": true; }; "changeFilesText": { "alias": "changeFilesText"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; }, { "fileSelected": "fileSelected"; "fileRemoved": "fileRemoved"; "fileError": "fileError"; "fileWarning": "fileWarning"; }, never, never, true, never>;
 }
 
+/** Resolves a lucide icon name to its component. Falls back to a help circle. */
+declare function getIcon$6(name?: string): any;
+
+type TagSeverity = 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'contrast';
+/** Small label used to highlight a value, status or category. */
+declare class TagComponent {
+    /** Text shown inside the tag. */
+    value: _angular_core.InputSignal<string | number>;
+    /** Color variant. Defaults to 'secondary'. */
+    severity: _angular_core.InputSignal<TagSeverity>;
+    /** Renders the tag with fully rounded corners (pill). */
+    rounded: _angular_core.InputSignal<boolean>;
+    /** Optional leading lucide icon name. */
+    icon: _angular_core.InputSignal<string>;
+    /** Inline styles applied to the tag. */
+    style: _angular_core.InputSignal<Record<string, string | number>>;
+    /** Extra CSS classes. */
+    styleClass: _angular_core.InputSignal<string>;
+    protected getIcon: typeof getIcon$6;
+    protected tagClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "shk-tag", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare function getIcon$5(name: string): any;
 interface Column {
     field: string;
@@ -473,10 +498,10 @@ interface Column {
     template?: 'text' | 'tag';
     format?: (row: any) => string;
     tagValue?: (row: any) => string;
-    tagSeverity?: (row: any) => 'success' | 'danger' | 'warn' | 'info' | undefined;
-    tagStyle?: (row: any) => {
-        [key: string]: string;
-    } | undefined;
+    tagSeverity?: (row: any) => TagSeverity | undefined;
+    tagRounded?: boolean | ((row: any) => boolean);
+    tagIcon?: string | ((row: any) => string);
+    tagStyle?: (row: any) => Record<string, string | number> | undefined;
 }
 interface TableAction {
     label: string;
@@ -630,7 +655,11 @@ declare class TableComponent {
     isRowActionDisabled(action: RowAction, rowData: any): boolean;
     isRowActionVisible(action: RowAction, rowData: any): boolean;
     truncate(value: any, limit?: number): string;
-    getTagClass(severity?: string): string;
+    getTagValue(col: Column, rowData: any): string;
+    getTagSeverity(col: Column, rowData: any): TagSeverity;
+    getTagRounded(col: Column, rowData: any): boolean;
+    getTagIcon(col: Column, rowData: any): string;
+    getTagStyle(col: Column, rowData: any): Record<string, string | number>;
     /**
      * FIX #7 (medio): trackBy real por identidad de fila en vez de `$index`.
      * Si tu dato no tiene `id`/`_id`, cae de vuelta al índice (comportamiento
@@ -645,15 +674,28 @@ declare class TableComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "shk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rowsPerPage": { "alias": "rowsPerPage"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showActionRow": { "alias": "showActionRow"; "required": false; "isSignal": true; }; "customTemplates": { "alias": "customTemplates"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "hasShadow": { "alias": "hasShadow"; "required": false; "isSignal": true; }; "defaultSortField": { "alias": "defaultSortField"; "required": false; "isSignal": true; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "activeFilter": { "alias": "activeFilter"; "required": false; "isSignal": true; }; }, { "refresh": "refresh"; "pageChange": "pageChange"; "filterChange": "filterChange"; "searchChange": "searchChange"; "filterClick": "filterClick"; }, never, never, true, never>;
 }
 
-declare class TooltipComponent {
+/**
+ * Tooltip que se renderiza en `document.body` con `position: fixed`, de modo
+ * que siempre flota por encima de cualquier contenedor (tablas con
+ * `overflow: hidden`, modales, scroll wrappers, etc.) y nunca queda
+ * recortado ni pasa por debajo de su elemento ancla.
+ */
+declare class TooltipComponent implements OnDestroy {
     readonly text: _angular_core.InputSignal<string>;
     readonly position: _angular_core.InputSignal<"top" | "bottom" | "right">;
     readonly mode: _angular_core.InputSignal<"fixed" | "hover">;
     readonly offset: _angular_core.InputSignal<number>;
-    private elementRef;
-    tooltipX: _angular_core.WritableSignal<number>;
-    tooltipY: _angular_core.WritableSignal<number>;
+    private readonly host;
+    private readonly document;
+    private tooltipEl;
+    private cleanup;
     onMouseEnter(): void;
+    onMouseLeave(): void;
+    private show;
+    private computePosition;
+    private hide;
+    private removeTooltip;
+    ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TooltipComponent, "shk-tooltip", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -1126,5 +1168,298 @@ declare class WizardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WizardComponent, "shk-wizard", never, { "steps": { "alias": "steps"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerSubtitle": { "alias": "headerSubtitle"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "backTooltip": { "alias": "backTooltip"; "required": false; "isSignal": true; }; "headerIcon": { "alias": "headerIcon"; "required": false; "isSignal": true; }; "showStepper": { "alias": "showStepper"; "required": false; "isSignal": true; }; "stepperClickable": { "alias": "stepperClickable"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "showStepCounter": { "alias": "showStepCounter"; "required": false; "isSignal": true; }; "stepCounterPrefix": { "alias": "stepCounterPrefix"; "required": false; "isSignal": true; }; "showCancel": { "alias": "showCancel"; "required": false; "isSignal": true; }; "advanceOnNext": { "alias": "advanceOnNext"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "prevIcon": { "alias": "prevIcon"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "nextIcon": { "alias": "nextIcon"; "required": false; "isSignal": true; }; "finishLabel": { "alias": "finishLabel"; "required": false; "isSignal": true; }; "finishIcon": { "alias": "finishIcon"; "required": false; "isSignal": true; }; "primaryLabel": { "alias": "primaryLabel"; "required": false; "isSignal": true; }; "primaryIcon": { "alias": "primaryIcon"; "required": false; "isSignal": true; }; "primaryLoading": { "alias": "primaryLoading"; "required": false; "isSignal": true; }; "primaryDisabled": { "alias": "primaryDisabled"; "required": false; "isSignal": true; }; }, { "currentStep": "currentStepChange"; "back": "back"; "cancel": "cancel"; "prev": "prev"; "next": "next"; "finish": "finish"; "stepChange": "stepChange"; }, ["stepContents"], ["[shkWizardHeaderActions]"], true, never>;
 }
 
-export { COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_MARKER_GRADIENTS, DEFAULT_SUPPLIER_ICON_COLORS, DEFAULT_SUPPLIER_TYPE_ICONS, DatePickerComponent, FieldsetComponent, FileUploadComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, RailSidebarComponent, SelectComponent, ShkWizardStepContent, SidebarComponent, TableComponent, TextFieldComponent, TimelineComponent, ToggleComponent, TooltipComponent, WizardComponent, readThemeColors };
-export type { Column, ConfirmConfig, DatePickerView, FieldsetHeaderAction, FileUploadError, FilterChangeEvent, ModalConfig, Notification, NotificationPosition, PageChangeEvent, RailSidebarItem, RailSidebarSection, RailSidebarSectionEvent, RowAction, SelectOption, SidebarGroup, SidebarItem, TableAction, TimelineAction, TimelineAlignment, TimelineItem, TimelineItemAction, TimelineMarkerSize, TimelineMeta, TimelineSubItem, TimelineSubItemAction, WizardStep };
+type SkeletonShape = 'rectangle' | 'circle';
+type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+/** Placeholder block shown while content is loading. */
+declare class SkeletonComponent {
+    /** Shape of the skeleton: rectangle (default) or circle. */
+    shape: _angular_core.InputSignal<SkeletonShape>;
+    /** When shape is circle, sets both width and height. */
+    size: _angular_core.InputSignal<string>;
+    /** Width of the rectangle skeleton. */
+    width: _angular_core.InputSignal<string>;
+    /** Height of the rectangle skeleton. */
+    height: _angular_core.InputSignal<string>;
+    /** Custom border radius (rectangle only). */
+    borderRadius: _angular_core.InputSignal<string>;
+    /** Animation effect: 'wave' (default), 'pulse' or 'none'. */
+    animation: _angular_core.InputSignal<SkeletonAnimation>;
+    /** Inline styles applied to the skeleton block. */
+    style: _angular_core.InputSignal<Record<string, string | number>>;
+    /** Extra CSS classes. */
+    styleClass: _angular_core.InputSignal<string>;
+    protected rootStyle: _angular_core.Signal<{
+        [x: string]: string | number;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "shk-skeleton", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type ButtonSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | 'contrast';
+type ButtonSize = 'small' | 'large';
+type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
+/** Generic button with icon, severity variants, loading state and sizes. */
+declare class ButtonComponent {
+    /** Text shown inside the button. */
+    label: _angular_core.InputSignal<string>;
+    /** Optional leading lucide icon name. */
+    icon: _angular_core.InputSignal<string>;
+    /** Position of the icon relative to the label. */
+    iconPos: _angular_core.InputSignal<ButtonIconPosition>;
+    /** Color variant. Defaults to 'primary'. */
+    severity: _angular_core.InputSignal<ButtonSeverity>;
+    /** Transparent background with a colored border. */
+    outlined: _angular_core.InputSignal<boolean>;
+    /** Borderless button with a colored label. */
+    text: _angular_core.InputSignal<boolean>;
+    /** Adds a soft shadow. */
+    raised: _angular_core.InputSignal<boolean>;
+    /** Fully rounded corners (pill). */
+    rounded: _angular_core.InputSignal<boolean>;
+    /** Size variant. */
+    size: _angular_core.InputSignal<ButtonSize | undefined>;
+    /** Disables the button. */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Shows a spinner and disables the button. */
+    loading: _angular_core.InputSignal<boolean>;
+    /** Icon shown while loading. Defaults to 'refresh'. */
+    loadingIcon: _angular_core.InputSignal<string>;
+    /** Optional text shown instead of the label while loading. */
+    loadingText: _angular_core.InputSignal<string>;
+    /** Native button type. */
+    type: _angular_core.InputSignal<"submit" | "button" | "reset">;
+    /** Accessible label when the button is icon-only. */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Native title tooltip. */
+    title: _angular_core.InputSignal<string>;
+    /** Inline styles applied to the button. */
+    style: _angular_core.InputSignal<Record<string, string | number>>;
+    /** Extra CSS classes. */
+    styleClass: _angular_core.InputSignal<string>;
+    /** Emitted on click with the original MouseEvent. */
+    onClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    protected getIcon: typeof getIcon$6;
+    protected iconOnly: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "shk-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPos": { "alias": "iconPos"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "raised": { "alias": "raised"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingIcon": { "alias": "loadingIcon"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}
+
+/** SVG radial knob with drag and keyboard support. Implements ControlValueAccessor. */
+declare class KnobComponent implements ControlValueAccessor {
+    /** Current value. Two-way bindable with [(value)]. */
+    value: _angular_core.ModelSignal<number>;
+    /** Minimum value. */
+    min: _angular_core.InputSignal<number>;
+    /** Maximum value. */
+    max: _angular_core.InputSignal<number>;
+    /** Increment used by arrows and pointer drag rounding. */
+    step: _angular_core.InputSignal<number>;
+    /** Diameter of the knob in px. */
+    size: _angular_core.InputSignal<number>;
+    /** Thickness of the arc stroke. */
+    strokeWidth: _angular_core.InputSignal<number>;
+    /** Color of the filled arc. */
+    valueColor: _angular_core.InputSignal<string>;
+    /** Color of the track arc. */
+    rangeColor: _angular_core.InputSignal<string>;
+    /** Whether the current value is shown in the center. */
+    showValue: _angular_core.InputSignal<boolean>;
+    /** Disables user interaction. */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Blocks editing but keeps the control styled as enabled. */
+    readonly: _angular_core.InputSignal<boolean>;
+    /** Accessible label. */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Emitted when the knob value changes. */
+    change: _angular_core.OutputEmitterRef<number>;
+    /** Emitted when the user releases the pointer. */
+    end: _angular_core.OutputEmitterRef<number>;
+    protected knobSvg: _angular_core.Signal<ElementRef<SVGElement> | undefined>;
+    private onChange;
+    private onTouched;
+    private dragging;
+    private formDisabled;
+    /** Effective disabled state combining the `disabled` input and the form binding. */
+    protected effectiveDisabled: _angular_core.Signal<boolean>;
+    protected r: _angular_core.Signal<number>;
+    protected center: _angular_core.Signal<number>;
+    protected fraction: _angular_core.Signal<number>;
+    protected rangeArc: _angular_core.Signal<string>;
+    protected valueArc: _angular_core.Signal<string>;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    onPointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp(event: PointerEvent): void;
+    updateByKey(step: number): void;
+    private applyEvent;
+    private setValue;
+    private clamp;
+    private getArcPath;
+    private anglePoint;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KnobComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KnobComponent, "shk-knob", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "rangeColor": { "alias": "rangeColor"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "change": "change"; "end": "end"; }, never, never, true, never>;
+}
+
+/** Circular indeterminate spinner. */
+declare class LoadingSpinnerComponent {
+    /** Diameter of the spinner. */
+    size: _angular_core.InputSignal<string>;
+    /** Border thickness in px. */
+    thickness: _angular_core.InputSignal<number>;
+    /** Color of the moving arc. Defaults to the primary token. */
+    color: _angular_core.InputSignal<string>;
+    /** Optional text shown under the spinner. */
+    label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingSpinnerComponent, "shk-loading-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "thickness": { "alias": "thickness"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Progress bar with an indeterminate sweep or a determinate percentage. */
+declare class LoadingBarComponent {
+    /** Height of the bar. */
+    height: _angular_core.InputSignal<string>;
+    /** When true the bar animates without a known percentage. */
+    indeterminate: _angular_core.InputSignal<boolean>;
+    /** Current progress 0-100 when `indeterminate` is false. */
+    progress: _angular_core.InputSignal<number>;
+    /** Fill color. Defaults to the primary token. */
+    color: _angular_core.InputSignal<string>;
+    /** Renders fully rounded ends. */
+    rounded: _angular_core.InputSignal<boolean>;
+    protected fillStyle: _angular_core.Signal<{
+        width?: undefined;
+    } | {
+        width: string;
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingBarComponent, "shk-loading-bar", never, { "height": { "alias": "height"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type LoadingOverlayBackdrop = 'transparent' | 'light' | 'dark';
+/** Wraps content and shows a centered spinner over it while `visible` is true. */
+declare class LoadingOverlayComponent {
+    /** Controls whether the spinner layer is shown. */
+    visible: _angular_core.InputSignal<boolean>;
+    /** Optional text under the spinner. */
+    message: _angular_core.InputSignal<string>;
+    /** Diameter of the spinner. */
+    spinnerSize: _angular_core.InputSignal<string>;
+    /** Spinner color. Defaults to the primary token. */
+    color: _angular_core.InputSignal<string>;
+    /** Backdrop behind the spinner. */
+    backdrop: _angular_core.InputSignal<LoadingOverlayBackdrop>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingOverlayComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingOverlayComponent, "shk-loading-overlay", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "spinnerSize": { "alias": "spinnerSize"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Bouncing dots loading indicator. */
+declare class LoadingDotsComponent {
+    /** Diameter of each dot. */
+    size: _angular_core.InputSignal<string>;
+    /** Dot color. Defaults to the primary token. */
+    color: _angular_core.InputSignal<string>;
+    /** Number of dots. */
+    count: _angular_core.InputSignal<number>;
+    /** Optional text shown next to the dots. */
+    label: _angular_core.InputSignal<string>;
+    protected dots: _angular_core.Signal<unknown[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingDotsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingDotsComponent, "shk-loading-dots", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Shared state between shk-tabs and its projected tab/tabpanel children. */
+declare class TabsService {
+    readonly active: _angular_core.WritableSignal<any>;
+    select(value: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TabsService>;
+}
+
+/** Container for tab panels. Renders its projected shk-tablist/shh-tab content. */
+declare class TabsComponent {
+    /** Currently active tab value. Two-way bindable with [(value)]. */
+    value: _angular_core.ModelSignal<any>;
+    /** Allows the tab header to scroll horizontally when it overflows. */
+    scrollable: _angular_core.InputSignal<boolean>;
+    protected tabsSvc: TabsService;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "shk-tabs", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+}
+
+/** Horizontal bar that contains the shk-tab headers. */
+declare class TablistComponent {
+    /** Allows the header to scroll horizontally when it overflows. */
+    scrollable: _angular_core.InputSignal<boolean>;
+    /** Extra CSS classes. */
+    styleClass: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TablistComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TablistComponent, "shk-tablist", never, { "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** A single tab header. Clicking it activates the matching panel. */
+declare class TabComponent {
+    /** Value that links this tab to its panel. */
+    value: _angular_core.InputSignal<any>;
+    /** Disables the tab. */
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Extra CSS classes. */
+    styleClass: _angular_core.InputSignal<string>;
+    protected tabsSvc: TabsService;
+    protected active: _angular_core.Signal<boolean>;
+    select(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "shk-tab", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/** Container that groups the shk-tabpanel content sections. */
+declare class TabpanelsComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabpanelsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabpanelsComponent, "shk-tabpanels", never, {}, {}, never, ["*"], true, never>;
+}
+
+/** Content section shown only while its value is the active tab. */
+declare class TabPanelComponent {
+    /** Value that links this panel to its tab. */
+    value: _angular_core.InputSignal<any>;
+    protected tabsSvc: TabsService;
+    protected active: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabPanelComponent, "shk-tabpanel", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface BreadcrumbItem {
+    label: string;
+    route?: string;
+}
+declare class BreadcrumbService {
+    private breadcrumbsSubject;
+    breadcrumbs$: Observable<BreadcrumbItem[]>;
+    set(items: BreadcrumbItem[]): void;
+    clear(): void;
+    getCurrent(): BreadcrumbItem[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<BreadcrumbService>;
+}
+
+type BreadcrumbSeparator = 'chevron' | 'slash' | 'arrow';
+declare class BreadcrumbComponent implements OnInit, OnDestroy {
+    private readonly breadcrumbService;
+    items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    separator: _angular_core.InputSignal<BreadcrumbSeparator>;
+    useService: _angular_core.InputSignal<boolean>;
+    protected serviceItems: _angular_core.WritableSignal<BreadcrumbItem[]>;
+    protected resolvedItems: _angular_core.Signal<BreadcrumbItem[]>;
+    private serviceSub;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbComponent, "shk-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "useService": { "alias": "useService"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BreadcrumbComponent, BreadcrumbService, ButtonComponent, COLOR_PALETTE, ChartComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_MARKER_GRADIENTS, DEFAULT_SUPPLIER_ICON_COLORS, DEFAULT_SUPPLIER_TYPE_ICONS, DatePickerComponent, FieldsetComponent, FileUploadComponent, KnobComponent, LoadingBarComponent, LoadingDotsComponent, LoadingOverlayComponent, LoadingSpinnerComponent, ModalComponent, ModalService, NotificationComponent, NotificationService, PriceInputComponent, RailSidebarComponent, SelectComponent, ShkWizardStepContent, SidebarComponent, SkeletonComponent, TabComponent, TabPanelComponent, TableComponent, TablistComponent, TabpanelsComponent, TabsComponent, TagComponent, TextFieldComponent, TimelineComponent, ToggleComponent, TooltipComponent, WizardComponent, readThemeColors };
+export type { BreadcrumbItem, BreadcrumbSeparator, ButtonIconPosition, ButtonSeverity, ButtonSize, Column, ConfirmConfig, DatePickerView, FieldsetHeaderAction, FileUploadError, FilterChangeEvent, LoadingOverlayBackdrop, ModalConfig, Notification, NotificationPosition, PageChangeEvent, RailSidebarItem, RailSidebarSection, RailSidebarSectionEvent, RowAction, SelectOption, SidebarGroup, SidebarItem, SkeletonAnimation, SkeletonShape, TableAction, TagSeverity, TimelineAction, TimelineAlignment, TimelineItem, TimelineItemAction, TimelineMarkerSize, TimelineMeta, TimelineSubItem, TimelineSubItemAction, WizardStep };