@koobiq/components 19.8.3 → 20.1.0

package/checkbox/checkbox.scss

@@ -32,9 +32,7 @@
 
     max-width: calc(100% - var(--padding));
 
-    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
-    // (e.g. pointer by default, regular when disabled), instead of the browser default.
-    cursor: inherit;
+    cursor: pointer;
 
     padding-top: var(--kbq-checkbox-size-normal-padding-top);
 
@@ -56,7 +54,6 @@
 .kbq-checkbox {
     display: inline-block;
 
-    cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
     max-width: 100%;
@@ -89,6 +86,10 @@
     &.kbq-disabled {
         cursor: default;
 
+        .kbq-checkbox__layout {
+            cursor: default;
+        }
+
         .kbq-checkbox__frame {
             box-shadow: none;
         }

package/checkbox/index.d.ts

@@ -1 +1,159 @@
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, AfterViewInit, OnDestroy, ElementRef, Provider } from '@angular/core';
+import { ControlValueAccessor, CheckboxRequiredValidator } from '@angular/forms';
+import { KbqColorDirective, KbqCheckedState } from '@koobiq/components/core';
+
+/**
+ * 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 = 'noop' | 'check' | 'check-indeterminate' | undefined;
+/**
+ * Injection token that can be used to specify the checkbox click behavior.
+ */
+declare const KBQ_CHECKBOX_CLICK_ACTION: InjectionToken<KbqCheckboxClickAction>;
+
+/**
+ * Provider Expression that allows kbq-checkbox to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+declare const KBQ_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
+/**
+ * Represents the different states that require custom transitions between them.
+ * @docs-private
+ */
+declare enum TransitionCheckState {
+    /** The initial state of the component before any user interaction. */
+    Init = "init",
+    /** The state representing the component when it's becoming checked. */
+    Checked = "checked",
+    /** The state representing the component when it's becoming unchecked. */
+    Unchecked = "unchecked",
+    /** The state representing the component when it's becoming indeterminate. */
+    Indeterminate = "indeterminate"
+}
+/** 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.
+ */
+declare class KbqCheckbox extends KbqColorDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    private changeDetectorRef;
+    private focusMonitor;
+    readonly big: _angular_core.InputSignal<boolean>;
+    /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */
+    id: string;
+    /** 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>;
+    /** Defines the behavior when a user clicks on the checkbox. */
+    clickAction: KbqCheckboxClickAction;
+    /** The native `<input type="checkbox">` element */
+    readonly inputElement: _angular_core.Signal<ElementRef<any>>;
+    /** Returns the unique id for the visual hidden input. */
+    get inputId(): string;
+    /** Whether the checkbox is required. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
+    /**
+     * Whether the checkbox is checked.
+     */
+    get checked(): boolean;
+    set checked(value: boolean);
+    private _checked;
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    /**
+     * 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 _indeterminate;
+    private uniqueId;
+    private currentAnimationClass;
+    private currentCheckState;
+    constructor();
+    /**
+     * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
+     * @docs-private
+     */
+    onTouched: () => any;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Method being called whenever the label text changes. */
+    onLabelTextChange(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    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
+     */
+    onInputClick(event: Event): void;
+    /** Focuses the checkbox. */
+    focus(): void;
+    onInteractionEvent(event: Event): void;
+    private controlValueAccessorChangeFn;
+    private transitionCheckState;
+    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"], { "big": { "alias": "big"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "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; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+
+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 {
+    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_CONTROL_VALUE_ACCESSOR, KBQ_CHECKBOX_REQUIRED_VALIDATOR, KbqCheckbox, KbqCheckboxChange, KbqCheckboxModule, KbqCheckboxRequiredValidator, TransitionCheckState };
+export type { KbqCheckboxClickAction };

package/clamped-text/index.d.ts

@@ -1,4 +1,145 @@
-export * from './clamped-list';
-export * from './clamped-text';
-export * from './constants';
-export * from './module';
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
+import * as _angular_core from '@angular/core';
+import { Signal, InjectionToken, Provider, AfterViewInit, ElementRef } from '@angular/core';
+
+/**
+ * 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<KbqClampedTextLocaleConfig>;
+/**
+ * Utility provider.
+ * @see KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION
+ */
+declare const kbqClampedTextLocaleConfigurationProvider: (configuration: KbqClampedTextLocaleConfig) => Provider;
+declare const KbqClampedRoot: InjectionToken<KbqClamped>;
+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>;
+    /** Reactive locale strings for open/close labels. */
+    localeConfiguration: Signal<KbqClampedTextLocaleConfig>;
+    /** Toggles the collapsed state of the list. Stops event propagation. */
+    toggle(event: Event): void;
+}
+/**
+ * Injection function that creates a reactive locale configuration signal.
+ * @see {KbqClampedText, KbqClampedList}
+ * @docs-private
+ */
+declare function kbqInjectKbqClampedLocaleConfiguration(): Signal<KbqClampedTextLocaleConfig>;
+
+declare class KbqClampedList<T> implements KbqClamped {
+    /** 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.
+     * @default 10
+     */
+    readonly collapsedVisibleCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Minimum number of hidden items required to show the toggle trigger.
+     * @default 6
+     */
+    readonly hiddenThreshold: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** 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.KbqClampedTextLocaleConfig>;
+    /** 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, never>;
+}
+/**
+ * Clamped list trigger.
+ * Used for calling toggle collapsed state on click events
+ */
+declare class KbqClampedListTrigger {
+    protected readonly root: KbqClamped | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedListTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedListTrigger, "[kbqClampedListTrigger]", ["kbqClampedListTrigger"], {}, {}, never, never, true, never>;
+}
+
+declare class KbqClampedText implements KbqClamped, AfterViewInit {
+    /**
+     * Max rows before text is clamped.
+     * @default kbqClampedTextDefaultMaxRows
+     */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto. */
+    readonly isCollapsed: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Debounce time on resize observer when recalculating toggle and text visibility.
+     * @default 0
+     */
+    readonly debounceTime: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Emits when collapsed state changes. Used for two-way binding with `isCollapsed`. */
+    readonly isCollapsedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** @docs-private */
+    readonly text: _angular_core.Signal<ElementRef<HTMLSpanElement>>;
+    /** @docs-private */
+    readonly textContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
+    /**
+     * This flag controls event emission, aria/css-class calculation
+     * @docs-private
+     */
+    protected readonly collapsedState: _angular_core.WritableSignal<boolean | undefined>;
+    /** @docs-private */
+    protected readonly isToggleCollapsed: _angular_core.WritableSignal<boolean | undefined>;
+    /** @docs-private */
+    protected readonly lineClamp: _angular_core.WritableSignal<number | null>;
+    /** @docs-private */
+    readonly hasToggle: _angular_core.WritableSignal<boolean>;
+    private readonly destroyRef;
+    private readonly elementRef;
+    private readonly resizeObserver;
+    private readonly platform;
+    /**
+     * Clamped text locale configuration.
+     * @docs-private
+     */
+    readonly localeConfiguration: _angular_core.Signal<_koobiq_components_core.KbqClampedTextLocaleConfig>;
+    /**
+     * This flag is used to prevent trigger resize observer on toggle click.
+     */
+    private isEventFromToggle;
+    constructor();
+    ngAfterViewInit(): void;
+    /** @docs-private */
+    toggle(event: Event): void;
+    private updateToggleVisibilityState;
+    private updateCollapsedState;
+    /**
+     * Calculates next collapsed state according to previous one.
+     * `undefined` is treated as collapsed and not touched stated.
+     */
+    private toggleCollapseState;
+    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; }; }, { "isCollapsedChange": "isCollapsedChange"; }, never, ["*"], true, never>;
+}
+
+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, kbqInjectKbqClampedLocaleConfiguration };
+export type { KbqClamped };

package/code-block/_code-block-theme.scss

@@ -14,12 +14,6 @@
         background: var(--kbq-#{$base}-header-background);
     }
 
-    &.kbq-code-block_header-with-shadow {
-        & .kbq-code-block__header {
-            box-shadow: var(--kbq-#{$base}-header-scroll-shadow);
-        }
-    }
-
     &.kbq-code-block_hide-tabs {
         .kbq-code-block__actionbar {
             .kbq-code-block__actionbar__button-stack {

package/code-block/code-block-tokens.scss

@@ -121,7 +121,6 @@
     --kbq-code-block-filled-container-background: var(--kbq-background-contrast-less);
     --kbq-code-block-filled-container-border-color: transparent;
     --kbq-code-block-filled-header-background: transparent;
-    --kbq-code-block-filled-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-filled-actionbar-background: var(--kbq-background-card);
     --kbq-code-block-filled-actionbar-border-color: var(--kbq-line-contrast-less);
     --kbq-code-block-filled-collapse-expanded-background: transparent;
@@ -134,7 +133,6 @@
     --kbq-code-block-outline-container-background: var(--kbq-background-card);
     --kbq-code-block-outline-container-border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
     --kbq-code-block-outline-header-background: var(--kbq-background-card);
-    --kbq-code-block-outline-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-code-block-outline-actionbar-background: var(--kbq-background-card);
     --kbq-code-block-outline-actionbar-border-color: var(--kbq-line-contrast-less);
     --kbq-code-block-outline-collapse-expanded-background: transparent;