@koobiq/components 20.4.1 → 21.0.0

package/types/koobiq-components-ellipsis-center.d.ts

@@ -0,0 +1,85 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy, SimpleChanges } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+
+/**
+ * Renders text as two spans and moves the ellipsis into the middle, so the tail — a file extension, the
+ * digits that tell two reports apart — stays readable when the host is too narrow for the whole string. A
+ * tooltip spells out the full text, and is enabled only while something is actually hidden.
+ *
+ * The tooltip's `forDisabledComponent` is not for this host and should not be bound on it: the hint always
+ * repeats the text this directive shortened, never an explanation of why a wrapped control is unavailable,
+ * and the two derive the same state, so they would overwrite each other. Overflow is the only state the
+ * directive derives, and `kbqTooltipDisabled` is how a consumer suppresses the hint.
+ */
+declare class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {
+    private cdr;
+    /**
+     * Application-wide `ResizeObserver` shared by every consumer, as `KbqTitleDirective` uses. Unlike the
+     * `window:resize` listener this directive used to carry, it also reacts to container-only resizes — a
+     * splitter drag, a sidebar collapse, or the vertical scrollbar that appears once a file list fills up —
+     * none of which resize the window, all of which change where the text has to be split.
+     */
+    private readonly resizeObserver;
+    /** The two spans this directive renders have no styles of their own until this is loaded. */
+    private readonly styleLoader;
+    set kbqEllipsisCenter(value: string);
+    /**
+     * Overrides the tooltip's hoverable default, as `KbqOptionTooltip` does. The hint spells out text that
+     * the directive had to truncate, so it floats over the neighbouring content — and a pointer-capturing
+     * pane would swallow the clicks meant for it.
+     */
+    readonly ignoreTooltipPointerEvents: _angular_core.InputSignal<boolean>;
+    /**
+     * The hint spells out what the split hid, so `kbqTooltipDisabled="false"` cannot conjure one for a name
+     * that fits.
+     *
+     * @docs-private
+     */
+    protected readonly derivedDisabledWins = true;
+    /**
+     * Shortest text worth splitting in the middle. Anything below it keeps its natural order and is cut off
+     * at the end by the host's own `text-overflow`.
+     *
+     * Defaults to `0` — every overflowing text is split — because that is what the directive has always
+     * done: the input was declared but never read, so any other default would silently end-truncate labels
+     * that consumers expect to see split.
+     */
+    readonly minVisibleLength: _angular_core.InputSignal<number>;
+    /**
+     * Lower bound, in pixels, for the average glyph width used to decide how many characters fit in the
+     * tail. The rendered text is measured as well and the wider of the two wins, so an underestimate here
+     * can no longer push the extension out of the tail — raising it only shortens the tail further.
+     */
+    readonly charWidth: _angular_core.InputSignal<number>;
+    /**
+     * Debounce time (ms) for resize events before recalculating ellipsis position. Defaults to `50`.
+     */
+    readonly debounceInterval: _angular_core.InputSignalWithTransform<number, unknown>;
+    private _kbqEllipsisCenter;
+    private lastMeasuredWidth;
+    private refreshTimeoutId;
+    /** @docs-private */
+    readonly kbqEllipsisCenterInput: _angular_core.InputSignal<string | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Updates the displayed text with center ellipsis truncation based on container width.
+     * Recreates start/end span elements, measures available space, and adjusts text accordingly.
+     *
+     * @docs-private
+     */
+    refresh(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqEllipsisCenterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqEllipsisCenterDirective, "[kbqEllipsisCenter]", never, { "ignoreTooltipPointerEvents": { "alias": "ignoreTooltipPointerEvents"; "required": false; "isSignal": true; }; "minVisibleLength": { "alias": "minVisibleLength"; "required": false; "isSignal": true; }; "charWidth": { "alias": "charWidth"; "required": false; "isSignal": true; }; "debounceInterval": { "alias": "debounceInterval"; "required": false; "isSignal": true; }; "kbqEllipsisCenterInput": { "alias": "kbqEllipsisCenter"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class KbqEllipsisCenterModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqEllipsisCenterModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqEllipsisCenterModule, never, [typeof KbqEllipsisCenterDirective], [typeof KbqEllipsisCenterDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqEllipsisCenterModule>;
+}
+
+export { KbqEllipsisCenterDirective, KbqEllipsisCenterModule };

package/types/koobiq-components-empty-state.d.ts

@@ -0,0 +1,106 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
+
+/** The part of `kbq-empty-state` its projected slots follow. */
+interface KbqEmptyStateContext {
+    /** Whether the empty state renders in the error color. */
+    readonly errorColor: Signal<boolean>;
+}
+
+/**
+ * Illustration slot of `kbq-empty-state`. Holds an icon, an image or any other element.
+ *
+ * A `kbq-icon-item` follows the empty state's `errorColor`, whether the directive sits on the icon
+ * itself or wraps it.
+ */
+declare class KbqEmptyStateIcon {
+    private readonly emptyState;
+    private readonly hostIcon;
+    private readonly wrappedIcons;
+    constructor();
+    /**
+     * Tints an icon with the error color, or reveals whatever color it currently carries.
+     *
+     * `KbqIcon` already renders `kbq-error` additively over its own `kbq-<color>` class through its
+     * `hasError` field — the same field `autoColor` drives — so setting it here, instead of
+     * overwriting `color`, means a live `[color]` binding on the icon is never fought over: the tint
+     * class layers on top of whatever color is currently set and simply lifts off it when cleared.
+     * The class is also applied directly so the tint shows immediately, without waiting for the
+     * icon's own change detection to run.
+     *
+     * Lifting the tint off must not take the class away from an icon that carries `color="error"` of
+     * its own: `KbqColorDirective` renders `kbq-error` from a host binding that only touches it
+     * again when the color changes, and the icon's `[class.kbq-error]` binding stays at `true`
+     * throughout, so neither would put back a class removed here — the icon would lose the color the
+     * consumer set on it, permanently.
+     */
+    private applyErrorColor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateIcon, "[kbq-empty-state-icon]", never, {}, {}, ["wrappedIcons"], never, true, never>;
+}
+/** Text slot of `kbq-empty-state`, rendered below the title. */
+declare class KbqEmptyStateText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateText, "[kbq-empty-state-text]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Title slot of `kbq-empty-state`, rendered below the illustration.
+ *
+ * It carries heading typography — `subheading` at `size="normal"`, `headline` at `size="big"` — so
+ * the host element should be a real heading of the level the surrounding page calls for:
+ * `<h2 kbq-empty-state-title>`.
+ */
+declare class KbqEmptyStateTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateTitle, "[kbq-empty-state-title]", never, {}, {}, never, never, true, never>;
+}
+/** Actions slot of `kbq-empty-state`, rendered below the text. Holds buttons, links or pseudo-links. */
+declare class KbqEmptyStateActions {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqEmptyStateActions, "[kbq-empty-state-actions]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Placeholder rendered in place of content that is empty, unavailable or failed to load. Projects an
+ * illustration, a title, a text and an actions row, in that order.
+ *
+ * ```html
+ * <kbq-empty-state>
+ *     <h2 kbq-empty-state-title>No groups</h2>
+ *     <div kbq-empty-state-text>Agents can be grouped and given the same policies</div>
+ * </kbq-empty-state>
+ * ```
+ *
+ * The host has no intrinsic height — it grows as a flex item and is otherwise as tall as its
+ * content, which leaves `alignTop` indistinguishable from the default. Give the host or its
+ * container a height for the alignment to mean anything.
+ *
+ * For an empty state inserted dynamically, add `role="status"` — or `role="alert"` for the error
+ * variant — on the host so assistive technology announces it. See the component guide.
+ */
+declare class KbqEmptyState implements KbqEmptyStateContext {
+    /** Whether the title, the text and the projected icon render in the error color. Defaults to `false`. */
+    readonly errorColor: i0.InputSignal<boolean>;
+    /** Whether the content sits at the top of the host instead of its center. Defaults to `false`. */
+    readonly alignTop: i0.InputSignal<boolean>;
+    /**
+     * Size tier of the placeholder: `compact`, `normal` or `big`. Drives every padding and offset,
+     * the maximum width of the title and the text, and their typography. Defaults to `normal`.
+     */
+    readonly size: i0.InputSignal<KbqDefaultSizes>;
+    /** @docs-private */
+    protected readonly icon: i0.Signal<KbqEmptyStateIcon | undefined>;
+    /** @docs-private */
+    protected readonly emptyStateSizeClass: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyState, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqEmptyState, "kbq-empty-state", ["kbqEmptyState"], { "errorColor": { "alias": "errorColor"; "required": false; "isSignal": true; }; "alignTop": { "alias": "alignTop"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["icon"], ["[kbq-empty-state-icon]", "[kbq-empty-state-title]", "[kbq-empty-state-text]", "[kbq-empty-state-actions]"], true, never>;
+}
+
+declare class KbqEmptyStateModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqEmptyStateModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqEmptyStateModule, never, [typeof KbqEmptyState, typeof KbqEmptyStateIcon, typeof KbqEmptyStateText, typeof KbqEmptyStateTitle, typeof KbqEmptyStateActions], [typeof KbqEmptyState, typeof KbqEmptyStateIcon, typeof KbqEmptyStateText, typeof KbqEmptyStateTitle, typeof KbqEmptyStateActions]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqEmptyStateModule>;
+}
+
+export { KbqEmptyState, KbqEmptyStateActions, KbqEmptyStateIcon, KbqEmptyStateModule, KbqEmptyStateText, KbqEmptyStateTitle };
+export type { KbqEmptyStateContext };