@koobiq/components 20.4.2 → 21.0.0

package/types/koobiq-components-button.d.ts

@@ -0,0 +1,296 @@
+import * as i0 from '@angular/core';
+import { OnChanges, OnDestroy, AfterViewInit, AfterViewChecked, AfterContentInit, ElementRef, SimpleChanges } from '@angular/core';
+import { KbqColorDirective, KbqEnumValues, KbqComponentColors, KbqTitleTextRef, KbqOrientation } from '@koobiq/components/core';
+import { KbqIcon } from '@koobiq/components/icon';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import * as i1 from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/platform';
+import * as i3 from '@angular/cdk/observers';
+
+/** Visual style of a button. */
+declare enum KbqButtonStyles {
+    Filled = "filled",
+    Outline = "outline",
+    Transparent = "transparent"
+}
+/** Visual style of a button, as an enum member or its plain string form. */
+type KbqButtonStyle = KbqEnumValues<KbqButtonStyles>;
+/**
+ * Value accepted by the `kbqStyle` input: one of the built-in styles, or a custom string that is
+ * applied verbatim as the `kbq-button_<value>` host class and themed by whoever sets it —
+ * `kbq-filter-bar` defines its `changed-filter` style that way. A custom style is not covered by
+ * `kbq-button-theme()` and takes the `filled` default color.
+ */
+type KbqButtonStyleInput = KbqButtonStyle | (string & {});
+/**
+ * Colors a button can be rendered in, as an enum member or its plain string form.
+ *
+ * A narrower set than `KbqComponentColors`: the design system pairs each color with a subset of
+ * the styles (`filled` with `contrast`/`contrast-fade`, `outline` with `theme-fade`/`contrast-fade`,
+ * `transparent` with `theme`/`contrast`), and defines no button appearance for the status colors.
+ * A pair the design system does not define falls back to the style's default color rather than
+ * leaving the button unstyled.
+ */
+type KbqButtonColor = KbqEnumValues<KbqComponentColors.Theme | KbqComponentColors.ThemeFade | KbqComponentColors.Contrast | KbqComponentColors.ContrastFade>;
+/**
+ * Class set on a button host whose first visible child is an icon.
+ *
+ * Public CSS hook: consumed by `dropdown.scss` to detect an icon-only dropdown trigger.
+ */
+declare const buttonLeftIconClassName = "kbq-button-icon_left";
+/**
+ * Class set on a button host whose last visible child is an icon.
+ *
+ * Public CSS hook: consumed by `dropdown.scss` to detect an icon-only dropdown trigger.
+ */
+declare const buttonRightIconClassName = "kbq-button-icon_right";
+/**
+ * Applies the `kbq-button`/`kbq-button-icon` host class and the left/right icon modifier classes.
+ *
+ * A button is treated as an icon button when its projected content consists only of `KbqIcon`s
+ * and there are at most 2 of them. When icons are mixed with other content, only the outermost
+ * icons receive the left/right classes.
+ *
+ * Must be used together with `KbqButton` (both match `[kbq-button]`): icon detection relies on
+ * the `.kbq-button-wrapper` element rendered by the component's template.
+ */
+declare class KbqButtonCssStyler implements AfterContentInit {
+    private renderer;
+    private readonly injector;
+    readonly icons: i0.Signal<readonly KbqIcon[]>;
+    readonly nativeElement: HTMLElement;
+    /** Whether the button contains only icons (at most 2). */
+    get isIconButton(): boolean;
+    /** Whether the projected label holds no text at all, e.g. an icon-only button. */
+    get hasNoLabel(): boolean;
+    private readonly _isIconButton;
+    private readonly _hasNoLabel;
+    private leftIcon;
+    private rightIcon;
+    /** Memoized `.kbq-button-wrapper`; stable for the lifetime of the host component. */
+    private wrapperElement;
+    /** Whether the missing-accessible-name warning has already been emitted for this host. */
+    private accessibleNameWarned;
+    constructor();
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    private updateIconClass;
+    private getWrapperElement;
+    /**
+     * `KbqIcon` renders a decorative glyph, so an icon-only button carries no text. Without an
+     * `aria-label`/`aria-labelledby`/`title` it has no accessible name at all (AXE `button-name`).
+     */
+    private warnIfIconButtonHasNoAccessibleName;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonCssStyler, "[kbq-button]", never, {}, {}, ["icons"], never, true, never>;
+}
+declare class KbqButton extends KbqColorDirective<KbqButtonColor> implements OnChanges, OnDestroy, AfterViewInit, AfterViewChecked, KbqTitleTextRef {
+    private focusMonitor;
+    protected styler: KbqButtonCssStyler;
+    private readonly changeDetectorRef;
+    private readonly renderer;
+    /** Lower-cased tag name of the host element. */
+    private readonly hostTagName;
+    /** Whether the host element supports the native `disabled` attribute. */
+    private readonly hostSupportsNativeDisabled;
+    hasFocus: boolean;
+    private readonly titleText;
+    private readonly parentText;
+    /** The text box of the button, measured by `kbq-title`. Always rendered by the template. */
+    get textElement(): ElementRef<HTMLElement>;
+    /** The flex row that lays out the icons and text, used as the overflow width constraint. */
+    get parentTextElement(): ElementRef<HTMLElement>;
+    /**
+     * Visual style of the button. Setting it to a value marks that value as owned by the button, so
+     * a surrounding `KbqButtonGroupRoot` no longer overrides it.
+     *
+     * Reads back as the resulting host class rather than the value that was set, because the host
+     * `[class]` binding is what consumes it.
+     */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyleInput | null | undefined);
+    private _kbqStyle;
+    private _kbqStyleClassName;
+    /** Color propagated by a surrounding `KbqButtonGroupRoot`. */
+    private groupColor;
+    /**
+     * Whether the button is disabled. A surrounding `KbqButtonGroupRoot` can disable the button in
+     * addition to this input, but never re-enables a button disabled through it.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Whether `kbqStyle` was set from the outside rather than propagated by a button group. */
+    private kbqStyleSetExplicitly;
+    /** Disabled state requested through the `disabled` input. */
+    private ownDisabled;
+    /** Disabled state propagated by a surrounding `KbqButtonGroupRoot`. */
+    private groupDisabled;
+    /** @docs-private */
+    readonly disabledSignal: i0.WritableSignal<boolean>;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    /** Value rendered into the native `disabled` attribute; invalid HTML on hosts such as `<a>`. */
+    protected get nativeDisabledAttribute(): true | null;
+    /** Disabled state exposed to assistive tech for hosts without native `disabled` support. */
+    protected get ariaDisabledAttribute(): true | null;
+    /**
+     * Value rendered into the `tabindex` attribute. A native `<button>`/`<input>` is already in the
+     * tab order, so the default needs no attribute at all. Anchors keep it: one without `href` is
+     * not focusable otherwise, and whether an `href` is present cannot be decided here — directives
+     * such as `RouterLink` apply theirs after this host binding runs.
+     */
+    protected get tabIndexAttribute(): number | null;
+    /** @docs-private */
+    readonly kbqStyleInput: i0.InputSignal<KbqButtonStyleInput | null | undefined>;
+    /** @docs-private */
+    readonly disabledInput: i0.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
+    readonly tabIndexInput: i0.InputSignalWithTransform<number | undefined, string | number | null | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
+    constructor();
+    /**
+     * Applies the color propagated by a surrounding `KbqButtonGroupRoot`, unless the button defines
+     * its own. A falsy value — the group's `color` input is unbound — releases the button back to
+     * the default color of its style.
+     *
+     * @docs-private
+     */
+    setColorFromGroup(value: KbqButtonColor | null | undefined): void;
+    /**
+     * Applies the style propagated by a surrounding `KbqButtonGroupRoot`, unless the button defines
+     * its own.
+     *
+     * @docs-private
+     */
+    setKbqStyleFromGroup(value: KbqButtonStyleInput): void;
+    /**
+     * Applies the disabled state propagated by a surrounding `KbqButtonGroupRoot`. It is additive:
+     * a button disabled through its own input stays disabled when the group is re-enabled.
+     *
+     * @docs-private
+     */
+    setDisabledFromGroup(value: boolean): void;
+    ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
+    /**
+     * Re-evaluates the role announced to assistive tech. Only anchors can change role, so the guard
+     * lives here rather than at the call sites: this is public, and a `<button>` host must not have
+     * a role stamped onto it from the outside.
+     *
+     * An `<a kbq-button>` without `href` does not navigate and has no implicit role, so it is
+     * announced as a button. Anchors that do navigate (`href`, `routerLink`) keep their link role.
+     *
+     * Every other host already has an implicit role and is left exactly as it was authored — a host
+     * binding would instead have to write `null` for it, which removes a `role` the consumer set
+     * itself. `KbqButtonToggle` relies on that: it renders `role="radio"` on its inner button.
+     *
+     * @docs-private
+     */
+    updateRole(): void;
+    ngOnDestroy(): void;
+    onFocus(): void;
+    onBlur(): void;
+    getHostElement(): HTMLElement;
+    focus(): void;
+    focusViaKeyboard(): void;
+    haltDisabledEvents: (event: Event) => void;
+    private haltDisabledKeydownEvents;
+    projectContentChanged(): void;
+    private applyKbqStyle;
+    /**
+     * The color of a surrounding `KbqButtonGroupRoot` wins over the default color of the current `kbqStyle`:
+     * the design system defines a different neutral color per style, which a button without a color of its own
+     * or of its group keeps following.
+     */
+    private applyDefaultColor;
+    private applyDisabledState;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "kbqStyleInput": { "alias": "kbqStyle"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabIndexInput": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, {}, never, ["[kbqButtonPrefix]", "*", "[kbqButtonSuffix]"], true, never>;
+}
+
+/**
+ * Root directive that groups related buttons,
+ * propagating a shared style, color, and disabled state to every nested button
+ */
+declare class KbqButtonGroupRoot extends KbqColorDirective<KbqButtonColor> implements OnChanges {
+    private readonly buttons;
+    /**
+     * Style applied to the group and propagated to every nested button.
+     * A button that sets its own `kbqStyle` keeps it.
+     */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyleInput | null | undefined);
+    /** Empty until the input is bound, so that an unstyled group emits no root style class. */
+    private _kbqStyle;
+    /**
+     * Color propagated to every nested button: a bound `color`, or one set in code other than the
+     * group's own default. Nothing is propagated otherwise, and every nested button follows the
+     * default color of its style. A button that sets its own `color` keeps it.
+     */
+    private readonly propagatedColor;
+    /**
+     * Whether the root is disabled. Disabling the group disables every nested button; re-enabling it
+     * leaves buttons that are disabled through their own input untouched.
+     *
+     * Stays `undefined` while the input is unbound so that nested buttons are not force-enabled.
+     */
+    get disabled(): boolean | undefined;
+    set disabled(value: boolean);
+    /** @docs-private */
+    protected _disabled: boolean | undefined;
+    /** @docs-private */
+    readonly kbqStyleInput: i0.InputSignal<KbqButtonStyleInput | null | undefined>;
+    /** @docs-private */
+    readonly disabledInput: i0.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
+    constructor();
+    private updateStyle;
+    private updateDisabledState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonGroupRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonGroupRoot, "[kbqButtonGroupRoot]", never, { "kbqStyleInput": { "alias": "kbqStyle"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["buttons"], never, true, never>;
+}
+/** Groups and styling related `KbqButton`s into a single visual unit. */
+declare class KbqButtonGroup {
+    /**
+     * Layout direction: `'horizontal'` or `'vertical'`. Defaults to `'horizontal'`.
+     */
+    readonly orientation: i0.InputSignal<KbqOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonGroup, "kbq-button-group, [kbq-button-group]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof KbqButtonGroupRoot; inputs: { "color": "color"; "kbqStyle": "kbqStyle"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/** Marks content to be projected into the prefix (leading) slot of a button. */
+declare class KbqButtonPrefix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonPrefix, "[kbqButtonPrefix]", never, {}, {}, never, never, true, never>;
+}
+/** Marks content to be projected into the suffix (trailing) slot of a button. */
+declare class KbqButtonSuffix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonSuffix, "[kbqButtonSuffix]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * This directive enhances `kbq-button` elements acting as dropdown triggers,
+ * visually indicating the active state with the `kbq-active` class,
+ * following Koobiq Design System.
+ *
+ * The directive relies on a separate `KbqDropdownTrigger` directive to get dropdown's state.
+ */
+declare class KbqButtonDropdownTrigger {
+    dropdownTrigger: KbqDropdownTrigger;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonDropdownTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonDropdownTrigger, "[kbq-button][kbqDropdownTriggerFor]", never, {}, {}, never, never, true, never>;
+}
+
+declare class KbqButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.ObserversModule, typeof KbqButtonDropdownTrigger, typeof KbqButton, typeof KbqButtonCssStyler, typeof KbqButtonPrefix, typeof KbqButtonSuffix, typeof KbqButtonGroup, typeof KbqButtonGroupRoot], [typeof KbqButton, typeof KbqButtonCssStyler, typeof KbqButtonPrefix, typeof KbqButtonSuffix, typeof KbqButtonDropdownTrigger, typeof KbqButtonGroup, typeof KbqButtonGroupRoot]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonModule>;
+}
+
+export { KbqButton, KbqButtonCssStyler, KbqButtonDropdownTrigger, KbqButtonGroup, KbqButtonGroupRoot, KbqButtonModule, KbqButtonPrefix, KbqButtonStyles, KbqButtonSuffix, buttonLeftIconClassName, buttonRightIconClassName };
+export type { KbqButtonColor, KbqButtonStyle, KbqButtonStyleInput };

package/types/koobiq-components-checkbox.d.ts

@@ -0,0 +1,172 @@
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqColorDirective, CanUpdateErrorState, ErrorStateMatcher, KbqCheckedState, KbqCheckableClickAction } from '@koobiq/components/core';
+import * as _angular_core from '@angular/core';
+import { OnChanges, DoCheck, AfterViewInit, OnDestroy, ElementRef, SimpleChanges, InjectionToken, Provider } from '@angular/core';
+import { CheckboxRequiredValidator } from '@angular/forms';
+
+/** Change event object emitted by KbqCheckbox. */
+declare class KbqCheckboxChange {
+    /** The source KbqCheckbox of the event. */
+    source: KbqCheckbox;
+    /** The new `checked` value of the checkbox. */
+    checked: boolean;
+}
+/**
+ * A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox,
+ * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
+ * disabled. Note that all additional accessibility attributes are taken care of by the component,
+ * so there is no need to provide them yourself. However, if you want to omit a label and still
+ * have the checkbox be accessible, you may supply an [aria-label] input.
+ *
+ * To show a validation error, put its text in a `kbq-error` inside the checkbox bound to a form control.
+ */
+declare class KbqCheckbox extends KbqColorDirective implements OnChanges, DoCheck, AfterViewInit, OnDestroy, CanUpdateErrorState {
+    private readonly focusMonitor;
+    private readonly checkable;
+    private readonly ngControl;
+    private readonly errorStateTracker;
+    private readonly uniqueId;
+    /** Whether the checkbox is in an error state. */
+    readonly errorState: _angular_core.Signal<boolean>;
+    /** An object used to control when the error state is shown. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Whether the checkbox uses the big size. */
+    readonly big: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * A unique id for the checkbox input. If none is supplied — or `null` is bound explicitly — it is
+     * auto-generated, so a read always yields the id the element actually carries.
+     */
+    readonly id: _angular_core.InputSignalWithTransform<string, string | null | undefined>;
+    /** Whether the label should appear after or before the checkbox. Defaults to 'after' */
+    readonly labelPosition: _angular_core.InputSignal<"before" | "after">;
+    /** Name value will be applied to the input element if present */
+    readonly name: _angular_core.InputSignal<string | null>;
+    /** Event emitted when the checkbox's `checked` value changes. */
+    readonly change: _angular_core.OutputEmitterRef<KbqCheckboxChange>;
+    /** Event emitted when the checkbox's `indeterminate` value changes. */
+    readonly indeterminateChange: _angular_core.OutputEmitterRef<boolean>;
+    /** The value attribute of the native input element */
+    readonly value: _angular_core.InputSignal<string | undefined>;
+    /** Defines the behavior when a user clicks on the checkbox. */
+    readonly clickAction: _angular_core.InputSignal<_koobiq_components_core.KbqCheckableClickAction>;
+    /** The native `<input type="checkbox">` element */
+    protected readonly inputElement: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    /**
+     * Id of the visually hidden native input.
+     *
+     * @docs-private
+     */
+    protected readonly inputId: _angular_core.Signal<string>;
+    /** Error text projected into the checkbox. */
+    private readonly error;
+    /** Hints projected into the checkbox. */
+    private readonly hints;
+    /** Whether the checkbox is required. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** @docs-private */
+    readonly checkedInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    /** @docs-private */
+    readonly tabIndexInput: _angular_core.InputSignalWithTransform<number | undefined, string | number | null | undefined>;
+    /** @docs-private */
+    readonly indeterminateInput: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | null | undefined>;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngDoCheck(): void;
+    /** Updates the error state based on the error state matcher. */
+    updateErrorState(): void;
+    /**
+     * Whether the checkbox is checked.
+     */
+    get checked(): boolean;
+    set checked(value: boolean);
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Tab order of the native input. A disabled checkbox is taken out of the tab order regardless. */
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    /**
+     * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
+     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
+     * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
+     * set to false.
+     */
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    private setIndeterminate;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Method being called whenever the label text changes.
+     *
+     * @docs-private
+     */
+    protected onLabelTextChange(): void;
+    /** @docs-private */
+    protected getAriaChecked(): KbqCheckedState;
+    /** Toggles the `checked` state of the checkbox. */
+    toggle(): void;
+    /**
+     * Event handler for checkbox input element.
+     * Toggles checked state if element is not disabled.
+     * Do not toggle on (change) event since IE doesn't fire change event when
+     *   indeterminate checkbox is clicked.
+     *
+     * @param event Input click event
+     *
+     * @docs-private
+     */
+    protected onInputClick(event: Event): void;
+    /** Focuses the checkbox. */
+    focus(): void;
+    /** @docs-private */
+    protected onInteractionEvent(event: Event): void;
+    private emitChangeEvent;
+    /** Function is called whenever the focus changes for the input element. */
+    private onInputFocusChange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCheckbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "big": { "alias": "big"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "clickAction": { "alias": "clickAction"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checkedInput": { "alias": "checked"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "tabIndexInput": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "indeterminateInput": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, ["error", "hints"], ["*", "kbq-error", "kbq-hint"], true, [{ directive: typeof _koobiq_components_core.KbqCheckable; inputs: {}; outputs: {}; }]>;
+}
+
+/**
+ * Checkbox click action when user click on input element.
+ * noop: Do not toggle checked or indeterminate.
+ * check: Only toggle checked status, ignore indeterminate.
+ * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
+ * undefined: Same as `check-indeterminate`.
+ */
+type KbqCheckboxClickAction = KbqCheckableClickAction;
+/**
+ * Injection token that can be used to specify the checkbox click behavior.
+ */
+declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckableClickAction>;
+
+declare const KBQ_CHECKBOX_REQUIRED_VALIDATOR: Provider;
+/**
+ * Validator for koobiq checkbox's required attribute in template-driven checkbox.
+ * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
+ * work with `kbq-checkbox`.
+ */
+declare class KbqCheckboxRequiredValidator extends CheckboxRequiredValidator {
+    /**
+     * The `required` input coerced the way the base validator coerces it, which is what decides
+     * whether the validator runs. Binding the raw input instead would strip the attribute for
+     * `<kbq-checkbox required>`, where the raw value is the empty string, at the exact moment validation
+     * turns on.
+     *
+     * @docs-private
+     */
+    protected get requiredAttribute(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCheckboxRequiredValidator, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqCheckboxRequiredValidator, "kbq-checkbox[required][formControlName],             kbq-checkbox[required][formControl], kbq-checkbox[required][ngModel]", never, {}, {}, never, never, true, never>;
+}
+
+declare class KbqCheckboxModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCheckboxModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqCheckboxModule, never, [typeof KbqCheckbox, typeof KbqCheckboxRequiredValidator], [typeof KbqCheckbox, typeof KbqCheckboxRequiredValidator]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqCheckboxModule>;
+}
+
+export { KBQ_CHECKBOX_CLICK_ACTION, KBQ_CHECKBOX_REQUIRED_VALIDATOR, KbqCheckbox, KbqCheckboxChange, KbqCheckboxModule, KbqCheckboxRequiredValidator };
+export type { KbqCheckboxClickAction };

package/types/koobiq-components-clamped-text.d.ts

@@ -0,0 +1,184 @@
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqClampedTextLocaleConfiguration, KbqDeepPartial } from '@koobiq/components/core';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, Provider, AfterViewInit, ElementRef } from '@angular/core';
+
+/**
+ * `KbqClampedText` and `KbqClampedList` are documented as two components but ship from one entry
+ * point on purpose: they share the `KbqClampedRoot` contract below, the `KbqClampedListTrigger`
+ * that drives it and a single `clampedText` locale section. Splitting them would duplicate all
+ * three across two packages for no consumer-visible gain.
+ */
+
+/**
+ * Default maximum number of visible rows for the clamped text component
+ * before truncation and the "collapse/expand" toggle is shown.
+ */
+declare const kbqClampedTextDefaultMaxRows = 5;
+/** Localization configuration provider. */
+declare const KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION: InjectionToken<KbqClampedTextLocaleConfiguration>;
+/**
+ * Utility provider of {@link KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION}. Only the strings you pass are overridden;
+ * the rest keep following the active locale.
+ */
+declare const kbqClampedTextLocaleConfigurationProvider: (configuration: KbqDeepPartial<KbqClampedTextLocaleConfiguration>) => Provider;
+/**
+ * Token the clamped containers of this package provide themselves under, so that
+ * `KbqClampedListTrigger` can drive whichever of them it is projected into without naming a
+ * concrete class.
+ */
+declare const KbqClampedRoot: InjectionToken<KbqClamped>;
+/** Contract a clamped container exposes to `KbqClampedListTrigger`. */
+interface KbqClamped {
+    /**
+     * Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto.
+     * Behavior for auto may vary according to clamped-list/clamped-text
+     */
+    isCollapsed: Signal<boolean | undefined>;
+    /** Whether the toggle trigger should be shown. */
+    hasToggle: Signal<boolean>;
+    /** Id of the region the trigger expands and collapses, published as its `aria-controls`. */
+    contentId: string;
+    /** Reactive locale strings for open/close labels. */
+    localeConfiguration: Signal<KbqClampedTextLocaleConfiguration>;
+    /** Toggles the collapsed state of the list. Stops event propagation. */
+    toggle(event: Event): void;
+}
+/**
+ * Injection function that creates a reactive locale configuration signal for {@link KbqClampedText} and
+ * {@link KbqClampedList}.
+ *
+ * @docs-private
+ */
+declare function kbqInjectClampedTextLocaleConfiguration(): Signal<KbqClampedTextLocaleConfiguration>;
+
+/**
+ * Renders a long list compactly: keeps the first `collapsedVisibleCount` items and lets a projected
+ * `kbqClampedListTrigger` reveal the rest.
+ */
+declare class KbqClampedList<T> implements KbqClamped {
+    private readonly nativeElement;
+    /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = expanded. */
+    readonly isCollapsed: _angular_core.ModelSignal<boolean>;
+    /** The list of items to display. */
+    readonly items: _angular_core.InputSignal<T[]>;
+    /**
+     * Maximum number of items visible in collapsed state. Defaults to `10`.
+     */
+    readonly collapsedVisibleCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Minimum number of hidden items required to show the toggle trigger. Defaults to `6`.
+     */
+    readonly hiddenThreshold: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Id the trigger points its `aria-controls` at. Keeps an id the host already carries. */
+    readonly contentId: string;
+    /** Number of items hidden when the list is collapsed. */
+    readonly exceededItemCount: _angular_core.Signal<number>;
+    /** Whether the number of hidden items meets the threshold to render the toggle trigger. */
+    readonly hasToggle: _angular_core.Signal<boolean>;
+    /** Slice of items currently rendered — truncated to `minVisibleCount` when collapsed, a full list otherwise. */
+    readonly visibleItems: _angular_core.Signal<T[]>;
+    /** Localized "show more" label with the exceeded item count interpolated into the `{exceededItemCount}` placeholder. */
+    readonly showMoreCountText: _angular_core.Signal<string>;
+    /** Clamped text locale configuration. */
+    readonly localeConfiguration: _angular_core.Signal<_koobiq_components_core.KbqClampedTextLocaleConfiguration>;
+    /** Toggles the collapsed state of the list. Stops event propagation. */
+    toggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedList<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedList<any>, "[kbqClampedList]", ["kbqClampedList"], { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "collapsedVisibleCount": { "alias": "collapsedVisibleCount"; "required": false; "isSignal": true; }; "hiddenThreshold": { "alias": "hiddenThreshold"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, never, true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+}
+/**
+ * Disclosure control for the clamped container it is projected into — `[kbqClampedList]` or
+ * `<kbq-clamped-text>`. Supplies the button semantics itself, so a host element does not have to:
+ * `role`, `tabindex`, `aria-expanded` and `aria-controls` all come from here, and a `role` or
+ * `tabindex` written on the element wins over the defaults.
+ */
+declare class KbqClampedListTrigger {
+    protected readonly root: KbqClamped | null;
+    /**
+     * Disclosure state of the controlled region. The trigger is only rendered while `hasToggle()`
+     * holds, so the container's own collapsed state is what the user sees at that point.
+     */
+    protected readonly expanded: _angular_core.Signal<boolean | null>;
+    /**
+     * Activates the trigger from the keyboard. `preventDefault()` keeps Space from scrolling the
+     * page on the non-native hosts this directive is meant for, and suppresses the synthetic click
+     * a native button would fire on top of this handler.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedListTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedListTrigger, "[kbqClampedListTrigger]", ["kbqClampedListTrigger"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Clamps projected text to `rows` lines and offers a disclosure control that reveals the rest.
+ * The control only appears once a measurement has shown the content does not fit.
+ */
+declare class KbqClampedText implements KbqClamped, AfterViewInit {
+    /**
+     * Max rows before text is clamped. Defaults to `kbqClampedTextDefaultMaxRows`.
+     */
+    readonly rows: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto.
+     * Writable half of the `[(isCollapsed)]` two-way binding — written when the user operates the
+     * toggle, never by the component's own measurement.
+     */
+    readonly isCollapsed: _angular_core.ModelSignal<boolean | undefined>;
+    /**
+     * Debounce time on resize observer when recalculating toggle and text visibility. Defaults to `0`.
+     */
+    readonly debounceTime: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Whether collapsing scrolls the component back into view. Defaults to `true`.
+     */
+    readonly scrollOnCollapse: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Id of the clamped region, published by the toggle as its `aria-controls`. */
+    readonly contentId: string;
+    /** @docs-private */
+    protected readonly text: Signal<ElementRef<HTMLSpanElement>>;
+    /** @docs-private */
+    protected readonly textContainer: Signal<ElementRef<HTMLDivElement>>;
+    private readonly hasToggleState;
+    /** Whether the content overflows `rows` lines by enough to be worth a toggle. */
+    readonly hasToggle: Signal<boolean>;
+    /** Whether the content has been measured at least once. */
+    private readonly measured;
+    /**
+     * Rendered collapsed state, which drives the css class and the toggle's `aria-expanded`.
+     *
+     * Before the first measurement nothing is known about the content, so the requested state is
+     * applied as-is: the server and the first paint clamp the text rather than flashing all of it.
+     *
+     * @docs-private
+     */
+    protected readonly collapsedState: Signal<boolean>;
+    private readonly destroyRef;
+    private readonly injector;
+    private readonly elementRef;
+    private readonly resizeObserver;
+    private readonly platform;
+    /**
+     * Clamped text locale configuration.
+     *
+     * @docs-private
+     */
+    readonly localeConfiguration: Signal<_koobiq_components_core.KbqClampedTextLocaleConfiguration>;
+    ngAfterViewInit(): void;
+    /** Flips the collapsed state. Stops event propagation. */
+    toggle(event: Event): void;
+    private updateToggleVisibilityState;
+    private getRowsCount;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedText, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqClampedText, "kbq-clamped-text", ["kbqClampedText"], { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "scrollOnCollapse": { "alias": "scrollOnCollapse"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, ["*"], true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+}
+
+/** Re-exports both clamped containers and their shared trigger for `NgModule`-based consumers. */
+declare class KbqClampedTextModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedTextModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqClampedTextModule, never, [typeof KbqClampedText, typeof KbqClampedList, typeof KbqClampedListTrigger], [typeof KbqClampedText, typeof KbqClampedList, typeof KbqClampedListTrigger]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqClampedTextModule>;
+}
+
+export { KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION, KbqClampedList, KbqClampedListTrigger, KbqClampedRoot, KbqClampedText, KbqClampedTextModule, kbqClampedTextDefaultMaxRows, kbqClampedTextLocaleConfigurationProvider, kbqInjectClampedTextLocaleConfiguration };
+export type { KbqClamped };